Diseño web responsivo: por qué tu negocio necesita verse bien en celulares

Un sitio responsivo es el que se adapta al tamaño de la pantalla: en el celular se acomoda en una columna con letras legibles y botones que se pueden tocar, y en la computadora aprovecha el espacio. No son dos sitios distintos, es uno que cambia de forma según el aparato.

Por qué importa para tu negocio

• Tus clientes buscan desde el teléfono: una recomendación por WhatsApp, un anuncio en redes o una búsqueda en la calle terminan en una pantalla pequeña.
• Google evalúa primero la versión móvil. Esto se llama indexación «mobile-first»: si tu versión para celular es pobre, afecta cómo aparece tu sitio en las búsquedas, incluso para quien busca desde una computadora.
• La velocidad y la comodidad influyen en las ventas: si hay que hacer zoom, esperar o buscar el botón, el visitante se va con la competencia.
• Un sitio que se ve mal en el celular transmite desorden, aunque tu negocio sea excelente.

Qué hace que un sitio sea realmente responsivo

Se acomoda sin deslizarse hacia los lados

Nada debe salirse de la pantalla. Si tienes que mover la página horizontalmente para leer, algo está mal. El sitio debe declarar su ancho con la etiqueta «viewport»; sin ella, el celular lo mostrará como una computadora en miniatura.

Letras legibles sin zoom

El texto principal debe leerse cómodo sin acercar. Como referencia, 16 píxeles es un tamaño mínimo razonable para el cuerpo del texto, con buen contraste respecto al fondo.

Botones fáciles de tocar

Los dedos son menos precisos que un cursor. Los botones y enlaces deben ser lo bastante grandes y estar separados para no tocar uno por error. Como referencia, apunta a unos 44 píxeles de alto.

Imágenes que se adaptan

Una foto de 4 MB está bien en una computadora con buena conexión, pero en un teléfono con datos móviles tarda una eternidad. Las imágenes deben comprimirse, usar formatos modernos (WebP o AVIF) y cargarse en el tamaño que cada pantalla necesita.

Menú simple

En el celular, el menú se compacta (el clásico icono de tres rayas). Debe poder abrirse y cerrarse con un toque y mostrar las pocas secciones importantes, no veinte.

Formularios cortos

Cada campo extra baja la cantidad de personas que terminan el formulario. Pide solo lo necesario y ofrece un botón de WhatsApp, que en el celular suele ser más cómodo que escribir un correo.

Errores que vemos con frecuencia

• Diseñar primero para computadora y «encoger» el diseño al final.
• Texto dentro de imágenes: en el celular se ve diminuto y no se puede leer ni buscar.
• Ventanas emergentes que tapan toda la pantalla y cuyo botón de cerrar es minúsculo.
• Videos o animaciones que se cargan siempre y consumen los datos del visitante.
• Números de teléfono que no se pueden tocar para llamar.
• Tablas anchas que se cortan.

Cómo revisar el tuyo en 10 minutos

1. Abre tu sitio en tu teléfono, con datos móviles y no con wifi. ¿Cuánto tarda en mostrarse?
2. Recorre todas las páginas importantes. ¿Tuviste que hacer zoom o deslizar de lado alguna vez?
3. Toca el botón principal, el teléfono y el WhatsApp. ¿Funcionan al primer intento?
4. Rellena tu propio formulario de contacto desde el celular. ¿Es cómodo?
5. Ejecuta tu dirección en PageSpeed Insights y revisa el resultado «Móvil». Apunta a que LCP sea menor de 2.5 s, CLS menor de 0.1 e INP menor de 200 ms.
6. En Google Search Console, mira el informe de «Experiencia de la página» y los avisos de usabilidad.

En Diskette Studio diseñamos cada sitio pensando primero en el celular y lo probamos en teléfonos reales antes de entregarlo.