Vivimos tiempos apasionantes.
Durante los últimos años, nos hemos centrado en crear sitios web móviles que son versiones del sitio principal con mucho texto.
Si bien estos sitios son más rápidos para los usuarios en un dispositivo móvil, a menudo eliminan las características de diseño que hacen que el sitio tenga una marca única para la empresa y eliminan las llamadas a la acción y la publicidad necesarias.
Para complicar más las cosas, la mayoría de las pantallas de computadoras portátiles y de escritorio ahora tienen más de 1024 píxeles. Pero la mayoría de los diseñadores todavía construyen sitios con 960 píxeles de ancho porque los monitores de las netbooks y las tabletas son pequeños y los desarrolladores no quieren que las personas se desplacen horizontalmente.
El diseño web receptivo es una forma de construir un sitio web que responda al tamaño del navegador. En lugar de crear una versión móvil única, los desarrolladores crean un diseño flexible que cambia dinámicamente al ancho real del navegador.
Aquí hay cinco elementos clave a considerar al crear un diseño web receptivo.
Como se muestra en este ejemplo de foodsense.is, la navegación del sitio se presenta en diferentes ubicaciones según el ancho del navegador. Para los usuarios de dispositivos móviles, la navegación está en la parte superior y centrada (para facilitar el acceso); para otros anchos, se encuentra en la esquina superior derecha o debajo del logotipo. El diseño receptivo no debe escalar la navegación a proporciones enormes en un dispositivo de pantalla grande.
Un punto importante que debe comprender es que el diseño web receptivo no solo escala un sitio cuando se le muestra por primera vez a un usuario, sino que también escala si alguien hace que su navegador sea más grande o más pequeño. Un buen ejemplo de esto se puede encontrar en un diseño receptivo celebrado recientemente: el boston globo.
Como uno de los principales periódicos, el Boston Globe hizo que la arquitectura y el diseño receptivo fueran parte de su lanzamiento como un sitio basado en el muro de pago. El sitio funciona y se ve muy bien independientemente del dispositivo desde el que lo estés viendo.
El diseño web receptivo del Boston Globe es un ejemplo de libro de texto de un diseño que conserva su integridad independientemente del tamaño del navegador.
El sitio del Boston Globe puede mostrar una o tres columnas de contenido, según el ancho del navegador.
Un sitio web receptivo escalará los titulares, las imágenes, el texto y los anuncios en las proporciones correctas mientras mantiene la integridad del diseño, tanto cuando se muestra el sitio web por primera vez como cuando se cambia el tamaño del navegador.
Un buen diseño receptivo considera las llamadas a la acción críticas que deben mostrarse de manera destacada, independientemente de la pantalla o el tamaño del navegador.
Mogo Tix muestra claramente el llamado a la acción «Comience gratis» en su diseño receptivo.
Simplemente escalar o mover elementos en una cuadrícula flexible no resuelve el problema de que los sitios pierdan su marca única al crear una versión móvil. Construir un diseño receptivo requiere diseñar para tres o cuatro anchos. El ojo de un diseñador es importante para asegurarse de que el diseño refleje la marca en todos los tamaños.
Date cuenta cómo Londres y socios mantiene muchos de los elementos de marca del sitio visibles sin importar el tamaño de la pantalla.
Cognición, Happy Cog’s Blog hace un buen trabajo al preservar el relleno y el espacio en blanco en varios tamaños de pantalla. Esto garantiza que los elementos de la página tengan la jerarquía de información adecuada. Nada se siente demasiado lleno o desalineado.
El diseño web receptivo presenta la información del sitio de la mejor manera visual, independientemente del tamaño de la pantalla. A diferencia del diseño de impresión, el diseño web siempre se ha presentado en lienzos de diferentes tamaños. El diseño web receptivo es la solución de diseño más reciente y flexible que aborda estas diferencias.
¿Qué otros elementos deben tenerse en cuenta en su diseño receptivo?
Imagen cortesía de práctico búho
