¿Qué es el responsive design y cuál es su importancia?

En lugar de construir un sitio web para cada tipo de dispositivo (smartphone, tablet, ordenador desktop, laptop e incluso, hoy en día, para smart TV), se crea una sola website utilizando CSS3, media queries y un layout con imágenes flexibles.

¿Qué es el responsive web design?

El responsive web design o diseño adaptativo, es la técnica que se usa en la actualidad para tener una misma web adaptada a las diferentes plataformas que nos brinda la tecnología: ordenador, tablet y smartphone. Consiste en una serie de hojas de estilo en CSS3, que usando el atributo “mediaquery” convierten una web ordinaria en una web multiplataforma capaz de adaptarse a todos los tamaños que existen, ofreciendo una experiencia para el usuario mucho más amena y cubriendo las necesidades de nuestro público. Atrás quedan las webs que vistas en un Smartphone se tenían que ampliar para poder leer algo.

¿Por qué tu web debería ser responsive?

Las ventajas del diseño adaptable son muchas y leyendo cuales son, seguro que te convences para convertir tu web en una web multiplataforma:

• Mejor experiencia de usuario. Eso repercute en la opinión que los usuarios tienen de tu sitio web y el uso que le darán a ella. Mejorará tanto tu imagen de marca como el tiempo de permanencia en la web y aumentará la tasa de rebote entre páginas de tu web.
• Se acabaron los contenidos duplicados. Si usabas una versión móvil para que los usuarios que accedían a tu web vieran el contenido adaptado al dispositivo, era perjudicial para tu SEO, ya que eso creaba contenido duplicado y por lo tanto Google penalizaba a tu web. Un diseño adaptable evita este problema ya que es el mismo contenido que se organiza de manera distinta según el dispositivo en el que se vea.
• Se reducen los costos de desarrollo y mantenimiento de la web. Al usar la misma plantilla para todas las plataformas, se reduce la inversión en mantenimiento y desarrollo, ya que un sólo cambio repercute en todas las versiones.
• Aumenta la viralidad. Un reciente estudio certifica que el 90% de los accesos a las redes sociales se hacen a través de dispositivos móviles, eso significa que si un usuario accede a nuestra web a través de un Smartphone, seguramente tenga las aplicaciones sociales abiertas y si quiere compartir algo, es mucho más rápido y natural.

Por supuesto que no todo son ventajas, también hay inconvenientes, como por ejemplo, el costo de desarrollo inicial es mayor al de una web normal ya que su dificultad técnica es mayor, o que el tiempo de carga de las imágenes es mayor debido a que usa las mismas en web que en un ordenador por qué sólo escala el tamaño y no usa unas específicas. El diseño adaptable se está generalizando a pasos agigantados y eso ha producido varios desarrolladores creen frameworks (aplicaciones preconfiguradas) para que no se tengan que crear las páginas adaptativas desde cero, nos facilitan la vida y hacen que todo el proceso de creación sea mucho más fácil para los desarrolladores. Uno de los más generalizados es Bootstrap, un framework creado por el equipo de desarrollo de Twitter y de código abierto, muy usado por desarrolladores freelances. Foundation es otro framework muy popular el cual ellos mismo definen como “el framework más avanzado del mundo”. Y finalmente HTML5 Boilerplate, el framework que usan más marcas conocidas como Google, Microsoft, Nike.