Cómo diseñar pensando primero en el celular

Muchos dueños de negocios arman su web en una pantalla grande y esperan que funcione en el celular. Diseñar pensando primero en el celular invierte ese orden: empiezas por la pantalla más chica, decides qué es lo que de verdad importa y después le das lugar a las pantallas más grandes. El resultado es un sitio más simple, más rápido y más fácil de usar en cualquier aparato. En esta lección vemos por qué el celular va primero, qué cambia en una pantalla chica y cómo probar tu sitio en un teléfono real.

Por qué el celular va primero

Hay cuatro buenas razones para empezar por el celular, y ninguna depende de una moda.

• Google mira la versión del celular. Google usa sobre todo la versión para celular de tus páginas para decidir cómo mostrarlas y en qué lugar. Esto se llama indexación prioritaria para celulares, o mobile-first indexing. Si tu versión para celular es floja, para Google tu sitio es flojo.
• Una parte grande de las visitas llega desde el celular. Las cifras públicas de tráfico de Estados Unidos cambian de una fuente a otra, y la proporción cambia en cada negocio, así que revisa tus propios números cuando tu sitio ya tenga visitas.
• Las visitas desde el celular ocurren en la vida real. La gente busca mientras camina, espera o lleva a alguien a una práctica. Usa el teléfono con una sola mano, muchas veces con una conexión lenta, y quiere una respuesta ya.
• Una pantalla chica obliga a decidir bien. Cuando solo hay lugar para un título y un botón, tienes que elegir los más importantes. Esas decisiones mejoran también la versión grande.

Qué significa diseñar primero para el celular

Pensar primero en el celular no es hacer solo la versión del celular. Es una cuestión de orden de trabajo. Planeas el contenido y la distribución para una pantalla angosta, en una sola columna, y luego dejas que el diseño se abra cuando hay más espacio. Las pantallas grandes reciben imágenes más grandes, columnas lado a lado y más aire, pero no más cosas para leer.

Una forma sencilla de trabajar así:

1. Haz una lista del contenido por orden de importancia. ¿Qué necesita ver primero un visitante, qué segundo y qué tercero?
2. Dibuja una pantalla por vez. Traza un rectángulo alto en un papel y acomoda el primer elemento, luego el siguiente, todo en una columna.
3. Deja la acción principal al alcance. Ponla donde el pulgar pueda tocarla.
4. Prueba en un teléfono de verdad. Antes de pulir nada.
5. Después amplía. Decide qué le suma la versión grande: imágenes mayores, columnas, más espacio libre.

Para un negocio pequeño típico, la página que resulta de este proceso es una pila simple de secciones: una primera pantalla con tu promesa y tu botón principal, una prueba breve, tus servicios principales, cómo funciona, unas palabras sobre ti y una acción final con tus datos de contacto. Esa misma pila funciona en una computadora, donde las imágenes quedan al lado del texto en vez de arriba. Quien empieza en el celular y sigue en una laptop encuentra el mismo orden en los dos lugares.

Qué cambia en una pantalla chica

Navegación: un menú corto y una sola acción

El encabezado de una computadora puede tener cinco enlaces y un botón. En un celular, esos enlaces suelen esconderse detrás de un icono de menú, y solo queda a la vista la acción más importante. En el diseño de Heyday que ves abajo, el encabezado del celular conserva solo el logo, una bolsa de compras y un botón negro, Book a test ride, y deja afuera los cuatro enlaces de la versión de computadora. Nadie tiene que abrir un menú para encontrar lo principal que quieres que haga.

Mantén el menú corto, usa palabras simples y haz que el icono sea lo bastante grande para tocarlo. Evita los menús que solo se abren al pasar el ratón por encima, porque un dedo no puede pasar por encima sin tocar.

Texto: lo bastante grande para leer sin ampliar

Si el visitante tiene que juntar los dedos para agrandar, se va. Usa texto de al menos 16 píxeles, párrafos cortos, buen interlineado y títulos claramente más grandes que el texto. En un celular las líneas son cortas por naturaleza, lo que ayuda a leer, pero los bloques largos se vuelven altísimos, así que córtalos con subtítulos y listas.

Piensa en los lugares donde se usa un teléfono. Al aire libre y con mucho sol, el texto gris sobre fondo blanco casi desaparece. Elige un contraste fuerte, que además ayuda a quienes ven peor.

Botones y enlaces: grandes, separados y al alcance

Un pulgar es mucho más grande que la flecha de un ratón. Los botones necesitan espacio, y también los enlaces que los rodean. Las pautas de accesibilidad llamadas WCAG fijan un mínimo de 24 por 24 píxeles para las áreas que se tocan, con algunas excepciones. Los fabricantes de teléfonos recomiendan tamaños mayores para los botones principales, de unos 44 a 48 píxeles de alto, y es una buena meta. Deja espacio entre los botones para que un toque no caiga en el que no era.

En los teléfonos grandes, la parte baja de la pantalla es la más fácil de alcanzar con el pulgar, y las esquinas de arriba son las más difíciles. Pon tu acción más importante donde sea fácil llegar, y considera un botón fijo abajo con las palabras Llamar o Reservar. Cuida que no tape el contenido.

Formularios: cortos, grandes y con el teclado correcto

Escribir en un celular es lento y los errores son fáciles. Pide solo lo necesario, haz que cada campo sea lo bastante alto para tocarlo y pon la etiqueta arriba del campo, para que siga a la vista cuando se abre el teclado. El teclado adecuado cambia mucho las cosas: un campo de correo debería abrir el teclado con la arroba, y un campo de teléfono, el teclado numérico. Los navegadores pueden completar solos nombres, correos y direcciones si el formulario está preparado para eso. Usa letra de al menos 16 píxeles dentro de los campos, porque algunos teléfonos se acercan solos al tocar un campo con letra más chica, y la página salta.

Teléfonos, mapas y mensajes

Un celular también sirve para llamar. Haz que tu número sea un enlace, para que un toque inicie la llamada. Haz que tu dirección sea un enlace que abra las indicaciones del mapa. Si a tus clientes les gusta escribir mensajes, ofrece esa opción también. Estos pequeños enlaces le ahorran varios pasos al visitante y muchas veces convierten una visita en un cliente.

Imágenes y video: del tamaño justo, sin esperas

Una foto pensada para un monitor ancho malgasta datos en un celular. Cada imagen debería tener tamaños que se ajusten a la pantalla, para que un teléfono baje un archivo más chico. Los videos grandes que arrancan solos gastan datos y frenan la página. Mantén las imágenes nítidas pero livianas, y deja que el video espere hasta que el visitante lo pida. Las lecciones siguientes tratan las fotos, el video y la velocidad.

Sin pasar el cursor, sin zonas diminutas, sin sorpresas

Todo lo que aparece solo cuando el cursor pasa por encima es invisible en un celular. La información en recuadros emergentes, los menús que se abren al pasar el cursor y los botones que muestran texto al pasar por encima necesitan una versión táctil. Evita las ventanas emergentes que tapan la pantalla y cuesta cerrar, y ten cuidado con los chats o los avisos que se ponen encima de tu botón principal.

Errores comunes en el celular

• Desplazamiento hacia los lados. Tablas o imágenes anchas que empujan la página más allá del borde de la pantalla.
• Texto diminuto. Letra pequeña y gris, sobre todo en menús y pies de página.
• Menús en PDF. El menú de un restaurante en PDF cuesta leerlo y tarda en abrir en un celular. Ponlo en la página como texto.
• Enlaces demasiado juntos. Un toque cae en el que no era.
• Formularios largos. Diez campos en un celular son un motivo para abandonar.
• Sonido o video que arranca solo. Sorprende a la gente y le gasta datos.
• Páginas pesadas. Un sitio rápido con el Wi-Fi de una oficina puede arrastrarse con una señal débil.
• Avisos de cookies y burbujas de chat que tapan el contenido. En una pantalla chica pueden esconder justo el botón que el visitante necesita.

Cómo probar en un teléfono real

Un navegador puede imitar un teléfono, y es una buena primera revisión, pero nada reemplaza al aparato de verdad.

1. Usa la vista de teléfono del navegador. En Chrome, en una computadora, haz clic derecho sobre la página, elige Inspeccionar y activa la barra de dispositivos. Muestra cómo se comporta tu página en tamaños de celular. Es una revisión rápida, no reemplaza a un teléfono real.
2. Abre tu sitio en tu propio celular. Usa los datos del plan en lugar del Wi-Fi, para sentir cómo carga con una conexión normal.
3. Usa una sola mano. ¿Llegas al botón principal y completas el formulario con el pulgar?
4. Sal a la calle. Lee la página a la luz del día y mira si el texto sigue claro.
5. Prueba con letra más grande. Mucha gente configura su teléfono con texto agrandado. Comprueba que nada se rompa.
6. Gira el teléfono. Verifica que la página siga funcionando acostada.
7. Pide prestado otro teléfono. Dile a un amigo con otra marca o un modelo más viejo que abra tu sitio.
8. Haz la tarea real. Llama desde la página, envía el formulario, busca tus horarios. Todo lo que haría un cliente.

Una lista de control para el celular

• La primera pantalla muestra a qué te dedicas y un botón principal sin ampliar
• El texto es de al menos 16 píxeles y se lee fácil
• El menú es corto y deja a la vista una acción importante
• Los botones son grandes, están separados y se alcanzan con el pulgar
• Los formularios son cortos, con etiquetas arriba y el teclado correcto
• El teléfono, la dirección y el correo funcionan con un toque
• Nada necesita pasar el cursor para funcionar
• Las imágenes tienen el tamaño para celulares y el video no arranca solo
• Ninguna ventana emergente tapa el contenido principal
• Lo probaste en un teléfono real, con datos del plan

Cómo resuelve Good Sites Only el celular

Todos los sitios que hacemos incluyen versión para celular, así que tu web se diseña tanto para las pantallas chicas como para las grandes. Los días 3 y 4 revisas la maqueta, y puedes abrirla en tu propio celular para ver cómo se siente en la mano. Los días 5 y 6 el sitio se arma y se revisa, y sale en línea el día 7. Tus formularios de contacto también están incluidos. Cuando quieras empezar, empieza tu sitio.

Preguntas frecuentes