¿Qué es diseño responsive?
El diseño responsive es aquel que permite la correcta visualización de una página web en cualquier dispositivo, sea cual sea el tamaño de su pantalla.
Antes de la llegada de los smartphones y las tablets, una web solo se podía visualizar en una pantalla conectada a un ordenador, por lo que con diseñarla para verse bien en ellas era suficiente.
Con la llegada estos dispositivos todas las webs han tenido que adaptarse a los pequeños tamaños de sus pantallas.
La versión de escritorio de una web se ve muy pequeña en un teléfono móvil, además de que en algunas ocasiones se carga demasiado contenido, ralentizando la velocidad carga cuando se abre desde un smartphone y consumiendo demasiados datos de internet.
El diseño responsive hace que todos los elementos de una página se adapten a todo tipo de pantallas, recolocándolos para que se puedan ver bien sin necesidad de hacer zoom, o incluso eliminando todos aquellos que sean prescindibles para aligerar la carga de la web.
¿Por qué es tan importante el diseño responsive?
Hoy en día. el número de personas que navegan por internet desde el móvil es superior al número de personas que lo hacen desde el ordenador, por lo que una web que no tenga un diseño responsive tiene pocas posibilidades de “sobrevivir” en un escenario así.
Si un usuario entra en una página que no está adaptada a móviles, lo más probable es que busque otra que sí lo esté porque es mucho más fácil encontrar la información que está buscando.
Por otra parte, es totalmente necesario si quieres cuidar el SEO de tu web, ya que Google penaliza a las webs que no están preparadas para esta nueva era, precisamente por la mala experiencia de usuario que conlleva una web así.
Por lo tanto, si quieres competir con el resto de webs que están luchando por los primeros puestos en Google, necesitas tener una web responsive sí o sí.
El siguiente nivel en cuanto a optimización para dispositivos móviles sería contar con una versión AMP de la web, pero no hay que confundir el diseño responsive con AMP. Tener instalado AMP no significa que la web sea responsive.
¿Cómo puedo hacer que mi web sea responsive?
Para que una web sea responsive necesita un código CSS que especifique los estilos y posiciones de los elementos para diferentes tipos de pantalla.
Si tuvieras que hacer una web desde cero tendrías que definir los estilos de algunos elementos al menos tres veces, una para la versión de escritorio, otra para la versión para tablets, y otra para la versión para smartphones.
Pero si utilizas WordPress, no te tienes que preocupar absolutamente de nada, ya que la mayoría de plantillas (por no decir todas) tienen un diseño responsive. y con solo instalarlas, tu web ya se verá bien en cualquier dispositivo.
Aquí te dejo mis plantillas preferidas con las que conseguirás unos resultados excelentes, aunque puedes buscar entre las miles que existen en el mercado, asegurándote antes de adquirirla que tiene un diseño responsive, aunque hoy en día sea raro encontrar alguna que no lo tenga.
¿Cómo puedo saber si una web tiene diseño responsive?
Para saber si una web tiene diseño responsive, en principio bastaría con acceder a ella desde un smartphone. Si ves todos los elementos bien sin tener que forzar la vista o hacer zoom, lo más probable es que sí que lo sea.
Aunque también existen herramientas que te dicen si una web está preparada o no para dispositivos móviles.
Una de ellas es Mobile-Friendly Test, del propio Google. Lo único que tienes que hacer es escribir la URL de la web y hacer clic en “Ejecutar la prueba”.
La herramienta analizará toda la web y al cabo de unos segundos te dará el resultado. Si la web es responsive te mostrará un mensaje como este:
