Responsive Web Desgn

Cuando oí hablar la primera vez sobre el Responsive Web Design hace ya más de un año pensé, vaya…en este mundo de Internet no te puedes quedar dormido ni un momento!, porque no es que salgan cosas nuevas todos los años que debas estar aprendiendo, ¡Salen cosas todos los días!

Nota actualizada en 2015

Desde Abril de 2015 Google ha adaptado los resultados de su buscador en móvil para penalizar a aquellas páginas web que no estén adaptadas o no tengan una versión para otros dispositivos

Si has venido a parar por aquí es porque como yo no habías oído hablar sobre ello antes y quieres informarte, o porque quieres encontrar información técnica, o porque quieres saber si te merece la pena, todas estas preguntas me las hice…y muchas más, tanto yo como la gente que trabaja en desarrollo web en el grupo de empresas donde trabajo, hemos hecho una fuerte inversión en tiempo y recursos para adaptar muchas de nuestras páginas web a esta filosofía de diseño, contenidos y user experience.

Vamos a empezar a responder todas, e incluso a dar ejemplos de diseño, no corras a ver sólo tu parte, todo te va a dar una visión global.

 

¿Qué es el Responsive Web Design o Diseño Web Adaptativo?

Es una filosofía para el desarrollo de páginas web, de concepto y diseño. Cuando llegaron los móviles hasta el mundo online, se puso de moda crear páginas web adaptadas  y las url m.dominio, primero con lenguajes de marcaje diferentes al HTML y después, con la llegada de los Smartphones, adaptando los estilos CSS, ¿qué pasaba? , que tenías que hacer 2 sitios web completamente distintos.

  • Determinabas los objetivos de la Web.
  • Planificabas las funcionalidades.
  • Seleccionabas los contenidos que debía tener.
  • Desarrollo web y estilos css para PC, y también para móvil.

Y todo esto tenías que hacerlo x2, porque no son los mismos objetivos, ni puedes ofrecer las mismas funcionalidades, y por su puesto el desarrollo hay que adaptarlo.

Con el Responsive Web Design la planificación de objetivos, funcionalidades, contenidos…, vas a tener que hacerla igual (Un sitio móvil y de PC son consumidos de forma distinta), pero el desarrollo móvil va a poder aprovechar 100% todo lo que hagas para PC, y el mantenimiento… ¡ya no se duplica!.

Los grandes avances del Responsive Design son un único mantenimiento, para una correcta visualización no en un móvil, sino en todos los tipos de pantallas y resoluciones. Tu página Web se verá correctamente en tablets, phablets, smartphones, TV y por supuesto PC´s.

 

¡Estupendo! entonces…¿Cómo funciona el Responsive Web Design?

HTML5

Gracias todo a los maravillosos estilos CSS, estos benditos que empezaron aportando lo justo a los desarrollos Web, son ahora una parte fundamental para que veamos así de intuitivas, y así de exuberantes las páginas web que visitamos. Y por supuesto al  HTML5, ultima revisión del lenguaje básico de la World Wide Web.

La nueva versión CSS3 incluye entre sus novedades unas directrices que se llaman media queries, cuya función es explicarle al navegador, cómo debe aparecer una página web en los diferentes tamaños de resolución. Por lo general se están estableciendo ahora mismo 3 estándares, móvil (entre 320px y 561px), tablet (561px y 800px) y PC (superior a 800px).

¡Sigo sin enterarme!…bien… Imagínate que tienes un menú en la parte superior en la versión de PC que son 5 pestañas una al lado de la otra, a través de las media queries, le dirás que si la resolución de pantalla es menor de 561px, cómo no van a entrar todas, que ponga las pestañas una debajo de la otra, y que las haga un poco más estrechas.

 

¿Puedo ver un ejemplo de Resonsive Web Design? 

Por supuesto, veremos muchos más abajo, pero si tienes ya el gusanillo…

Lo primero que para ver la adaptación correctamente debes usar como navegador Chrome, Firefox, Opera e Internet Explorer 9 o superior (con Windows Vista o superior también, lo siento, así es Microsoft).

Ahora con cualquiera de ellos visita http://www.bostonglobe.com/ y con el selector vete haciendo más pequeña la ventana, verás como se van adaptando los contenidos al tamaño que vas dejando, que podría ser la resolución de pantalla.

 

Diseño Web Adaptativo Tutoriales

Aquí los tienes:

¿Merece la pena incluir en mi estrategia de Marketing Digital la adaptación de contenidos y mobile?

España líder en uso de Smartphones

España es el líder europeo en uso de smartphones con un 66% de penetración, lo cual quiere decir que el consumo a través de múltiples dispositivos en nuestro país es mucho más alto que la media.

Para 2015 el acceso a Internet desde dispositivos móviles habrá superado al acceso vía ordenador, ya no van a acceder mayoritariamente a tu página Web desde un PC, con lo cual si no estás adaptado, la experiencia de usuario será negativa, tus objetivos no estarán bien orientados para el público que te visita, y el rendimiento de tus  páginas Web irá decreciendo.

Con lo cual, tal como empezaba el módulo de marketing móvil del Máster que yo realicé, “si tu estrategia no incluye mobile, no está completa“.

 

Estrategias de Marketing en las que es imprescindible el uso del Responsive Design

Marketing de Contenidos: Por supuesto, existen muchas soluciones con esta tecnología integrada para muchas de las estrategias que quieras poner en marcha. Por ejemplo, todas las opciones de creación de blogs como Blogger, WordPress o Tumblr están adaptadas usando media quieries o temas basados en Responsive Web Design. Los usuarios consumimos los contenidos ya desde cualquier parte, en esta parte está muy cerca la solución.



SEM y SEO: Cada vez se busca más en la Web desde dispositivos móviles, y eso Google lo sabe, por eso premiará en los resultados orgánicos y en el Quality Score la adaptación a todas las resoluciones.

E-commerce:  El 56% de los usuarios de tabletas las utilizan para realizar compras online, con lo cual ya estás viendo el volumen de ventas que puedes estar perdiendo como no adaptes tu estrategia.

Todos, absolutamente todos los sitios Web hoy en día, realizan conversiones a través de dispositivos móviles, algunos usuarios aún las realizan tediosamente en sitios no adaptados (en un porcentaje muy bajo), pero algún día se cansarán, y encontrarán otras páginas web donde hacerlo más fácilmente.

Existen también muchas opciones para montar tu tienda online con temas y tecnologías que están adaptadas, Magento, Prestashop, Shopify… de ellas hablaremos también más adelante en Un Mix de Marketing Digital.

 

Ejemplos de sitios Web realizados con Responsive Web Design

Realmente cuesta encontrar ejemplos buenos de Responsive Web Design, sobre todo en castellano, por lo que si encuentras más, te animo a que me los recomiendas comentando el artículo.

Quizá sea complicado encontrarlos porque es una filosofía que aplica un diseño que cuesta trabajo poner en marcha, a pesar de que plataformas de desarrollo como Dreamweaver vienen con módulos específicos para crearlas, y también los nuevos CMS como WordPress tienen multitud de plantillas.

Para crear un filtro y ofrecer unos ejemplos de diseños relevantes he creado mi propia lista con 10 ejemplos de responsive web design sobresalientes de los que sí podrás sacar muchas ideas.

En ella podrás ver cómo lo han solucionado empresas del sector del:

  • Marketing Online
  • Estudios de arquitectura
  • Viajes

¿Tienes alguna duda sobre el Responsive Web Design?¿Quieres empezar y no sabes por dónde? ¿Tienes algo que quieras contarnos? Puedes comentar abajo sobre ello

The following two tabs change content below.

Jon García Tajadura

Experto en la creación de Estrategias Digitales. Me peleo a diario con diferentes áreas del Marketing Online. Blogger pasional y creador de contenidos.

4 comentarios en “Responsive Web Design. Diseño web adaptativo ya! ¿Un tutorial para empezar?

  1. Muchas gracias por la información!, esto es algo realmente muy bueno e interesante, y espero poder aplicarlo para el proyecto final de mi carrera, de ingeniería en sistemas, muchas gracias!

  2. Muchas gracias Nicolás, me alegro de que te haya servido la información. El tema del Responsive Web Desing es algo que da para contar muchas cosas, de hecho no descarto crear un tutorial yo mismo. Un saludo amigo!!

  3. Soy egresado de la carrera de Ing. en Sistemas, y hasta ahora no había escuchado sobre este tema en particular.

    Soy desarrollador web y la verdad me doy de topes cada vez que ando creando páginas por lo mismo de las resoluciones de pantalla en varios monitores y en móviles.

    Me gustaría ver si hay un tutorial con ejemplos de cómo crear una página con Responsive Web Design, aunque veré los que agregas aquí para saber más del tema.

    Muchas gracias, me he desempolvado un poco sobre este tema de desarrollo.

    1. Hola Eduardo, me alegra que te haya podido servir el artículo para conocer la filosofía Responsive Design. Lo cierto es que existen infinidad de tutoriales por Internet, los que yo enlazo aquí los usé en su momento y me sirvieron.

      De todas formas te comento, si desarrollas con un sofware tipo Dreamweaver o Visual Studio sus nuevas versiones vienen preparadas para soportar el Responsive Web Design con otros nombres, Diseño de Cuadrícula Fluida o similares.

      Si desarrollas con editores de texto tipo Notepad++ tendrás que aprender del uso de las Media Queries y el HTML 5, es lo básico para esto.

      Otras plataformas como WordPress, Drupal o Joomla tienen plantillas creadas con diseños adaptados según esta filosofía de diseño web así que es muy fácil integrarlo en tus desarrollos.

      Suerte en el camino amigo!!

Deja un comentario

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