Palabra de Jorge

Lecturas, escuchas y reflexiones

Responsive Design

ResponsiveDesign También se le llama Diseño Adaptable, y se adapta al ancho de todo tipo de dispositivos, básicamente PCs, tablets y smartphones. Responde a las necesidades de un mundo online cada vez más cambiante y, sobre todo, cada vez más móvil.

Ethan Marcotte es un diseñador / desarrollador americano al cual debemos muchos de los avances en Responsive Design. La idea surge en julio del 2008 en el seno del W3C (World Wide Web Consortium) con su recomendación Mobile Web Best Practices y su filosofía de One Web para todos (Web for All) y accesible desde cualquier parte (Web on Everything).

El mayor enemigo del Responsive Design son los anchos fijos, que no refluyen en dispositivos pequeños, y el gran alido los porcentajes. Las herramientas que utiliza son una combinación de HTML5, CSS3 y Javascript. Con este tipo de diseño, sólo hay que diseñar una única versión (One Web), y por tanto sólo hay una única URL. Todo ello reduce el tiempo y gasto de creación, mantenimiento y actualización de páginas web, y de paso se evita la asincronía entre distintas versiones y la necesidad de crear aplicaciones específicas para dispositivos pequeños. También mejora la usabilidad, las conversiones y el SEO.

No sólo se consigue cambiar el diseño, sino también el tamaño de las imágenes, lo que se llama Responsive Images, tema sobre el que no se ha llegado a una conclusión definitiva, ya que todavía se barajan varias opciones:
– escalar el tamaño mediante el width y height del HTML
– recortar una parte de la imagen para reducir el peso
– crear varias imágenes de diferentes resoluciones.

Una tecnología que ayuda mucho son las media queries que se aplican en el CSS, mediante las cuales se crean códigos como éste: @media screen and (max-width: 480px), en el que se indica que este CSS sólo actuará en las pantallas que tengan un máximo de 480 pixels, es decir, el ancho de un móvil típico.

Un ejemplo de Responsive Design es el Boston Globe. Y un consejo: hacer un buen diseño web es la base de todo diseño web, sea responsive o sea lo que sea.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Information

This entry was posted on July 10, 2013 by in internet and tagged , , , , .
%d bloggers like this: