Cómo saber si una página web es responsive

¿Qué es el diseño web responsive?

El diseño web responsive es una técnica de diseño web que busca presentar el contenido de una web de forma correcta en todos los dispositivo que accedan a esa web.

Es decir, si se accede desde un móvil, una tablet o un ordenador, el contenido debe estar perfectamente legible y presentado, garantizando una buena experiencia de usuario.

¿Cómo se hace una web responsive?

A través de CSS y con la ayuda de las media queries.

Actualmente existen múltiples opciones que ayudan mucho a conseguir una web responsive y prácticamente sin tocar código CSS, como por ejemplo las propiedades grid y flex o el uso de frameworks como Bootstrap o Tailwind.

¿Cómo saber si una web responsive?

Muy sencillo, la primera prueba es que entres a esa web desde un móvil y desde un ordenador.

Si el contenido se presenta adecuadamente (puedes acceder a todas las opciones del menú, los textos se leen bien, la información no se amontona… ) seguramente se trata de una página web responsive.

Otra forma es que en tu ordenador, vayas reduciendo al ancho de la ventana del navegador, si los elementos se presentan correctamente, la web es responsive.

Comprobar de forma exhaustiva si mi web es responsive

En Firefox y Google Chrome tenemos unas herramientas para modificar pixel a pixel el ancho de nuestra web, pudiendo comprobar que nuestro responsive sea perfecto.

En Firefox

Acude a Opciones > Más Herramientas > Vista de diseño adaptable

En Chrome

Ve a Opciones > Más Herramientas > Herramientas para desarrolladores > Se abrirá una nueva ventana, en la parte superior izquierda aparece el icono de un móvil y una tablet, pulsa sobre él.

Puntos de ruptura: El cómo funciona el diseño web responsive

El responsive funciona gracias a los puntos de ruptura, esto es que a determinados ancho de la pantalla (los puntos de ruptura), los elementos se reordenan.

Por lo general, las webs suelen cambiar la forma de presentar sus contenidos a unas determinadas resoluciones, no cambian a cada pixel, si no que van por tramos, por ejemplo:

Tramo 1: 320px a 767px
Menú: De tipo móvil
Contenido: Presentado en una columna

Tramo 2: 768px a 1023px
Menú: De tipo móvil
Contenido: Presentado en dos columnas

Tramo 3: De 1023px en adelante.
Menú: Normal
Contenido: Presentado en tres columnas

Según «la tecnología» con las que estén realizadas, estos puntos de ruptura son diferentes, pero te dejo algunos de los que me he ido encontrando para que los tengas en cuenta:

• 767/768px
• 991/992px
• 1023/1024pxpx
• 1279/1280px

Ten en cuenta que cuanta más ancha es la pantalla, más fácil es que la información quede bien presentada.

Principales problemas a los que te enfrentas cuando haces un diseño web responsive

Problema: Algunos elementos en donde se puede hacer click están muy juntos (esto te lo «chiva» Google Search Console)
Solución: Distancia los elementos con la ayuda de padding o margin.

Problema: La letra es pequeña (indicado por Google Search Console)
Solución: El tamaño de la letra debe ser al menos de 16px.

Problema: Alguna palabra o título desaparece por los laterales de la pantalla a resoluciones bajas.
Solución: Haz una media query para que en resoluciones pequeñas ese título tenga un tamaño más bajo.

Problema: En algunas resoluciones, las opciones del menú se amontonan.
Solución: Haz una media query para que en determinadas resoluciones no haya tanta separación en los elementos del menú, o trata de reducir la letra.

Problema: En el menú móvil el logo sale estirado.
Solución: Crea una media query para jugar con la altura y anchura del logo en resoluciones pequeñas.