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.
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 diseñaste o viste 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 tú proyecto quede cerrado dentro del plazo esperado, de hecho, he perdido la cuenta del número de veces que me ha ocurrido.
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.
Recuerda que 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 tengamos el contenido, se puede empezar a construir cuadros referenciales de contenido. 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, tú web se encontrará en ese punto del proceso en el que es posible considerar los puntos adaptables.
Ten en cuenta que al tomar el contenido previamente, puedes 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 se hablará 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.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, se 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.

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

Supongamos que tenemos 20 compilados de Photoshop (o fireworks), cada uno de los cuales tuvo tres diferentes resoluciones (escritorio, tablet y móvil) y necesitamos 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 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?

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.

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 tú 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 es de 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.

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

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 tienes la necesidad de agregar cualquier tipo de diapositiva aquí o allá, agregala y comprueba 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”.

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 deseas 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

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 sabes, ¡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.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *