Responsive design ou m-site ?

Plusieurs technologies sont disponibles pour optimiser son site pour le mobile, le choix devant se faire en prenant compte différents facteurs tels que les attentes de votre cible, le délai de réalisation, les ressources humaines disponibles, le coût, l’infrastructure… Mais à choisir entre responsive design ou m-site, comment savoir quelle technologie sera la plus adaptée à ses besoins ?

Responsive web design

Le Responsive design, ou Responsive web design, correspond à une technique de conception intelligente. Elle utilise une seule base de code HTML pour l’ensemble des plates-formes. Tous les appareils vont afficher les pages d’un site web à partir d'un même code, via une URL unique. Un redimensionnement automatique du contenu permet de s'adapter à l'écran utilisé, en tenant compte de points d'arrêt prédéfinis et de grilles fluides.

Le Responsive design nécessite une solide planification en amont. Les coûts peuvent être élevés au départ, mais une fois que la stratégie propre à l'appareil est définie, la maintenance demande généralement moins de ressources.

Avantages :

• Une seule URL pour tous les contenus : l'utilisation d'une URL unique pour un contenu donné facilite les interactions, le partage et l'ajout de liens par les utilisateurs avec votre contenu. En outre, les moteurs de recherche peuvent le trouver et l'indexer plus facilement.
• Expérience utilisateur simplifiée : la présentation de l'intégralité du contenu est personnalisée et des fonctionnalités propres à chaque type d'appareil peuvent être utilisées.
• Orientation flexible : le Responsive design permet, par nature, de passer d'une orientation « portrait » à « paysage », ou vice versa, en fonction de la façon dont l'utilisateur tient son appareil.
• Pas de redirection : cette méthode permet de diminuer le temps de chargement et d'améliorer les performances.

Inconvénients :

• Planification soignée obligatoire : sachant que l'intégralité du code HTML est partagée, une planification soignée est impérative pour créer une expérience utilisateur efficace et réellement personnalisée, avec des performances optimales pour chaque appareil et utilisateur.

Erreurs courantes :

• Données volumineuses : il faut faire attention à ne pas submerger les utilisateurs avec des images en taille réelle prévues pour les grands écrans. Il est recommandé de limiter les demandes HTTP, et de minimiser les codes CSS et JavaScript. Le contenu visible doit être chargé en premier et le chargement de tout le reste différé.

Qui doit utiliser cette technique ?

Elle s'adresse aux entreprises qui ont pour objectif de proposer une expérience utilisateur homogène et qui peuvent effectuer une planification globale pour tous les appareils par le biais d'une seule équipe web. Elle est utilisée, par exemple, par les sites Starbucks.co.uk, PCworld.co.uk et TescoBank.com. Lorsque de nouveaux appareils arrivent sur le marché, le Responsive design peut s'y adapter. Il est également avantageux de proposer une URL unique pour faciliter le partage d'articles et l'ajout de liens, sans confusion ni redirection.

M-site

Le m-site est la deuxième technologie la plus fréquemment employée pour développer un site mobile. Il s’agit de concevoir un site indépendant du site web initial. Le système détecte l’origine des visiteurs, et redirige ceux qui surfent depuis leurs smartphones vers un site optimisé pour leur device (généralement par le biais d'un sous-domaine, tel que m.votredomaine.com). Ce m-site, spécialement adapté au mobile, n’est visible que par les mobinautes. Les utilisateurs d’autres devices sont eux dirigés vers le site web habituel.

Avantages :

• Une expérience utilisateur personnalisée : créer un site mobile distinct, conçu exclusivement pour les mobinautes, permet une liberté totale dans la conception du site lui-même.
• Des modifications plus faciles à effectuer : les changements de contenu ou de conception peuvent se limiter à la version mobile du site, sans impact pour les utilisateurs d'autres appareils.

Inconvénients :

• Plusieurs URL : le partage d'une page web requiert une attention particulière concernant les redirections et l'intégration entre la version mobile et les autres versions du site. Les redirections entraînent également des temps de chargement des pages plus longs.
• Duplication de contenu : le fait d'avoir deux ensembles de contenus distincts peut rendre la gestion des données plus complexe.

Erreurs courantes :

• Redirections incorrectes : lorsqu'un mobinaute accède à une page bien spécifique du site pour ordinateur, il faut s’assurer qu'il n'est pas redirigé vers la page d'accueil générique du site mobile. Autre conseil important : attention à éviter les erreurs ne concernant que les smartphones, lorsqu'une URL pour ordinateur redirige l'utilisateur vers une URL pour mobile qui n'existe pas.
• Annotations manquantes : l'annotation bidirectionnelle permet à Googlebot de détecter le contenu, et aux algorithmes de comprendre la relation entre vos pages pour ordinateur et celles pour mobile, et de les traiter en conséquence.
• Expérience utilisateur hétérogène : les personnes qui consultent un m-site doivent se rendre compte qu'il s'agit de la même entreprise que lorsqu'ils parcourent votre site pour ordinateur. Cela évite toute confusion et une expérience utilisateur globale négative.

Qui doit utiliser cette technique ?

Elle s'applique particulièrement aux entreprises qui ont besoin, pour une raison ou une autre, de gérer leur site mobile de façon indépendante. Par exemple, certaines entreprises peuvent choisir de faire appel à un autre fournisseur pour leur version mobile ou souhaitent disposer d'une structure pour mobile qu'il n'est tout simplement pas possible d'obtenir en Responsive design. La configuration d'un site mobile est relativement simple et peut être très rentable. Par conséquent, cette option est intéressante pour les petites entreprises dont les besoins en termes de site web sont assez basiques.

Pour développer son site mobile, différentes technologies existent : à choisir entre responsive design ou m-site, il faut donc considérer ces différents avantages et inconvénients pour s’orienter vers la technologie la plus adaptée aux besoins de son site internet. A noter qu’une troisième technologie existe également pour créer un site mobile : la diffusion dynamique.