La definición más sencilla del término “responsive” podría ser algo así como “aquel diseño web que se ve bien en cualquier pantalla”. No obstante, debemos ser más serios ya que, los que verdaderamente nos enfrentamos a este tipo de situaciones, sabemos que el diseño “responsive” va mucho más allá. Veamos poco a poco que es esto del diseño web “responsive” porque esto es más profundo de lo que parece.
¿Qué es una web “responsive”?
El término “responsive” proviene del inglés (sensible) aunque en nuestro idioma solemos traducirlo como “adaptable”. Una web con diseño adaptable se visualiza correctamente en cualquier tipo de dispositivo o, para ser más exactos, cualquier tipo de pantalla. El término inglés “responsive” hace referencia a la sensibilidad que posee el diseño para adaptarse a los diferentes soportes de visualización, ya sean enormes monitores de escritorio, tabletas o teléfonos móviles.
El objetivo es que, independientemente del medio, se mantenga la esencia del mensaje a transmitir.
La adaptabilidad no se consigue mostrando lo mismo a mayor o menor tamaño. Se trata de mantener nuestro mensaje y contenidos sobre diferentes formatos o superficies. La cosa se complica.
Pero, ¿qué tiene esto de novedad?
Pues, en esencia, no es nada nuevo. De hecho se lleva haciendo toda la vida en medios impresos. No es lo mismo diseñar un anuncio de periódico a página completa que a doble página o para una sección de anuncios por palabras. Hemos de conocer las dimensiones donde aparecerá nuestro anuncio y las limitaciones del medio, adaptando el contenido de nuestro mensaje a los diferentes formatos finales. Lo dicho, nada nuevo.
Entonces, ¿no cambia nada?
Evidentemente sí, y mucho respecto al medio impreso.
La característica principal del medio impreso es que el formato y sus características se conocen de antemano. El medio impreso no variará y eso es una gran ventaja. Sabemos las dimensiones y resoluciones de la zona donde se presentará nuestro mensaje. En diseño web no ocurre así, reina la incertidumbre ya que cada potencial lector de nuestro contenido lo hará, sin duda, con pantallas de dimensiones y resoluciones diferentes. A esta diversidad hemos de añadir las particulares configuraciones de cada entorno gráfico, las molestas barras de herramientas y las posibles “aportaciones” que cada fabricante añada a su dispositivo. En definitiva, un sinfín de elementos que nos alejarán más, si cabe, de un estándar de visualización en el que basarnos.
Para complicar aún más el tema, hemos de tener en cuenta que la situación en que empleamos cada dispositivo es propicia para acciones diferentes. El mismo usuario no se comporta igual con su ordenador de escritorio que con su móvil. No hemos de olvidar que la web es un medio interactivo y queremos que el usuario responda a nuestro mensaje con una acción, bien sea para contactar con nosotros, para opinar sobre nuestro contenido o para recomendarnos. Sea lo que sea, hemos de facilitar esta interacción adecuándonos al medio en que estemos presentándonos.
Un par de ejemplos con fines ilustrativos:
- Cuando presentamos nuestros datos de contacto (teléfono y correo electrónico), si estamos diseñando una sección de contacto en nuestra web y nuestro diseño es adaptable, habría que plantearse si deberíamos destacar más nuestro teléfono, cuando detectemos que estamos en teléfonos móviles (pantallas pequeñas), con el fin de facilitar la llamada, mientras que, sobre una versión de escritorio (pantallas grandes), podría presentarse al mismo nivel que el correo electrónico o incluso, priorizar ligeramente éste último.
- Sobre un teléfono, navegamos tocando la pantalla con nuestros dedos, por lo que los botones de acción han de ser considerablemente más grandes que sobre una versión de escritorio tradicional, donde el puntero del ratón permite piezas más pequeñas en términos relativos.
¡Menuda complicación! Es como hacer muchas webs en una.
Bueno, como se suele decir en estas ocasiones: sí pero no. No se trata de pensar en todos los casos, no sería posible. Lo que se debe de hacer es aplicar una metodología de diseño web adaptable. Para ello hemos de reflexionar y tener en cuenta las siguientes directrices durante el desarrollo:
1. Definir los tipos de elementos
Todo espacio de comunicación interactivo se compone de piezas o elementos. Cada una de estas piezas (o varias de ellas) están diseñadas para una finalidad concreta.
Para verlo con más claridad analicemos un entorno interactivo conocido: la pantalla de nuestro ordenador. Independientemente del sistema operativo empleado, siempre tendremos un elemento como la barra de tareas, donde se nos indica las aplicaciones que tenemos abiertas y, en un rincón, convencionalmente suele ser a la derecha, estará el área de notificaciones, donde, de manera reducida, habitualmente iconos, se informa de eventos o situaciones y, sólo en caso de mayor detalle, aparece una notificación (también en este mismo lado, con el detalle de lo ocurrido). El resto de la pantalla es para un escritorio, enorme, donde las aplicaciones se muestran, cada una con su diseño, pero con elementos comunes (menús, controles de tamaño y cierre, herramientas, información, etc.) fácilmente identificables, siguiendo un estándar de presentación, lo más importante, acorde con el entorno gráfico que lo sustenta.
El ejemplo del párrafo anterior puede parecer absurdo y evidente, pero es muy ilustrativo porque los contenedores ya están definidos de modo que, si una aplicación quiere notificar de una situación al usuario, empleará el área de notificaciones y un mensaje de notificación emergente siempre lo hará bajo el mismo formato y del mismo modo. La principal diferencia cuando diseñamos un sitio web es que no tenemos ningún entorno que constriña dirija nuestro diseño y podríamos tener tendencia a caer en la originalidad o, aún peor, en el desorden. Por este motivo hemos de diseñar un sitio web pensando siempre en piezas o “contenedores” de modo que sea esta pieza la que defina su función y su comportamiento.
Los contenedores básicos que todo sitio web “normal” debe tener son:
- Un menú de navegación que parezca un menú de navegación (no es broma, a veces no lo parece). De este modo, el usuario puede hacerse una idea de todo lo que puede encontrar en nuestro sitio web y proporcionamos un punto de partida claro para los usuarios que no saben por donde comenzar.
- Una zona de información principal y otras secundarias. Además, cada zona deberá mostrar exactamente eso, no debemos utilizar zonas secundarias para mostrar información importante y viceversa.
- Llamadas a la acción claras y homogéneas. Si los botones de acción son diferentes, el usuario no sabrá cuando un elemento es accionable o no lo es.
Los elementos anteriores son los más habituales pero se pueden dar otros tipos de elementos. Éstos pueden ser muchos y muy variados, dependiendo de la complejidad y el objetivo de nuestro sitio web (contenedores de publicidad, ofertas, información del usuario, etc.) pero hemos de tener claro que aquello que se ha diseñado para un tipo de contenido (p.e. publicidad) no puede emplearse para otro (p.e. datos del usuario) aunque ambos aparezcan en la misma ubicación de nuestro diseño. Por consiguiente, hablamos siempre de tipos de elementos (publicidad, datos personales, información técnica, fotos de producto, etc.) y no de contenido (oferta del verano, teléfono de contacto, precio antes y después). No sabemos si queda claro. Continuemos…
2. Priorizar el contenido
Una vez hemos definido los distintos tipos de contenido que podemos mostrar en nuestro diseño (tipos de elemento o contenedores) hemos de jerarquizar estos tipos. No tiene la misma prioridad un menú de navegación que un elemento publicitario… o sí (depende). La jerarquía la decidimos nosotros pero siempre ha de establecerse dicha jerarquía.
“Los usuarios analizan nuestro sitio web visualmente y, queramos o no, en un ser humano esto ocurre de forma jerárquica.
La jerarquía nos va a permitir adecuar el sitio web a diferentes pantallas, más alargadas o más anchas, más grandes o más pequeñas. La jerarquía nos permitirá emitir cada elemento en el orden correcto para que el dibujado se haga siempre de modo que lo más importante siempre quede en una posición más visible y lo menos importante quede al final de la visualización o incluso desaparezca en soportes con visibilidad muy reducida.
3. Ajustarnos al entorno
Para finalizar, los auténticos diseños adaptables pueden modificar las características de un contenedor dependiendo de la situación. Tal y como ya citábamos anteriormente, un contenedor de un número de teléfono puede ser más pequeño en una pantalla grande (asumiendo que estamos frente a un monitor de sobremesa) pero ser más grande en pantallas pequeñas (asumiendo que estamos visualizándolo en un teléfono móvil) puesto que este tipo de información es mucho más útil en el móvil.
Del mismo modo, puede haber contenedores que no aparezcan sobre pantallas pequeñas porque pierden todo el sentido como, por ejemplo, ampliadores de imágenes o herramientas de zoom de imágenes.
En resumen, reflexión y simplicidad.
Aunque parezca absurdo, es así. No hemos de complicarnos la vida a la hora de diseñar un sitio web para demostrar lo que “controlamos” del tema y como aplicamos lo último en tecnología.
Es evidente que no podremos acertar en todo y que siempre encontraremos problemas de adaptabilidad a dispositivos o medios concretos pero no por ello nuestro diseño deja de ser adaptable. Hasta los sitios web más prestigiosos tienen sus fallos. Lo importante es no olvidar que nuestro objetivo es que el usuario pueda navegar y responder a nuestras llamadas de acción. El usuario quiere que su navegación sea simple y que no le haga pensar. Busca comodidad y encontrar las cosas donde se supone que deben de estar. Si tenemos siempre presente esta máxima, tendremos la mitad del trabajo resuelto.
Recordemos que un interfaz de usuario es como un chiste, si tienes que explicarlo ya no es tan bueno como parecía. ¡Pues eso!