El responsive web design se ha convertido en una palabra clave casi omnipresente en la web. Intenta buscar #rwd en Twitter para encontrar contenido equivalente y spam en Twitter. Esta es una fase común en la maduración de una nueva idea. Recuerdo cuando el AJAX estaba de moda; el término fue abandonado. Bueno, poca gente habla de AJAX, pero las librerías como jQuery están totalmente integradas en el flujo de trabajo de un desarrollador.
Esto parece reflejar lo que sucede con el responsive web design. El término está en todas partes. Una amiga mía es editora de revistas, recientemente fue a una conferencia, y una editora de una nueva revista muy conocida habló sobre tendencias futuras y mencionó el responsive web design. Los editores pueden no ser profesionales de la web, pero conocen las palabras clave.
Cuando el diseño web receptivo ganó impulso, la forma en que creamos los sitios web cambió. A medida que el concepto de palabra clave se convierte en una parte integral de cualquier proyecto de diseño web, la forma en que trabajamos como profesionales de la web debe cambiar. En este sentido, necesitamos establecer algunas nuevas reglas básicas para nuestra forma de trabajar.
Resumen de el Contenido
Regla 1: No parablando”
Oye, oye, oye, oye, oye. Basta.
Si alguien le dice quemire esta página sensible”, ¿qué es lo primero que debe hacer? Probablemente escalar la ventana para ver cómo cambia el diseño. Probablemente no abriré mi teléfono y mi tableta y empezaré a cambiar la orientación o a hacer pruebas de velocidad laterales. Escalo el navegador y continúo con mi etiqueta. Esta es nuestra experiencia como diseñadores y desarrolladores, pero no como usuarios. Cuando visito un sitio web como usuario, no tengo paciencia. No me importa si la página se comprime bien, sólo quiero lo que quiero.
Squishy” es una escala lineal de un sitio web. La página va de fina a gruesa? En lugar de una escala lineal, el diseño web reactivo debería centrarse en establecer un sitio central y cargar desde allí, paso a paso, en función de las capacidades. Imagine un sitio web que tuvo que ser creado para un pequeño teléfono IE7 en una red EDGE. Se suponía que este sería su sitio central y luego ampliado de acuerdo con el tamaño y las capacidades de la pantalla.
Regla 2: No busque un resultado fácil
El diseño web reactivo es complicado. Así son las cosas. Ojalá hubiera algo que pudiera decirte para hacer tu vida más fácil, pero no existe. La mayoría de la gente ha respondido al diseño web responsivo añadiendo algo a sus flujos de trabajo, ya sea un nuevo resultado o simplemente acudiendo a un desarrollador y preguntándole si su diseño es responsivo.
Tengo un amigo que está trabajando en un sitio web sensible para un cliente. Ella crea el sitio en Photoshop en tamaño de escritorio. Después de unas cuantas maquetas en unas cuantas páginas, quería mostrar cómo sería el sitio en una tableta y un teléfono inteligente, así que también hizo estas maquetas. Después de la presentación ante el cliente, se hicieron algunas optimizaciones creativas. Hay alrededor de 50 archivos PSD para esta página en este momento. Lleva unos días hasta que haya revisado los diseños.
El simple hecho de intentar añadir nuevos diseños conduce a un proceso largo e incoherente. Una de las mejores maneras de resolver esto es crear prototipos de sus alambres y presentarlos a su cliente. Esto le da la oportunidad de hablar directamente con el diseño del sitio sin hablar del diseño al mismo tiempo. La Fundación ZURB es una excelente herramienta para construir rápidamente prototipos.
Sin embargo, no basta con añadir prototipos a su flujo de trabajo. Para tener éxito en la construcción de sitios web sensibles, es necesario adaptarse, lo que nos lleva a la siguiente regla.
Regla 3: Aceptar cambios
Cuando empecé a crear sitios web, utilicé dos herramientas, Photoshop y GoLive. Ahora tengo al menos seis programas que realmente necesito para crear un sitio web. Todavía utilizo Photoshop para crear elementos gráficos, pero principalmente dibujo en el navegador con Sublime Text 2 y utilizo las herramientas de desarrollo de Safaris para inspeccionar elementos en mi iOS 6. También utilizo Codekit para crear mi CSS preprocesado y mi terminal de control de versiones en Git.
Un responsive web design también significa cambiar la forma en que se diseña. En lugar de crear una página entera en Photoshop, uso Samantha Warren’s Style Tiles para articular el diseño visual. Al diseñar el marcado visual y los elementos de la interfaz de un sitio web fuera de un diseño real, puede comunicar el diseño directamente y combinarlo con el diseño del prototipo para crear su sitio web atractivo en el navegador.
Los preprocesadores CSS son también una gran ayuda en cualquier flujo de trabajo sensible. En pocas palabras, los preprocesadores CSS pueden utilizarse para descubrir algunas de las complicaciones de la creación de un sitio web y facilitar enormemente la repetición asociada con el trabajo en CSS. Personalmente, prefiero SCSS, pero LESS es una mejor alternativa para algunos porque tiene una barrera de entrada más baja y mejor documentación.
Regla 4: Recuerda tus raíces
La Web] debe ser accesible desde cualquier tipo de hardware que pueda conectarse a Internet: fijo o móvil, pequeño o grande. – Tim Berners-Lee
HTML y CSS reaccionan por naturaleza. Desde la introducción del HTML, la Web debe ser lo suficientemente flexible para funcionar en cualquier hardware con conexión a Internet. Sólo cuando nosotros, como diseñadores y creadores, cambiamos a diseños fijos, esto cambió. Tratando de imponer dimensiones fijas en los sitios web, limitamos la web a los ordenadores de sobremesa.
Resumen
La web reactiva es aquella que abstrae lo que tienes que decir de cómo lo dices. Véase, por ejemplo, el reciente cambio de NPR a un modelo de contenido orientado a API. Al cambiar a una API de entrega de contenido, NPR pudo gestionar su colección de aplicaciones y sitios web de forma coherente. Lo único que cambia es la capa de presentación.
De eso se trata la red de respuesta. Descubriendo lo que tienes que decir y dejándolo como dices, es impulsado por ello. El diseño consiste en satisfacer una necesidad visualmente atractiva, pero también en satisfacer las necesidades del usuario.
De eso se trata la web con capacidad de respuesta: de crear sitios web que funcionen para las personas que los utilizan, pero que acceden al contenido. La creación de sitios que pueden refactorizar incluso pantallas pequeñas es sólo el principio.
¿Has adoptado alguna vez un responsive web design? ¿Qué reglas de diseño de respuestas desea agregar? Háganoslo saber en los comentarios.
Imagen/miniatura seleccionada, tamaño de la imagen a través de Shutterstock.