Crear un sitio web mobile-first: la guía práctica

Un sitio mobile-first es un sitio diseñado primero para la pantalla de un smartphone, y adaptado después al escritorio, no al revés. Este método obliga a priorizar lo esencial desde el principio: la oferta, la forma de contacto, la acción esperada. Para la mayoría de las profesiones de proximidad, donde gran parte de los visitantes llegan desde su teléfono, esto marca la diferencia entre un sitio que se consulta y un sitio que se abandona en pocos segundos.

Muchos sitios se siguen pensando primero para escritorio

El método más extendido sigue siendo, en la práctica, lo contrario del mobile-first. Un sitio se diseña en una pantalla grande, con una maqueta ancha, columnas, menús horizontales detallados. Una vez validado el diseño, se "adapta" al móvil: el menú se convierte en un botón de hamburguesa, las columnas se apilan, las imágenes se redimensionan. Técnicamente, el sitio funciona en el teléfono. Pero las prioridades nunca se han replanteado para este formato.

El resultado es un sitio que se muestra correctamente en móvil sin estar pensado para el móvil. El visitante tiene que desplazarse varias pantallas antes de encontrar el número de teléfono. El formulario de contacto conserva sus diez campos, adaptados a una pantalla ancha pero tediosos de rellenar con el pulgar. Los textos mantienen una extensión pensada para una lectura tranquila en ordenador, cuando la consulta en móvil se hace a menudo en pocos segundos, entre dos tareas.

Este desfase afecta especialmente a las búsquedas locales y urgentes: "fontanero disponible esta noche", "abogado laboralista cerca de mí", "restaurante abierto ahora". Estas búsquedas se hacen casi siempre desde un teléfono, en un contexto donde la rapidez de comprensión prima sobre todo lo demás.

Responsive y mobile-first no son lo mismo

La confusión es frecuente, incluso entre algunos proveedores. Un sitio responsive se adapta técnicamente a todos los tamaños de pantalla: los bloques se reorganizan, nada se desborda, el sitio "funciona" en todas partes. Es una característica técnica.

El mobile-first es un método de diseño. Consiste en preguntarse, antes incluso de dibujar nada: "¿qué debe ver primero un visitante en móvil, con el menor esfuerzo posible?" El diseño parte de esta restricción, y luego se enriquece progresivamente para las pantallas más grandes, que ofrecen más espacio para contenido secundario.

En la práctica, un sitio responsive pero pensado primero para escritorio muestra a menudo, en móvil, la misma jerarquía de contenido que en pantalla grande, simplemente comprimida. Un sitio mobile-first muestra primero lo que realmente importa para un visitante con prisa, y relega el resto más abajo, sea cual sea la pantalla.

Los principios concretos de un diseño mobile-first

Unas reglas sencillas permiten comprobar si un sitio respeta realmente este enfoque.

• Un botón de llamada o de contacto visible sin desplazarse. En una página de inicio o una ficha de servicio, la forma de contactar con el profesional (teléfono, formulario, cita) debe aparecer en la primera pantalla, no tras varios desplazamientos.
• Un formulario de contacto corto. Entre tres y cinco campos bastan en la gran mayoría de los casos: nombre, forma de contacto, mensaje. Cada campo adicional reduce las probabilidades de que un visitante en móvil llegue hasta el final.
• Un texto legible sin hacer zoom. Un tamaño de letra de al menos 16 píxeles para el cuerpo del texto, párrafos cortos, títulos que permitan entender el contenido de un solo vistazo.
• Un tiempo de carga controlado. Imágenes comprimidas, pocos scripts externos innecesarios (widgets, rastreadores superfluos), un alojamiento correctamente dimensionado. Un sitio lento en movilidad, a menudo con una conexión menos estable que en la oficina, pierde visitantes antes de que lean nada.
• Zonas clicables lo bastante grandes. Los enlaces y botones deben poder tocarse con el pulgar sin apuntar al píxel exacto.
• Un menú simplificado. Un menú de hamburguesa claro, con un número limitado de entradas, en lugar de una reproducción en miniatura del menú de escritorio.

Los errores frecuentes de un sitio "adaptado" al móvil

Algunos errores se repiten con regularidad en sitios que no se pensaron para móvil desde el principio.

1. El contenido esencial queda enterrado más abajo en la página. La oferta, las tarifas o la forma de contacto aparecen después de varios bloques decorativos.
2. Los formularios conservan su extensión de escritorio. Campos múltiples, menús desplegables complejos, validación poco clara en pantalla pequeña.
3. Las imágenes no están optimizadas para móvil. Una imagen pensada para una visualización amplia se carga innecesariamente pesada en el teléfono, aunque se muestre más pequeña.
4. El texto es demasiado denso. Párrafos largos, pensados para una lectura de escritorio, se vuelven ilegibles en una pantalla estrecha sin acortarse.
5. Los popups y banners invaden la pantalla. Un popup pensado para una pantalla grande puede ocupar la totalidad de una pantalla móvil y tapar el contenido principal.
6. La navegación reproduce fielmente el menú de escritorio. Diez entradas de menú comprimidas en un menú de hamburguesa siguen siendo diez entradas que recorrer, sin una jerarquía repensada para el formato reducido.

Cómo comprobar que su sitio es realmente mobile-first

Una comprobación sencilla, sin herramientas técnicas, ya da una buena indicación.

Una prueba más exigente consiste en pedir a varias personas que busquen una información concreta en el sitio desde su propio teléfono, sin indicaciones. Si tardan en encontrar el número de teléfono o el formulario de contacto, el sitio probablemente no es mobile-first, aunque se muestre correctamente.

Lo que hay que recordar

• Mobile-first significa diseñar primero para el smartphone, y luego enriquecer para el escritorio, no al revés.
• Responsive y mobile-first son dos cosas distintas: una es una característica técnica, la otra un método de diseño.
• Lo esencial (oferta, contacto) debe ser visible sin desplazarse en móvil.
• Los formularios cortos y las zonas clicables amplias marcan una verdadera diferencia en pantalla pequeña.
• La velocidad de carga cuenta tanto como la maquetación, sobre todo en movilidad.
• Un rediseño puntual suele bastar; no siempre es necesario reconstruirlo todo.

Preguntas frecuentes

¿Cuál es la diferencia entre responsive y mobile-first?

Un sitio responsive se adapta técnicamente a todos los tamaños de pantalla, pero suele diseñarse primero para escritorio. Un sitio mobile-first invierte el orden: el diseño y el contenido se piensan primero para la pantalla pequeña, y luego se enriquecen para la pantalla grande. El resultado visual puede parecer similar, pero las prioridades de contenido son distintas.

¿Un sitio mobile-first cuesta más que un sitio clásico?

No necesariamente. La diferencia radica sobre todo en el método de diseño, no en el presupuesto. Un sitio corporativo sencillo cuesta generalmente entre 1500 y 5000 euros en agencia, o 99 euros al mes todo incluido con una suscripción como la de VeryAppi, mobile-first desde el principio en ambos casos si el proveedor aplica este método.

¿Cómo saber si mi sitio actual es realmente mobile-first o solo responsive?

Abra su sitio en su teléfono y hágase una pregunta sencilla: ¿el primer elemento visible es lo que más importa para un visitante con prisa (oferta, número de teléfono, botón de contacto)? Si tiene que desplazarse mucho antes de llegar a lo esencial, el sitio probablemente se pensó para escritorio y luego se adaptó.

¿El mobile-first se aplica a todos los sectores de actividad?

La mayoría de las búsquedas locales (artesano, abogado, médico, restaurante) se hacen desde un smartphone, a menudo con urgencia o en movimiento. El mobile-first tiene sentido, por tanto, para la mayoría de las profesiones de proximidad. Sigue siendo pertinente incluso para sitios B2B, donde una parte creciente de la consulta inicial también se hace en móvil.

¿Hay que rehacer todo el sitio para hacerlo mobile-first?

No sistemáticamente. Si la estructura del contenido es correcta, un rediseño puntual del diseño y de las prioridades de visualización suele bastar, con un presupuesto generalmente comprendido entre 2000 y 8000 euros. Un rediseño completo solo es necesario si el sitio se basa en una base técnica antigua o mal adaptada.

Un sitio mobile-first no es un detalle estético: es lo que determina si un visitante con prisa encuentra lo que busca en pocos segundos o cierra la pestaña. Si quiere comparar los enfoques para su actividad, puede consultar las opciones en /es/sitio-web.