Guia web responsive

Responsive Web Design (Diseño Web Adaptable): sitios Web que se adaptan al dispositivo (PC, Mobile, iPad)

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

dConstruct 2011 ejemplo de Responsive Web Design

Boston Globe

Boston Globe ejemplo de Responsive Web Design

Food Sense

Food Sense ejemplo de Responsive Web Design

Deren keskin

Deren Keskin ejemplo de Responsive Web Design

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:

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

FUENTE: ecbloguer Guia web responsive

Contacta  o llámanos (93 811 10 46).

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies