En resumen
- Una sola web que se adapta al tamaño de la pantalla.
- La mayoría de visitas de un negocio llegan desde el móvil.
- Google usa principalmente la versión móvil de tu web para indexarla y posicionarla.
- Responsive no es solo "que se vea": botones, textos y velocidad deben pensarse para el móvil.
Cómo funciona una web responsive
Una web responsive usa una rejilla flexible e instrucciones de estilo (las media queries de CSS) que cambian la disposición según el ancho de la pantalla. En un ordenador puedes ver tres columnas de servicios una al lado de otra; en un móvil, esas mismas tres tarjetas se apilan una debajo de otra, el menú se convierte en un botón y las imágenes se reducen.
El contenido y la dirección de la página son los mismos en todos los dispositivos. Eso es importante: no hay que mantener dos webs ni duplicar textos.
Responsive, versión móvil aparte y app
| Opción | Cómo es | Situación hoy |
|---|---|---|
| Diseño responsive | Una web que se adapta a cada pantalla | El estándar recomendado por Google |
| Web móvil separada (m.tuweb.com) | Dos webs distintas para móvil y escritorio | En desuso: doble mantenimiento y más errores |
| App nativa | Aplicación que se descarga de una tienda | Solo tiene sentido para usos muy frecuentes |
Por qué es imprescindible
- Tus clientes usan el móvil. En la mayoría de negocios locales, la mayor parte de las visitas llegan desde un teléfono.
- Google mira primero el móvil. Google indexa y evalúa las webs principalmente a partir de su versión móvil (lo que llama mobile-first indexing). Si en el móvil falta contenido o se ve mal, lo pagas en todas las búsquedas.
- Conversión. Un botón de llamada que no se puede pulsar o un formulario que se sale de la pantalla son contactos perdidos.
- Un solo mantenimiento. Una sola web es más barata de mantener que dos versiones.
Qué debe tener una buena web responsive
- Textos legibles sin hacer zoom (como referencia, al menos 16 píxeles en el cuerpo).
- Botones y enlaces grandes y separados, fáciles de pulsar con el dedo.
- Teléfono y WhatsApp con un toque, sin tener que copiarlos.
- Imágenes adaptadas al tamaño de pantalla para no cargar fotos enormes en el móvil.
- Formularios cortos, con el teclado adecuado (numérico para el teléfono, con @ para el email).
- Nada de desplazamiento horizontal ni ventanas emergentes que tapen todo el contenido.
- Carga rápida también con conexión móvil; tienes consejos en velocidad de carga web.
Cómo comprobar si tu web es responsive
- Ábrela en tu móvil y en el de alguien con otro modelo, y recorre las páginas principales: inicio, servicios y contacto.
- En el ordenador, haz la ventana del navegador estrecha poco a poco y observa si el contenido se reorganiza sin cortarse.
- Usa las herramientas de desarrollo del navegador (en Chrome, F12 y el icono de móvil) para simular distintos dispositivos.
- Pasa la web por PageSpeed Insights y mira el diagnóstico en la pestaña Móvil.
Si tu web no se adapta bien, normalmente sale más a cuenta rehacerla con una base moderna que parchearla. Todas las webs que hacemos en Wabiwebs se diseñan primero para el móvil; puedes verlo en diseño web. Y si estás empezando de cero, te puede servir cómo hacer una página web paso a paso.
Preguntas frecuentes
¿Qué significa responsive en una web?
Que la web se adapta automáticamente al tamaño de la pantalla, reorganizando su contenido para verse y usarse bien en móviles, tabletas y ordenadores.
¿El diseño responsive influye en el SEO?
Sí. Google indexa principalmente la versión móvil de las webs, así que una web que no se adapta bien al móvil tiene más difícil posicionar.
¿Es lo mismo responsive que mobile first?
No exactamente. Responsive es que la web se adapte a cualquier pantalla; mobile first es diseñar empezando por el móvil y ampliar después para pantallas grandes. Lo ideal es combinar ambos.
¿Se puede convertir una web antigua en responsive?
A veces se puede adaptar, pero si la web es muy antigua suele ser más rápido y barato rehacerla sobre una base moderna.
Una web pensada primero para el móvil
Diseño adaptado a cualquier pantalla, rápido y con el contacto a un toque. 400 € hasta 5 páginas, dominio y hosting del primer año incluidos.
Ver diseño web