¿Tu sitio web se ve mal en celular? Esto deberías revisar
Introducción
¿Tu web se ve horrible en el móvil y no sabés por qué?
No te preocupes, es más común de lo que creés.
En esta guía vas a descubrir, paso a paso, qué revisar y cambiar para que tu sitio luzca y funcione perfecto en celular.
Usamos un tono cercano, ejemplos claros y lenguaje fácil, sin tecnicismos innecesarios.
🧭 1. Diseño Mobile-First
¿Qué significa?
Significa diseñar pensando primero en el celular. Ese es el punto de partida que guía todo lo demás.
¿Por qué es clave?
Más del 60 % del tráfico web viene desde móviles .
Si no priorizás el móvil, perdes usuarios y penalizás tu SEO .
Tips prácticos
- Empezá diseñando para pantallas pequeñas (320 px).
- Luego agregá mejoras para tabletas y desktops.
- Usá rejillas fluidas y CSS moderno (Flexbox, Grid).
- Probalo en móvil real o emuladores del navegador.
2. Menú móvil claro y usable
Problema común
Menús que no se adaptan: íconos chiquitos, opciones invisibles, sin respuesta táctil.
Solución efectiva
- Usá hamburguesa o menú inferior.
- Botones de al menos 48 px de tamaño y con espacio entre ellos.
- Asegurate que el menú responda al tocar y desaparezca después de elegir.
Comparativa rápida
| Opción | Botones | Espacio | Recomendado |
|---|---|---|---|
| Botón mínimo | < 40 px | escaso | ❌ |
| Botón estándar | 48 px | 32 px | ✅ |
| Botón grande | 60+ px | amplio | ✅ |
3. Texto legible y bien contrastado
¿Qué puede fallar?
Letras pequeñas e ilegibles, colores difíciles de leer, falta de contraste.
Cómo solucionarlo
- Fuente mínima: 16 px.
- Contraste de al menos 3:1 entre texto y fondo.
- Usá tipografías diseñadas para web (sans serif, claras).
Lista de chequeo
- ¿Podés leer sin hacer zoom?
- ¿El contraste permite ver el texto sin esfuerzo?
- ¿Los encabezados y párrafos están bien jerarquizados?
4. Botones cómodos para tocar
El problema
Botones muy chicos o muy pegados generan errores y frustran usuarios.
Solución
- Tamaño recomendado: entre 42 px y 72 px.
- Espaciado adecuado para evitar toques por accidente.
- Feedback visual al presionarlos (color, sombra, animación).
5. Imágenes y medios optimizados
Qué revisar
- Imágenes pesadas que ralentizan todo.
- Media que no se adapta a la pantalla.
Medidas concretas
- Usá formatos modernos: WebP o AVIF.
- Imagen responsive con
srcsety atributos de tamaño. - Implementá lazy loading para que carguen solo al verlas.
- Establecé
widthyheightpara evitar desplazamientos de layout (CLS).
6. Core Web Vitals móviles
¿Qué son?
Son métricas clave de Google que miden:
- LCP: carga rápida del contenido principal (< 2.5 s)
- FID: respuesta al primer toque (< 100 ms)
- CLS: estabilidad visual (< 0.1)
Cómo mejorar
- Reducí peso y usá lazy loading.
- Minimizá CSS/JS y cargalos con
deferoasync. - Establecé dimensiones en imágenes y vídeos, y activá CDN.
7. Tablas y datos bien adaptados
El error típico
Mostrar tablas grandes en móvil genera scroll horizontales incómodos.
Soluciones
- Convertí tablas en listas o tarjetas en móvil.
- Permití scroll horizontal solo si es necesario.
- Ocultá columnas no esenciales en móviles.
8. Control de elementos fijos
Qué puede fallar
Elementos fijos (menú, chat) que tapan contenido o hacen scroll incómodo.
Ajustes recomendados
- Usá menú que desaparece al deslizar hacia abajo.
- Colocá elementos fijos en zonas táctiles (inferior o lateral).
- Verificá que no tapen botones o textos importantes.
9. Accesibilidad y usabilidad
¿Por qué importa?
Un sitio usable ayuda a todas las personas, incluyendo aquellas con discapacidad.
Mejores prácticas
- No deshabilites el zoom (
user-scalable). - Usá etiquetas
altdescriptivas en imágenes. - Asegurá navegación con teclado y soporte para lectores de pantalla.
- Doble contraste y tamaños ajustables.
10. Pruebas constantes
No dependas solo de emuladores
Sí, empezá ahí. Pero probá en móviles reales, con diferentes marcas.
¿Cómo probar?
- Usá Chrome DevTools (modo responsive).
- Proba con usuarios reales.
- Revisá regularmente con herramientas como Lighthouse o PageSpeed Insights.
🧩 Resumen general
| Área | ¿Qué revisar? | ¿Cómo mejorarlo? |
|---|---|---|
| Diseño y breakpoints | Orden correcto de elementos | Mobile‑first, fluid grids, CSS moderno |
| Menú y botones | Usabilidad táctil | Botones grandes, espaciado, feedback visual |
| Texto y tipografía | Legibilidad y contraste | Fuente 16 px+, contraste 3:1 mínimo |
| Imágenes y medios | Peso y adaptabilidad | WebP, lazy loading, srcset, CDN |
| Core Web Vitals | Velocidad y estabilidad | Optimización de imágenes, scripts, layout show |
| Tablas y contenido | Visualización en pantalla pequeña | Listas, tarjetas o scroll horizontal controlado |
| Elementos fijos | No bloquear contenido | Ocultar o reubicarlos en scroll |
| Accesibilidad | Zoom, contraste, navegación accesible | alt, etiquetas, teclado, ARIA |
| Pruebas | Diferentes dispositivos y navegadores | Emuladores + tests reales, Lighthouse |
Conclusión
Corregir estos puntos puede transformar tu web en una experiencia fluida y cómoda para los usuarios móviles.
Desde el diseño hasta las tablas, pasando por botones y accesibilidad: cada detalle importa.
Una web móvil optimizada no solo mejora tu imagen, sino que favorece el posicionamiento en Google y reduce la tasa de abandono.
Si querés una mano con las optimizaciones, en SZ Web Design podemos ayudarte a mejorar la versión móvil de tu sitio de forma profesional y estratégica. ¡Hablemos!