Sites Web mobiles: Mobile dédié, responsive, adaptatif ou format bureau?

Les Différentes approches de conception de sites Web mobiles, leurs avantages et leurs inconvénients. Pourquoi choisir un site responsive ou une version mobile dédiée? Suivez le guide 🙂

Sur le Web, tous les sites Web ne sont pas créés égaux. Sur un appareil mobile, les utilisateurs peuvent rencontrer l’un des types de sites suivants:

• Les sites dédiés aux mobiles sont conçus pour les téléphones mobiles.
• Les applications Web sont un type spécial de site dédié aux mobiles qui ressemble à une application.
• Les sites responsive-design sont des sites conçus pour une multitude d’appareils avec des tailles d’écran différentes; ils ajustent automatiquement la disposition de leur contenu à la taille d’écran disponible.
• Les sites complets (ou de bureau) sont conçus pour le bureau et ne sont pas optimisés pour les mobiles.

Sites dédiés aux mobiles

Les sites dédiés aux mobiles sont des sites spécialement conçus pour les téléphones mobiles. Ils detiennent souvent une URL distincte (par exemple, m.site.com) et sont complètement distincts de la version classique du site pour ordinateur. Ils contiennent des fonctionnalités ou du contenu jugés appropriés pour le mobile; fréquemment, on y trouvera un condensé du contenu qui est disponible sur la version standart avec un design addapté et pensé pour le mobile. Ils sont souvent mis en contraste avec les sites responsive, qui contiennent généralement le même contenu et les mêmes fonctionnalités pour les mobiles et les ordinateurs de bureau, mais réorganisent ces fonctionnalités sur mobile.

Applications Web

Les applications Web ne sont pas de vraies applications; Ce sont de vrais sites Web qui ressemblent à des applications natives, mais qui ne sont pas implémentés en tant que tels. En effet, vous ne trouverez pas ce type d’application sur le Store. Un article passant en revue les differents types d’applications sera bientot disponible, restez connecté! 😉

Conception réactive ou « responsive »

La conception responsive est une technique de développement qui détecte le type de client et ajuste dynamiquement la disposition d’un site en fonction de la taille de l’écran sur lequel il est affiché. Ainsi, le même contenu peut être affiché dans un format à trois colonnes sur un bureau, un format à deux colonnes sur une tablette et un format à une colonne sur un smartphone.

Les versions tablette (à droite) et mobile (à gauche) affichent le meme contenu que la version classique sur deux colonnes et une colonne respectivement.

L’une des plaintes contre les sites dédiés aux mobiles est qu’ils excluent souvent le contenu et les fonctionnalités qui peuvent s’avérer pertinents au moins pour certains utilisateurs. La conception adaptative s’attaque à cette objection en recherchant la parité des contenus et des fonctionnalités entre différentes versions d’un site.

Dans la pratique, la conception adaptative est souvent un continuum: de nombreux sites responsive ne sont pas « entièrement » responsive et n’ont pas une fonctionnalité ou une parité de contenu à 100%; à la place, ils suppriment les fonctionnalités rarement nécessaires sur les mobiles.

Sites dédiés aux mobiles VS Sites Responsive

Voici certains des avantages et des inconvénients relatifs de ces deux approches.

• Les sites responsive peuvent prendre en charge une grande variété de périphériques et de tailles d’écran avec une seule implémentation. Les sites dédiés sont spécifiques aux appareils: les entreprises doivent créer des sites distincts pour les mobiles et les ordinateurs de bureau. En revanche, le même site responsive peut fonctionner sur une gamme d’appareils et de tailles d’écran, des smartphones aux tablettes en passant par les ordinateurs de bureau.
• Les sites responsive offrent un contenu et une parité de fonctionnalités (au moins dans une certaine mesure). Contrairement aux sites dédiés aux mobiles, du moins en théorie, le même contenu et la même fonctionnalité sont disponibles sur toutes les versions d’un site responsive. (Nous avons vu que dans la pratique, certains sites responsive omettent le contenu et les fonctionnalités sur mobile, mais dans une moindre mesure que les sites dédiés aux mobiles). Plus besoin de décider quelles fonctionnalités sont importantes sur mobile et lesquelles doivent être omises. Bien que vous ayez toujours besoin de hiérarchiser les fonctionnalités et de décider de leur emplacement sur des écrans plus petits.
• Les sites responsive étaient auparavant plus faciles à trouver avec un moteur de recherche. Les sites mobiles ont une URL différente de celle des sites de bureau et, à l’origine, ils n’héritent pas toujours d’un rang de recherche élevé comparés à leur version bureau. En conséquence, les sites mobiles peuvent apparaître plus bas sur les résultats des pages du moteur de recherche. Et même si les sites de bureau détectaient les clients mobiles et redirigeaient les utilisateurs vers le site mobile correspondant, la redirection pouvait prendre plus de temps et nuire à l’expérience de l’utilisateur mobile (en plus, cela pourrait également affecter le référencement).
  Puisqu’une seule URL correspond à toutes les versions d’un site responsive, les sites réactifs n’ont pas eu à s’inquiéter de SEO ou de redirections.
  De nos jours, cependant, les moteurs de recherche modernes ont appris à gérer des sites dédiés aux mobiles, et ils envoient les utilisateurs vers la version mobile du site, si elle est disponible.
• Les sites responsive sauvegardent le contenu et la maintenance des fonctionnalités. Un seul site et un seul référentiel de contenu sont plus faciles à gérer que plusieurs sites distincts. Cependant, toute modification de l’interface doit être testée sur tous les périphériques.
• Les sites responsive ont tendance à être plus chers à développer. Nos clients signalent que le processus de création d’un site entièrement responsive à partir de zéro peut être plus coûteux que la simple création d’un site mobile distinct. En outre, les compétences de développement requises ont tendance à être plus avancées pour les sites responsive.
• Les sites responsive ont tendance à être plus lents. Bien qu’il existe des techniques pour améliorer leurs performances, car le même contenu est fourni à tous les types d’appareils, le chargement d’une page réactive peut prendre plus de temps que le chargement d’une page dédiée au mobile.
• Les sites responsive fonctionnent moins bien pour les tâches et contenus complexes. Les tâches complexes sont difficiles à gérer sur tous les appareils. Les feuilles de calcul complexes, les tableaux de comparaison et les visualisations sont souvent difficiles à redimensionner correctement sur les petits écrans mobiles. Les sites dédiés au mobile peuvent souvent décider de laisser de côté un tel contenu, d’autant plus que les utilisateurs ont tendance à éviter de faire des tâches compliquées sur les smartphones.
• Les sites responsive ne s’intègrent pas bien avec les services tiers existants. Si vous créez un site qui repose sur un service backend indépendant distinct (par exemple, un moteur de réservation sur un site d’hôtel), il est souvent difficile d’intégrer l’interface de ce service dans un site réactif.

Un dernier inconvénient des sites responsive est que certaines entreprises peuvent penser que cette technique de mise en œuvre les libère de considérer la facilité d’utilisation de leur conception mobile et de leur design. Ce n’est pas parce qu’une implémentation permet au même code de s’adapter et d’afficher le contenu sur de nombreuses tailles d’écran différentes que les interfaces utilisateur résultantes seront décentes, et encore moins optimisées pour une utilisation avec une catégorie d’appareils donnée.

Conception adaptative

La conception adaptative est une version de la conception responsive dans laquelle le serveur détecte les capacités d’un périphérique client et n’envoie que du contenu et des fonctionnalités pouvant être affichés de manière appropriée sur ce périphérique. Les appareils plus puissants reçoivent un contenu plus complexe enrichi de fonctionnalités CSS et JavaScript hébergées par ces appareils. Les périphériques moins puissants sur les faibles connexions réseau recevront une versions légères de la page – dépouillée et allant à l’essentiel. Cette technique est parfois appelée amélioration progressive.

Le principal avantage de la conception adaptative est qu’elle résout le problème des temps de réponse lents qui affectent souvent la version responsive.

Sites complets sur mobile?

Les utilisateurs disent parfois qu’ils préfèrent aller sur un site de bureau plutôt que sur un site mobile. C’est principalement dû à leur expérience antérieure avec le contenu optimisé pour mobile: dans le but de rendre le contenu plus digeste, certains sites dédiés au mobile n’incluent qu’un petit sous-ensemble des offres du site complet sur leur site mobile. Et parfois, les gens peuvent être tellement habitués au site complet qu’ils peuvent utiliser ces connaissances préalables pour se repérer sur un petit écran.

Enfin, les utilisateurs déclarent parfois que le site mobile est abrutit: c’est trop simple et appauvri. Un de nos participants essayait de faire une réservation sur le site mobile d’un hôtel. La première chose qu’il a dite quand il a vu le site était que c’était très barbant, et il s’attendait à un site Web plus flashy de cette compagnie (qui s’est avérée être un grand hôtel de casino à Las Vegas).

Cependant, il a pu terminer la réservation rapidement. En fin de compte, il en est venue à apprécier la simplicité du site et a été agréablement surprise de la facilité avec laquelle il a pu accomplir cette tâche.

La ligne de fond est: Vous ne devriez pas écouter ce que les utilisateurs disent, mais plutôt regarder ce qu’ils font. Lorsque les internautes utilisent des sites optimisés pour mobile sur leurs appareils mobiles, ils sont généralement plus efficaces et plus performants. Mais quand vous leur demandez s’ils préfèrent les sites mobiles, ils peuvent vous dire le contraire.

Un mot au sujet des « phablets »

Dans nos études impliquant des phablets, c’est-à-dire des téléphones avec des écrans supérieurs à 5,3 pouces, l’écran plus large a permis aux participants de mieux lire, et a également permis à certains d’utiliser le site de bureau. Alors que certains de nos testeurs en phablets préféraient systématiquement les sites de bureau, la convivialité de ces sites sur l’écran (encore petit) est loin d’être bonne, et les gens ont eu de la difficulté avec de petites cibles aussi bien qu’avec la taille reduite des caracteres.

Dans l’ensemble, alors que sur les tablettes de grande taille (comme iPad), les sites complets fonctionnent décemment et un petit nombre d’ajustements mineurs peuvent les rendre tout à fait utilisables, sur les phablettes, ils restent très sollicités. Pour cette raison, nous ne vous recommandons pas d’envoyer vos utilisateurs phablet sur votre site de bureau.

Conclusion

Mobile-dédié, responsive ou adaptatif sont tous les moyens possibles pour proposer une expérience utilisateur pour les utilisateur de votre site sur mobile. (Fournir le site de bureau sur mobile est aussi une possibilité, mais pas celle que nous recommandons). Chacun d’entre eux a des avantages et des inconvénients, et ils s’influencent même mutuellement. Pour les utilisateurs, il est rare qu’ils détectent le mode utilisé. Les personnes normales ne reconnaissent pas les sites responsive ou adaptatifs comme étant différents des sites mobiles, et ils ne les traitent pas différemment. (La seule façon de savoir en tant qu’utilisateur final qu’un site est implémenté en responsive design est de redimensionner la fenêtre dans laquelle il est affiché sur le bureau, afin de vérifier si le contenu se rediffuse.
Le pourcentage de visite depuis un appareil mobile ayant considérablement augmenté ces dernières années, il est aujourd’hui essentiel, pour ne pas dire vital, de choisir avec attention quel type de conception adopter pour votre site internet dans sa version mobile.