Marcelo Rincón un cliente y gran conocedor del tema de usabilidad me mostró una nueva tecnología para desarrollar sitios Web que me dejó impactado. Me refiero a la tecnología llamada Responsive Web Design, que algunos llaman en español Diseño Web Adaptable.

1. Qué es el Responsive Web Design

El Responsive Web Design permite crear sitios Web que se adaptan al ancho del dispositivo en que se esté navegando, lo que permite tener un único diseño para PC, mobile y tabletas.

Un aspecto muy interesante de esta nueva tecnología es que no solamente cambia el diseño cuando cambia el ancho del dispositivo, sino que también se ajusta el tamaño de las imágenes.

He grabado un video para ilustrar lo que acabo de decir:

 2. Beneficios del Responsive Web Design

• Reducción de costos. Se reducen los costos ya que hasta hoy se debe hacer un portal para la Web y otro para dispositivos móviles. Esto origina mayores costos de creación y mantenimiento de la información.
• Eficiencia en la actualización. El sitio solo se debe actualizar una vez y se ve reflejada en todas las plataformas. Cuando tenemos los portales independientes para Web y Mobile se debe realizar la actualización dos veces lo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.
• Mejora la usabilidad y conversión. Esta tecnología aporta a la usabilidad y la conversión. Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante aumenta la conversión.
• Impacto en el visitante. Esta tecnología por ser nueva genera impacto en las personas que la vean en acción, lo que permitirá asociar a la marca con creatividad e innovación.

 3. Ejemplos de sitios creados con la tecnología Responsive Web Design

En un artículo llamado: Responsive Web Design: 50 Examples and Best Practices muestra excelentes ejemplos de la aplicación de esta tecnología. Los cuatro ejemplos que más me impresionaron son:
dConstruct 2011

Boston Globe

Food Sense

Deren keskin

4. Cómo construir un sitio con Responsive Web Design

Los que quieran profundizar en la creación de este tipo de portales les dejo tres referencias que considero bastante buenas:

• Responsive Web Design: What It Is and How To Use It
• A List Apart: Responsive Web Design
• Understanding the Elements of Responsive Web Design

A los que les gusta los video tutoriales les recomiendo dos (aunque son en inglés tiene la posibilidad de Closed Caption en español):

• Responsive Web Design: Fluid Grids: Introduction and HTML

• Webinar: Responsive Web Design for eCommerce

Para reflexionar:

Les  dejo con una pregunta para conocer su opinión:

¿Cuál es su opinión de esta nueva tecnología?

Los invito a dejar su opinión sobre este artículo o realizar preguntas que con gusto las responderé.