Diseño web adaptable: qué es y por qué es el estándar

El principio

Un único sitio web se adapta: en el móvil los contenidos se apilan uno debajo de otro, en el ordenador van uno al lado del otro. El menú se vuelve compacto, las imágenes se escalan y los botones son lo bastante grandes para pulsarlos con el dedo.

Cómo reconocer una buena implementación

• Sin desplazamiento lateral y sin necesidad de ampliar
• Letra legible (al menos unos 16 píxeles en el texto corrido)
• Botones grandes y fáciles de alcanzar
• Las acciones importantes (llamar, consultar) se encuentran sin buscar
• Las imágenes se cargan con el tamaño adecuado
• Las tablas y los formularios funcionan en la pantalla pequeña

Por qué importa

Los visitantes abandonan las páginas que funcionan mal en el móvil. Además, Google valora sobre todo la versión móvil, véase Indexación mobile-first.

Qué hay detrás desde el punto de vista técnico

Tres elementos sostienen el principio. Primero, la indicación viewport en la cabecera de la página, que le dice al móvil que debe mostrar la página con el ancho del dispositivo. Si falta, el dispositivo dibuja un ancho de ordenador y lo reduce, de modo que todo parece diminuto. Segundo, medidas flexibles: las columnas y las imágenes se rigen por el ancho disponible en lugar de por valores fijos en píxeles. Tercero, los puntos de ruptura (breakpoints), en los que cambia la maquetación, por ejemplo de una columna a dos. Tiene sentido romper donde el contenido queda apretado, no según las medidas de determinados dispositivos, porque los tamaños de los dispositivos cambian constantemente.

Errores típicos

• Menú solo con el puntero: los menús desplegables que aparecen al pasar el ratón por encima no funcionan en la pantalla táctil, porque no existe el pasar por encima.
• Enlaces demasiado juntos: las áreas táctiles deberían medir por lo general unos 44 a 48 píxeles; de lo contrario, el pulgar acierta con la entrada equivocada.
• Ventanas emergentes que llenan la pantalla: en el móvil a menudo apenas se pueden cerrar y tapan el contenido.
• Imágenes enormes de ordenador: en el móvil tardan en cargarse innecesariamente, véase Optimizar imágenes.
• Texto en forma de imagen: no se escala, no se puede buscar y los programas de lectura en voz alta no lo leen.

Mito frente a hecho

Mito: una versión móvil propia en una dirección separada sería mejor porque se ajusta con exactitud. Hecho: dos versiones significan el doble de mantenimiento, y los contenidos acaban divergiendo enseguida. Una página adaptable lo mantiene todo en un solo lugar. En los sitios web de empresa, esto se considera por lo general el camino más sensato.

Ejemplo práctico: peluquería

Supongamos que un salón tiene una página de inicio muy bonita, pero el número de teléfono aparece solo como imagen en la cabecera. En el móvil es difícil de leer y no se puede pulsar. La corrección es pequeña: el número como texto real con enlace de teléfono, un botón fijo de llamada en el borde inferior y el horario justo debajo. La maquetación apenas cambia, pero la acción más habitual de los visitantes se resuelve con una pulsación en lugar de tres pasos.

Pasos de comprobación

1. Abra la vista de dispositivos en las herramientas para desarrolladores del navegador y repase anchos de unos 360, 768 y 1280 píxeles.
2. Sostenga el móvil en horizontal: ¿se sale algo del marco?
3. Amplíe la letra en el navegador al 200 por ciento y compruebe si se corta texto.
4. Rellene de verdad un formulario, con el teclado de la pantalla.
5. Cárguela en un dispositivo real con la red móvil, no solo con wifi.

Ayuda para decidir: ¿rehacer o adaptar?

Si su página es antigua y se ha construido solo con anchos definidos de forma fija, a menudo no se puede salvar con correcciones aisladas. Compruebe tres cosas: ¿funciona la navegación con el tacto? ¿Se puede leer el texto sin ampliar? ¿Se salen del marco las tablas y las imágenes? Si se cumple más de una, rehacer la maquetación suele ser más rentable que muchas correcciones sueltas, porque las antiguas medidas fijas se extienden por todo el código. Si solo afecta al menú o a imágenes concretas, a menudo basta con una revisión específica. Cómo encaja un paso así en un nuevo comienzo más amplio se muestra en Rediseño del sitio web.

Abra su sitio web en su propio móvil e intente realizar su tarea principal (llamar, pedir cita). Si no lo consigue en pocos segundos, hay que actuar. Más información en Sitios web.