Las 5 Reglas de Oro del Diseño Web Responsive

Desde que inició como una tendencia, el diseño web responsive o adaptable (o RWD por sus siglas en inglés) nos ha hecho replantear la manera en que funcionan nuestros navegadores y cómo el diseño se percibirá en el producto final.

Puede que haya iniciado como una novedad, pero el RWD se ha vuelto una norma más que avisada por Google en el último año.

En casi todos mis trabajos más recientes de proyectos de diseño web adaptable, he usado diferentes procesos, entregando resultados y enfrentado problemas diversos.

Basado en estas experiencias, y dado que el diseño responsive o RWD se ha vuelto una norma, mi flujo de trabajo se ha incrementado y adaptarse a los nuevos requerimientos ha sido necesario.

He aquí cinco áreas en las cuáles estoy convencido que tanto diseñadores, como marcas y negocios de todos los tamaños, tendrán que hacerse valer para adaptarse a las nuevas necesidades del mercado.

1. Diseñar con Contenido Real¿Alguna vez habéis diseñado o visto un módulo para un sitio web usando el confiable “Lorem Ipsum”? Esto solo provoca numerosas revisiones por parte del cliente y que, muy posiblemente, ese fantástico diseño original quede arruinado… Cuando esto sucede, es demasiado tarde para agregar las correcciones necesarias y lograr que vuestro proyecto quede cerrado dentro del plazo esperado. Estoy seguro que es una historia familiar para la mayoría de nosotros… De hecho, he perdido la cuenta del número de veces que me ha ocurrido.

“Ahora imaginad lo sencillas que serían nuestras vidas si tuviéramos el contenido del sitio disponible desde el principio.”

Suena lógico, pero esto raramente le ocurre a alguno de nosotros. Antes de tomar el lápiz o de abrir Photoshop, necesitamos tener una estrategia de contenido trazada, sin importar si el resultado final será el definitivo a aplicar en la página web o no.Recordad, al final necesitamos tener una idea aproximada del contenido deseado para la web de diseño adaptivo.¿Cuál es el punto de diseñar algo si no es posible conocer qué contenido se terminará usando y cuál desechando?.Una vez que tengáis el contenido, podéis empezar a construir cuadros referenciales de contenido. Este término fue acuñado por Stephen Hay en su libro Responsive Design Workflow (flujo de trabajo en diseño adaptable).

“Un cuadro referencial de contenido utiliza bloques rectangulares básicos para crear un desplegado del contenido, referenciando el lugar en que cada pieza será

colocada en el diseño final.”

Esta técnica, es ideal para mostrar el desplegado básico del diseño resultante o total, ya que permite señalar dónde se ubicarán la barra de navegación, pie de página, módulos secundarios y distintas columnas del diseño web. Sin entrar a ningún nivel de detalle, ésta práctica técnica ofrece la posibilidad de indicar la línea en que el resto de las capas se alinean para, con ello, llegar al diseño final. Justo en este momento, vuestra web se encontrará en ese punto del proceso en el que es posible considerar los puntos adaptables. Tened en cuenta que al haber tomado el contenido previamente, podéis construir un sencillo formato a una sola columna para dispositivos móviles. Esto es más sencillo en el navegador usando un simple HTML, pero hablaré sobre esto más adelante.

Restringiendo el diseño web a una sola columna, se puede establecer la jerarquía de contenido en la página: • ¿Cuál es la pieza de información más importante de la página?• ¿Dónde debería ir el CTA principal?• ¿Tiene sentido la lectura de arriba hacia abajo? Una vez que el orden de la información está acordado, se deben hacer pruebas de ancho, incrementar el “lienzo” hasta que el contenido se vea demasiado estirado e incómodo.Ahora es el momento de tomar nota del ancho ideal para tomarlo como punto de partida y ajustar el desplegado de la página para adaptar el diseño web a este nuevo ancho, agregando una columna en el sidebar (por ejemplo).

2. Diseño “In-Browser”Otra consideración clave para diseñar una web adaptable es abandonar los planos visuales y compilados de Photoshop. Confunden demasiado el proceso, creando una visualización ideal de cómo luciría el sitio con ciertos anchos específicos del navegador.El resultado final siempre resulta muy distinto al que esperamos, ya sea debido a la posición y el espacio alrededor de los elementos, o a la calidad de las imágenes usadas.

“Por suerte o desgracia, el producto final pocas veces coincide exactamente con la imagen visual que tenía previamente el cliente (o nosotros mismos).”

A veces, el problema es que el aspecto de estos planos visuales se ve demasiado bien; las imágenes son nítidas, la tipografía muy suave, y el uso de sombras y difuminados hacen que el diseño luzca como una obra de arte.

¿Qué ocurre en estos casos? Que es necesario bajar las expectativas, algo que no gusta nada ni a diseñadores ni a clientes, ya que esto retrasa mucho el proceso de aprobación final. El truco para evitar las falsas expectativas, está en construir un prototipo adaptable, usando valores HTML y CSS. Para ello, os recomiendo que: El diseño web se cree en el mismo medio con el cual se creará el producto final.Se realicen pruebas de visualización con varios anchos de banda en diferentes navegadores y dispositivos. No os preocupes si no sois expertos en desarrollo web en todas sus etapas, hay nuevas herramientas emergentes para ayudar a los diseñadores a crear prototipos adaptables, como Macaw, Webflow y Adobe Edge Reflow.

“También podéis pedirle a un desarrollador experto que os ayude, pero siempre es recomendable que aprendáis al menos las bases para poder trabajar con él.”

Uno de los beneficios de diseñar de esta manera, es la reducción del tiempo a la hora de hacer cambios.

Suponed que tenéis 20 compilados de Photoshop (o fireworks), cada uno de los cuales tuvo tres diferentes resoluciones (escritorio, tablet y móvil) y necesitáis actualizar el estilo del botón o un link en la navegación; ¡eso significaría revisar al menos 60 páginas para cambiar un solo estilo!

Pero con simplemente definir una clase CSS, se pueden hacer este tipo de correcciones de una sola vez, actualizando con ello todas las páginas (sé que es un ejemplo extremo, pero ahorrará mucho tiempo a la larga).

También permite probar el diseño con dispositivos de varios tamaños de pantalla, y aunque la mayoría de las herramientas mencionadas antes vienen con ventanas gráficas predeterminadas, se pueden exportar los diseños web y probarlos en el navegador.

3. Desarrollar una Biblioteca de PatronesÉste, es uno de los factores comunes en casi todos los proyectos de diseño web o RWD en los que he laborado es una guía de estilo.

Estas incluirían elementos estéticos clave para el proyecto y versiones interactivas en cada módulo, e incluso podría tener un poco del marco de referencia responsive, pero hay una nueva tendencia emergiendo; la biblioteca de patrones.

“En la biblioteca de patrones es donde se podría definir cada uno de los patrones UX comunes usados en el sitio, revelando notas y trazos de código utilizados.”

En mi caso, normalmente pongo estos en fireworks (usando símbolos y estilos para los componentes y módulos comunes), pero para un diseño adaptable es necesario ilustrar cómo cada módulo se adaptaría entre los puntos clave que se han definido.

Esto toma algo de tiempo en fireworks, y ya que diseñamos el prototipo en HTML y CSS, sería una lástima que no hiciéramos la biblioteca de patrones de la misma manera, ¿cierto?.

Brad Frost tiene una gran teoría acerca del Atomic Web Design (diseño web atómico), donde usa terminología científica para definir ciertos aspectos del diseño web:

• Los átomos son el estilo básico en que estará fundamentado un diseño (como los colores, las fuentes o los iconos).

• Éstos son aplicados a los elementos HTML básicos para formar “moléculas” (por ejemplo un botón de búsqueda).

• Luego las moléculas son acomodadas para crear “organismos”. En este ejemplo podemos agregar un formato de input o una etiqueta al botón.

• Éstos son combinados con otros organismos para formar “plantillas” y estas plantillas son las que ayudan a formar las páginas.

Y… ¡ya está! Así tendríamos un diseño web atómico.

Podemos utilizar esta teoría para formar la estructura de nuestra biblioteca de patrones; empezamos con los estilos de la marca, los aplicamos al núcleo de elementos HTML como patrón en común para estos elementos, y así sucesivamente. De esta manera, se logra que la biblioteca de patrones cuente la historia de todo el proyecto.

“Además, se deben incluir las notas y los fragmentos de código para que los desarrolladores accedan y cualquier usuario o cliente pueda entender el diseño.”

La biblioteca de patrones rápidamente se está convirtiendo en una parte vital del diseño web responsive o adaptable, porque estamos haciendo el cambio de solo diseñar páginas, a diseñar todo un sistema de componentes.

4. Hacerlo UniversalEl punto de diseñar una web adaptable es que no se puede predecir la experiencia de cada usuario, especialmente cuando se trata de la experiencia móvil.

“Existen cientos de situaciones posibles de cómo un usuario usará vuestro sitio web.” Esto es debido a los muy diversos tipos de smartphones y tablets, con sus diferentes tamaños de pantalla, resoluciones y tipos de input (incluso podrían estar usando televisiones).

Así que, el diseño de vuestra página web tendrá que ser totalmente universal para adaptarse en cualquier medio en el que se trate de acceder.

He aquí algunos datos y consejos que me agrada tener siempre en mente cuando hago un diseño adaptable:

4.1. La Regla PrincipalYa que últimamente la mayoría de dispositivos móviles tienen “touch-screen” (pantalla táctil), debemos siempre tener en mente el tamaño de los elementos interactivos de nuestras interfaces. Existe cierto conflicto sobre cuál debería ser el área a tocar; Apple dice que es de 44px, mientras que Microsoft se decanta por 34px. Procuro siempre utilizar 48px como regla principal cuando diseño los elementos interactivos. Después, simplemente dejo un espacio alrededor del área de toque de al menos 6px, normalmente derivado de la línea base de 12px. En una época de diseños planos y grandes tipos de fuente, muchos sitios web están tratando de mantener estos grandes iconos para la interfaz de escritorio.

Estos elementos en “sobre-tamaño” de forma, se deben mantener simples y adaptables al usuario móvil. Por ello, cuando diseño, me gusta crear proyectos con mis propios “sobre-tamaños” que encajan mejor con el estilo del sitio que estoy creando. Pero la recomendación que haría en estos casos, es usar los controles nativos siempre que sea posible en la experiencia móvil; los teclados y menús ya han sido optimizados al dispositivo en uso, y sería una lástima desperdiciar tiempo diseñando algo que ya fue integrado.

4.2. NavegaciónUno de los grandes retos al diseñar una web adaptable, es cómo manejar la navegación del sitio. Hay varias maneras de lograrlo y dependiendo de lo que se busca puede que haya algunas más complicadas que otras: • Links Activos: Posiblemente, una de las formas más simples y universales de

navegación móvil. El link activo es una liga que permite transportar al usuario a los pies de página en el menú. Esto es genial, porque no requiere de un JavaScript o cualquier otro tipo de script para implementar, haciéndolo universal para todo tipo de browser o dispositivo. También sirve como red de seguridad para otras de las técnicas descritas más abajo.

• Drop-down o Menú Desplegable: Otro patrón común en la navegación móvil, es el de los menús desplegables, donde el icono del menú despliega la navegación hacia abajo con una animación de deslizamiento. Esta técnica usa un JavaScript para posicionar el menú justo debajo del botón, para luego ocultarlo hasta que sea nuevamente solicitado por el usuario. Algunos elementos dentro de la navegación incluso podrían usar un acordeón para ocultar los elementos relacionados que pudiera haber. Esto permitiría al usuario bajar por los niveles de navegación saltándose cada una de las páginas en el camino.

• Off-Canvas o Fuera de Foco: El método off-canvas es, tal vez, la técnica más popular usada en RWD mientras nuestros sitios se acceden cada vez más con apps. Gestada por Facebook en su interfaz móvil, el método off-canvas es la técnica más usada, porque permite al diseñador posicionar la navegación del sitio en la orilla de la vista y deslizarlo al movimiento del usuario. Algunos sitios como Teehan+Lax o Squarespace, utilizan esta técnica como el único método para navegar en todas sus interfaces. Éste, podría ser el inicio de una tendencia dentro del diseño responsive.

4.3. Desplegado Activo de la InformaciónOtra consideración clave al diseñar la interfaz móvil es desplegar cualquier acción clave al tope de la página.

Ya que los usuarios móviles generalmente tienen tiempo y ancho de banda limitados, es importante localizar los principales CTA’s en la parte superior de la pantalla, con el contenido de apoyo justo debajo para su fácil acceso en el celular, sin importar el tamaño de pantalla o resolución.

Un claro ejemplo de esto es el diseño de ecommerce o landing page, donde las páginas que ofrecen productos tienen un diseño de impacto, contienen el nombre de los productos, precios, imágenes y enlaces importantes al comienzo de la página.El contenido secundario, como de las especificaciones o información del producto se despliega debajo, queda fuera de la primera vista.

Lo importante es alcanzar esto colocando el contenido de forma estratégica. Pensad en lo que el usuario está buscando ahí y resaltad todo link e información relevante en la primera vista.

5. Siempre Tener en Mente la OptimizaciónEs imposible saber quién será el próximo usuario de nuestro sitio, qué dispositivo usará y con qué tipo de conexión. Es por eso que es importante diseñar nuestros sitios responsivos con la optimización siempre en mente.

“La clave es mantener el sitio lo más ligero posible. A nadie le gusta estar esperando, especialmente en Internet. Si una web tarda más de “algunos segundos” en cargar, el usuario se irá rápidamente a otro sitio.”

Mejorar el rendimiento y la fiabilidad de un sitio web, ayuda a incrementar la confianza del usuario; si su experiencia es buena y el sitio luce bien, tened por seguro que regresará.

Más del 60% del tamaño de archivo en las páginas web es exclusivamente de las imágenes. El espacio restante del archivo son los scripts, hojas de estilo y otros medios.

Ahora, la manera más sencilla de disminuir el tamaño de archivo es exportarlo del programa gráfico hacia la web. Pero no es suficiente, especialmente si se usan archivos PNG. Sitios como TinyPNG, ayudan a reducir los archivos removiendo los datos adicionales y reduciendo el número de colores usados en la imagen, ¡lo que es una bendición!. Para daros una idea más clara y a detalle de los problemas de velocidad de carga de vuestro sitio, os recomiendo utilizar Google PageSpeed Insights.

Imágenes de Diseño ResponsiveAsí como es útil reducir el tamaño de las imágenes, a veces es necesario preparar diferentes imágenes para diferentes dispositivos. La razón principal de esto es que no queremos dar imágenes enormes de cientos de KB de tamaño a un dispositivo móvil que tiene un límite de uso de datos y una mala conexión 3G. Hay muchos scripts que nos ayudan a hacer esto, como Picturefill o Adaptive Images, dependiendo de lo que el sitio requiera y las capacidades del servidor. Pero nosotros de lo que nos tenemos que preocupar es simplemente de especificar cómo las imágenes que usamos se adaptan a los diferentes tipos de especificaciones y dispositivos, y dejarlo bien documentado ya sea en la guía de estilo o la librería de patrones.

“Cut the Script”Otra gran parte del peso del sitio web es debido a los diferentes scripts que utilizamos, ya sea JavaScript o cualquier hoja CSS. Uno pensaría que eso es problema de los desarrolladores, y es más o menos cierto, pero el punto es adoptar un primer acercamiento a la experiencia móvil. Así que, desarrollar con esto en mente hará todo funcionar de una manera más orgánica y por lo tanto agradable al usuario. Siempre debemos tener en mente la cantidad de animaciones que usamos. Y por animación me refiero a cualquier cosa que se mueva y requiera codificación, puesto que esto es precisamente lo que hará aumentar el tamaño del archivo.

Si se diseña primero para la versión móvil, es mejor mantener todo simple y estático desde el principio. Si tenéis la necesidad de agregar cualquier tipo de diapositiva aquí o allá, agregadla y comprobad el efecto que tiene en el rendimiento del sitio.

Sirve en Porciones PequeñasUna buena manera de reducir el tamaño e incrementar el rendimiento del usuario móvil, es dividir el contenido en trozos pequeños e ir desplegando el resto. No quiere decir que lo ideal sea segmentar todo el contenido, solo el secundario que normalmente se delegaría a la columna de la derecha. De las maneras más efectivas para hacer esto, es precisamente lo que la mayoría de las redes sociales usan en su newsfeed; el “load on scroll”. “Como su nombre explica en inglés, el Load On Scroll trata de desplegar el contenido a medida que uno se va deslizando hacia abajo.” Similar a esta técnica, también está la opción de poner en el fondo un botón de “Cargar más”. Así, los usuarios podrán generar más contenido.

Otra manera útil de ofrecer más detalles en la información secundaria es colocarla en una página distinta para los usuarios móviles. Es tan simple como poner un enlace de “Seguir leyendo”. Por último, no olvidemos un link de “Volver” para cerrar y regresar al contenido anterior.

Si deseáis profundizar más sobre el tema de tiempo de carga de un sitio web, os recomiendo leer este artículo: Tips Para Optimizar el Tiempo de Carga de Una Página Web.

Lejos están los días en que solo debíamos preocuparnos por la yuxtaposición de contenido, los colores a emplear y los estilos tipográficos.

Ya no estamos en una industria en que el único trabajo del diseñador es agregar el color a un sencillo diseño web de cascada.

Ahora tenemos muchísimo que considerar; hemos empezado a entender cómo son construidos los sitios y el proceso de priorizar el contenido para ajustarse al usuario.

La única manera de manera de hacer esto, es retomando los libros y empezar a aprender, ya que la industria tiene que darle paso a la explosión de aparatos con acceso a Internet.

Ya sabéis, ¡siempre hay algo nuevo por aprender en el mundo del diseño web adaptable! Es hora de expandir nuestros horizontes y aprender algunas de las cosas que nuestra experiencia (ya sea como usuarios o desarrolladores) nos enseña, para hacer la web un sitio mejor en todos los dispositivos.

Encuentra el Artículo Original y Muchos más en:www.diseñocreativo.com/reglas-diseno-web-responsive