← Tu web en una tarde
Lección 4 de 8 · 15 min

Móvil, velocidad y accesibilidad

La mayoría de las visitas llegan desde el móvil. Cómo comprobar que tu web se ve bien en cualquier pantalla, que carga rápido y que la puede usar todo el mundo.

Pruébala como la va a ver la gente

En Chrome, Edge o Safari abre tu index.html, pulsa clic derecho, «Inspeccionar», y activa el icono del móvil (vista de dispositivo). Elige un iPhone o un Android pequeño. Cuando la publiques, repítelo en tu móvil de verdad.

CompruebaCómo debe estar
Tamaño de letra16 px o más en el texto normal. Si tienes que hacer zoom, es pequeña.
BotonesAl menos 44 px de alto y separados entre sí. Se pulsan con el dedo, no con un ratón.
Scroll lateralNinguno. Si la página se mueve hacia los lados, algo es más ancho que la pantalla.
CabeceraSe ve la frase principal y el botón sin hacer scroll.
Teléfono y WhatsAppAl pulsarlos se abre la llamada o el chat.
MenúEn una página sola, mejor sin menú hamburguesa: que se lea de arriba abajo.

Velocidad: lo que de verdad importa

Si una web tarda más de tres segundos en móvil, una parte de la gente se va antes de verla. Lo bueno: tu web de un solo archivo ya es rápida si cuidas tres cosas.

  1. Imágenes ligeras (lección 3). Es casi siempre el problema.
  2. Carga diferida: las imágenes que no se ven al principio llevan loading="lazy". La de la cabecera, no.
  3. Nada externo innecesario: cada fuente, librería o widget de otro servidor es una espera más (y un problema de privacidad, como verás).

Cuando esté publicada, pásala por PageSpeed Insights (pagespeed.web.dev). Apunta a más de 90 en móvil. Si sale menos, la propia herramienta te dice qué falla; pégaselo a la IA y pídele que lo corrija.

Accesibilidad: que la pueda usar todo el mundo

Hay personas que navegan con lector de pantalla, con el teclado o con la letra muy grande. Hacerlo bien es poco trabajo y además mejora tu posicionamiento en Google:

  • Textos alternativos en las imágenes (lección 3).
  • Títulos en orden: un h1 (tu frase principal), luego h2 para cada sección. No uses títulos solo para poner letra grande.
  • Enlaces que se entienden solos: «Escríbeme por WhatsApp», no «pulsa aquí».
  • Contraste suficiente en textos y botones.
  • Se puede usar con teclado: pulsando Tab vas saltando de enlace en enlace y se ve claramente dónde estás.
  • Idioma declarado: <html lang="es">, para que el lector de pantalla pronuncie en español.
Por si vendes onlineDesde el 28 de junio de 2025, la normativa europea de accesibilidad obliga a muchos servicios digitales, como las tiendas online, a cumplir requisitos de accesibilidad. Las microempresas que prestan servicios (menos de 10 personas y menos de 2 millones de facturación) están exentas, pero cumplir estas buenas prácticas te deja preparado igualmente.

La auditoría en un prompt

Prompt de auditoríaRevisa este index.html como lo haría un experto en accesibilidad y rendimiento móvil. Comprueba: 1. Contraste de todos los textos y botones (mínimo 4,5:1 en texto normal). 2. Tamaño de letra y de zonas táctiles en móvil (16 px y 44 px). 3. Orden de títulos (un solo h1, h2 por sección) y textos alternativos. 4. Que nada provoque scroll horizontal en 360 px de ancho. 5. Imágenes con width, height y loading="lazy" salvo la primera. 6. Que se pueda navegar con teclado y el foco sea visible. 7. Cualquier recurso cargado desde otro servidor. Dame una lista de problemas ordenada por gravedad y después el archivo completo corregido.
Practica · unos 9 min

Ahora tú

Hazlo sobre tu propia web y marca cada paso. Se guarda solo.

0 de 5 tareas hechas
@esclusa.ia