Cómo hacer frente a una Web que cada vez cambia más rápidamente

Que las cosas cada vez cambian más rápidamente, que la vida cada vez se acelera más, y que cada vez nos cuesta más estar al día con esos cambios es un hecho innegable.

En el mundo del desarrollo web, los cambios en las tecnologías que utilizamos fluyen sin cesar. Estamos aprendiendo los cambios de la nueva versión de XXXX y nos enteramos de que va a salir al mercado la próxima versión y las nuevas características anulan todo lo que estamos aprendiendo.

¿Qué podemos hacer? Adaptarnos y estar preparados para el cambio, aceptar el cambio como algo inherente al desarrollo web.

En el sitio web Future Friendly apuestan por ello, por el cambio, nos explican cómo adaptarse al cambio y nos dan unas pautas para aprovecharnos del cambio.

En el apartado Thinking podemos encontrar unos recursos muy interesantes, como Mobile First, donde nos dan tres razones de por qué es mejor primero desarrollar la versión móvil de una aplicación web, o Multiscreen Patterns, con consejos, pautas y estrategias para un mundo web con infinidad de dispositivos y tamaños de pantallas.

 

Menús adaptables

El diseño web adaptable (responsive web design) es un diseño de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos. En los últimos años se ha extendido su uso, en especial por el acceso a la Web desde dispositivos móviles.

En el artículo Responsive Menus: Enhancing Navigation On Mobile Websites explican cómo afrontar el diseño de los menús para que sean adaptables.

Al crear un menú adaptable, nos podemos plantear las siguientes modificaciones:

  • Puede tener un aspecto visual diferente, por ejemplo, en un dispositivo móvil puede tener la apariencia de un menú de una aplicación nativa.
  • Puede tener un contenido diferente, con enlaces apropiados al dispositivo en el que se ve la página.
  • Puede aparecer en una posición diferente en la página web.

En el artículo se presentan varios casos reales, como el de la empresa Compass Design.

Este es el menú que se ve en un ordenador:

Este es el menú que se ve en un iPad:

Y por último, este es el menú que se ve en un iPhone, además, el menú está situado al final de la página:

Análisis de un diseño adaptable

Un diseño web adaptable (en inglés, responsive web design) es aquel que se ha creado teniendo presente la posible visualización de una página web en diferentes dispositivos con diferentes tamaños y resoluciones de pantalla, con el fin de lograr la mejor experiencia en cada uno de ellos.

Aunque supone un esfuerzo adicional a la hora de desarrollar un sitio web, yo lo intento utilizar desde hace tiempo en mis sitios web (por ejemplo, Introducción a la accesibilidad web o HTML5 y CSS3 – El futuro de la programación web) y se lo recomiendo a todo el mundo.

Acabo de leer el artículo A Responsive Design Case Study, en el que se realiza un análisis de las decisiones tomadas para realizar un diseño web adaptable.

El artículo empieza con el problema actual: diseñar un sitio web para que se vea bien en pantallas desde 3,5” hasta 30” supone todo un desafío. El artículo nos presenta un sitio web, Passenger Focus, en el que se ha hecho frente a este desafío. Para comprobarlo, no tenemos más que navegar a ese sitio web y cambiar el tamaño de la ventana del navegador. Podremos comprobar que el sitio web no tiene un único diseño, sino varios, aunque con muchos elementos en común.

Por ejemplo, así se ve a 1366 píxeles de ancho:

Y así a un tamaño intermedio de 733 píxeles:

Y por último, a un tamaño más pequeño de 573 píxeles:

Interesante, ¿verdad?

Pues hay más cosas interesantes en el artículo. Por ejemplo, en esta web han desarrollado una guía de estilo, en la que se define el estilo de los encabezados, las listas, etc. ¿Hay que crear una página nueva? No pasa nada, se consulta la lista y ya se sabe lo que se tiene que hacer.

Otra curiosidad del artículo: cómo ejecutar Internet Explorer 7, 8 y 9 en Mac mediante una máquina virtual y de forma gratuita.

Y la última, Opera Mobile Emulator.

Y recordad, para que un diseño adaptable funcione correctamente en los dispositivos móviles, hay que añadir esto en el <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

Imagen de fondo para rellenar la pantalla

Como cada vez hay más variedad de resoluciones de pantalla, cada vez se está poniendo más difícil lograr un diseño adecuado para todas las posibilidades que existen. Afortunadamente, el diseño adaptable nos permite solucionar este “gran problema”.

Acabo de visitar la web de los Imperial War Museums y me ha gustado mucho como han resuelto el rellenar el espacio vacío cuando la página se visualiza a 1920 píxeles:

Me ha gustado tanto que no me he podido resistir y necesitaba descubrir qué se escondía detrás de la zona de contenido de la página web. Aquí la imagen completa que se usa de fondo, podemos apreciar que también se le ha puesto una capa por encima para oscurecerla, lo que se escondía era la Reina Madre:

Diseño web responsivo, sensible, adaptable, …

Por ahora, hay un poco de lío y en español hay diferentes formas de llamarlo. Pero lo que sí que sabemos es que en inglés se dice “responsive web design”.

Un diseño web adaptable (es el término que más me gusta y el que mejor refleja lo que es) es un diseño de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos. Tradicionalmente se lograba creando diferentes versiones de un mismo sitio web (incluso hace más de 10 años había sitios web que ofrecían una versión para Netscape y otra para Internet Explorer, ¡increíble! pensará alguno), pero eso es un completo error por diferentes motivos que te dejo que pienses tú mismo. Gracias a un uso correcto de HTML y CSS, podemos tener un único sitio web (un solo HTML), pero ofrecer múltiples posibilidades de visualización (múltiples CSS).

Hasta hace unos años, la forma tradicional de ofrecer diferentes CSS era detectando en el lado del servidor las características del navegador/dispositivo del usuario que se conectaba (por ejemplo, a través del user-agent). Según las características detectadas, se devolvía al usuario un CSS particular.

Hoy en día se puede seguir utilizando esa misma técnica, pero es mucho más sencillo y práctico utilizar los “media query”. Debido a que es mucho más sencillo y cualquiera lo puede hacer, en los últimos años se ha extendido su uso, en especial por el acceso a la Web desde dispositivos móviles.

En mi entrada Un par de ejemplos de diseño responsive están enlazados un par de ejemplos muy interesantes que aplican esta técnica.

La siguiente infografía en castellano (¡por fin publicamos una infografía en castellano!) nos resume qué es el diseño web sensible: Diseño web sensible. ¿¿¿Sensible???

 

[Actualización 12/10/2016]

Fundeu aclaró que se debe decir diseño adaptativo:

Diseño web adaptativo, mejor que adaptable o responsivo, es la traducción más ajustada en español de la expresión inglesa responsive web design.

Esta técnica de diseño y desarrollo web busca que las páginas se adapten automáticamente al dispositivo en el que se visualizan.

En este sentido, lo apropiado en español sería hablar de adaptativo, término que significa ‘perteneciente o relativo a la adaptación o a la capacidad de adaptación’, tal como indica el Diccionario académico, pues es precisamente lo que persigue este modo de diseñar: que las webs tengan capacidad automática de adaptación al soporte.

Adaptable, sin embargo, significa ‘capaz de ser adaptado’, y carece del sentido automático de adaptativo. Una página o un diseño adaptable indicaría que da la posibilidad de que sea modificado, por ejemplo por el usuario, como una opción de configuración (ajustar el tamaño de la letra, eliminar las imágenes, etc.).

Patrones de diseño para interfaces de usuario

El sitio web UI-Patterns: User Interface Design Pattern Library ofrece patrones de diseño para interfaces de usuario, en especial para páginas web.

Por ejemplo, podemos encontrar un patrón de diseño para la paginación (Pagination), para las migas de pan (Breadcrumbs) o para los pies de página “gordos” (Fat Footer). Con cada patrón se muestra un ejemplo, su uso, la solución, su razón de ser y otros ejemplos similares.

Diseño fijo, líquido y elástico

Cuando se realiza el diseño (layout) de una página web existen tres posibilidades:

  • Fijo: el ancho de la página y de sus componentes está fijo.
  • Líquido: el ancho de la página y de sus componentes se adapta al tamaño de la ventana del navegador.
  • Elástico: el ancho de la página y de sus componentes se adapta al tamaño del texto.

Y claro está, también existe la posibilidad de realizar un diseño híbrido o mixto combinando dos o más de los tres estilos.

En el artículo Fixed vs Liquid vs Elastic se explican estos tres estilos y las ventajas y desventajas de cada uno de ellos.