Tu web es una web de móvil, y probablemente no se diseñó como tal

Mira de dónde vienen de verdad tus visitantes y la cifra suele estar entre el setenta y el noventa y cinco por ciento de móvil. Para un negocio local está más cerca del extremo alto, porque la gente te busca mientras está en la calle, en el coche o de pie en la cocina de otra persona.

Casi todos los sitios web se siguen diseñando en un monitor grande. En esa distancia es donde ocurre casi todo el daño.

Qué se rompe, en concreto

El mismo puñado de problemas, sitio tras sitio:

Texto principal ilegible. Un titular dimensionado para una pantalla ancha se convierte en seis líneas en un teléfono, colocadas sobre la parte más cargada de una foto. Lo primero que ve un visitante es lo que peor funciona.

El número de teléfono no se puede tocar. Es texto, o es una imagen, o está en el pie cuatro pantallas más abajo. En un teléfono, un número de teléfono debería ser un toque, y debería verse sin desplazarse.

Tablas y listas de precios que se desplazan de lado. La página entera se mueve a izquierda y derecha, lo que se siente roto aunque el contenido esté bien.

Fotos que pesan cuatro megabytes. En una conexión de casa nadie lo nota. Con datos móviles y poca cobertura, la página está en blanco durante seis segundos y el visitante ya se fue.

Botones demasiado pequeños o demasiado juntos. Un enlace fácil de pulsar con el ratón es una lotería con el pulgar.

Una ventana emergente que no se puede cerrar. El botón de cerrar queda fuera de la pantalla. Esta te cuesta el visitante entero.

La auditoría de cinco minutos

Hazla en tu propio teléfono, con datos móviles y no con el wifi de la oficina, porque esa es la condición real.

  1. Abre tu página de inicio y cuenta los segundos hasta que puedas leer algo.
  2. Lee el titular sin hacer zoom. ¿Puedes?
  3. Encuentra tu número de teléfono sin desplazarte. Tócalo. ¿Llama?
  4. Intenta reservar o consultar, hasta el final, con un solo pulgar.
  5. Gira el teléfono de lado. ¿Se descuadra algo?
  6. Busca una lista de precios o una tabla. ¿La página se desliza de lado?

Lo que haya fallado es lo primero que hay que arreglar. Casi siempre valdrá más que un rediseño.

Por qué responsive no es lo mismo que diseñado

Casi todas las herramientas son responsive, es decir, el diseño se reordena solo para caber en una pantalla estrecha. Eso resuelve la mecánica y no el diseño. Reordenado no es lo mismo que pensado.

La pantalla de un teléfono es otro medio. Hay una columna, una sola cosa visible a la vez, y el visitante suele tener prisa y a menudo está distraído. Lo que merece la parte alta de la pantalla en un teléfono muchas veces no es lo que la merece en un escritorio. La versión de escritorio se puede permitir una imagen atmosférica. La de teléfono suele necesitar el nombre del negocio, qué haces y un botón que te llame.

Eso es una decisión, y hay que tomarla a propósito, dispositivo por dispositivo. La reordenación automática no puede tomarla por ti.

Qué hacer al respecto

Si tu herramienta te deja poner valores por dispositivo, dedica una hora a la versión de teléfono en concreto. Titular más pequeño, más espacio alrededor de los botones, la llamada a la acción más arriba, la foto grande recortada en lugar de encogida.

Si tu herramienta no te deja cambiar la versión de teléfono por separado, eso conviene saberlo, porque significa que la experiencia móvil es un efecto colateral de una decisión de escritorio, y el móvil es la mayor parte de tu tráfico.

Cada elemento de Instinctor lleva ajustes separados para escritorio, tableta y teléfono, y el editor previsualiza cada uno. Lo construimos así porque la versión de escritorio del sitio de un pequeño negocio es, estadísticamente, la versión que casi nadie ve.

El equipo de Instinctor

Instinctor