Cómo hacer una página web adaptable al móvil para tu negocio

La mayoría de la gente que encuentra tu negocio está sosteniendo un teléfono cuando lo hace. Están parados en una entrada mirando un calentador de agua que gotea, sentados en un auto afuera de un competidor, o acostados en el sofá a las 9 de la noche decidiendo a quién llamar en la mañana. Si tu página web es difícil de leer, lenta de cargar, o un fastidio de tocar en una pantalla pequeña, rebotan y le llaman al siguiente nombre de la lista. Aprender cómo hacer una página web adaptable al móvil ya no es una fineza técnica. Es la diferencia entre conseguir la llamada y perderla.

La buena noticia: no necesitas ser desarrollador, y no necesitas construir un "sitio móvil" aparte. Esta guía recorre lo que adaptable al móvil de verdad significa, las cosas específicas que se rompen en los teléfonos, y cómo arreglarlas en una tarde. Todo lo de aquí funciona ya sea que construyas el sitio tú mismo, contrates a alguien, o uses una herramienta.

Qué significa de verdad "adaptable al móvil"

Una página web adaptable al móvil no es solo una versión encogida de tu sitio de escritorio. Es un sitio que ha sido diseñado para que una persona usando un pulgar, en un teléfono de gama media, con una conexión móvil irregular, pueda encontrar lo que necesita y actuar en segundos.

Eso se descompone en cuatro cosas:

Cabe en la pantalla. Sin scroll horizontal, sin pellizcar y hacer zoom, sin texto que se sale del borde.
Es rápida. Carga contenido útil en un par de segundos, no diez.
Es fácil de tocar. Los botones y enlaces son lo bastante grandes para un pulgar y están espaciados para que no toques el equivocado.
Es fácil actuar en ella. El número de teléfono, el botón de reserva y la dirección son lo primero que ve un visitante, no lo último.

Google ha usado indexación móvil primero durante años, lo que significa que mira la versión móvil de tu sitio para decidir cómo te posiciona, incluso para gente que busca en una computadora. Una experiencia móvil débil arrastra hacia abajo tu visibilidad en todas partes en silencio.

Empieza con diseño adaptable, no con un sitio móvil aparte

Hace años, los negocios construían una segunda página web solo para teléfonos, por lo general en una URL como m.tunegocio.com. No hagas esto. Es el doble de trabajo, divide tu SEO, y siempre queda desactualizado.

El enfoque moderno es el diseño adaptable: una sola página web que se reacomoda para caber en cualquier pantalla en la que aterrice. Las columnas se apilan, las imágenes se encogen, el menú se colapsa. Como expone TechTarget en su guía de buenas prácticas móviles, un diseño adaptable pasa de múltiples columnas en una computadora a una sola columna legible en un teléfono sin que mantengas dos versiones.

Casi todos los creadores de páginas web y plantillas modernas son adaptables por defecto. Si estás eligiendo un tema o plantilla, "adaptable" o "listo para móvil" debe ser la primera casilla que marques. Una cosa técnica que hay que confirmar está enterrada en el código: la página necesita un ajuste de viewport que le dice al teléfono que renderice al ancho del dispositivo en lugar de fingir ser una computadora. Cualquier plantilla decente ya lo incluye, pero si tu texto aparece microscópico en un teléfono, un ajuste de viewport faltante es el culpable habitual y vale la pena preguntarle a tu creador o desarrollador.

Diseña para el pulgar, no para el ratón

Un puntero de ratón es un solo pixel. Un pulgar mide cerca de un centímetro de ancho y es mucho menos preciso. Ese solo hecho impulsa la mayoría de las decisiones de diseño móvil.

Haz los objetivos de toque grandes. Los botones y enlaces deben medir al menos cerca de 44 por 44 pixeles, más o menos la yema de un pulgar. Apple y Google recomiendan este rango en sus guías de diseño.
Espacia las cosas. Dos enlaces apilados a un pixel de distancia garantizan toques equivocados. Dale aire a los elementos clicables para que la gente no toque el equivocado.
Pon lo importante en la zona del pulgar. La gente sostiene los teléfonos y alcanza con el pulgar, que cubre cómodamente la parte baja y media de la pantalla. Tu acción principal, por lo general "llamar" o "reservar", pertenece donde el pulgar descansa de forma natural, no metida en una esquina de arriba.
Usa un menú de hamburguesa. El ícono de tres líneas que abre tu navegación es estándar por una razón: esconde un menú largo detrás de un toque y mantiene la pantalla limpia.

Haz el texto legible sin hacer zoom

Si un visitante tiene que pellizcar para leer tus horarios, lo perdiste. En el móvil:

Mantén el texto del cuerpo en un mínimo de 16 pixeles. Más chico se ve bien en tu laptop y es ilegible en un teléfono bajo el sol.
Usa alto contraste. Texto oscuro sobre fondo claro le gana a gris claro sobre blanco cada vez, sobre todo al aire libre.
Mantén los párrafos cortos. Dos o tres líneas. Una pared de texto que está bien en la computadora se vuelve un scroll intimidante en un teléfono.
Usa encabezados claros para que un visitante que ojea pueda saltar directo a "Servicios" o "Contacto".

Evita fuentes de tipo caligráfico decorativas para cualquier cosa que una persona necesite leer rápido. Guarda la personalidad para tu logo.

La velocidad es la característica que los clientes sienten primero

La velocidad es donde la mayoría de los sitios de negocios locales falla en silencio. Según cifras muy citadas en la industria, más de la mitad de los visitantes móviles abandona una página que tarda más de 3 segundos en cargar. En un teléfono, con datos móviles, tres segundos pasan rápido.

El mayor culpable son casi siempre las imágenes. Una foto salida directo de la cámara de un teléfono puede pesar 5 megabytes. En una conexión lenta ese es todo el presupuesto de carga para una sola imagen. Para arreglarlo:

Redimensiona las imágenes al tamaño en que de verdad se muestran. Una foto mostrada a 800 pixeles de ancho no necesita medir 4000 pixeles de ancho.
Comprímelas y usa formatos modernos. Los archivos WebP son dramáticamente más pequeños que los viejos JPEG sin pérdida visible de calidad. Muchos creadores convierten automáticamente. Si el tuyo no, una herramienta gratuita como TinyPNG o Squoosh lo hace en segundos.
Activa la carga diferida para que las imágenes debajo del pliegue solo carguen cuando alguien hace scroll hasta ellas, en lugar de todas de golpe al principio.
Corta el desorden. El video que se reproduce solo, los carruseles pesados, los widgets de chat y los scripts de rastreo agregan peso. Conserva lo que se gana su lugar.

Un sitio lento no solo molesta a la gente. Te cuesta posicionamiento y llamadas al mismo tiempo, que es el peor tipo de problema: invisible y caro.

Las funciones móviles que los negocios locales de verdad necesitan

El consejo móvil genérico se detiene en "haz los botones más grandes". Para un negocio de servicios para el hogar o local, todo el punto de la visita móvil es que un cliente te contacte ahora mismo. Construye para eso.

Número de teléfono de toca para llamar. En un teléfono, tu número debe ser un enlace tocable que inicia una llamada con un solo toque. Ya nadie copia un número a mano y lo marca. Esta es la cosa de mayor valor en un sitio de servicios para el hogar.
Un botón fijo de llamada o reserva. Una barra pequeña anclada a la parte inferior de la pantalla que sigue al visitante mientras hace scroll, con "Llama ahora" o "Pide una cotización", significa que la acción siempre está a un toque de pulgar.
Dirección de toca para el mapa. Tu dirección debe abrir la app de mapas del teléfono con indicaciones en un toque. Para una ubicación física esto es enorme.
Formularios cortos con el teclado correcto. Si usas un formulario de contacto o cotización, mantenlo en los campos mínimos. Usa los tipos de entrada correctos para que el teléfono muestre un teclado numérico para el campo de teléfono y un teclado de correo para el campo de correo. Cada campo extra en un teléfono pierde gente.
Horarios y zona de servicio arriba. "Están abiertos" y "vienen a mi pueblo" son las dos preguntas que un visitante móvil se hace. Respóndelas sin un scroll.

La guía de Yelp sobre páginas web adaptables al móvil para negocios locales hace el mismo punto de fondo: los visitantes móviles tienen alta intención y son locales, así que el trabajo de diseño es quitar cada paso entre aterrizar y contactarte.

Prueba en un teléfono real, no solo en tu escritorio

Los diseñadores prueban en un monitor grande con internet rápido y luego se preguntan por qué los clientes reales batallan. Prueba de la forma en que tus clientes de verdad navegan.

Corre las herramientas de Google. Google retiró su Prueba de Optimización Móvil independiente, pero PageSpeed Insights ahora te da tanto una puntuación de rendimiento móvil como arreglos específicos, además de tus Core Web Vitals, los números reales de velocidad y estabilidad que Google mide.
Usa tu propio teléfono, y uno viejo. Abre el sitio en tu teléfono personal. Luego pide prestado un Android más barato o más viejo. Si funciona ahí, funciona para todos.
Limita tu conexión. En las herramientas de desarrollador de tu navegador puedes simular una red móvil lenta. Es humillante y es honesto.
Haz la prueba de un solo pulgar. Sostén el teléfono con una mano e intenta reservar un trabajo o encontrar tus horarios usando solo el pulgar. Si no puedes, tu cliente tampoco.

Prueba tanto iOS como Android, ya que renderizan un poco distinto, y vuelve a probar cada vez que agregues algo pesado como una nueva galería de fotos o un widget de reservas.

El atajo: parte de un sitio que es adaptable por defecto

Todo lo anterior se puede hacer a mano. También son muchas tardes si además diriges un negocio y contestas el teléfono.

Este es el hueco que Saynovo está hecho para cerrar para los servicios para el hogar y los dueños locales. El sitio que genera es adaptable desde el primer borrador: ya cabe en la pantalla del teléfono, los objetivos de toque están dimensionados para pulgares, las imágenes salen comprimidas, y el toca para llamar viene cableado, sin ajustes móviles que activar y sin una versión móvil aparte que mantener sincronizada. Cuando quieras un cambio, dices lo que quieres y el sitio se actualiza, y se mantiene adaptable al móvil mientras cambia. Quita la parte en la que la mayoría de los dueños se atora: saber si la versión del teléfono de verdad está bien.

Una lista corta para hacer tu página web adaptable al móvil

Ya sea que la construyas tú mismo o uses una herramienta, aprender cómo hacer una página web adaptable al móvil se reduce a un puñado de revisiones que puedes correr hoy:

Un solo sitio adaptable, no una URL móvil aparte.
Texto de al menos 16 pixeles, alto contraste, párrafos cortos.
Botones de al menos 44 pixeles, bien espaciados, en la zona del pulgar.
Imágenes redimensionadas, comprimidas y con carga diferida para que la página cargue en menos de 3 segundos.
Un número de teléfono tocable, un botón fijo de llamada o reserva, y una dirección de toca para el mapa.
Formularios cortos con los teclados móviles correctos.
Probado en un teléfono real y viejo y con puntuación en PageSpeed Insights.

Acierta en esos y tu sitio deja de dejar escapar el tráfico de teléfono que ya trabajaste duro para ganar. En el móvil, el negocio más fácil de contactar suele ganar, y ahora ese eres tú.