Diseño web responsivo: qué es y cómo saber si tu sitio lo cumple

¿Qué es el diseño web responsivo?

El diseño web responsivo es la forma de construir un sitio para que se acomode solo al tamaño de la pantalla: el mismo contenido se reorganiza en celular, tableta y computadora, sin zoom, sin desplazarse de lado y con botones que se pueden tocar con el dedo. En inglés se le llama responsive web design, y en México se usan indistintamente «responsivo» y «responsive».

El término lo propuso el diseñador Ethan Marcotte en un artículo de la revista A List Apart publicado en mayo de 2010. Su idea combinaba tres piezas que siguen siendo la base: una cuadrícula flexible, imágenes que se encogen con su contenedor y reglas de CSS que cambian el diseño según el ancho de la pantalla. Más abajo explicamos cada una sin tecnicismos de más.

Por qué le importa a tu negocio

Según la ENDUTIH 2024 del INEGI, 100.2 millones de personas usan internet en México, el 83.1% de la población de 6 años o más, y el celular inteligente es el aparato con el que más se conectan. Cuando alguien busca «plomero en Zapopan» o «dentista abierto hoy en Monterrey», casi siempre lo hace desde el teléfono y con prisa.

Hay una segunda razón, menos visible. Google rastrea e indexa la web con la versión para celular de cada sitio; lo explica en su guía de indexación centrada en dispositivos móviles. Si en el celular tu página esconde texto, carga mal o le faltan secciones, Google evalúa esa versión recortada. Un sitio que solo se ve bien en computadora compite en desventaja aunque el escritorio luzca impecable.

El costo se nota en el día a día. Un taller mecánico de Guadalupe, Nuevo León, puede aparecer en Google y aun así perder la llamada si el teléfono está en una imagen que no se puede tocar. Una fonda en Guadalajara pierde el pedido si el menú es un PDF que en el celular se lee a tamaño hormiga.

Diferencia entre diseño adaptativo y responsive

Los dos buscan que el sitio funcione en cualquier pantalla, pero lo resuelven distinto. El responsivo usa un solo diseño fluido que se estira y se reacomoda. El adaptativo prepara varios diseños fijos y le entrega a cada visitante el que corresponde a su tamaño de pantalla.

Para un consultorio, un despacho o una tienda en línea pequeña, el responsivo es la opción razonable: cuesta menos mantenerlo y Google recomienda ese enfoque en su documentación porque usa la misma URL y el mismo HTML para todos los dispositivos.

Cómo revisar si tu web es responsiva en 10 minutos

Google retiró su antigua prueba de optimización para móviles en diciembre de 2023, así que hoy la revisión se hace con estas herramientas, todas gratuitas:

1. Ábrela en tu propio celular y en el de alguien más con otro sistema (Android y iPhone). Recorre la página de inicio y la de tu servicio principal como si fueras cliente.
2. Gira el teléfono. En horizontal es donde más se rompen menús y fotos.
3. Busca desplazamiento lateral. Si con el dedo la página se mueve de lado, algo es más ancho que la pantalla.
4. Usa el modo de dispositivo de Chrome: en la computadora, clic derecho, «Inspeccionar» y el ícono de celular. Prueba anchos de 360 y 390 píxeles, que son comunes en teléfonos.
5. Corre Lighthouse o PageSpeed Insights en modo móvil. Te marca textos ilegibles, botones demasiado juntos y la velocidad de carga.
6. Revisa Search Console. El informe de Core Web Vitals te muestra, con datos de visitantes reales, qué páginas van lentas en celular.
7. Haz la prueba del pulgar: con una mano y el teléfono en la otra, intenta llamar, abrir WhatsApp y enviar el formulario. Si algo cuesta trabajo, a tu cliente también.

Errores típicos en celular que cuestan clientes

Botones diminutos o pegados

La norma de accesibilidad WCAG 2.2 del W3C pide que los objetivos táctiles midan al menos 24 por 24 píxeles CSS o tengan espacio suficiente alrededor, y Apple recomienda 44 por 44 puntos en sus guías de diseño. Un botón de «Agendar» del tamaño de una lenteja provoca toques equivocados y abandonos.

Texto que obliga a hacer zoom

Usa 16 píxeles como tamaño base del texto en celular. Además, si los campos del formulario tienen letra más chica que eso, el iPhone hace zoom automático al tocarlos y la página queda descuadrada.

WhatsApp escondido o tapando el contenido

En México, WhatsApp suele ser el canal de contacto que más convierte. Debe estar a la vista sin buscarlo, pero el botón flotante no debe cubrir el botón de enviar del formulario ni el aviso de cookies.

Menú que no abre o no se cierra

El ícono de tres rayas tiene que abrir el menú al primer toque, dejar leer todas las opciones y cerrarse al elegir una. Un menú roto deja al visitante atrapado en la portada.

Tablas, imágenes y videos que se salen de la pantalla

Las tablas de precios, los mapas incrustados y las imágenes con ancho fijo son la causa más común del desplazamiento lateral.

Ventanas emergentes que tapan todo

Google advierte en su documentación sobre los anuncios y ventanas intersticiales intrusivos en celular. Si tu promoción ocupa toda la pantalla al entrar, mucha gente se va antes de cerrarla.

Qué pedirle a quien te hace la web

Si vas a contratar un sitio nuevo o un rediseño, pon esto por escrito en la cotización. Es la misma lista que usamos en nuestros proyectos de diseño de páginas web en Monterrey:

• Que el diseño se presente primero en versión celular y después en escritorio.
• Que te muestren el sitio funcionando en un teléfono real antes de entregarlo, sin desplazamiento lateral.
• Teléfono y WhatsApp como enlaces que se tocan y abren la llamada o el chat.
• Botones de al menos 44 píxeles de alto y texto base de 16 píxeles.
• Imágenes optimizadas en formatos modernos (WebP o AVIF) y con tamaños por dispositivo.
• Un reporte de PageSpeed Insights en móvil al momento de la entrega.
• Acceso a tu Search Console y a tu dominio a tu nombre.

Si quien cotiza no puede explicarte cómo cumple cada punto, conviene pedir una segunda opinión. Un sitio responsivo también es la base de cualquier trabajo de SEO: lo explicamos en qué es SEO y cómo decide Google qué mostrar, y si ya tienes página pero no sales en los resultados, revisa por qué no apareces en Google.

Cómo hacer una web responsive: la parte técnica

No necesitas programar para contratar bien, pero conocer estas cuatro piezas te ayuda a detectar un trabajo mal hecho.

1. La etiqueta viewport

Sin esta línea en el <head>, el celular muestra la página como si fuera una pantalla de computadora reducida. Es lo primero que hay que revisar en cualquier sitio que se ve «chiquito» en el teléfono.

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Media queries

Son reglas de CSS que se aplican solo a partir de cierto ancho. Con el enfoque mobile first se escribe primero el diseño para celular y después se agregan columnas para pantallas grandes:

.servicios { display: grid; gap: 24px; }
@media (min-width: 768px) {
  .servicios { grid-template-columns: repeat(3, 1fr); }
}

3. Imágenes flexibles

Una regla de una línea evita que las fotos se salgan de la pantalla, y el atributo srcset le permite al navegador descargar una versión ligera en el celular en lugar de la foto de 3,000 píxeles pensada para escritorio.

img { max-width: 100%; height: auto; }

4. Unidades relativas y tipografía fluida

En lugar de anchos fijos en píxeles, el diseño responsivo usa porcentajes, rem y funciones como clamp(), que ajustan el tamaño del título entre un mínimo y un máximo según la pantalla. CSS Grid y Flexbox se encargan de reacomodar las columnas.

Plataformas como WordPress, Shopify o Wix ya traen plantillas responsivas, pero los bloques personalizados, los anuncios incrustados y los complementos mal configurados pueden romperlas. Por eso la revisión en un teléfono real sigue siendo obligatoria aunque la plantilla diga «responsive».

Ejemplo: un consultorio antes y después

Imagina un consultorio de fisioterapia en San Pedro Garza García. Antes: el sitio carga una foto de portada de 4 MB, el teléfono aparece como imagen, el menú de tres rayas no abre en iPhone y el formulario pide ocho datos con letra de 12 píxeles. Después: la portada pesa menos de 200 KB, arriba hay dos botones grandes («Llamar» y «WhatsApp»), el menú funciona con un toque y el formulario pide nombre, teléfono y motivo de consulta.

Nada de eso cambia la imagen de marca, pero sí cuántas personas logran contactar. Ese es el criterio con el que trabajamos el diseño web en Monterrey y su área metropolitana: primero que el cliente pueda llamarte desde el celular, y después todo lo demás. Si además quieres que te encuentren en el mapa, complementa tu sitio con un Perfil de Negocio de Google bien llenado.

Preguntas frecuentes sobre diseño responsive