Diseño web sensible, responsive web design o diseño adaptativo

DIseño web sensible, el nombre definitivo

¿Cómo se dice, responsive web design o diseño adaptativo? Wikipedia lo llama diseño web adaptativo o adaptable. Los usuarios lo llaman diseño web responsive. Google Translate lo llama “diseño sensible” y sin duda nos parece la mejor adaptación (toma nota Siri). Utilices el nombre que utilices te estás refiriendo a lo mismo, un tipo de diseño web que se adapta a todas las resoluciones de pantalla.

¿Cómo saber si una web tiene diseño responsive? 

Identificar si una web es o no es responsive es muy sencillo: sólo tienes que redimensionar la ventana de tu navegador para hacerla más pequeña. Si aparece la barra horizontal de scroll y tienes que desplazarte horizontalmente para ver el contenido oculto entonces… la web no tiene responsive design. Sencillo, ¿verdad?

Esta prueba tan sencilla despeja las dudas entre diseño líquido y diseño responsive que veíamos en un post anterior.

Si no te apetece hacer pruebas con la ventana del navegador puedes utilizar el bookmarklet (aplicación incrustada en el navegador) Viewport Resizer que te ofrece  diferentes resoluciones prefijadas. Además podrás imprimir en papel las resoluciones que desees.

¿Cuáles son las ventajas del diseño responsive? 

El diseño responsive proporciona 4 grandes ventajas.

• SEO. Search Engine Optimization. La optimización para buscadores es la gran ganadora. Sólo hay una web (HTML + CSS) y por tanto la URL es única para todos los dispositivos. Los buscadores no van a encontrar otras URL y contenidos diferentes para los dispositivos móviles. Nos evitamos instrucciones en robots.txt y redirecciones de unas versiones a otras, e incluso evitamos perder los links que podrían hacer los usuarios en determinadas versiones de las páginas. 
• UX. User eXperience.  El usuario accede al mismo website con independencia del dispositivo que utilice. La versión para dispositivos móviles es también completa. La misma experiencia de uso, el mismo menú de navegación. Coherencia.
• Integridad. Sólo hay una estructura HTML y una única hoja de estilo CSS para todos los dispositivos. Tengan el tamaño que tengan. Desde los smartphones a 320 px de ancho hasta resoluciones de 2.650 px (superiores incluso a las pantallas retina). Antes esto no era así y había una hoja de estilo para cada ancho estándar (320 px para móviles, 768 px para tablets, 1.024 px para notebooks y 1.600 px para ordenadores de escritorio). Cada actualización en la web suponía retocar una por una las CSS y eso podía representar perdidas de integridad.
• Costes. Aunque el diseño responsive requiere más inversión en tiempo del diseñador y programador, se optimizan los costes de mantenimiento ya que sólo hay que revisar 1 hoja de estilo y no como antes que había que manipular 4 hojas de estilo diferentes.

¿Cómo se adapta el contenido de una web con diseño responsive?

La estructura de la página web se define con HTML5. La presentación de la página (color de fondo, tipografías, cuerpos de la fuentes, etc) se hace programando las hojas de estilo CSS3. Cuando el navegador del usuario pide una página, el servidor hace que la hoja de estilo ejecute la media-query por la que obtiene información inmediata sobre el dispositivo, especialmente la resolución de pantalla y orientación (vertical o portrait, horizontal o landscape). El servidor sólo tiene entonces que ajustar el contenido que va a servir al formato de pantalla en el que va a ser visualizado. Este proceso dura milésimas de segundo, no hay delay para el usuario. A todos los efectos es una página más.

Para que esto sea posible debemos definir con antelación la disposición, orden y tamaño que tendrán los diferentes elementos que constituyen el contenido de la página web y también el comportamiento que van a tener esos elementos en tamaño reducido.

El diseño responsive es por esta razón mucho más trabajoso que un diseño convencional ya que implica tener en consideración varias visualizaciones (smartphone, tablet, ordenador de escritorio), reordenar los elementos (que se muestra antes y qué se muestra después) y rediseñar los elementos que puedan plantear problemas (los campos de un formulario de contacto, por ejemplo).

Herramientas online gratuitas para identificar y validar diseño responsive

Para validar el diseño adaptativo de una web tendrás que hacer algunas pruebas. Existen  varias herramientas online gratuitas que te facilitarán la labor. Cada día hay más en la red. Las puedes buscar como “responsive web design testing tools”. Te dejamos aquí las principales que han sido creadas para atraer tráfico y generar notoriedad

• Appex (una agencia noruega de publicidad)
• Matt Kersley (diseñador y programador)
• Responsinator (también puede funcionar como bookmarklet)
• Responsive Pixel 
• Screenfly (esta es la que más nos gusta) 

Los 420 mejores ejemplos de diseño web responsive 

Eivind Uggedal está recopilando en el website MediaQueri.es (el dominio territorial español es sólo por naming) los que él considera mejores ejemplos de diseño adaptativo. En estos momentos (marzo 2013) su selección comprende 420 websites de todo tipo de sectores que muestra en thumbnails con 4 resoluciones diferentes: Smartphone (320 px), Tablet (768 px), Netbook (1.024 px) y Desktop (1.600 px).