Module 3 : Créer une expérience utilisateur mobile efficace

3.1.1 Évaluer votre site mobile

Avant de présenter à vos clients les principes de l'expérience utilisateur, familiarisez-vous avec les différentes options de développement de site, et passez en revue leurs avantages et inconvénients principaux.

Il existe trois techniques principales pour créer un site Web adapté à tous les écrans. Le tableau ci-dessous propose un comparatif de ces méthodes :

  1. Responsive Web Design : le même code HTML est affiché sur la même URL quel que soit l'appareil utilisé (ordinateur, tablette, mobile ou navigateur non visuel). Toutefois, l'affichage peut être différent selon la taille de l'écran. Le Responsive Design est le modèle que nous recommandons.
  2. Diffusion dynamique : cette technique utilise la même URL quel que soit l'appareil utilisé, mais génère une version distincte du code HTML pour les différents types d'appareils selon les informations dont dispose le serveur au sujet du navigateur.
  3. URL distinctes : un code distinct est affiché sur chaque appareil et sur des URL distinctes. Cette configuration essaie de détecter l'appareil de l'internaute, puis le redirige vers la page appropriée à l'aide de redirections HTTP et de l'en-tête HTTP "Vary".

 

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

 

 

Nous ne préconisons aucun format d'URL particulier du moment que tous les user-agents Googlebot peuvent accéder à la totalité des pages et des éléments.

Nous vous conseillons de visiter les sites mobiles de vos clients et de les tester vous-même. Accédez au site mobile d'un client et effectuez une conversion. Il s'agit du meilleur moyen de vous familiariser avec l'expérience offerte par le site. Ce test vous permettra d'identifier les principes sur lesquels vous concentrer.

D'après cette évaluation, recommandez à votre client des principes qui permettront d'optimiser son site pour les mobiles. Voici comment effectuer cette évaluation.

 

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

 

 

  • Outil Test My Site : Test My Site de Think With Google vous permet d'évaluer la convivialité de votre site et vous suggère des améliorations. Cet outil est fourni par PageSpeed Insights.
  • WebPagetest : le service en ligne WebPagetest permet d'exécuter un ensemble de tests de performances sur votre site à l'aide de plusieurs réseaux et emplacements hôtes. 



 
Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?