10 Meilleures Pratiques pour un site Mobile-Friendly

Le mobile: c’est le présent, c’est le futur, il est partout, tout le temps. Comme j’en parlais dans l’article précédent sur GoMo de Google, avoir un site mobile-friendly est désormais quasi-obligatoire si l’on tient compte du fait que les gens accèdent à internet de plus en plus via leur téléphone portable (Smartphone?).

Revue des 10 meilleures pratiques pour un site mobile-friendly selon Google (HowToGoMo.com).

Avant toute chose, un site mobile est une version d’un site conçue pour un appareil mobile, comme un téléphone portable, une tablette type iPad ou encore l’iTouch. L’ergonomie et les fonctionnalités de ces sites vont être adaptées à la taille de l’écran et au fait qu’il soit tactile d’où les différences avec les sites «classiques».

1° Rapidité

Le contenu du site devra être mis au premier plan, c’est-à-dire en haut du site en donnant la priorité au contenu et aux caractéristiques dont les utilisateurs ont le plus besoin. N’hésitez pas à regarder l’Analytics du site web original pour voir ce que les utilisateurs mobile font. Réduisez les blocs de texte à quelques points pour une lecture facilitée. Compressez les images pour les garder petites et rapides à charger.

2° Navigation simplifiée

Une navigation claires et une recherche facile aideront les visiteurs à trouver ce qu’ils cherchent. Minimisez le besoin de dérouler la page et garder cela vertical seulement. Utilisez une hiérarchie claire dans les menus. Affichez des boutons « retour » et « home » clair pour aider les utilisateurs à naviguer. Utilisez 7 liens ou moins par page de navigation.

3° Adaptation au tactile

Les gens utilisent désormais leurs doigts pour naviguer sur leur téléphone (pouces et index). Dessinez le site de manière à ce que des mains larges puissent facilement interagir avec. Utilisez de gros boutons centrés et leur donner un espace autour afin de réduire les clics accidentels. Pour les check boxes, rendez le texte associé cliquable.

4° Design associé à visibilité

Rendez facile la lecture du site pour les clients et rappelez-vous qu’ils peuvent se trouver dans un endroit avec peu de lumière. Créez un contraste entre le fond et le texte. Assurez-vous que le contenu rentre dans l’écran et peut être lu sans avoir à zoomer. Utilisez la taille et la couleur afin d’indiquer la priorité d’un lien ou d’un bouton. Utilisez des effets 3D et de l’ombre pour les boutons.

5° Accessibilité

Dans l’idéal, le site mobile devrait fonctionner sur tous les appareils mobiles et dans toutes les orientations possibles (écran à la verticale ou à l’horizontale). Trouvez des alternatives à Flash car il ne fonctionne pas partout. Utilisez HTML5 pour l’interactivité et l’animation. Gardez les utilisateurs au même endroit lorsqu’ils changent simplement d’orientation de l’écran.

6° Facilité de conversion

Peu importe l’objectif du site, les clients doivent être capables de le faire avec leur clavier virtuel et sans souris. Facilitez l’achat d’un produit ou le contact avec vous ! Concentrez-vous sur l’information qui aidera à la conversion (les détails d’un produit par exemple). Réduisez le nombre d’étapes nécessaires à la complétion d’une transaction. Gardez des formulaires courts avec peu de champs. Utilisez la fonctionnalité click-to-call pour tous les numéros de téléphone.

7° Information locale, de proximité

Les consommateurs cherchent tout le temps des informations locales sur leur téléphone – que ce soit pour localiser la station la plus proche ou trouver une pizzéria ouverte. Aidez les gens à vous trouver et venir à vous. Ayez votre adresse ou un localisateur de magasin sur la page d’arrivée. Incluez des cartes et directions. Utilisez le GPS lorsque c’est possible. Permettez aux utilisateurs de vérifier le stock dans les magasins proches.

8° Homogénéité

Les gens utilisent plusieurs types d’écrans tout au long de la journée. Proposez autant de fonctionnalités de votre site original sur votre site mobile afin de créer une expérience homogène. Maintenez les caractéristiques clés de votre site à travers de tous les canaux autant que possible. Proposez la même information sur les produits ou services. Permettez aux utilisateurs de sauvegarder les recherches fréquentes.

9° Utilisation de redirections vers le site mobile

Une redirection est un code que peut dire automatiquement si le visiteur utilise un appareil mobile et peut le rediriger alors vers la version mobile-friendly du site. Donnez le choix aux utilisateurs de revenir à la version originale mais rendez facile le retour au site mobile. Laissez les utilisateurs choisir quelle version ils préfèrent voir pour leurs prochaines visites.

10° Ecoute, apprentissage et itération

Les bons sites mobiles sont centrés sur l’utilisateur ce qui signifie qu’ils sont construits avec les apports de votre public. Demandez aux utilisateurs de votre site original ce qu’ils attendent d’un site mobile, faites des tests et des optimisations de manière continue. Utilisez Analytics pour connaître la façon dont les gens utilisent votre site. Si possible, faites des tests utilisateurs avant l’implémentation et écoutez les retours des utilisateurs après le lancement.

Pour finir je dirai que le SEO et ses bonnes pratiques telles qu’on les connait pour les sites web sont aussi valables pour les sites mobiles de manière générale. Par exemple, éviter de mettre des liens en Javascript, éviter d’utiliser des frames, utiliser des balises Hn, insérer des mots-clés (dans ce cas limités à 1 ou 2 seulement car sur mobile, les utilisateurs tapent peu de mots pour leurs recherches). Il ne reste plus qu'à se lancer: Go Mobile Now!