Claves para diseñar un buen site responsive

El móvil se ha convertido ya en el dispositivo de acceso a Internet más utilizado, superando al ordenador en 10 puntos porcentuales, y es una tendencia que se reproduce en todo el mundo. En el ámbito del e-commerce, entre el 29% y el 36% de los clientes son móviles. A la luz de estas cifras, simplemente ya no es posible considerar el diseño de un sitio web a través del único prisma del sacrosanto ordenador de sobremesa para luego intentar adaptarlo a otros terminales.

Por ese motivo, han aparecido nuevas técnicas. La principal el diseño responsive. Gracias a esta combinación de métodos y técnicas llamada también llamada diseño web adaptativo, la interfaz de un sitio web o de una aplicación online puede adaptarse automáticamente al navegador del terminal que utilice el usuario (smartphone, tablet, ordenador portátil, ordenador de sobremesa, etc.).

Claves para diseñar un buen sitio responsive

Cuando se diseña un sitio de forma apresurada, no es raro llegar a un callejón sin salida. La página de inicio de la web consultada es perfectamente responsive, luego se hace clic en un enlace y desafortunadamente la siguiente página ya no está adaptada a móvil.

Existe un método muy sencillo para solucionar un escollo de este tipo que ¡incluso se enseña en la escuela primaria! Se trata de aplicar el principio del mínimo común denominador.

Antes de lanzarnos a realizar las plantillas del sitio web, dediquemos un tiempo a diseñar la estructura de archivos idónea en forma de mapa conceptual. Esta representación estructurada permite distinguir fácilmente las familias de plantillas y la navegación asociada.

Como el responsive design es una verdadera marea de fondo, los principales navegadores del mercado han respondido a la necesidad de los desarrolladores front-end ofreciéndoles funcionalidades que permiten probar sus diseños en diversas plataformas.  La vista de diseño adaptable de Firefox, por ejemplo, disponible en las herramientas de desarrollo integradas, permite mostrar una página HTML en ocho pantallas distintas. También se pueden probar los formatos apaisado o vertical, e incluso simular eventos táctiles.

Estas funcionalidades facilitan mucho la tarea ofreciendo una previsualización rápida de la calidad de la integración HTML/CSS, pero hay que tener cuidado, ya que, aunque los emuladores están mejorando mucho, a día de hoy nada sustituye a una batería de pruebas realizadas en los principales smartphones, phablets y tablets del mercado.

En definitiva, hoy en día, la mayoría de internautas navegan en varios terminales en el transcurso de un mismo día. No es raro comenzar furtivamente la consulta de una información en un smartphone y terminar la lectura en una tablet sentado en el sofá.

El futuro de la adaptabilidad pasa inevitablemente por una segmentación aún más precisa de los usos de los usuarios y de los datos que producen. Pensar mobile first no es, pues, un fin en sí mismo. Solo hay que ver el auge de los relojes conectados y del internet de las cosas en general para convencerse del callejón sin salida al que conduce el mobile first.