El diseño web adaptativo para un buen comienzo

Desde siempre, los diseñadores de sitios web han afrontado la problemática de la portabilidad de sus creaciones en navegadores que interpretan, de manera más o menos conveniente, las particularidades del Consorcio WWW o W3C (del inglés: World Wide Web Consortium). La concepción del mismo sitio web para Internet Explorer y Firefox era considerada como vital. Este hecho se ha intensificado con la aparición de nuevas generaciones de terminales móviles, impulsada por el auge de la utilización portátil. Las estadísticas revelan que la navegación en internet mediante el uso de dispositivos móviles en países de América Latina, aumentó en un 61% durante el pasado año, anulando toda posibilidad de crear un sitio web con versiones para cada terminal, y dando lugar al surgimiento de nuevas soluciones, dentro de las cuales se encuentra el diseño web adaptativo o RWD (del inglés Responsive Web Design).

¿De qué se trata?

Desde el punto de vista del usuario final, esta combinación de métodos y técnicas permite la adaptación automática de la interfaz de un sitio web o de una aplicación, al navegador del terminal utilizado (smartphone, tablet, laptop, desktop, etc.), de ahí la denominación de experiencia adaptativa.

Existen tres componentes técnicos que "casi" llegan a un consenso:

La tabla adaptativa: las páginas de los sitios RWD se conciben a partir de una estructura que se adapta a las características de los navegadores de internet;
Los Media queries: estos módulos CSS deben su flexibilidad a la tabla en la que se basa la estructura del sitio web;
Los medios flexibles: para lograr la total flexibilidad, es conveniente adaptar los medios de difusión (imágenes y videos) a las condiciones de visualización de cada navegador.

¿Una guerra de infraestructuras?
Para facilitar el trabajo de los desarrolladores front-end, han surgido nuevas infraestructuras de integración, como es el caso de Boostrap, una solución desarrollada por los equipos de Twitter, ciertamente la infraestructura RWD más conocida, que marcó el punto de partida de una nueva generación de soluciones convincentes, incluso para grandes compañías como Vogue, Newsweek, Spotify, MongoDB, o la NASA.

En la actualidad, ya es incontable en número de infraestructuras RWD disponibles. Entre las alternativas más populares dentro de Boostrap, podemos mencionar: Foundation, Skeleton, Boilerplate, HTML Kickstart, Sproutcore y Zebra.

Casos prácticos de puntos de interrupción.

La degradación elegante debe terminar

Durante los años 2000 a 2005, los métodos de concepción de sitios web recibieron el impacto de la combinación de tres factores importantes. La idea de separar el contenido (HTML) de la forma (diseño de página mediante hojas de estilos en cascada o CSS -del inglés: cascading style sheets) permitió el surgimiento de soluciones de gestión de contenidos (CMS, del inglés: Content Management System), y a su vez posibilitó la actualización pública de sitios web.

A partir de entonces, se produjo una explosión en el volumen de publicaciones. El incremento del número de navegadores web, conjuntamente con el surgimiento del smartphone, dejaron atrás la creación de un igual número de versiones de un sitio web y de navegadores.

Para enfrentar estos desafíos, han surgido nuevos enfoques, como es el caso de la degradación elegante, una opción natural para los sitios web no diseñados originalmente con una perspectiva multiplataforma y que podrían devenir sitios flexibles en el futuro.

El incremento del número de navegadores web y el surgimiento del smartphone dejaron atrás la degradación elegante.

La degradación elegante es sin lugar a dudas una de las primeras experiencias da la web adaptativa; y, en ese sentido, merece su reverencia. Su uso aún prevalece en la actualidad, aunque totalmente desfasado con respecto a las expectativas del usuario moderno, y constituye más bien un método correctivo de preferencia entre los equipos de creación que se resisten a los cambios que generan nuevos usos.

En efecto, podemos decir que uno de cada dos internautas navega desde un equipo móvil, y esta tendencia se acentúa cada vez más en el mundo entero. En el comercio electrónico, del 30 al 35% de los clientes, efectúan sus compras desde equipos móviles; y, a juzgar por las estadísticas, ya no es posible visualizar el diseño de un sitio web para el uso de una máquina en una oficina, para después adaptarlo a otros terminales.

Este proceso es absurdo, pues requiere de muchos más recursos para adaptar el sitio web a cada terminal.

Mejoramiento progresivo

El origen de un sitio web o de una aplicación online, ya sean o no adaptativos, es necesariamente el resultado de un proceso de diseño preliminar; y es sin duda alguna, en este campo, que el aporte del RWD tiene mayor relevancia.

En efecto, el mejoramiento progresivo es una segunda escuela que ha revolucionado los métodos de diseño, más allá incluso de la web adaptativa. En este caso, se trata del diseño del sitio web o de la aplicación en internet como una combinación estricta del contenido y de los componentes estructurales:

1. La información primitiva (2);
2. La arquitectura de las plantillas de páginas;
3. La navegación.

Contrariamente a la degradación elegante, es a partir de estos componentes que las plantillas o templates son diseñadas, inicialmente para un sitio móvil. A continuación se enriquece progresivamente la interfaz, con elementos adicionales y/o la revisión minuciosa de la misma, a fin de sacar el mejor partido de las propiedades de las pantallas de alta resolución.

Además de explotar al máximo el espacio adicional disponible, este enfoque aprovecha de igual manera los sensores de terminales móviles. En la cartografía interactiva, por ejemplo, es preferible mostrar los puntos geográficos de interés directamente en la aplicación, en lugar de desplegarlos en un mapa o en la página del sitio web.

Este método resulta desestabilizador al implementarlo por primera vez, pero con la ejercitación rigurosa, garantiza la concentración en la importancia de la información, la arquitectura y la navegación, resultando en la optimización de la experiencia del usuario.

Desde esta óptica, el mejoramiento progresivo tiene más puntos en común con un proceso editorial (por no decir "documental") que con uno técnico.

¿Cómo concebir un buen sitio RWD?

Definir el mínimo común denominador
El diseño apresurado de un sitio web, a menudo conduce a un punto muerto. En internet, la página principal de un sitio web está perfectamente diseñada en RWD. Sin embargo, al hacer clic en cualquiera de sus enlaces, con frecuencia encontramos que la página siguiente no está adaptada para la consulta a través de un equipo móvil.

Existe un método muy sencillo para eliminar este tipo de problemas, un método que aprendemos en la escuela primaria: el principio del mínimo común denominador.

Antes de consagrarse al uso de plantillas o templates del sitio, sería más conveniente dedicarnos de inicio a la concepción adecuada de un árbol jerárquico (3) en la forma de un mapa conceptual.

Esta representación permite -si ha sido bien estructurada- distinguir fácilmente las "familias" de plantillas y la búsqueda asociada.

¡Pruebas, pruebas y más pruebas!
Con el auge del RWD, los principales navegadores de internet del mercado han incorporado funcionalidades para responder a las necesidades de los desarrolladores front-end y a su vez ofrecerles herramientas que les permitan realizar pruebas en distintas plataformas (4).

Como ejemplo tenemos la vista adaptativa de Firefox, disponible entre las herramientas incorporadas, que permite mostrar una página HTML en ocho monitores diferentes, además de realizar pruebas de los formatos de paisajes o retratos, y hasta simular eventos táctiles.

Aparentemente, estas funcionalidades ofrecen numerosos servicios y resumen rápidamente la calidad de la integración HTML/CSS. Hay que ser cuidadosos, ya que, aún con el progreso de la competencia, hoy en día nada puede reemplazar una batería de prueba en los smartphones y tablets de primera línea en el mercado.

El futuro de la adaptabilidad y el inevitable callejón sin salida de MobileFirst

La aplicación del diseño web adaptativo implica la comodidad del internauta, cuya visita a un sitio web fluirá adecuadamente sin importar el terminal utilizado.

Según nuestra experiencia, esta visión "tecnocéntrica" abre paso a un enfoque mucho más complejo, orientado hacia el usuario, donde el terminal empleado no será más que un componente insignificante en la ecuación adaptativa.

Para lograr el éxito, esta última se basa en otros elementos. Hoy en día, la mayoría de los internautas navegan en internet utilizando diferentes equipos (diferentes terminales) a lo largo de un mismo día. No es raro para nadie consultar un sitio determinado desde un smartphone en la calle, o leer lar noticias desde un tablet, sentado en el sofá de su casa.

El futuro de la adaptabilidad requiere inevitablemente del establecimiento de un objetivo de utilización cada vez más preciso. MobileFirst no es, entonces, la solución definitiva: basta con observar la popularidad de los relojes de pulsera conectados y de la IoT en general, para convencerse del callejón sin salida en que se encuentra.

Referencias
(1) (en inglés) Statistics and facts on mobile internet usage
(2) La información primitiva está constituida por los contenidos editoriales y los servicios online.
(3) Freeplane es una solución flexible de open source utilizada en el mapa conceptual.
(4) En este caso, una plataforma es la combinación de un sistema operativo, un navegador de internet, una pantalla de configuración y un equipo.

Mi cuenta de clienteContact SalesWebmail OVHcloud Blog

¡Bienvenido/a a OVHcloud!

Identifíquese para contratar una solución, gestionar sus productos y servicios, y consultar sus pedidos

Conectar