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
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é.
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
Hola Mario,
Gracias por tu comentario.
Saludos,
Juan Carlos
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!
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
Muy buen articulo, solo falto informacion que empresas ofrecen ese servicio (para los que no son programadores, ni disenadores Web)
Hola Santiago,
Una empresa que está trabajando en el tema es ARKIX, donde laboro. Cualquier necesidad nos cuentas. Mi email es: juan.mejia@arkix.com
Saludos,
Juan Carlos
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.
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
Excelente noticia, ahora toca aprender los pasos para que se la web se vea bien en cualquier dispositivo!
Hola Jon,
Me alegra que te haya gustado.
Saludos,
Juan Carlos
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!
Hola Federico,
Gracias por el comentario.
Saludos,
Juan Carlos
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.
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
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/
Hola Alex,
Gracias por tu valioso aporte.
Saludos,
Juan Carlos
Encontré este trabajo de James Mellers que me pareció excelente: http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
¿Puedo publicar parte de tu artículo en nuestro blog con tu crédito?
Un abrazo a Marcelo Rincón, con quien tuve el honor de laborar una excelente temporada.
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
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.
Hola Manuel,
Muchas gracias por tu aporte.
Saludos,
Juan Carlos
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.
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
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.
Hola Juan Carlos,
Gracias por tu comentarios.
Saludos,
Juan Carlos
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.
Hola,
Mil gracias por tu comentario.
Saludos,
Juan Carlos
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
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.
Hola José,
Gracias por tu valioso aporte.
Saludos,
Juan Carlos
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.
Hola Lucas,
Gracias por tu excelente aporte.
saludos,
Juan Carlos
Pingback: Darle sentido a las soluciones de sitios web móviles - Online
Pingback: Guía de Responsive Web Design: todo lo que necesita saber sobre Responsive Web Design | Marketing Digital » Web Design
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.
Excelente aporte y excelente tecnología, muy buena solución del diseño de páginas web para diversos dispositivos.
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.
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).