Piensa en la última vez que buscaste un restaurante. ¿Estabas sentado frente a una computadora? Seguramente no. Estabas en el carro, en una fila o en el sillón. En el celular.
Tus clientes hacen lo mismo. Buscan tu horario estacionados afuera. Tocan tu número entre mandados. Revisan tu menú a las 9 de la noche con una mano, mientras con la otra sostienen a un niño.
Por eso una página web para celular no es un extra bonito. Para la mayoría de los negocios pequeños, la versión del celular es la web. La de la computadora es el extra.
“Responsive” o “mobile first”: ¿cuál es la diferencia?
Vas a escuchar las dos palabras. Suenan parecido, pero no son lo mismo.
Responsive normalmente significa que la web se diseñó para una pantalla grande de computadora y después se apretó para que quepa en el celular. Las columnas se apilan, hay cosas que se esconden, la letra queda diminuta. Técnicamente “funciona” en el celular. Como un traje dos tallas más grande técnicamente “te queda”.
Mobile first significa que diseño primero la versión del celular. ¿Qué necesita alguien cuando abre tu web en el teléfono? Normalmente: qué haces, dónde estás y un botón para llamar o reservar. Eso va primero. Después amplío el diseño para pantallas más grandes.
La diferencia importa por tres razones:
- Velocidad. Una web de computadora apretada igual carga todo lo pesado, incluso lo que esconde. Con mala señal, eso es lento.
- Facilidad. Los botones pensados para el mouse son muy chicos para un dedo.
- Google. Google mira la versión del celular de tu web para decidir dónde mostrarte, incluso cuando alguien busca desde una computadora.
La regla del pulgar
La mayoría de la gente sostiene el celular con una mano y usa el pulgar. Eso lo cambia todo:
- La parte de abajo de la pantalla es fácil de alcanzar. Ahí va tu botón más importante: Llamar, WhatsApp, Reservar.
- La parte de arriba cuesta. Sirve para tu logo, no para tu acción principal.
- Los botones tienen que ser grandes, con espacio alrededor. Si la gente toca lo que no era, se va.
Para negocios locales me gusta una barrita fija abajo con “Llamar” y “WhatsApp”. Se queda a la vista mientras la gente baja. Simple, y funciona.
Texto que se pueda leer
Una pantalla de celular al sol no es una pantalla de computadora en una oficina. Entonces:
- Letra suficientemente grande para que nadie tenga que hacer zoom.
- Texto oscuro sobre fondo claro. El gris clarito se ve elegante y nadie lo puede leer.
- Párrafos cortos. Dos o tres oraciones. Un muro de texto en el celular es como un contrato en letra chica: nadie lo lee.
- Listas en vez de explicaciones largas para servicios, precios y horarios.
Un menú simple
En el celular, un menú con quince enlaces es un laberinto. Déjalo en cinco o seis opciones con nombres claros: Servicios, Menú, Galería, Nosotros, Contacto. Nada de nombres creativos que obliguen a adivinar.
Y dentro del menú, un botón claro: “Reservar” o “Pedir cotización”.
Formularios cortos
Escribir en el celular es molesto. Cada campo extra es una razón más para rendirse.
Para un primer contacto necesitas tres cosas: nombre, teléfono o correo y un mensaje corto. Nada más. El resto lo preguntas en la llamada.
Extra: cuando el campo pide un teléfono, el celular debería abrir el teclado de números. Detalle chico. Diferencia grande.
Velocidad con mala señal
Tu cliente no siempre tiene buen wifi. A veces son dos rayitas en un estacionamiento. Lo que más ayuda:
- Fotos livianas. Comprimidas, en formatos modernos como WebP.
- Nada de videos de fondo que se comen los datos y la batería.
- Menos plugins y widgets que no usas de verdad.
Si tu web tarda varios segundos en mostrar algo, mucha gente no va a esperar. Va a tocar el siguiente resultado.
Revisa tu página web para celular en 5 minutos
Toma tu teléfono y revisa esta lista:
| Revisa | ¿OK? | |
|---|---|---|
| 1 | ¿Puedes usar la web con un solo pulgar? | [ ] |
| 2 | ¿Puedes leer sin hacer zoom? | [ ] |
| 3 | ¿Muestra algo en menos de 2 segundos con datos móviles? | [ ] |
| 4 | ¿El teléfono llama cuando lo tocas? ¿La dirección abre el mapa? | [ ] |
| 5 | ¿El formulario tiene 3 o 4 campos como máximo? | [ ] |
| 6 | ¿Encuentras el botón de “Llamar” o “Reservar” sin buscarlo? | [ ] |
Si marcaste menos de cuatro, tu web probablemente está perdiendo clientes en el celular. Más problemas comunes aquí: 7 errores de una página web que te cuestan clientes
Lo que yo haría en tu lugar
- Haz la revisión de 5 minutos de arriba, hoy.
- Asegúrate de que tu teléfono, dirección y horario estén a un toque.
- Si tu web se hizo para computadora y después se achicó, piensa en rediseñarla pensando primero en el celular. Suele ser el cambio que más llamadas trae.
Todas mis webs se diseñan primero para el celular, en inglés y español. Si quieres ver cómo se vería para tu negocio, mira mi plan Negocio o pídeme una cotización gratis. Y si todavía estás planificando, empieza aquí: Cómo hacer la página web de tu negocio
Preguntas frecuentes
¿Qué es una página web para celular?
Una web fácil de usar en el teléfono: texto que se lee sin zoom, botones grandes, menú corto, carga rápida y datos de contacto a un toque.
¿Cuál es la diferencia entre responsive y mobile first?
Responsive normalmente es un diseño de computadora apretado para que quepa en el celular. Mobile first es diseñar primero la versión del celular y después ampliarla para pantallas grandes, así que es más rápida y más fácil de usar.
¿Tener una web adaptada al celular ayuda en Google?
Sí. Google usa la versión del celular de tu web para decidir dónde mostrarla, incluso en búsquedas hechas desde una computadora.
¿Cómo sé si mi web funciona bien en el celular?
Ábrela en tu teléfono y revisa la lista de 6 puntos de este artículo: uso con un pulgar, texto legible, velocidad, llamar con un toque, formulario corto y botón principal visible.
