El diseño web receptivo se ha convertido en una palabra de moda casi ubicua en la web. Intenta buscar #rwd en Twitter para encontrar contenido en partes iguales y spam de Twitter. Esta es una fase común en la maduración de una nueva idea. Recuerdo cuando AJAX estaba de moda; el término fue llevado al suelo. Ahora, pocas personas hablan de AJAX, pero las bibliotecas como jQuery están totalmente incorporadas en el flujo de trabajo de un desarrollador.

Esto parece reflejar lo que está sucediendo con el diseño web receptivo. El término está en todas partes. Un amigo mío está en la publicación de revistas, asistió a una conferencia recientemente, y un editor de una conocida nueva revista hablaba sobre las próximas tendencias y mencionó el diseño web receptivo. Los editores pueden no ser profesionales de la web, pero conocen las palabras de moda.

A medida que el diseño web sensible ganó fuerza, la forma en que creamos los sitios web cambió. A medida que el término pasa de palabra de moda a una parte común de cada proyecto de diseño web, la forma en que trabajamos como profesionales web debe cambiar. Teniendo esto en cuenta, debemos establecer nuevas reglas básicas sobre cómo trabajamos.

Regla 1: No te detengas en "squishy"

Cuando alguien te dice que "revises este sitio receptivo", ¿qué es lo primero que haces? Probablemente escale la ventana para ver cómo cambia el diseño. Probablemente no vaya a abrirlo en mi teléfono y tableta y comenzar a cambiar orientaciones o comenzar a ejecutar pruebas de velocidad de página. Escalo el navegador y sigo con mi día. Esta es nuestra experiencia como diseñadores y desarrolladores, pero no como usuarios. Cuando visito un sitio como usuario, no tengo paciencia. No me importa si el sitio se siente bien; Solo quiero lo que quiero.

"Squishy" es una escala lineal de un sitio web. ¿El sitio va de flaco a gordo? En lugar de una escala lineal, el diseño web receptivo debe centrarse en establecer un núcleo de sitio y cargar progresivamente a partir de allí, en función de las capacidades. Imagínese un sitio que tuvo que ser construido para un pequeño teléfono móvil con IE7 en una red EDGE. Ese debería ser su sitio principal y luego ampliarse según el tamaño y las capacidades de la pantalla.

Regla 2: No busques una salida fácil

El diseño web receptivo es complicado. Así es como es. Ojalá hubiera algo que pudiera decirte para que sea fácil, pero no lo es. La mayoría de las personas han respondido al diseño web receptivo agregando algo a sus flujos de trabajo, ya sea un producto nuevo o simplemente dirigiéndose a un desarrollador y preguntándoles si su diseño funcionará de manera responsable.

Tengo un amigo que está trabajando en un sitio receptivo para un cliente. Está construyendo el sitio en Photoshop en tamaño de escritorio. Después de algunas maquetas en algunas páginas, quería mostrar cómo se vería el sitio en una tableta y un teléfono inteligente, por lo que también hizo esas maquetas. Después de presentarle al cliente, se le dieron algunos retoques creativos. Hay aproximadamente 50 archivos PSD para este sitio en este momento. Le toma unos días para revisar los diseños.

Tratar de agregar nuevos diseños solos resultará en un proceso lento e incoherente. Una de las mejores formas de resolver esto es crear prototipos de sus wireframes y presentarlos a su cliente. Esto le permite entregar directamente el diseño del sitio sin hablar simultáneamente del diseño. Fundación por ZURB es una gran herramienta para construir prototipos rápidamente.

Sin embargo, simplemente agregar prototipos a su flujo de trabajo no será suficiente. Para tener éxito en la creación de sitios receptivos, debe ajustar, lo que nos lleva a la siguiente regla.

Regla 3: Abrazar el cambio

Cuando comencé a crear sitios web, utilicé dos herramientas, Photoshop y GoLive. Ahora tengo al menos seis programas que absolutamente requiero para construir un sitio. Todavía uso Photoshop para crear elementos gráficos, pero principalmente diseño en el navegador con Sublime Text 2 y utilizo las herramientas de desarrollador de Safari para inspeccionar elementos en mi iOS 6. También uso Codekit para compilar mi CSS y Terminal preprocesados ​​para el control de versiones en Git.

El diseño web receptivo también significa cambiar la forma de diseñar. En lugar de diseñar una página completa en Photoshop, uso Samantha Warren's Style Tiles articular el diseño visual. Al diseñar la marca visual del sitio y los elementos de la interfaz fuera de un diseño real, puede comunicar el diseño directamente y combinarlo con el diseño del prototipo para crear su sitio receptivo en el navegador.

Los preprocesadores CSS también son una gran ayuda en cualquier flujo de trabajo receptivo. En pocas palabras, los preprocesadores se pueden utilizar para desentrañar algunas de las complicaciones de construir un sitio y facilitar la repetición de heredar el trabajo en CSS. Personalmente prefiero SCSS, pero LESS es una mejor alternativa para algunos ya que tiene una barrera de entrada más baja y tiene una mejor documentación.

Regla 4: recuerda tus raíces

[La web] debería ser accesible desde cualquier tipo de hardware que pueda conectarse a Internet: estacionario o móvil, pantalla pequeña o grande. - Tim Berners-Lee

HTML y CSS son intrínsecamente receptivos. Desde el inicio de HTML, la web fue pensada para ser lo suficientemente flexible como para trabajar en cualquier hardware con una conexión a Internet. No fue sino hasta que como diseñadores y desarrolladores nos movimos hacia diseños fijos que esto cambió. Al tratar de imponer dimensiones fijas en los sitios web, restringimos la web a las computadoras de escritorio.

Resumen

La web receptiva es aquella que abstrae lo que tiene que decir de cómo lo dice. Tomemos, por ejemplo, el movimiento reciente de NPR hacia un modelo de contenido impulsado por API. Al pasar a una API para proporcionar contenido, NPR ha podido administrar su colección de aplicaciones y sitios de manera consistente. Lo único que cambia es la capa de presentación.

De esto se trata la web receptiva. Averiguar qué es lo que tiene que decir, y dejar que la forma en que lo diga lo impulse. El diseño se trata de satisfacer una necesidad de una manera que sea visualmente agradable, pero también que funcione para satisfacer las necesidades del usuario.

De esto se trata la web receptiva, el usuario: crear sitios web que funcionen para las personas que los utilizan, sin embargo, acceden al contenido. Hacer sitios que puedan refactorizarse para pantallas pequeñas es solo el comienzo.

¿Ya abrazaste el diseño web receptivo? ¿Qué reglas para el diseño receptivo le gustaría agregar? Háganos saber en los comentarios.

Imagen / miniatura destacada, tamaño de imagen a través de Shutterstock.