Diseño Web Adaptativo

Hace unos meses leí el libro Responsive Web Design de Ethan Marcotte. El libro explica mediante un ejemplo el concepto de diseño Web adaptativo. El diseño Web adaptativo consiste en amoldar el diseño de la Web al view port del usuario mediante el uso de media queries y diseños flexibles basados en porcentajes en vez de en píxeles. Distingo entre la resolución de la pantalla y el view port, siendo esto último la porción de la pantalla que cubre el navegador. Puede tener una resolución de 1920 píxeles de ancho y un navegador abierto sólo a 1024 píxeles.

Acabo de realizar el diseño de la Web de un restaurante en las Palmas de Gran Canarias que se llama De la Olla al Plato. Este proyecto me ha permitido poner en practica el diseño Web adaptativo.

Versión Móvil

Por una parte queríamos que la versión móvil fuera muy sencilla y que sin tener que hacer zoom se pudiera ver el número de teléfono y la dirección postal.

Imagina ahora que el usuario que llega a la Web lo hace con un iPad en orientación vertical. Así es como vería el sitio:

Pongamos que el usuario llega a la Web navegando desde un portátil con un navegador con el ancho más típico de la Web hoy en día 1024 píxeles de ancho. Esta resolución ya nos permite aliñar un poquito nuestro diseño con algunos iconos para los datos de contacto y una barra de social media.

Y si el usuario navega en una pantalla con una resolución de más de 1450 píxeles de ancho usamos todo ese ancho para dar al usuario una visión más completa del portal de un sólo vistazo.

Todo esto se logra con el mismo HTML y sólo jugando con diseños porcentuales en CSS y el uso de las media query de CSS 3. Espero que os guste y deseando oir vuestra opinión.

Leave a Reply

Your email address will not be published. Required fields are marked *