Aunque la cantidad de sitios web sin optimización para dispositivos móviles se está reduciendo, quedan algunos que están diseñados solo para escritorio. Lamentablemente, el servicio web "movilizador" anterior de Google se suspendió. El sucesor espiritual del servicio es Google Weblight, diseñado en torno a la optimización para conexiones lentas en lugar de revisar sitios para visualización móvil. Más allá del servicio de Google, hay una serie de prácticas y herramientas que deben tenerse en cuenta al desarrollar un sitio pensando en los dispositivos móviles.
Pasos
Parte 1 de 2: Experimentar con Google Weblight
Paso 1. Analice cómo funciona Weblight
Weblight es un algoritmo creado por Google para proporcionar a los usuarios cargas de página más rápidas y ligeras cuando se encuentran en malas condiciones de red. Esto significa que Weblight no tiene interfaz de usuario y opera en el backend. Las páginas están despojadas de sus elementos más complejos, proporcionando una experiencia sencilla y ligera, en lugar de una optimizada explícitamente para la plataforma móvil.
Paso 2. Pruebe los cambios del sitio con Weblight
En su dispositivo móvil, simplemente agregue la URL completa de su sitio al final de la dirección de weblight (por ejemplo, si su sitio web es "mywebsite.com", ingrese https://googleweblight.com/?lite_url=https://mywebsite.com). La página cargará una versión simplificada pero funcional de sí misma. Con los elementos eliminados, algunos sitios pueden aparecer mucho mejor en las pantallas de los dispositivos móviles.
Paso 3. Reconozca las limitaciones
Tenga en cuenta que esta no es una herramienta de conversión explícita diseñada para la interacción del usuario. Si bien la entrada manual al sitio web se puede utilizar en caso de apuro, Weblight está diseñado para la velocidad, no para la usabilidad.
Parte 2 de 2: Diseño para compatibilidad móvil
Paso 1. Tenga en cuenta las limitaciones de los dispositivos móviles
Los dispositivos móviles comparten algunos aspectos que los distinguen de sus contrapartes de escritorio. Estas características principales deben ser las consideraciones principales al crear un sitio para el consumo móvil.
- Pantallas pequeñas y verticalidad: aunque las resoluciones de pantalla en dispositivos móviles mejoran constantemente, el tamaño y el factor de forma siguen siendo una preocupación para el diseño del sitio. Diseñar un sitio en un diseño de una sola columna es lo mejor para los teléfonos (las tabletas a menudo pueden usar sitios de escritorio sin demasiados problemas).
- Interfaces táctiles: los elementos de la página deben colocarse teniendo en cuenta el tamaño de un dedo. Los elementos que utilizan el mouseover deben minimizarse o rediseñarse para el tacto (por ejemplo, menús desplegables).
- Velocidades de datos: una de las grandes ventajas de los dispositivos móviles es el uso fuera del alcance de wifi, pero las conexiones de datos suelen ser más lentas y menos fiables. Las interfaces de usuario (UI) deben seguir siendo simples y el contenido debe ser visible y accesible. Demasiado desorden atascará los tiempos de carga y dificultará la navegación.
Paso 2. Utilice un servicio de Sistema de gestión de contenido (CMS)
Para aquellos que desarrollan con menos recursos, usar un servicio CMS como Wordpress o Squarespace es una gran opción para un diseño móvil fácil de usar y de bajo costo. Los temas que utilizan un diseño web adaptable proporcionarán la plantilla más sencilla para un sitio móvil.
El diseño web receptivo es una teoría del diseño web que promueve el uso de elementos de diseño fluido para permitir transiciones fluidas de diseño y usabilidad entre plataformas
Paso 3. Pruebe las pantallas de los dispositivos móviles con el software de escritorio
Hay una serie de aplicaciones web gratuitas que le permiten emular dispositivos móviles para probar la estética y la funcionalidad del sitio web. Usar estas herramientas es tan fácil como seleccionar el dispositivo de prueba deseado y luego ingresar al sitio web de destino para obtener una vista previa. La mayoría incluirá herramientas para variables como la orientación de la pantalla, la densidad de píxeles o incluso la selección del navegador. Algunos ejemplos populares son:
- Emulador de modo de dispositivo Chrome
- mobilephoneemulator.com
- screenfly (un subconjunto de quirktools)
- mobiletest.me (membresía paga)
