Clicky

Los sitios responsive móvil son importantes para el rendimiento Web

sitio responsive

La importancia de la optimización para móviles

Se está disparando el número de usuarios de acceso a Internet con dispositivos móviles, tales como teléfonos inteligentes y tabletas. A medida que más usuarios llegan a un sitio a través de móvil, es vital optimizar la pantalla para pantallas más pequeñas y crear un sitio web responsive móvil. Mientras que los sitios optimizados para móviles fueron una vez la novedad, estos diseños son hoy esencialmente obligatorios.

Los motores de búsqueda están requiriendo optimización móvil. Google es famoso por penalizar a los sitios que no son amigables a móviles (mobile-friendly) mediante la reducción de sus PageRanks. Por lo tanto, es crucial para un sitio que tenga un buen desempeño en el móvil. El crecimiento digital proviene casi exclusivamente de los dispositivos móviles a un ritmo del 31% por año a nivel mundial (archivo PDF). Con los ordenadores de sobremesa convirtiéndose en puntos de contacto secundario para muchos usuarios, absolutamente no puedes permitirte el lujo de descuidar tu audiencia móvil.

La importancia de la optimización para móviles

Hay varios problemas que enfrenta el usuario al acceder a un sitio que está optimizado sólo para equipos de sobremesa/portátiles:

Tiempos de respuesta más lentos: los sitios de escritorio tienden a ser más grandes en tamaño que los sitios móviles. Esto, combinado con el hecho de que la mayoría de los dispositivos móviles funcionan en redes más lentas, resulta en tiempos de carga de página más largos. Muchos usuarios son impacientes. Si una página tarda demasiado tiempo en cargar, navegarán a otra parte. Si un sitio tarda incluso cuatro segundos en cargarse, se habrá perdido el 25% de los visitantes.

Dificultad en el uso y visualización del sitio: La visualización de un sitio grande en una pantalla pequeña puede resultar en que la página entera se contraiga significativamente. Para que el usuario pueda ver todo su contenido, él o ella tiene que ampliar/pellizcar y desplazarse hacia los lados. Estas son acciones que frustran a muchos usuarios. Por el contrario, los sitios móviles son inmediatamente legibles y utilizables para el usuario, lo que lleva a niveles más bajos de abandono de la página.

Teniendo en cuenta estos dos aspectos, la implementación de un sitio optimizado para audiencias móviles debería mejorar el rendimiento web. Además de que el sitio sea fácil de usar en pantallas más pequeñas, la simplicidad de la página también debe mejorar los tiempos de carga.

móvil responsive

La implementación de un sitio optimizado para móviles

Hay tres maneras de asegurarse de que una página está optimizada para dispositivos móviles:

Implementación de diseño responsive: un servidor entrega el mismo conjunto de código HTML en la misma URL independientemente del tipo de dispositivo del usuario (escritorio, tablet, móvil, etc.). Sin embargo, el sitio se procesará de forma diferente dependiendo del tamaño de pantalla del dispositivo. El diseño de un sitio puede cambiar basado en el dispositivo que un visitante está usando (todo el contenido sigue siendo idéntico). Esto se hace usando cambios en el CSS, especialmente con media queries, que son declaraciones condicionales que indican al navegador qué secciones del CSS se aplican y con qué tamaño de viewports.

Utilizar el servicio dinámico: en función de la información que reciba un servidor web sobre el navegador y el dispositivo del usuario, el servidor web ofrece una versión diferente de HTML. Sin embargo, el sitio utilizará la misma URL independientemente del tipo de dispositivo del usuario. La experiencia del usuario con el sitio puede variar dependiendo del dispositivo que esté usando. Por ejemplo, un sitio de tamaño de escritorio puede incluir un gran vídeo en la página de bienvenida, mientras que los usuarios móviles se dirigirán directamente a la página principal. Para implementar el servicio dinámico, se tendría que alojar varios conjuntos de HTML en el servidor web/CDN, con cada archivo correspondiente a una ventana de tamaño diferente.

Usar plantillas para móviles: Usando URL separadas, el servidor web entrega un conjunto diferente de código basado en el tamaño del dispositivo del usuario. Basado en lo que el servidor web sabe acerca del navegador/dispositivo del usuario, esto sucede usando la redirección HTTP.

Lo que se recomienda

Google recomienda primero el diseño sensible al móvil (en oposición al diseño adaptable móvil) como la mejor práctica, ya que prefiere indexar un sitio sobre muchos. Como tal, este artículo se centrará principalmente en esta opción. Esto se debe a que el servicio a un sitio desde un solo dominio genera fidelidad a la marca (lo que no ocurre con el servicio dinámico) y elimina el tiempo de retraso debido a la redirección (que ocurre cuando se utilizan plantillas para móviles).

Consideraciones para la construcción de un sitio web móvil responsive

Al diseñar para un público móvil, hay cosas adicionales que considerar en la parte superior de las mejores prácticas de diseño web general. A pesar del creciente tamaño de los dispositivos móviles (compara el iPhone 5 con su pantalla de 4", al iPhone 7 con un tamaño de pantalla de 4.7", o el iPhone 7 Plus, con una pantalla de 5.5") y su correspondiente aumento en la resolución de la pantalla, Estos dispositivos no se comparan con las computadoras portátiles y los escritorios en términos de tamaño y calidad de la pantalla. Por lo tanto, las páginas móviles-amistosas son típicamente más simples y tienen menos características que sus contrapartes más grandes.

Contenido del sitio web

Más bien que apretar todo el contenido del sitio de escritorio en un sitio para móviles, se debe personalizar lo que se muestra a los usuarios móviles. Puede haber casos en los que no se puede incluir absolutamente cada pieza de información, pero si considerar lo esencial a presentar a los usuarios. Por ejemplo, si un usuario puede registrarse y realizar una acción concreta en el sitio de escritorio, el usuario debe poder hacer lo mismo con el sitio para dispositivos móviles.

Además se debe tener cuidado de implementar funciones específicas para mejorar la experiencia del usuario móvil. Considerar el uso de botones y enlaces lo suficientemente grandes para que el usuario haga clic en ellos sin tocar accidentalmente algo más. Crear formularios que sean fáciles de usar con pequeños "teclados" y utilizar fuentes lo suficientemente grandes como para ser legibles para todos los tamaños de ventana gráfica.

La velocidad de carga

Los dispositivos móviles suelen funcionar en redes más lentas, por lo que la velocidad es esencial. Algunas maneras de mejorar los tiempos de carga de su sitio incluyen:

Reducir el número de solicitudes HTTP requeridas. Mientras que los usuarios móviles tienden a comportarse como lo harían en un ordenador portátil/escritorio, los dispositivos y redes móviles por lo general no pueden manejar el mismo volumen de trabajo. Como tal, se debe intentar reducir el número de solicitudes HTTP requeridas para el sitio. La reducción del número de solicitudes proporcionará la cantidad de información necesaria para que un usuario pueda lograr su objetivo.

Optimizar las imágenes que se utilizan. Si bien se puede estar tentado a aumentar el tamaño y el número de imágenes que se muestran, esto podría no ser una gran idea. El ancho de banda sigue siendo limitado para muchos usuarios, por lo que se debe comprimir y proporcionar las imágenes más pequeñas posibles.

Minimizar el número de archivos necesarios para procesar el sitio. Cada archivo requerido por el sitio, como JavaScript o archivos CSS e imágenes, requiere una solicitud HTTP adicional por el navegador del usuario para obtener el recurso. Hay que tratar de combinar (o incluso eliminar!) tantos de ellos como sea posible.

Conclusión

Con la base de usuarios siempre conectada hoy en día, un sitio web debe atender a los visitantes que utilizan dispositivos con pantallas de todos los tamaños. Hacerlo ya no es opcional como lo fue una vez. Los sitios responsive móviles son una parte crítica de la experiencia web de un usuario. Un sitio para dispositivos móviles y un buen rendimiento web pueden influir en si se obtiene o no visitas repetidas.

Jesus_Caceres