Guía de Responsive Web Design: todo lo que necesita saber sobre Responsive Web Design

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

Imagen tomada de Sortega.com

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

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é.

 

37 comments

  1. Mario German Reyes   •  

    Creo que es muy importante este tipo de diseño, ya que incita a el ingreso a un sitio desde dispositivos moviles, y pues esta se define como la tendencia mas fuerte en diseño para el 2012. saludos @mager19

  2. Guillem Ganduxé   •  

    Mi más sincera enhorabuena por este excelente artículo. Lo que falataría comprobar es si los costes extra de programación compensan las demás ventajas que ofrece esta tecnología.

    Saludos!

    • Marketing Digital   •     Autor

      Hola Guillem,

      Los costos no son altos y cada día bajan más ya que en mi opinión la tecnología se generalizará.

      Saludos,

      Juan Carlos

  3. Santiago Osorio   •  

    Muy buen articulo, solo falto informacion que empresas ofrecen ese servicio (para los que no son programadores, ni disenadores Web)

  4. Carlos barrios   •  

    Creí entender que solo funciona con pc? Siendo el Ipad el dispositivo en tableta mas común en la actualidad, cual es la razón para que no pueda adaptarse?, cuando ingreso de mi Ipad a ciertas paginas muchos de sus botones y acciones no funcionan correctamente o no son visibles, pasaría lo mismo con este tipo de formato para las paginas?, una pagina que ya está hecha tendría que volverse a hacer o es posible adaptarla para esta nueva forma de aplicación? Gracias.

    • Marketing Digital   •     Autor

      Hola Carlos,

      He hecho la prueba con iPad en varios de los ejemplo y me funcionó bien.

      Me cuentas cual sitio no te funcionó para revisar para tratar de investigar la causa.

      Saludos,

      Juan Carlos

  5. Jon   •  

    Excelente noticia, ahora toca aprender los pasos para que se la web se vea bien en cualquier dispositivo!

  6. Fede   •  

    Excelente articulo! Cada día podemos observar con mas énfasis la importancia de estar al día con las nuevas tecnologías y herramientas que se nos proveen, como así también tratar de experimentar y poder aportar nuestro grano de arena a este fascinante mundo del desarrollo web. Desde mi punto de vista este es un gran aporte el cual nos permite ahorrar mucho tiempo y simplificar al máximo las tareas de desarrollo. Esperemos que la gran mayoría se de cuenta de lo importante que es adoptar estas nuevas formas de trabajar y poder de una vez por todas lograr webs limpias y con estándares bien definidos para la internet. Sin dudarlo opino que tanto HTML5, CSS3 y Responsive Web Design son los conceptos que mas van a estar en alza en este 2012.
    Nuevamente, excelente el post! Saludos!

  7. Carlos Aguilera   •  

    Excelente articulo. aunque siento hay un pequeño detalle, que en lo personal, me molesta; si bien es sabido que existe gran cantidad de usuarios que aun utilizan navegadores con tecnología obsoleta (IE6, IE7 incluso IE8). En dichos navegadores hice las pruebas con los sitios mostrados y no funciono, IE9 es una belleza en comparación con los anteriores mencionados.

    Aunque no todo esta perdido, para los que nos dedicamos a esto, tenemos que educar a nuestros clientes, y guiarlos, además de utilizar algunas formas (por ejemplo, mensajes en pantalla) donde “alerten” al visitante del sitio sobre las vulnerabilidades al usar navegadores no actualizados.

    Saludos y muy buen aporte.

    Gracias.

    • Marketing Digital   •     Autor

      Hola Carlos,

      Gracias por tu valioso aporte, estoy de acuerdo contigo que antes de tomar una decisión de cambio debemos estar tranquilos con la compatibilidad de la tecnología.

      Saludos,

      Juan Carlos

      • alex   •  

        Existen diversas herramientas y librerías basadas en JS para lograr que las las versiones de IE anteriores al 9 soporten los más recientes estándares técnicos y tendencias de diseño, como el diseño web responsivo:

        https://github.com/scottjehl/Respond
        Habilita el uso de @media-queries desde IE6 en adelante.

        selectivizr.com
        Para habilitar el uso de selectores CSS3 en ie 6 en adelante.

        http://www.google.com/chromeframe?hl=es
        Google Chrome Frame es un complemento gratuito que ayuda al usuario a disfrutar de modernas aplicaciones web HTML5 en Internet Explorer

        modernizr.com
        code.google.com/p/html5shiv/

    • Marketing Digital   •     Autor

      Hola Emmanuel,

      Quedas autorizado,

      Te recomiendo no ponerlo exactamente igual ya que Google lo puede calificar como contenido copiado y te afecta tu SEO.

      Saludos,

      Juan Carlos

  8. Manuel   •  

    Esta muy claro tu explicación, yo me estoy empezando a dedicar de lleno al diseño web y por la tendencia de la tecnología se va a utilizar demasiado, hay que reconocer que también como esta tecnología existe también Mobile First que es simplemente crear primero el diseño para dispositivo móvil y luego para desktop.

    Saludos y gracias por tu aporte.

  9. Oscar González   •  

    Esta tecnologia es muy buena y pues de mantenimiento rapido y sencilllo. Solo existe un problema y es en el consumo de bits en dispositivos moviles puesto que las imagenes aunque cambien de tamaño no cambia su peso y esto consume tanto en rendimiento en el dispositivo como datos en el plan del usuario.

    Por esto aunque es una tecnica muy buena tambien se recomienda la de mobile first para que sea optimizado el contenido para dispositivos primero y luego si para pc. Esto porque cada vez mas la web se consume de una mayor parte en dispositivos mobiles. Es la tendencia que ha ido en aumento en los ultimos años, sin que esto signifique que la web en pc desaparesca solo que ya no es donde mas se consume la web.

    Por ultimo me gusto bastante el post gracias por compartir esta informacion.

    • Marketing Digital   •     Autor

      Hola Oscar,

      Gracias por tu valioso aporte.

      Estoy completamente de acuerdo contigo, considero que esta es una buena opción para una empresa pequeñas con sitios simples. Para una empresa grande o un sitio de Comercio Electrónico esta no es una buena opción ya que el árbol de contenidos de un sitio mobile no debe ser igual al del sitio Web.

      Saludos,

      Juan Carlos

  10. Juan Carlos   •  

    Un excelente articulo, con esto ahora podremos crear una sola pagina y que esta sea funcional en cualquier dispositivo.

    Los artículos adjunto, están muy interesantes.

    Gracias por el aporte.

  11. Dar a conocer esta tecnología e implementarla es vital teniendo en cuenta el aumento de dispositivos móviles que se viene produciendo.
    Es verdad que las páginas pesan más, pero mientras se vayan subsanando esos errores, el implementar dicha tecnología debería ser tenido en cuenta por las empresas que quieran ofrecerles a sus clientes una navegabilidad mobile en condiciones, ya que el no poder visualizar una web a través de un dispositivo móvil, con todos los que hay y habrán en un futuro inmediato, no hace otra cosa que disminuir la posibilidad de establecer una comunicación en condiciones.

  12. Pingback: 22 plantillas web gratis Responsive Web Design para Wordpress, Joomla, Drupal y e-commerce: los mejores templates (themes) gratuitos | Blog Juan Carlos Mejía Llano

  13. Jose S   •  

    Yo creo que con esta tecnologia se ven beneficios como una sola hoja de estilo, menos detección sobre el User Agent y también la compatibilidad, este ha sido siempre una piedra en el zapato ya que los navegadores no todos renderizan el contenido de la misma forma. Con este avance el desarrollo es más centrado.

  14. Lucas Lorenzo   •  

    Está muy bueno que difundan este tipo de contenidos, igualmente quiero desmitificar algunas cositas, ya que creo que hay algunos errores conceptuales.
    El responsive Web Design NO es una tecnología, es un método, una forma de abordar los trabajos web, que surge de la combinación de cosas que existen hace años, ni las media-queries son nuevas ni el diseño fluido, esto es una gran combinación de estos y otros conceptos, como bien mencionaron, el “mobile first” por ejemplo, que no significa crear para mobile y luego vemos jeje, sino partir de un diseño 100% funcional en un celular básico (sin siquiera soporte js) y a partir de allí dotar el sitio con funcionalidades y características extra a medida que el soporte lo permite.
    Otro gran mito es que el sitio es más pesado, todo lo contrario! Hay formas de hacer que el sitio se ajuste al dispositivo cargando css alternativo (de eso se trata no), lo que bien aprovechado permite que, por ejemplo, no carguemos una imagen en su tag “<img", sino que la carguemos como fondo de un div por ejemplo, y dependiendo de la resolución de pantalla, el css llamará a la versión light o hd de la misma imágen, con la direrencia de que a baja resolución traeremos una imagen de solo unos kb como fondo, y en una pantalla de 1092px de ancho traeremos la imagen HD. También hay mejoras que podemos hacer desde nuestro servidor (si nuestro sitio es dinámico) como solo cargar el js si el navegador lo soporta, etc.
    Bueno, ese fue mi pequeño aporte, espero le sirva a alguien para aclarar alguna duda.

  15. Pingback: Darle sentido a las soluciones de sitios web móviles - Online

  16. Pingback: Guía de Responsive Web Design: todo lo que necesita saber sobre Responsive Web Design | Marketing Digital » Web Design

  17. Carlos Sánchez   •  

    Muy buen artículo, de mucha utilidad para los que somos web designers, ya que siempre es importante estar a la vanguardia en lo que hacemos.

    Está de más decir que lo pondré en práctica en mi próximo proyecto web.

    Saludos desde Chile.

  18. Jonathan Guisao S.   •  

    Excelente aporte y excelente tecnología, muy buena solución del diseño de páginas web para diversos dispositivos.

  19. Daniel   •  

    Muy buena nota
    Recuerdo cuando había que diseñar una web para Netscape Navigato, otra gemela para Internet Explorer y usar un script que detectase el navegador del usuario para cargar una u otra.
    Esta tecnología me parece maravillosa. Sin dudas es el gran avance de HTML.
    Solo falta que desaparezca IE que suele ser siempre conflictivo.

  20. Kevin Mamaqi   •  

    Hola, lo primero de todo, buen articulo. En segundo lugar decir que yo personalmente pienso que no es compatible y util para todos, soy usuario de Joomla! y puedo asegurar que cada componente trae consigo .css y .js para aburrir. ¿Se pueden adaptar? Sí, pero es muy costoso, más sí se actualizan cada cierto tiempo.

    Para mi es más útil cargar una plantilla única y 100% personalizada y un diseño móvil modesto que permita Lo básico e importante, ya que es imposible poder trabajar con un sitio que tienes que actualizar casi al completo cada 6 meses o año.

    También es verdad que para un simple blog es mejor aplicar un “diseño responsable”, fácil de mantener y realizar.

    Lo que quiero decir es que es importante tener en cuenta el móvil, pero hacer distinciones y saber cuando utilizarlo, no asegurar algo como ai fuese Lo mejor (como se lleva haciendo desde hace un tiempo con el RESPONSIVE WEB DESIGN).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>