Un site internet responsive (avec un design adaptatif) vous permet de proposer un même contenu de manière différente et optimisée pour des écrans de toutes tailles, en réponse à l’explosion du marché des smartphones et des tablettes.
Qu’est-ce qu’un site responsive ?
Une problématique s’est posée quand les smartphones ont commencé à recevoir l’internet haut débit, et quand les tablettes sont arrivées dans les foyers. Comment peut-on proposer un contenu de manière efficace, alors que chaque internaute est susceptible d’avoir une résolution d’écran différente ?
Une premier solution consiste à proposer un site internet distinct pour les mobinautes. Une entreprise peut ainsi avoir un site internet monentreprise.com et un site internet monentreprise.mobi (ou m.monentreprise.com).
Cette solution permet de proposer deux sites totalement différents, répondant à des problématiques précises et distinctes. Mais elle a l’inconvénient de dupliquer le contenu, et donc de multiplier les mises à jour et le risque d’erreurs (liens cassés …).
Une deuxième solution consiste à réaliser un design responsive (ou design adaptatif), conçu pour s’afficher sur la plupart des tailles d’écran. Les différents éléments de la page sont alors programmés pour s’afficher de façon différente suivant la largeur de la page.
Vous pouvez en avoir un aperçu ici-même, sur ce site internet, en attrapant votre navigateur sur la droite avec votre souris et en réduisant la largeur de celui-ci.
Cette solution représente une économie d’argent (un seul site internet à concevoir) et une économie de temps (un seul site internet à actualiser). Elle peut s’avérer très complexe à mettre en oeuvre sur un site existant et doit donc être réfléchie au moment de la création ou de la refonte d’un site internet.
Pourquoi un design responsive ?
Lorsque vous naviguez sur un site internet, vous n’aimez probablement pas devoir zoomer et dézoomer (à cause de textes écrits trop petits) ou devoir déplacer la page de gauche à droite (à cause d’un site internet plus grand que l’écran).
C’est précisément pourquoi votre site devrait comporter un design adaptatif. Puisque des internautes viennent sur votre site pour consulter vos contenus, une de vos priorité devrait être de lui faciliter la tâche, en lui proposant la meilleure expérience utilisateur possible.
Aussi, Google aime les sites internet responsive, au point de créer un label mobile sur ses résultats de recherche, début 2015. Et au point d’intégrer cette dimension au sein de ses critères de pertinence pour le référencement, depuis le 21 avril 2015.
En clair, un site internet qui n’est pas optimisé pour les tablettes et smartphones, et qui n’a pas obtenu le label mobile mis en place par Google, part pénalisé en terme de référencement, à minima lors d’une recherche effectuée sur supports nomades.
Quels sont les enjeux d’un site internet adaptatif ?
Réaliser un design adaptatif nécessite de prendre en compte plusieurs choses, parmi lesquelles :
- la gestion des polices de caractères, qui doivent à la fois rester visible et à la fois ne pas occuper tout l’écran
- la gestion des visuels, qui doivent pouvoir être réduits suivant la taille du navigateur, tout en restant suffisamment visibles
- la gestion des éléments audio et vidéo, qui doivent abandonner le format Flash Player au profit du langage HTML 5
- le poids de la page et la vitesse de chargement de celle-ci, un site mobile devant pouvoir être chargé rapidement
- la présentation générale de la page, qui devrait pouvoir accrocher le lecteur quelque soit sa résolution d’écran
Pour les éléments textes et visuels, on utilise les media queries, une fonctionnalité de CSS3. Pour en savoir plus sur les media queries, je vous recommande cet article chez AlsaCreations.
Enfin, il y a deux approches possibles pour un projet responsive. La première consiste à penser un site internet pour un pc de bureau, et ensuite décliner celui-ci en version mobile. Cette approche est assez courante, plus simple également à concevoir, mais tend à être dépassée.
La seconde approche consiste à faire l’inverse et à penser son site internet directement pour les smartphones. cette approche permet de se concentrer sur l’essentiel et d’apporter un maximum d’attention à l’impact procuré par une page sur support nomade.
La première approche consiste à retirer des choses ou à adapter des choses pour un bon affichage pour smartphone. La seconde approche consiste à ajouter des choses ou à déplacer des choses pour un meilleur impact sur écran de bureau. Les usages des internautes tendent de plus en plus vers le mobile et aujourd’hui, plus de 50% des recherches sur Google seraient effectuées à partir de smartphones.
Après tout dépend de votre activité. Si vous remettez tout à plat, la question se posera inévitablement : pour quel public allez-vous penser votre site internet en premier lieu ? Allez-vous avoir une démarche mobile first ou computer first ?
Article publié le 20 mars 2015, mis à jour le 18 octobre 2017
