Módulo 3: Crear una experiencia de usuario eficaz en móviles

3.1.1 Evaluar tu sitio web móvil

Antes de presentar los principios del diseño de la experiencia de usuario a tus clientes, familiarízate con las distintas opciones de desarrollo del sitio web y sus ventajas e inconvenientes más importantes.

Hay tres técnicas principales para implementar un sitio web capaz de admitir pantallas de visualización de todos los tipos y tamaños. En el siguiente gráfico se comparan los tres métodos:

  1. Diseño web adaptable: publica el mismo código HTML en la misma URL, con independencia del dispositivo del usuario (ordenador, tablet, móvil, navegador no visual), pero puede procesar la visualización de manera diferente (es decir, "responder") según el tamaño de la pantalla. El diseño adaptable es el patrón de diseño recomendado por Google.
  2. Publicación dinámica: utiliza la misma URL con independencia del dispositivo, pero genera una versión distinta del código HTML para distintos tipos de dispositivos, en función de la información sobre el navegador del usuario que tiene el servidor.
  3. URL independientes: publica código distinto para cada dispositivo, en URL independientes. Esta configuración intenta detectar el dispositivo del usuario y, a continuación, lo redirige a la página apropiada mediante redireccionamientos HTTP junto con el encabezado Vary HTTP.

 

Image caption

Separate (m.dot)

Pros:

Useful if your clients have a distinct mobile-only experience vs. desktop, typically faster load times vs RWD

Cons:

Two separate properties to maintain and update; difficulty to provide a customer experience for tables and phones; limited functionality

 

Responsive (RWD)

Pros:

One codebase/canonical URL; generally easier to maintain and more cost-effective; automatically repositions elements based on device (client-side)

Cons:

Usually slower load times vs. separate; same experience across devices means limited-opportunity to cater UX to different user needs

 

Adaptive (AWD or Dynamic)

Pros:

Highly differentiated and optimal experience based on screen size, device, and OS; usually faster load times than RWD (server-side)

Cons:

Additional development resources and budgets required for maintenance due to multiple codebases

 

 

Google no prefiere ningún formato de URL concreto, siempre que las páginas y todos sus recursos sean accesibles para todos los agentes de usuario del robot de Google.

También es recomendable que visites los sitios web móviles de tus clientes para verlos por tu cuenta. Visita el sitio web móvil de tu cliente y completa una conversión. Es la mejor manera de familiarizarte con la experiencia del sitio y te ayudará a identificar los principios en los que deberás centrarte.

A partir de esa evaluación, recomienda los principios que lograrán que el sitio web de tu cliente esté preparado para móviles. ¿Cómo puedes hacerlo?

 

Image caption

UX evaluation and optimization suggestions

Pre-designed widgets

Programming templates to help build your client's platform

PageSpeed

Technical evaluation on your client's mobile site and app performance

Prototype project

Prototype of the mobile site and app

Certified Partners for UX implementation

*if necessary

 

 

  • Test My Site: en esta página de Think with Google puedes averiguar si tu sitio web está optimizado para móviles y obtener sugerencias de mejora. Test My Site utiliza la tecnología de PageSpeed Insights
  • WebPagetest: en este servicio online puedes ejecutar un conjunto de pruebas de rendimiento del sitio web con varias redes y ubicaciones de host. 



 
¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?