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">
Profesor del Departamento de Lenguajes y Sistemas Informáticos de la Universidad de Alicante (España). Interesado en el desarrollo y la accesibilidad web.
Deja un comentario