Diseño web mobile first: guía práctica paso a paso

Qué significa realmente el diseño mobile first, cómo se diferencia del diseño adaptable y cómo diseñar y crear un sitio web mobile first: orden del contenido, áreas táctiles, puntos de corte CSS min-width, imágenes y pruebas, además de consejos para negocios con varias ubicaciones.

Preguntas frecuentes

¿Cuál es la diferencia entre el diseño mobile first y el diseño adaptable?

El diseño adaptable consiste en un sitio cuya disposición cambia para ajustarse a cualquier tamaño de pantalla. Mobile first es el orden en que diseñas y programas: empiezas con la pantalla pequeña y añades elementos para pantallas mayores. Un sitio mobile first es adaptable, pero un sitio adaptable diseñado primero para escritorio suele acabar con una versión móvil apretada y añadida a posteriori.

¿Por qué importa mobile first para el SEO?

Google usa la indexación mobile first; es decir, usa principalmente la versión móvil de una página para indexarla y posicionarla. Si falta contenido, encabezados, datos estructurados o enlaces en el móvil, es posible que Google no los detecte.

¿Qué puntos de corte debería usar en un sitio mobile first?

Deja que decida el contenido: amplía la ventana del navegador hasta que la disposición se vea estirada y añade un punto de corte ahí. Como punto de partida, se suelen usar aproximadamente 640px, 768px, 1024px y 1280px, los valores de muchos marcos CSS, escritos como consultas de medios min-width.

¿Qué tamaño deberían tener los botones en móvil?

WCAG 2.2 establece un tamaño mínimo de objetivo de 24 por 24 píxeles CSS (nivel AA) y recomienda 44 por 44 (nivel AAA). Las pautas de Apple usan 44 puntos y las de Material Design de Google usan 48dp. Procura que los botones principales y los enlaces de los menús midan unos 44 a 48 píxeles.

¿Cómo deberían adaptar sus sitios mobile first las franquicias?

Usa una plantilla compartida con una página por franquicia que incluya arriba botones para llamar y pedir indicaciones, horario y una acción de reserva o pedido específica de esa ubicación. Los visitantes móviles que buscan «cerca de mí» quieren actuar al instante, así que el buscador de ubicaciones y la acción principal deben poder usarse con un pulgar.

Respuesta breve: el diseño web mobile first significa diseñar y crear primero la versión de una página para el teléfono y después añadir la disposición para tabletas y ordenadores a medida que se amplía la pantalla. En el código, los estilos CSS básicos corresponden al diseño móvil y se usan consultas de medios min-width para mejorarlo en pantallas mayores. Te obliga a decidir qué importa más en cada página y encaja con la forma en que Google indexa los sitios hoy.

Mobile first frente a diseño adaptable: la diferencia real

La gente usa estos términos como si fueran lo mismo, pero responden a preguntas diferentes.

	Diseño adaptable	Diseño mobile first
Qué es	Un sitio cuya disposición se adapta al tamaño de la pantalla	Un proceso: empezar con pantallas pequeñas y ampliar
Estilo CSS	Puede usar max-width (reducir el escritorio) o min-width	min-width (ampliar desde el móvil)
Prioridad del contenido	A menudo se decide en el escritorio y luego se comprime	Se decide pensando en la pantalla más pequeña
Fallo habitual	Contenido oculto, áreas táctiles diminutas y páginas pesadas en móviles	El diseño de escritorio parece vacío si no se amplía

La práctica recomendada es usar ambos: un sitio adaptable creado con el método mobile first.

Paso 1: Decide el orden del contenido en un teléfono

En una pantalla estrecha, todo se convierte en una columna, así que el orden es todo el diseño. Para cada página, escribe una lista numerada de las secciones en el orden que necesita una persona que la visita desde un teléfono.

En la página de inicio de un servicio local, podría ser:

Qué haces y dónde (una línea).
Acción principal: llamar o reservar.
Pruebas: puntuación, reseñas o clientes conocidos.
Servicios en tarjetas breves en las que se pueda pulsar.
Zona de servicio o ubicaciones.
Pruebas secundarias: fotos, antes y después.
Preguntas frecuentes.
Pie de página con horarios, dirección y contacto.

Todo lo que no se gane un puesto en esta lista probablemente tampoco debería aparecer en el escritorio.

Paso 2: Diseña para los pulgares

Áreas táctiles: los botones y enlaces del menú deben medir al menos 44 a 48 píxeles de alto y tener espacio entre sí. El mínimo de WCAG 2.2 es 24 por 24 píxeles CSS; es un mínimo, no un objetivo.
Acción principal al alcance: en los negocios locales, suele funcionar bien una barra fija inferior con «Llamar» y «Reservar». Hazla breve para que no tape el contenido.
Navegación: sirve un botón de menú que abra una lista a pantalla completa. Limita la lista a 5-7 opciones y deja la acción principal fuera del menú.
Formularios: una columna, etiquetas encima de los campos y los tipos de entrada correctos (tel, email, number) para que el teléfono muestre el teclado adecuado. Usa atributos de autocompletado para que el navegador rellene nombres y direcciones.
Texto: 16px de cuerpo es un mínimo habitual que impide que iOS Safari amplíe los campos de formulario. Usa una longitud de línea cómoda y un contraste mínimo de 4.5:1 para el texto del cuerpo (WCAG AA).

Paso 3: Créalo con enfoque mobile first en el código

Empieza con la etiqueta viewport en el encabezado de cada página:

``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``

Escribe los estilos básicos para el teléfono, sin consultas de medios. Después añade consultas min-width a medida que tengas espacio:

```css .services { display: grid; gap: 1rem; grid-template-columns: 1fr; }

@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* show full nav, hide menu button */ } ```

Algunas técnicas que facilitan el trabajo:

Tipografía y espaciado fluidos con clamp(), por ejemplo, font-size: clamp(1.75rem, 5vw, 3rem) para un encabezado, así necesitas menos puntos de corte.
Flexbox y Grid con auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) crea columnas solo cuando hay espacio.
Las container queries (compatibles con los principales navegadores actuales) permiten que una tarjeta cambie según el ancho de su contenedor, no de toda la pantalla, lo que resulta útil para componentes reutilizables.
Los marcos de utilidades, como Tailwind CSS, usan mobile first de manera predeterminada: las clases sin prefijo se aplican a todos los tamaños y los prefijos como md: se aplican desde ese ancho hacia arriba.

Elige puntos de corte según dónde se rompa tu contenido, no según modelos específicos de teléfono.

Paso 4: Haz que cargue rápido con una conexión móvil real

Los teléfonos tienen procesadores más lentos y redes menos fiables que el ordenador en el que diseñas. Los Core Web Vitals de Google lo miden: Largest Contentful Paint (carga), Interaction to Next Paint (respuesta) y Cumulative Layout Shift (estabilidad visual).

Imágenes adaptables: usa srcset y sizes para que los teléfonos descarguen archivos más pequeños, y formatos modernos como WebP o AVIF.
Establece siempre el ancho y el alto (o aspect-ratio) de imágenes e inserciones para evitar que cambie la disposición al cargar.
Carga de forma diferida las imágenes por debajo de la parte visible con loading="lazy", pero no la imagen principal.
Limita las fuentes a una o dos familias y unos pocos grosores.
Reduce los scripts de terceros: los widgets de chat, los rastreadores y las inserciones suelen ralentizar la interacción en móviles. Cárgalos tarde o solo donde hagan falta.

Paso 5: Amplía para pantallas grandes

Cuando funcione el diseño para teléfono, amplía el navegador y añade valor, no solo ancho:

Cuadrículas de varios tamaños para servicios y productos.
Barra de navegación completa en vez del botón de menú.
Texto e imágenes uno junto al otro.
Barra lateral fija para artículos largos o resúmenes de reserva.
Efectos al pasar el cursor, pero nunca información que solo aparezca así, ya que las pantallas táctiles no tienen cursor.

Paso 6: Prueba como si fueras visitante

Modo de dispositivo en las herramientas del navegador para comprobar rápidamente anchos de 360px, 390px y 414px, además de tamaños de tableta.
Al menos un Android y un iPhone reales, porque los emuladores no muestran los problemas de desplazamiento, teclados que tapan campos y procesadores lentos.
Lighthouse en Chrome DevTools y PageSpeed Insights, que también muestra datos de campo de usuarios reales de Chrome cuando el sitio tiene suficientes visitas.
Gira el teléfono a horizontal y comprueba que las barras fijas no tapen la mitad de la pantalla.
Completa la tarea principal (reservar, comprar o llamar) con un pulgar y usando los datos móviles.
Comprueba Search Console después del lanzamiento para detectar problemas móviles. Nuestra guía de Google Search Console explica qué revisar.

Diseño mobile first para franquicias y negocios con varias ubicaciones

Los sitios de franquicias y múltiples ubicaciones tienen un problema móvil específico: la mayoría de los visitantes llega desde el teléfono a través de una búsqueda «cerca de mí» y quiere enseguida los datos de una ubicación.

Primero, un buscador de ubicaciones: «Usar mi ubicación» y un campo para introducir código postal o ciudad, con resultados en tarjetas táctiles.
Una página por ubicación basada en una plantilla común: dirección, horario, teléfono, enlace al mapa, servicios y una acción local de reserva o pedido, con el botón de llamada en la parte superior.
Datos locales específicos: cada página necesita sus propias fotos, personal o reseñas cuando sea posible, no solo cambiar el nombre de la ciudad.
Marca coherente y control local: los franquiciados deberían poder actualizar horarios y ofertas sin modificar el diseño.
Datos estructurados: esquema LocalBusiness en cada página de ubicación con nombre, dirección y teléfono correctos.

Lista de verificación mobile first

[ ] Etiqueta meta viewport en todas las páginas.
[ ] Orden del contenido definido para una sola columna.
[ ] La acción principal se ve en el teléfono sin desplazarse.
[ ] Áreas táctiles de unos 44 a 48px, con espacio entre ellas.
[ ] Texto de cuerpo de 16px o más y contraste de 4.5:1.
[ ] CSS básico para móviles y consultas min-width para pantallas grandes.
[ ] Imágenes adaptables con dimensiones definidas.
[ ] El mismo contenido y datos estructurados en móvil y escritorio.
[ ] Pruebas en dispositivos iOS y Android reales.

Crea un sitio sin empezar desde cero

Todos los sitios que crea We.Inc son adaptables desde el principio y puedes previsualizar la versión para teléfono en el editor y ajustarla visualmente o en el código. Explora las plantillas para ver cómo se convierten las disposiciones en una sola columna o describe tu negocio y obtén un primer borrador para probarlo en tu teléfono.

Empieza gratis

Empieza gratis · Sin tarjeta de crédito

Umair Ali Sadaqat

Fundador de We.Inc

Umair es el fundador de We.Inc. Escribe sobre la creación de sitios web con IA, las agencias y el negocio de gestionar un estudio web.

¿Listo para crear algo grande?

Únete a los 15,000+ negocios que usan We.Inc para lanzar, crecer y automatizar, todo desde una plataforma.