Más del 60% del tráfico web llega desde un celular, pero la mayoría de sitios siguen diseñándose primero para escritorio. Aquí aprenderás a aplicar mobile first para construir interfaces rápidas, accesibles y pensadas para pantallas pequeñas, usando un proyecto real de portafolio.

¿Por qué importa diseñar primero para móvil?

Cuando una web tarda cuatro segundos en cargar en un celular, más de la mitad de tus visitantes se van antes de ver tu producto. No es que lo que ofreces sea malo: es que la experiencia móvil falló en el primer contacto.

El problema aparece cuando se diseña para computador y luego se adapta el celular como si fuera algo secundario. El resultado lo conoces:

• Páginas lentas que cargan eternamente.
• Botones tan pequeños que es imposible tocarlos bien.
• Textos diminutos que obligan a hacer zoom.
• Usuarios que abandonan en tres segundos.

Y ahí no solo pierdes una visita. Pierdes clientes, conversiones y oportunidades reales de negocio.

¿Qué es mobile first? Es una metodología de diseño y desarrollo donde construyes la interfaz primero para pantallas pequeñas y después la escalas a tablets y computadores, no al revés.

¿Cómo afecta mobile first al SEO y a Google?

Google entendió este cambio hace años. Desde 2018 su algoritmo prioriza los sitios optimizados para móvil, lo que se conoce como mobile first indexing [00:53]. Si tu web no funciona bien en un celular, no solo molestas a tus usuarios: pierdes visibilidad en buscadores, pierdes tráfico orgánico y pierdes negocio.

Dicho de otra forma, una mala experiencia en pantallas pequeñas hoy te cuesta posicionamiento. Y recuperar ese terreno después es mucho más caro que hacerlo bien desde el principio.

¿Por qué Google prioriza el móvil? Porque más del 60% del tráfico web viene de dispositivos móviles, así que indexa y posiciona pensando en cómo se ve tu sitio en un celular antes que en un escritorio.

¿Qué vas a construir con este enfoque mobile first?

No se trata de memorizar propiedades de CSS. Se trata de tomar decisiones de diseño y desarrollo con criterio. Por eso vas a trabajar en un proyecto real: un portafolio completo, construido desde cero con mentalidad móvil.

¿Qué técnicas vas a aprender en el proyecto?

Durante el desarrollo del portafolio vas a decidir qué elementos aparecen primero en pantalla y cómo escalar la interfaz a resoluciones más grandes. Estas son las piezas clave que pondrás en práctica:

• Media queries para adaptar el diseño según el tamaño de pantalla [01:34].
• Tipografía fluida que se ajusta sin romperse entre dispositivos [01:36].
• Optimización de imágenes para reducir peso y mejorar la carga [01:39].
• Formularios accesibles pensados para dedos, no para mouse.

La idea es que cada decisión técnica responda a una pregunta concreta: ¿esto mejora la experiencia de quien entra desde su celular?

¿Cómo vas a probar y medir tu proyecto?

Aquí viene lo interesante: vas a inspeccionar tu propio sitio en tiempo real desde tu teléfono, conectándolo a tu computador para ver cómo se comporta de verdad, no solo en un emulador.

Después mediremos el performance con Lighthouse, la herramienta de Google que evalúa velocidad, accesibilidad y buenas prácticas [01:44]. Y usaremos inteligencia artificial para revisar qué se puede optimizar todavía más.

¿Cómo saber si una web está pensada para mobile first?

Haz esta prueba ahora mismo. Toma tu celular, entra a tres sitios que uses seguido (tu banco, una tienda online, una red social) y cuenta cuántos toques necesitas para completar una acción básica: comprar algo, revisar tu saldo, mandar un mensaje.

Si son más de tres toques, ese sitio no está pensado para móvil. Y eso es justo lo que vamos a evitar al construir tu portafolio.

La autora del curso es María Angélica Useche, software engineer en Platzi, y en la siguiente clase vas a definir formalmente qué es mobile first, revisar un diseño real y escribir las primeras líneas de código del proyecto.

¿Cuál fue el sitio donde tuviste que dar más toques para llegar a lo que querías? Cuéntalo en los comentarios.