Diseño mobile-first: cómo adaptar la web de tu pyme a los celulares

Hace algunos años, hacer la web de un negocio seguía casi siempre el mismo orden: primero se diseñaba una versión grande y detallada para computador y, al final, se intentaba «achicar» todo para que más o menos cupiera en un teléfono.

Hoy ese orden le cuesta clientes a muchas empresas. En Chile, la mayoría de las visitas a un sitio web llegan desde el celular, y en muchos rubros superan el 70%. La gente te encuentra desde Instagram, un anuncio o una búsqueda rápida mientras va en la micro o espera su turno en algún lugar.

Por eso existe el enfoque mobile-first (primero el celular). No es una moda: es una forma de trabajar que parte diseñando para la pantalla pequeña y, desde ahí, amplía la experiencia para pantallas más grandes.

Cómo navega realmente tu cliente desde el celular

Usar una web en un computador, con una pantalla grande, buena conexión y un mouse, es cómodo. En el celular la situación cambia bastante:

• La conexión no siempre es buena. Tu cliente puede estar en la calle, en el transporte o en un lugar con poca señal.
• La pantalla es pequeña. No hay espacio para adornos, párrafos eternos ni banners que tapen lo importante.
• Se usa con el pulgar. Casi todo se hace con un dedo y, muchas veces, con una sola mano. Un botón pequeño, pensado para el mouse, se vuelve difícil de presionar.

Si para leer hay que agrandar la pantalla con dos dedos, si hay que cerrar varias ventanas antes de ver el contenido o si no se entiende dónde tocar para enviar un formulario, lo más probable es que esa persona se vaya a otro sitio.

Cinco claves para que tu web funcione bien en el celular

Una web mobile-first no es solo una página que «se achica sola». Es pensar cómo se va a usar con el dedo y en poco tiempo.

1. Los botones importantes, al alcance del pulgar

La mayoría de las personas sostiene el teléfono con una mano y navega con el pulgar.

• Los botones clave, como cotizar, abrir el menú o escribir por WhatsApp, deben estar donde el dedo llega con facilidad, idealmente en la parte media o baja de la pantalla.
• Todo lo que se pueda tocar debería medir al menos 44 x 44 píxeles y tener espacio alrededor, para no presionar un enlace por error.

2. Textos que se leen sin hacer zoom

• Usa un tamaño de letra de al menos 16 píxeles en los párrafos. Con menos, la lectura cansa.
• Escribe párrafos cortos, de dos o tres líneas, y apóyate en listas y subtítulos. En el celular la gente primero recorre la página con la vista y después decide qué leer.

3. Un menú simple

En el computador es común ver menús con siete opciones y submenús. En el celular, eso estorba.

• Deja en el menú solo lo esencial, por ejemplo: Servicios, Quiénes somos y Contacto.
• Si vendes productos, pon un buscador visible en la parte superior.

4. Formularios cortos y fáciles de llenar

Completar un formulario largo en una pantalla pequeña es tedioso.

• Pide solo lo necesario: nombre, correo, teléfono y lo que necesita el cliente. Cada campo extra hace que menos personas terminen de enviarlo.
• Haz que aparezca el teclado correcto: al tocar el campo de teléfono, el celular debería mostrar el teclado numérico, y en el de correo, el teclado con la @. Es un detalle técnico pequeño (en el código se indica con type="tel" y type="email"), pero evita errores y hace que contactarte sea más rápido.

5. Menos ventanas emergentes

Una ventana promocional que en el computador ocupa una esquina, en el celular suele tapar toda la pantalla. Si además la «X» para cerrarla es diminuta, el visitante se siente atrapado y se va. Es mejor integrar tus promociones dentro de la página, sin interrumpir la lectura. Google tampoco ve con buenos ojos las ventanas que tapan el contenido en el celular.

Lo que Google ve de tu web es la versión para celulares

Google ya no revisa tu sitio pensando primero en cómo se ve en el computador. Hace años usa lo que llama indexación mobile-first: para entender y clasificar tu web, se basa principalmente en la versión que ve un celular.

En la práctica, esto significa dos cosas:

• Lo que escondes en el celular, Google probablemente no lo considera. Si un texto, un servicio o un producto aparece en el computador pero se ocultó en el celular «para ahorrar espacio», es probable que no te ayude a aparecer en las búsquedas.
• Una web lenta en el celular te perjudica en general. Imágenes muy pesadas o código sin optimizar pueden afectar tu posicionamiento, incluso para quienes te buscan desde un computador.

Si tu sitio está hecho en WordPress y sientes que tarda en cargar, en por qué tu WordPress carga lento te explico las causas más comunes.

Revisa tu web en cinco minutos

Toma tu celular, abre tu sitio y responde con honestidad:

• Velocidad: ¿lo principal aparece en dos o tres segundos con datos móviles?
• Lectura: ¿puedes leer los textos sin agrandar la pantalla?
• Contacto: ¿hay un botón claro para escribir, llamar o cotizar, sin dar vueltas?
• Formulario: ¿puedes completarlo cómodamente con una sola mano?
• Imágenes: ¿las fotos se ajustan al ancho de la pantalla, sin salirse por los lados?

Si respondiste «no» a alguna, ahí tienes un buen punto de partida.

Si estás decidiendo cómo construir tu web desde cero, en página a medida o plantilla prefabricada te ayudo a elegir la opción que mejor calza con tu etapa.

En resumen

Pensar primero en el celular no significa descuidar la versión de computador. Significa darle prioridad al lugar donde la mayoría de tus clientes te encuentra, te compara con otros y decide si contactarte.

Una web clara, rápida y fácil de usar con el pulgar es una de las formas más simples de convertir visitas en conversaciones con clientes reales.