Las 5 reglas de oro del Diseño Web Responsive

Las 5 reglas de oro del Diseño Web Responsive
09/05/2016 Yoshio Casas
Imagen post 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 tomando 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 universal

El 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 principal

Ya 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ón

Uno 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ón

Otra 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ón

Es 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 responsive

Así 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ñas

Una 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.

Conclusión

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ñan, para hacer la web un sitio mejor en todos los dispositivos.

¿Tenéis problemas para que vuestro sitio web se visualice correctamente en todos los dispositivos?

Imagen (Diseño Responsive): Shutterstock

Yoshio es Licenciado en Dirección en Ventas, especializado en dar buen servicio y atención al cliente. Con experiencia en Coaching Empresarial, gestión de RRPP y startups, actualmente director en Making People y guest blogger.

  • Me han gustado varias cosas, pero no puedo seguirte en el flujo de trabajo en algunas otras.

    Yo soy Diseñador Gráfico de profesión, como buen diseñador yo pase del action script al html y css, desde ese momento cree un sitio de demos en codepen.io como g3kdigital y me propuse hacer posible todos mis diseños y sabes que me di cuenta, que diseñar directamente en el navegador, le quita a uno la creatividiad. Porque? porque cuando empezaba copiaba muchas cosas que quería hacer de diseño de dirbble o de un template interesante, perocon css3 a la mano habían muchas cosas que sabía que se podían hacer y que nadie había hecho y que cuando las hacia de 0 sin boceto en papel o en illustrator, no me salia tan bien el kerning, el padding de los elmentoso la diferenciación jerarquica de los elementos.

    Así que volvi a illustrator (nunca me gusto photoshop para maquetar, ni fireworks, no los critico, es solo que soy más del vector) y creeme que diseño basado en mis conocimientos en css3, no actualizo miles de paginas por un cambio de color, uso simbolos y para las moleculas, uso simbolos dentro de más simbolos, y no es que solo se pueda hacer en illustrator, también existen los “Objetos Inteligentes” de photoshop, los cuales se comportan igual. NUNCA ABADONES EL PROCESO DE BOCETADO POR EL LIENZO DEL CÓDIGO, es lo que aconsejaría siempre en mi caso.

    Y en cuanto a los brillols y difuminados, con css3 algunas cosas son muy posibles, pero otra cosa es que se pueda hacer y otra que la estetica de un buen diseño lo permita.

    Lo mejor es conseguir un buen diseñador gráfico, de los peocupados por aprender para quitarse limites sin dejar de ser aterrizados, mi consejo es que si no lo encuentras, enseñenles, somos por profesión más afines al css que incluso desarrolloadores, lo complicado despues será que aprendan css estrutural (el modelo de caja, tipos de display, los grids, etc) pero llevo experimentando con muchos desde hace 1 año y han aprendido un monton, no tanto para ser frontend, pero si coger ciertas propiedades y darles la vuelta en cosas nunca antes vistas, ya me imagino si fuera profesor, pero espero nunca tener que dar clases y seguir trabajando hasta donde me de. Eso si, aquellos que les digan que ellos son diseñadores puros y que no quieran aprender solo por mejorar, abandonenlos, el ego los mato como profesionistas.

    Por cierto lo de Brad Frost y el diseño modular o atomic design es un poco más complicado llevarlo a la prática, pero al final ahorra tiempos, el problema es que aveces los clientes quieren ver el conjunto… incluyendo a desarrolladores, al final terminas trabajando el doble en el mismo lapso de tiempo, pero creeme valdrá la pena.

    Saludos!

    • Hola Edgar, opino que tu deberías de ser el autor de este artículo y yo debería estar comentando lo mucho que aprendí de tu post, en verdad se nota tu experiencia y vaya que siempre se aprende algo nuevo, en verdad mil gracias por tu retroalimentación, muy precisa y completa.

      Me dejaste sin palabras amigo. ¡Saludos!

  • Carlos Zúñiga

    Muy buena información, además de que conocí el nombre de ciertas cosas que no tenia ni idea, gracias =D

    • Que gusto que te sirviera la información Carlos, bien dicen que siempre se aprende algo nuevo. Gracias por leer y comentar 🙂