Diseño de Interfaces » Web adaptativa

Contents

1 Definición
2 Herramientas y recursos

Definición

El diseño web adaptativo o adaptable (en inglés, responsive web design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.

Fuente: Wikipedia.org.

La proliferación de dispositivos con acceso a internet puede convertirse en una pesadilla cuando creamos una página web, ya que no sólo obliga a diseñar pensando en varias plataformas (ordenadores, móviles, tabletas, wearables, smart TV, netbooks, etc.), sino también en infinidad de tamaños y resoluciones de pantalla.

El diseño adaptativo nos ofrece una solución a este problema, permitiéndonos utilizar el mismo HTML en todos los dispositivos, mientras que es la hoja de estilos CSS la encargada de cambiar el aspecto de la página de acuerdo con el tamaño de la pantalla donde se muestra. Así pues, en el diseño adaptativo los elementos presentes en la página se reorganizan según la pantalla se amplía o encoge.

Vídeo: Diseño adaptativo de la página web del transporte público en Londres (Nielsen Norman Group).

Esta solución nos ofrece varias ventajas:

Mayor rapidez y menores costes en el desarrollo, ya que no trabajamos con diferentes versiones sino con una sola trabajada con una metodología específica desde el comienzo del desarrollo.
Mayor facilidad de mantenimiento.
Tranquilidad de cara a la aparición de nuevos dispositivos (el diseño se adaptará él solo de acuerdo con el tamaño de sus pantallas).
Mejorar el posicionamiento SEO de la web, dado que trabajamos con una única versión para todos los dispositivos.
Mejorar la experiencia de usuario, ya que tenemos un único diseño principal que mantendrá la coherencia con la visualización desde cualquier dispositivo.

No obstante, no es suficiente con asegurarnos de que los elementos se adaptan al tamaño de la pantalla. Cuando trabajamos con diseños adaptativos, también debemos tener en cuenta ciertas cuestiones:

Usabilidad y experiencia de usuario: La web debe ser igualmente usable, con independencia del tamaño del dispositivo con el que accedamos a ella.
Jerarquización de los elementos: Debemos tener muy presente en qué orden se va a reorganizar nuestro contenido en las pantallas más pequeñas. Al igual que en el monitor de un PC, lo más importante debe estar situado bien a la vista.
Tiempo de carga: Si bien el diseño adaptativo nos permite usar el mismo HTML para todos, ello significa en principio que un smartphone va a tener que cargar el mismo código que un ordenador de sobremesa –lo muestre todo o no–, lo que podría afectar al tiempo de carga de la página en el móvil. Una solución es detectar el tipo de dispositivo y que el servidor provea solo de aquellas partes de código necesarias.

Fuente: Responsive Web Design (RWD) and User Experience.

Más información:
– Manual de diseño web responsivo (de Wilfredo Salas G.).
– Diseño web responsivo según Ethan Marcotte.
– Historia del diseño web adaptativo.
– Design process in the responsive age.
– 7 consejos para hacer buen responsive design.
– Responsive web design: what it is and how to use it.
– Artículos sobre diseño adaptativo en A List Apart.
– Responsive web design tips from BBC News.
– El responsive y la importancia en el SEO.

Herramientas y recursos

Herramientas

Responsive web design Testing tool. Esta herramienta nos permite introducir una URL y comprobar al instante su aspecto en diferentes tamaños de pantalla (240 px, 320 px, 480 px, 768 px, 1.024 px).
Responsinator. Herramienta en línea que permite ejecutar un test de responsividad, simulando la visualización de una web en diferentes dispositivos móviles.
ScreenQueries. Pixel Perfect Media Query Debugging Tool.
Gridpak. The responsive grid generator.

Ejemplos de webs adaptativas

Tutoriales

Responsive CSS Frameworks

Skeleton. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
Base. A super simple, responsive framework built for all devices big, small and in-between.
Gumby. Gumby 2 is an amazing responsive CSS Framework built with the power of Sass.
Amazium. The clean and simple responsive framework.
Foundation. Foundation 5 is the most advanced responsive front-end framework in the world.
Bootstrap. The most popular front-end framework for developing responsive, mobile first projects on the web. Desenvolupat per la gent de Twitter.
The Goldilocks Approach. Ofrece archivos CSS y HTML para programar webs adaptativas.
Proportional Grids. Simplemente, rejillas proporcionales que funcionan incluso en IE7.
Responsive Grid System. Ofrece archivos y recursos para iniciarse en el diseño web adaptativo.
This is responsive. Interesante colección de patrones y recursos adaptativos del diseñador web Brad Frost.