Las páginas web que están optimizadas para su uso en dispositivos móviles difieren de las que aparecen en computadoras de escritorio y portátiles. Estos últimos están diseñados para pantallas grandes y clics precisos del mouse, mientras que las páginas web móviles están diseñadas para pantallas más pequeñas y toques imprecisos con los dedos.
- Diseñado para pantallas más pequeñas y toques imprecisos con los dedos.
- Diseñado para pantallas grandes con un clic preciso del mouse.
Dado que la mayoría de las visitas al sitio web provienen de dispositivos móviles, los diseñadores de sitios tienen la tarea de proporcionar versiones que funcionen tanto con dispositivos móviles como con computadoras de escritorio. El enfoque más común es usar un diseño web receptivo, que entrega automáticamente la versión adecuada según el dispositivo del usuario y el tamaño de la pantalla, según lo detecta el navegador.
En cualquier caso, las páginas web optimizadas para dispositivos móviles se diferencian de las versiones de escritorio en varios aspectos.
Diseño de página: las pantallas móviles tienen menos espacio
- Las pantallas de teléfonos inteligentes y tabletas miden de 4 a 10 pulgadas en diagonal.
-
Los widgets de menú plegables o expandibles suelen reemplazar las barras laterales y los voluminosos menús de encabezado.
- Gráficos de ancho completo con uso judicial del espacio entre el texto.
- La mayoría de los monitores de escritorio miden de 19 a 24 pulgadas en diagonal.
- Los enlaces patrocinados y los anuncios publicitarios grandes son más comunes.
- Texto más denso con más margen para gráficos.
La diferencia más obvia entre las páginas web de escritorio y móviles es el espacio real de la pantalla. Mientras que la mayoría de los monitores de escritorio miden al menos 19 pulgadas a 24 pulgadas en diagonal, las tabletas suelen tener alrededor de 10 pulgadas. Los teléfonos inteligentes miden aproximadamente 4 pulgadas en diagonal. Simplemente alejar no convierte con éxito una página web a una versión compatible con dispositivos móviles porque hace que el texto sea ilegible y requiere un paso adicional por parte del visitante del sitio. Además, tocar con precisión elementos diminutos se vuelve imposible.
Para solucionar el problema, los diseñadores pueden eliminar las barras laterales y los gráficos que no son estrictamente necesarios. En su lugar, utilizan gráficos más pequeños, aumentan el tamaño de las fuentes y contraen el contenido en widgets expandibles. Esta limitación de bienes raíces ha impulsado un tipo de pensamiento completamente diferente entre los diseñadores web.
Además, los widgets de menú plegables o expandibles suelen reemplazar las barras laterales y los voluminosos menús de encabezado. En su afán por hacer que cada milímetro de espacio en la pantalla cuente, los diseñadores eliminan los espacios en blanco superfluos, al mismo tiempo que cuidan la legibilidad.
Una multitud de enlaces patrocinados y grandes anuncios publicitarios simplemente no funcionan en un teléfono o tableta pequeña. En cambio, los pequeños anuncios emergentes son más comunes en las páginas web móviles.
Los diseños que presentan texto envuelto alrededor de un gráfico no funcionan bien en dispositivos móviles. En cambio, los diseñadores a menudo les dan a esos gráficos el ancho completo de la pantalla y ejecutan el texto debajo o arriba. Del mismo modo, un buen diseño web divide el texto en fragmentos para facilitar la lectura; nadie quiere leer paredes sólidas de texto. Esto se vuelve aún más importante en las pantallas pequeñas. El uso juicioso de los espacios en blanco es crucial.
Controles de página: precisión de escritorio frente a blobs móviles
- Áreas de toque grandes o puntos de acceso para una navegación más precisa.
- Diferente URL: agrega la letra "m". Suele ser una opción para ver la versión de escritorio de un sitio.
- Las credenciales de inicio de sesión a menudo tienen un espacio dedicado, a veces con accesibilidad de huellas dactilares.
- Enlaces y botones basados en cursores más precisos.
A diferencia de un puntero de mouse preciso en su escritorio, el dedo humano es una gota, y tocar requiere objetivos grandes en la pantalla para los hipervínculos. Los sitios optimizados para dispositivos móviles ofrecen grandes áreas de toque (o puntos de acceso) para facilitar una navegación precisa.
Las páginas web compatibles con dispositivos móviles también suelen incluir la letra m en sus direcciones; por ejemplo, la dirección móvil de Facebook es m.facebook.com. La URL móvil generalmente se elige automáticamente cuando navega con una tableta móvil o un teléfono inteligente. En algunos casos, verá un enlace que se puede tocar que le permite cambiar a la versión de escritorio normal de la página.
Los campos de inicio de sesión y contraseña destinados a computadoras de escritorio y portátiles se vuelven pequeños e inutilizables en un teléfono, por lo que los editores web los hacen más grandes, a veces dándoles sus propias páginas para facilitar su uso. Iniciar sesión con una huella digital u otra cuenta, como Google o Facebook, se está volviendo cada vez más común a medida que evolucionan las capacidades de los dispositivos y servicios.
¿Por qué es importante?
Las páginas web móviles están diseñadas para dispositivos portátiles y son bastante diferentes de las páginas creadas para lectura de escritorio. Si bien generalmente puede ver la versión de escritorio de una página web en un dispositivo móvil y viceversa, están diseñados de manera diferente para que el contenido sea más fácil de ver, leer y navegar.
