El diseño responsive no es sólo una tendencia actual del diseño web móvil, sino que es una forma de diseñar cualquier web o blog que cada vez es más necesaria, en un mundo presente y futuro, en el que el acceso a la red llega desde múltiples tipos de dispositivos y tamaños de pantallas.
El acceso a la red desde dispositivos como Tablets, Smartphones, Smart TV, Portátiles, Sobremesa, etc. confirma la disparidad de pantallas, tamaños y resoluciones.
Una complejidad para el diseñador web a la que el diseño responsive viene dando respuesta, principalmente desde el año 2013.
Precisamente los diferentes tamaños de las pantallas en los dispositivos son uno de los principales factores por los que el diseño responsivo -de aquí en adelante responsive- es indispensable para cualquier proyecto de web o blog.
¿Qué es el diseño Responsive (diseño web móvil)?
Se trata de un modo y conjunto de técnicas para diseñar webs que se adapten a cualquier tipo de resolución de pantalla, reestructurando los elementos y contenidos que contienen para de este modo adaptarlos a la misma y además consiguiendo optimizar el espacio disponible dentro la propia pantalla.
"El objetivo final de todo diseño responsive es dotar a una web de una buena experiencia de usuario"
Para lograr adaptarse a las exigencias de cada tamaño de pantalla se utilizan “media queries” y hojas de estilo que indican las CSS (Cascading Style Sheets – Hojas de estilo en cascada) necesarias a tomar en función de cada tamaño de pantalla.
Hay que tener en cuenta que existe también otro término conocido como web adaptativo o adaptable y que, en realidad, no es exactamente lo mismo. En ese caso se establecen unos anchos fijos predeterminados que no se adaptan a resoluciones de pantallas exactas sino más bien a estándares del tamaño de pantalla de dispositivos como puede ser un monitor o un smartphone.
Algunas ventajas de ofrecer una mejor experiencia de usuario
A continuación te cuento algunas de las ventajas que un diseño responsive reporta respecto a aquello que es su principal razón de ser, la experiencia de usuario.
Acceso completo a la web:
Todo el contenido y funcionalidades que ya estén presentes en escritorio también están disponibles en dispositivos móviles, favoreciendo que, independientemente de desde donde se acceda, el contenido y el uso pueda ser el mismo por parte del usuario.
Diseño web móvil que aumenta la viralidad:
Dado que el diseño y adaptación de una web para móvil facilita el acceso desde dispositivos en los que el usuario está cada vez más tiempo conectado a redes sociales, es obvio que es más fácil fomentar la viralidad de los contenidos de una web en diferentes canales.
Disminuye la tasa de rebote de tu web:
Uno de los principales aspectos a cuidar y tener en cuenta en una web o blog es reducir la tasa de rebote, una mejor experiencia de usuario afectará de forma directa a que los usuarios permanezcan más tiempo en tu web.
Reducción de costes y necesidades de desarrollo web:
Con un diseño web móvil responsive no necesitarás de la creación de URLs, webs y aplicaciones web alternativas para que tus usuarios puedan acceder a tus contenidos desde dispositivos móvil, al mismo tiempo, la gestión y administración se simplifica, lo que repercute en menos gastos.
Facilita la analítica web:
Ya no es necesario seguir al usuario por diferentes webs, además de simplificar la gestión y análisis de embudos de conversión.
Favorece el posicionamiento SEO:
Toda estrategia SEO se concentra en un único sitio. No es necesario tener diferentes URLs y a Google se lo ponemos un poco más fácil a la hora de indexar los contenidos.
De este modo, no se duplican contenidos que de otro modo y diseñando por ejemplo una web móvil específica sería posible que se marcara como tal por parte del buscador.
Algunos datos por los que tu web necesita ser responsive
Lapenetración de dispositivos móviles en España es superior a cualquier otro país Europeo por más de 10 puntos, según el informe realizado por la fundación telefónica.
Según ese mismo informe en 2014 más de 21,4 millones de españoles han accedido a Internet en movilidad, lo que representa 4 millones más que en 2013.
Todos los datos indican un espectacular ascenso del protagonismo del uso de dispositivos móviles en España, pero en especial del Smartphone.
Así pues según un informe del INE en España durante 2014 el smartphone ya se había convertido en la primera fuente de acceso a internet, un 81% frente al 72% que sigue accediendo desde ordenador de sobremesa, portátil o tablet.
La tendencia a nivel global es imparable y para 2017 se prevé que habrá más conexiones desde dispositivos móviles que usuarios según el informe “Top Consumers Trends of 2015” de Euromonitor International.
Y ante la evolución y tendencia actual Google ha tomado nota y desde el pasado 21 de Abril todos los sitios web que no son responsive se están viendo penalizados en las búsquedas realizadas desde el móvil, perdiendo posiciones y mostrándose además al usuario una significativa advertencia de que dicho sitio no está adaptado.
"Se estima que las webs que no están adaptadas pueden llegar a estar perdiendo un 20% de sus visitas"
Si tu web es un ecommerce debes aprovechar la oportunidady prestar atención a la tendencia actual también hacia el m-commerce(ventas accediendo desde dispositivos móviles), pues aunque en España en ventas aún estamos por debajo de la media, se estima que a nivel global para el 2019 un 45% de todas las compras de internet se realicen desde dispositivos móviles.
¿Cómo comprobar si mi web es responsive?
Hay una forma fácil y rápida de hacer la comprobación si estás navegando desde el escritorio de tu ordenador, simplemente reduce con tu ratón la ventana del navegador y podrás comprobar si realmente la página web se adapta al menor tamaño.
Unos aspectos a tener en cuenta tanto si haces la comprobación desde escritorio o desde el propio dispositivo móvil son:
●Que no sea necesario hacer scroll horizontal, en dispositivos móviles este es uno de los factores que más penalizan.
●La aparición de nuevos menús desplegables fáciles de accionar sustituyendo a los clásicos de navegador web en escritorio.
●Ajuste preciso de todos los elementos al tamaño de la pantalla…
●Tamaño de las fuentes legibles.
●Botones y fuentes clicables con fácil acceso.
Otra alternativa más de comprobación de tu diseño web móvil desde el propio escritorio si usas Chrome es acceder a la consola javascript.
Más Herramientas> Consola Javascript > Clicar en “Toggle Device Mode” > Seleccionar del desplegable el dispositivo móvil que queramos.
Mediante esta utilidad podemos saber y comprobar exactamente cómo se muestra nuestra web en diferentes dispositivos móviles.
Pero si lo que quieres es asegurarte que Google no te penaliza te recomiendo que le pases este test de la propia Google a tu web con el que tras ingresar la URL de tu web será analizada y se te indicará si tiene un diseño web móvil optimizado.
Otras webs que te pueden servir para estas comprobaciones son:
En definitiva, tu web debe ser responsive
Internet está dejando atrás las páginas web tal y como las conocíamos hasta hace poco para adaptarse a un entorno cambiante, con multitud de diferentes tipos de accesos que condicionan en buena medida el diseño web y la forma de mostrarnos al usuario.
Por suerte plataformas de CMS como WordPress permiten facilitar mucho las cosas, no requiriendo de grandes recursos ni conocimientos para hacer uso de diseño responsivo.
Los comportamientos de los usuarios están cambiando, es responsabilidad tuya adaptarte a ellos y ofrecer mejoras en la usabilidad de tu diseño web móvil. De no ser así, tus objetivos con tu web estarán irremediablemente lastrados.
Foto ( Hand with tablet flat responsive design): Shutterstock