En la mayoría de los proyectos que acompañamos, el tráfico móvil supera con creces las tres cuartas partes. Sin embargo, la maqueta todavía se suele validar en una pantalla grande, en una reunión, por personas que nunca verán la web como la verán sus clientes. Esto es lo que significa «mobile first» en la práctica, más allá del eslogan.
La realidad del uso local
El móvil se ha convertido en la puerta de entrada por defecto. La mayor parte del tráfico web se hace hoy desde el teléfono, a menudo con dispositivos de gama media, en movimiento y con una calidad de red que varía mucho según el lugar y el momento: una zona sin cobertura, el metro o un tren regional bastan para degradar la experiencia.
Tres consecuencias directas:
- El peso de la página es un coste real para tu visitante. Una web de 8 MB no solo es lenta: consume la tarifa de datos de la persona.
- La potencia del dispositivo es limitada. Una web sobrecargada de scripts irá fluida en tu ordenador y a trompicones en el teléfono de tu cliente.
- La red es inestable. Una web que depende de diez peticiones externas falla en cuanto una de ellas se retrasa.
Diseñar partiendo de la pantalla pequeña
«Mobile first» no es una técnica de maquetación, es un método de diseño. Primero se dibuja la versión más limitada y luego se enriquece para las pantallas más anchas. Lo contrario -diseñar en grande y luego «adaptar»- produce sistemáticamente páginas móviles improvisadas.
El interés es tanto estratégico como técnico: en una pantalla pequeña no puedes poner todo al mismo nivel. Te ves obligado a jerarquizar de verdad, a elegir un mensaje principal y una acción principal. Esa disciplina también mejora la versión de escritorio.
Si tu mensaje no cabe en la pantalla de un teléfono, no es un problema de pantalla. Es un problema de mensaje.
Las reglas concretas que hay que aplicar
Zonas táctiles cómodas
Unos 44 píxeles de lado como mínimo para cualquier elemento pulsable, con suficiente espacio entre dos zonas vecinas. Un pulgar no es un cursor de ratón: es ancho e impreciso.
El pulgar manda
Las acciones importantes deben estar en la zona a la que llega de forma natural una sola mano, más bien abajo y en el centro. Un botón de confirmación pegado arriba a la derecha obliga a cambiar la forma de sujetar el teléfono.
Una tipografía legible
16 píxeles como mínimo para el texto normal. Por debajo, no solo la lectura se vuelve pesada, sino que algunos navegadores activan un zoom automático en los campos de formulario, lo que desorienta por completo.
Formularios adaptados
Usa los tipos de campo adecuados: type="tel" para un número muestra un teclado numérico, type="email" muestra el teclado apropiado. Añade los atributos de autocompletado. Son tres minutos de trabajo que cambian la experiencia por completo.
El paso del ratón no puede ser el único acceso
Un menú que solo se abre al pasar el ratón es inaccesible con el dedo. Toda información oculta tras un paso del ratón debe tener una alternativa táctil.
El rendimiento forma parte del diseño
Una web muy bonita pero lenta es una mala web. En el móvil, el rendimiento no es un tema técnico aparte: condiciona directamente la percepción de calidad.
- Imágenes: con el tamaño real de visualización, comprimidas, en WebP o AVIF, con
loading="lazy"para lo que no se ve de entrada. - Fuentes: dos familias como máximo, con dos pesos cada una, y
font-display: swappara que el texto aparezca de inmediato. - Scripts: cada biblioteca externa debe justificarse. Un carrusel de 90 KB para tres imágenes nunca merece la pena.
- Dimensiones reservadas: indica el ancho y el alto de las imágenes para evitar que la página salte durante la carga, uno de los defectos más molestos para un visitante.
La prueba honesta
Prueba tu web en un teléfono de gama baja, con 3G limitado, fuera de tu oficina. No en tu último modelo con wifi. Es la única manera de saber lo que viven tus visitantes.
Cómo comprobarlo antes de publicar
Una breve lista de control antes de publicar, que detecta la mayoría de los problemas:
- ¿La página se ve sin desplazamiento horizontal con 360 píxeles de ancho?
- ¿Se puede alcanzar la acción principal con una sola mano?
- ¿El contenido principal aparece en menos de tres segundos con 3G?
- ¿Los textos siguen siendo legibles a pleno sol, con el contraste comprobado?
- ¿El menú se abre y se cierra sin bloquear el desplazamiento?
- ¿Se puede pulsar el número de teléfono para llamar directamente?
Estas seis comprobaciones llevan diez minutos y evitan la mayoría de las sorpresas desagradables. Para profundizar en los aspectos medibles, consulta nuestro artículo sobre las Core Web Vitals.