Optimiser son site pour le mobile : site dédié ou responsive design ?

Par Florent Desjardins 1

La part de l’Internet mobile est en forte hausse depuis maintenant plusieurs années. Le smartphone et la tablette numérique sont devenus des supports à ne pas négliger sous peine de perdre des visiteurs sur son site internet. Vous avez besoin d’un site mobile… Mais comment faire ? Comment travailler ? Quels sont les différents moyens techniques pour le faire ? Y’a-il une solution miracle ?

Le site mobile dédié

Un site mobile dédié est un site indépendant du site internet visité depuis un ordinateur. Il est conçu, développé, optimisé et adapté pour être accessible sur les interfaces mobiles. Il possède donc ses propres contenus et fonctionnalités spécifiques à cette plateforme. C’est le choix qu’à fait le réseau TCL (Transport en Commun Lyonnais) http://m.tcl.fr par exemple.

Le site mobile dédié à ses avantages en ce qui concerne les possibilités de créer un site optimisé pour mobile. Tout d’abord en adaptant totalement ses pages et en ajoutant ses propres contenus et fonctionnalités seulement pour les interfaces mobiles. Les smartphones possèdent dans la majorité des cas des navigateurs web récents. Nous n’avons donc pas besoin de nous préoccuper des anciennes versions d’Internet Explorer par exemple (IE 7/8) aux fonctionnalités parfois restreintes ou en retard !

De plus, on constate que l’expérience utilisateur est meilleure, beaucoup plus agréable. Le site a été conçu spécialement pour cette plateforme ce qui fait moins de contraintes et aucun compromis.

Evidemment il y a aussi des inconvénients en ce qui concerne le site mobile dédié. Par exemple, les URLS sont différentes par rapport au site internet classique. La prestation de référencement en sera donc certainement moins aisée. Chaque URL a une configuration qui propose des pages optimisées pour les ordinateurs (URL de base) puis une autre URL correspondante pour l’usage mobile. On aura besoin d’intervenir au niveau du code pour y intégrer des annotations spécifiques pour aider les moteurs de recherche à faire la différence entre les URLs mobiles et celles des ordinateurs.

Il faut noter aussi que la maintenance engendre des coûts plus importants du fait d’avoir plusieurs plateformes à modifier.

Enfin, il faudra compter également un temps de mise à jour et d’animation du site plus long car les contenus devront être intégrés à la fois sur la version classique et sur la version mobile.

Le responsive design ou adaptabilité mobile

responsive

Le responsive design ou adaptabilité mobile est un site qui s’adapte en fonction de la taille de l’écran utilisé par l’internaute. Quelque soit la taille de l’écran, le site conserve les mêmes URLs, le même code source et les mêmes contenus. Les contenus sont simplifiés, déplacés dans la page ou bien ils disparaissent de l’écran. Pour ce qui est des fonctionnalités, elles sont également simplifiées. C’est le choix de Starbucks.com qui utilise le responsive design.

Le coût de la conception d’un site responsive design sera probablement plus important que celui d’un site mobile dédié. Il faudra concevoir graphiquement toutes les déclinaisons en fonction des points de rupture et déterminer les principes de navigation pour chacun et cela pour toutes les pages types du site.

En production, il faudra jouer avec des problématiques liées aux différents environnements (fonctionnalités des navigateurs, souris/toucher…) et faire attention à la performance. En revanche, le coût de la maintenance et de mise à jour des contenus sera sensiblement réduit du fait qu’il n’y ait qu’un seul et unique site à modifier pour tous les terminaux. C’est une solution efficace permettant de s’adapter aux futurs appareils. Si un nouvel appareil fait sa sortie, aucune opération n’est nécessaire pour que le site soit adaptable sur ces nouveaux terminaux. Il faut noter que l’usage d’Internet se fait maintenant de plus en plus sur des terminaux différents, il est donc important d’optimiser un maximum son site internet.

Cependant, il faut également prendre en compte le temps de chargement des pages. Si les éléments constituants les pages ne sont pas optimisés (allégés), cela peut ralentir leur rapidité de chargement et donc remettre en cause la performance. En effet, la connexion des terminaux mobiles est moins efficace que celle des ordinateurs (ADSL, Fibre optique… contre 3G, Edge…). Les capacités matérielles des téléphones sont également moins bonnes que sur un ordinateur. Sur un site responsive, la problématique du chargement des pages sera plus importante que sur le site mobile dédié.

Les bonnes pratique à adopter

Après divers projets réalisés au sein de l’agence, nous avons déterminé une liste non exhaustive de bonnes pratiques à adopter au moment de réaliser un site mobile.

  • Rester « simple », éviter la complexité inutile (un produit simple et plus facile à comprendre et à maîtriser).
  • Concevoir une interface efficace et optimiser la navigation (pensez aux utilisateurs en déplacement ayant besoin d’informations rapidement). 
  • Être conscient des limitations des terminaux (petits écrans, connections 3G, petite taille des claviers, faibles performances, contraste des couleurs, etc).
  • Démarrer la reflexion par la version mobile en utilisant les éléments indispensables, les contenus et les informations primordiales, puis étoffer au fur et à mesure que l’écran s’agrandit.
  • Être flexible
  • Mettre en avant le contenu (qui reste ce qu’il y a de plus important sur un site internet) et le hiérarchiser.
  • Chercher la simplicité (pourquoi faire compliqué quand on peut faire simple ?).
  • Utiliser les standards
  • Privilégier les gabarits de page et éléments d’interface réutilisables.

On va privilégier le plus souvent, le site mobile dédié comme simple adaptation du site internet préexistant. En revanche, on va mettre en oeuvre le responsive design lors de la création d’un nouveau site et lors d’une refonte. Dans tous les cas, il faudra évaluer la technologie la mieux adaptée en fonction du contexte.

Respecter ces pratiques est la meilleure garantie d’être optimisé sur le plus grand nombre de supports. 

Votre prestataire doit faire dialoguer les différents pôles métiers. N’hésitez pas à échanger au maximum avec lui pour trouver les meilleurs solutions pour votre site mobile.

Notre vision du site mobile

Rendre son site mobile c’est rendre son site accessible et plus intuitif. Pourquoi ? Parce qu’à l’heure actuelle, nous sommes plus de la moitié des internautes à utiliser nos smartphones pour la navigation et la recherche internet. En sachant que la problématique de chargement des pages est plus importante sur un site responsive, il est judicieux de prendre en compte la rapidité de chargement pour une plus grande visibilité car 74% des mobinautes abandonnent leur navigation au bout de 5 secondes d’attentes.

En conclusion, il n’y a pas vraiment de solutions favorables par rapport à une autre, mais d’après nous, l’usage du responsive est avantageux. Selon nous, le responsive design a le meilleur rapport entre accessibilité, expérience utilisateurs, référencement et coût de conception et de maintenance. Google et d’autres géants du Web se sont tournés vers le responsive design et ses points positifs.


Commentaires
  1. Avatar de Florent Desjardins
    Rooney

    Bonjour,
    Si je dois répondre entre un site mobile ou un responsive, je penche plutôt sur le responsive. Voilà pourquoi: pour le mobile vous avez soulevez des inconvénients importants sur l’url des deux sites, ce qui veut dire qu’il y a deux gestions indépendantes sur les deux sites, tant sur le plan technique que sur le plan référencement. Pour le responsive, le problème réside surtout sur le temps de chargement, le coût du développement.
    Mon point de vue est donc le responsive, car à long terme, le coût est amorti. Pour avoir moins de temps de chargement, il faut faire un site de type flat design. Pourquoi? Parce que c’est minimaliste, léger, facile à faire sion a les bons outils et les bonnes couleurs, et croyez moi ça passe trop bien sur les écrans mobiles et les pc.
    Voici notre blog de formation seo: http://www.alphorm.com/tutoriel/formation-en-ligne-referencement-naturel-seo si quelqu’un est intéressé. Vous pouvez donner vos avis sur notre site bien sûr, merci!

    Répondre
Commenter