Seguro que habrás oído hablar alguna vez del responsive design o diseño responsivo. Hoy en día es un término que suena mucho, voy a empezar este post explicando por qué.
Los medios por los cuales navegamos por internet han cambiado, hace unos años tan solo navegábamos por internet a través de nuestro ordenador de casa, y veíamos las webs que accedíamos únicamente desde nuestro monitor. Esto ha cambiado drásticamente en los últimos años, y el uso de los dispositivos móviles para navegar por internet está claramente en aumento. Cada vez hay más Smartphones o Tablets en el mercado, y cada vez se usan más para navegar por internet. Dependiendo de la web el porcentaje varía, pero en muchos casos, los dispositivos móviles suponen la mayor parte de las visitas de una web.
Estos dispositivos tienen unas características diferentes que afectan sensiblemente a la hora de visualizar los contenidos que accedamos a través de ellos, como puede ser el tamaño de la pantalla o la velocidad de conexión que emplean muchos de ellos. Todo esto ha provocado que haya que tener muy en cuenta los dispositivos móviles en el diseño de nuestra web.
La importancia del diseño responsive
La capacidad de nuestra web de adaptarse a todos los dispositivos que la accedan cada vez es más interesante y útil, y nos ayudará a que nuestra web sea usable para todo el mundo que la acceda. La experiencia de cada vez más usuarios que acceden a nuestra web con el móvil (por ejemplo) empieza a ser clave para que la web cumpla el objetivo marcado.
Básicamente, cuanto más usable sea nuestra web para la persona que la visita, más posibilidades hay de que esta persona acabe haciendo lo que esperamos que haga: comprar un producto, dejarnos su email para que podamos contactarle, o simplemente interesarse por nosotros. Por esto, hoy en día se hace necesario adaptar nuestras webs para que cualquier persona pueda accederla sin ningún tipo de dificultad.
Precisamente, el término de responsive design hace referencia a la serie de características que tiene el diseño de una plantilla o una web para adaptarse y visualizarse de una manera óptima en cualquier dispositivo que la acceda. Como imagináis, con el incremento de uso de los móviles para navegar, este tema tiene cada vez más importancia, y está completamente fundamentada. No podemos dejar de lado ese porcentaje cada vez más alto de usuarios que acceden a través de su Smartphone o Tablet.
¿Cómo funciona responsive design?
Como he comentado, una web o diseño responsive es una web que se adapta al dispositivo que lo acceda. Esto lo consigue la plantilla con una serie de técnicas que incluye su implementación, y que le permite tener las siguientes características:
1- Adaptación del ancho de la web al ancho del dispositivo que la accede. Esto hace que nunca aparezca un scroll horizontal, que es molesto y dificulta la visualización para los usuarios de móviles o dispositivos de un tamaño más reducido. El usuario de dispositivo móvil nunca se va a tener que desplazar por la pantalla horizontalmente, lo cual tiene gran importancia en términos de usabilidad.
Pack Tienda Storebox vista desde PC
Pack Tienda Storebox visto desde un Smartphone
Las dos imágenes anteriores se corresponden a capturas hechas del Pack Tienda Storebox, hechas desde un PC portátil y un Smartphone Samsung Galaxy S2. Como se puede apreciar, la web se adapta perfectamente al ancho del dispositivo, y en ningún momento aparece un scroll horizontal. De esta forma, se evita que el usuario de móviles “se pierda” por la pantalla al visualizar la web.
2- Reestructuración de los elementos de la web dependiendo del ancho del dispositivo. No se trata tan sólo de que se ajusta el ancho. También se reestructuran los contenidos (las columnas, los módulos, etc) de forma que se disponen de una manera en la cual se ven los contenidos perfectamente en todas las circunstancias, y la navegación es fácil para el usuario desde todos los dispositivos.
Layout de 4 columnas en el Pack Tienda Storebox desde PC
Layout 2 columnas en el Pack Tienda Storebox desde Smartphone
Como se puede apreciar, la plantilla reestructura los contenidos para adecuarlos perfectamente al dispositivo. En el móvil, con el objetivo de que se mantenga el tamaño de la imagen de los productos, el número de columnas se reduce a 2.
3- Cambio del aspecto de ciertos elementos de la web, para adecuar ciertos comportamientos de la web al dispositivo en cuestión. Dependiendo del dispositivo que acceda la web, ésta mostrará determinados elementos (como puede ser el menú) de una manera diferente para optimizar la visualización y la usabilidad.
Menú y carrito del Pack Tienda Storebox visto desde un PC
Menú y carrito del Pack Tienda Storebox visto desde un Smartphone
Como veis, la disposición de ciertos elementos ha cambiado. Si accedemos desde el móvil, el menú pasa a ser un botón que si pinchamos se desplegará. Esto tiene el objetivo de ahorrar espacio, ya que en este caso el ahorro de espacio y carga de elementos de la web tiene más importancia.
¿En qué nos va a beneficiar el diseño responsive de nuestra web?
Son muchas las ventajas que tiene este tipo de diseño, y hemos repasado en este post algunas de ellas. Resumiendo, las mejoras que nos va a aportar este tipo de diseño en nuestra we:
Mejoras en usabilidad de la web, que influyen directamente en los resultados y los objetivos de nuestra web.
Simplicidad y sencillez de mantenimiento con respecto a otras soluciones de optimización para dispositivos móviles. Con responsive design tenemos una sola web y plantilla, lo cual a la larga es sencillo y económico.
Aumento de la velocidad de carga, ya que el hecho de que se reestructuren o cambien ciertos contenidos dependiendo del tamaño del dispositivo que lo accede, hace que los dispositivos móviles (que generalmente trabajan con conexiones móviles más lentas) carguen la web más rápido porque tienen menos elementos que descargar para generar la web.
No afecta negativamente al SEO, ya que las mismas páginas son las mismas urls, y no vamos a tener varias urls para referenciar a la página en los diferentes dispositivos. De esta manera estamos evitando duplicar los contenidos, lo cual será beneficioso para el posicionamiento de nuestra web.
Ejemplo: Pack Tienda Storebox
Un ejemplo de web con diseño responsive es el Pack Tienda Storebox. Si lo accedéis desde diferentes dispositivos, comprobareis que se visualiza perfectamente y la navegación es cómoda desde cualquiera de ellos. Pincha aquí para acceder a la demo del Pack: http://demopacktienda.webempresa.eu/storebox
En el Pack Tienda Storebox podéis ver en acción todas las características mencionadas en este post. Probad accederlo desde un dispositivo estándar (ordenador o portátil), o desde un dispositivo móvil (Smartphone o Tablet), y comprobareis las ventajas de este tipo de diseño.En el siguiente vídeo explico sobre el Pack Tienda Storebox las características mencionadas en el post, espero que os ayude a comprender este concepto.