Les sites internet sont aujourd’hui consultés avec des terminaux allant du smartphone à la télévision connectée en passant par la tablette et l’ordinateur de bureau.
Proposer à tous les types d’utilisateurs un site web où la navigation est aussi simple que rapide est indispensable. De nombreux sites sont en effet consultés par plus de 50% de mobinautes, les internautes utilisant leur téléphone pour surfer.
Si un site ne s’adapte pas à son écran, l’internaute risque de passer son chemin et à bien peu de chances de se transformer en client ou simplement de capter le message que l’on souhaiterait lui transmettre.
Le temps de chargement est également un facteur essentiel dans la réussite d’un site internet. Comme pour l’adaptabilité, un internaute devant attendre plusieurs secondes avant de pouvoir consulter une page ira surement voir si l’herbe n’est pas plus verte chez le concurrent. De plus, les moteurs de recherche, comme Google, ont fait du temps de chargement, et aussi de l’adaptabilité d’un site aux différents terminaux, un critère de positionnement des pages dans les résultats.
La multiplicité des terminaux et des connexions font du développement d’un site internet un projet complexe demandant un niveau d’expertise relativement élevé. Des méthodes de conception répondent heureusement à ces problématiques.
Développement d’une Version Mobile
L’une des solution est de développer une version spécialement prévue pour les mobiles. Lorsque le mobinaute accède au site, il est automatiquement redirigé vers une version allégée du site.
La version mobile permet de créer des pages avec des ressources moins lourdes et où la navigation a été pensée pour les écrans de petite taille.
Si cette solution peut paraître miraculeuse, elle demande néanmoins un développement spécifique et multiplie par deux les opérations de maintenance.
Développement d’un Site Responsive
Le Responsive Design est une excellente alternative à la création d’une version mobile. Elle est aujourd’hui privilégiée par de nombreux propriétaires de sites internet.
Cette solution permet en effet de développer une seule et unique version d’un site internet. Tous les internautes – quels que soient leurs terminaux – consultent les mêmes pages. L’adaptation à l’écran de l’utilisateur est réalisée avec des règles CSS, les medias queries. Le principe clé du Responsive Design repose sur des dimensionnements exprimées en pourcentage de la taille de l’écran et non en pixels. Cette technique est également utilisée par les versions mobiles modernes.
Ce codage permet par exemple de placer une colonne latérale sous le contenu principal lorsque la largeur de l’écran de l’utilisateur est peu importante.
Pour réduire le temps de chargement de ces pages adaptatives, il est recommandé de proposer des ressources adaptées aux différents terminaux. Les images sont pour la majorité des pages internet les ressources les plus exigeantes en terme de connexion. Si elles ont pendant longtemps pénalisé les sites ayant adopté le Responsive Design, une solution a été apportée par HTML5. Il est en effet maintenant possible d’utiliser l’attribut srcset de la balise img pour permettre au navigateur de choisir une image adaptée aux caractéristiques du terminal.
Pour créer votre site responsive vous devez donc non seulement disposer d’un thème utilisant les media queries mais aussi le concevoir afin que des ressources « allégées » soient téléchargées par les visiteurs aux connexions limitées.
Développement d’une Version AMP
Un site responsive ou une version mobile reposent sur le HTML, le CSS et le Javascript. Si ces deux conceptions permettent de proposer des sites parfaitement adaptatifs aux différents écrans du marché, ils ne permettent pas d’obtenir le même niveau d’excellence pour le temps de chargement.
Pour permettre aux développeurs et aux utilisateurs de tirer le meilleur de leurs connexions et de leurs appareils, le projet AMP – Accelerated Mobile Pages – a été lancé par Google.
AMP repose sur les langages HTML, le CSS et le Javascript mais revisite ces langages en proposant des éléments dérivés dont les performances en terme de chargement sont sans commune mesure. De plus, AMP impose d’utiliser des techniques de programmation favorisant un chargement ultra-rapide des pages. Le lazy-loading – le chargement différé des ressources – est un exemple de technique imposée par AMP.
La création d’un langage « dérivé » contraint le propriétaire d’un site internet à créer une version AMP de son site. Comme pour la création d’une version mobile, le temps de développement et de maintenance sont doublés.
Si AMP permet d’afficher des pages à la vitesse de l’éclair, les contraintes techniques qu’il impose rend très difficile la création d’une version AMP de certains sites internet. Actuellement, les sites d’actualité ou les blogs sont parfaitement adaptés à AMP. Les sites dont les pages reposent sur de nombreuses fonctionnalités Javascript devront effectuer des développements spécifiques pour offrir les mêmes services aux utilisateurs AMP.
De nombreuses extensions et plugins permettent de créer en un clic une version AMP d’un site internet. Les sites ou blog utilisant WordPress peuvent avec une extension s’offrir gratuitement une version AMP.
Pour faire franchir le pas d’AMP aux propriétaires de sites internet, Google a créé en début d’année 2016 un cache AMP. Les internautes accèdent aux pages AMP d’un site internet depuis les serveurs de Google et non plus depuis le serveur d’ « origine » du site. Si l’hébergement du contenu d’un site par Google pose de nombreuses questions, il est tout de même recommandé de suivre les consignes et les technologies mises en avant par le moteur de recherche.
Les pages AMP indexées et enregistrées par Google sont mises en avant dans Google News lorsque les recherches sont effectuées depuis des mobiles.
Quelle solution choisir ?
Un site internet doit proposer aujourd’hui à l’internaute quelque soit son terminal et sa connexion des pages adaptatives et rapides à charger.
Le Responsive Design permet de répondre globalement à cette problématique. Si les techniques et les bonnes pratiques de cette méthode sont appropriées pour les téléviseurs, les ordinateurs de bureau et les tablettes, elles peuvent s’avérer insuffisantes pour les smartphones dont les connexions peuvent être très limitées.
Pour offrir aux mobinautes une navigation rapide et agréable, la création d’une version AMP d’un site pourrait devenir incontournable. Si cette technologie n’est pas encore devenue un standard, elle doit dès à présent être déployée par les sites internet puisque Google la privilégie déjà dans les résultats de son moteur de recherche.
L’adoption d’AMP pourrait conduire dans les prochains mois à rendre obsolète la création de versions mobiles.
