Si vous travaillez sur le référencement naturel de votre site internet, vous aurez sans doute déjà entendu parler de Responsive. En effet, l’aspect Responsive d’un site est primordial pour son accessibilité et son SEO. Mais le Responsive design, c’est quoi ? Est-ce vraiment important ? Et surtout, comment le mettre en place ? Pour lever le voile sur cette discipline, on a décidé de réaliser un article sur le sujet !
Un site web Responsive, c’est quoi ?
Un site Internet dit “Responsive” correspond à un site qui peut être affiché et visité sur différents types d’écrans. Le Responsive, c’est la capacité du site à s’adapter à la taille de l’écran utilisé par l’internaute. Aussi appelé “site web réactif”, il s’agit d’une norme de base pour un bon référencement. En effet, un site qui n’est pas Responsive, n’est pas adapté par exemple, pour une ouverture sur mobile. L’utilisation des smartphones pour la navigation sur internet est cependant de plus en plus plébiscitée.
Ainsi, il paraît indispensable de faire en sorte qu’un site puisse être visité, peu importe la résolution de l’écran :
- Rappelons que tous les smartphones ne disposent pas de la même taille d’écran,
- Que les tablettes existent, et sont elles aussi variées en termes de taille,
- Que les ordinateurs portables et les ordinateurs de bureau sont tout aussi hétérogènes,
- Et que certains internautes peuvent naviguer sur Internet grâce à leur téléviseur et/ou console de jeux.
Un bon Responsive Design consiste donc au fait de s’assurer que le site puisse toujours être visité. Avec un design qui s’adapte à la taille de l’écran utilisé, des textes lisibles, aucun élément sortant de l’écran… Le Responsive Design peut être quasiment réalisé automatiquement, ou demande un paramétrage manuel.
Quelle est l’importance en SEO d’avoir un site Responsive ?
Rappelons-le, les moteurs de recherche ont une mission simple : proposer les pages les plus pertinentes aux internautes. La pertinence d’une page est calculée sur de nombreux critères :
- Les facteurs techniques (vitesse de chargement, architecture…)
- Les facteurs de contenu (Textes, mots-clés, médias …)
- Mais aussi les facteurs de design, dont l’aspect Responsive.
En effet, pour qu’une page soit pertinente, il faut qu’elle excelle dans ces différents domaines. L’internaute doit à la fois avoir une réponse rapide, claire, complète, vraie, et facile à comprendre. Si votre site dispose de tous ces éléments, sauf d’un aspect responsive, tout s’écroule ! L’internaute ne perdra pas de temps avec un design non adapté, ne lui permettant pas de trouver des réponses. Il préférera changer instantanément de page web (ce qu’on appelle le Pogosticking).
L’accessibilité de votre site Internet est un critère de base pour les moteurs de recherche. Au-delà même du contenu de fond, si la mise en forme n’est pas bonne, votre site sera mal référencé. Le Responsive Design doit donc être prévu dès la construction du site et sa mise en ligne.
Comment rendre son site responsive ?
Vous vous le demanderez sûrement : comment faire pour rendre son site « Responsive » ? Il s’agit là d’une bonne question, et certainement la plus importante. Cependant, il est important de noter qu’il n’y a pas qu’une manière de rendre un site Responsive. En effet, cela dépend avant tout de la manière dont a été construit votre site internet.
On le rappelle, un site peut être créé de manière plus ou moins complexe :
- De façon complètement native avec un code réalisé exclusivement pour vous, dès la base.
- À partir d’un CMS en open source,
- À partir de constructeur plus restreignant sur l’accès au code…
Ces solutions de création de site se comptent par centaines, entre les différents CMS et les prestataires. Si toutefois votre site a été construit par une agence ou un prestataire, il faut vous rapprocher d’eux. Notez que certaines entreprises proposent des sites générés rapidement dont la personnalisation est limitée.
Les conceptions responsives intégrées aux CMS
Dans le cas où vous auriez réalisé votre site vous-même, il se peut que vous ayez utilisé un CMS.
Un CMS, ou Content Management System, est un outil qui vous permet de créer un site internet. Il en existe plusieurs, plus ou moins compliqués à maîtriser. Parmi les plus connus, on reconnaît WordPress, Wix, Shopify, ou encore Prestashop. Chacun disposant de ses avantages et inconvénients en termes de fonctionnalités ou de gestion.
Dans le cas de l’utilisation d’un CMS, vous disposez en général de trois solutions :
- L’outil de conception Responsive est intégrée au CMS
Dans ce cas, vous disposez d’un outil directement sur votre tableau de bord. Celui-ci vous permet d’éditer votre site selon un aperçu prévu pour mobile et/ou tablette. Parfois, vous disposez même d’une intelligence artificielle vous permettant de générer automatiquement une version responsive du site. Cette version ne sera pas nécessairement parfaite mais pourra être corrigée. Pour l’exemple, c’est notamment le cas de Wix.
- L’intégration d’un thème incluant une version Responsive
Dans le cas de certains CMS, comme WordPress, vous composez votre site de A à Z. Cela vous permet notamment d’intégrer un Page Builder, ou un thème, qui prévoit le Responsive Design. En intégrant un plug-in de ce type, vous vous facilitez la tâche. Ils vous permettront soit de générer automatiquement une version responsive du site, soit de la créer facilement, manuellement.
- L’intégration manuelle grâce à l’accès au code du site
Si toutefois vous n’avez pas accès à un outil de construction, vous pouvez avoir accès au code du site. C’est le cas de la plupart des CMS, qui restent malléables en termes de modifications. Voyons de quoi il s’agit dans le prochain paragraphe.
L’intégration de la conception responsive dans le code du site
Rappelons qu’un site Internet est exécuté à partir d’un code. Ce code est réalisé grâce à une suite de lignes écrites à partir d’un langage de programmation. Dans le cas des CMS, le code est en partie généré automatiquement. Il peut être composé de plusieurs langages de programmation (en général, Html, CSS, voire Javascript).
Il existe de nombreux langages différents, mais la maîtrise de ceux présents dans le code de votre site est avantageuse. En effet, cela vous permet de modifier le code de votre site vous-même, et donc sa composition. Cela vous sera utile pour le Responsive, mais aussi pour l’ensemble des designs et du contenu de votre site. Chaque partie de celui-ci correspond à une ligne de code : le moindre espace, couleur, fonctionnalité…
La taille d’une image, sa disposition, ses aspects d’animations sont d’autant plus d’éléments figurants dans le code. Ainsi, il est possible de modifier tous ces éléments, en modifiant le code de votre site internet.
Voici quelques exemples de modifications du code pour un meilleur Responsive Design :
- Pour les images, afficher une valeur relative pour la taille, en % de la taille de l’écran plutôt qu’en pixels.
- Mesurer la taille des textes en vw (viewport width) plutôt qu’en pt, etc…
Vérifier que son site est responsive
Une fois que vous avez procédé aux modifications nécessaires, il vous faut vérifier que le site est Responsive. Pour cela, vous avez plusieurs possibilités :
- Consultez votre site grâce à plusieurs appareils différents :
-
- Votre smartphone, celui de votre partenaire, de vos enfants, parents ou amis,
- Votre ordinateur portable, celui de vos proches,
- Votre ordinateur au bureau, votre tour à la maison,
- Votre tablette…
Vérifiez les designs de vos différentes pages, la présence de l’ensemble de vos contenus, l’interactivité du site…
- Utilisez des outils prévus pour tester le responsive design de votre site :
-
- Screenfly
- Responsivepx
- Screencheck
Tous ces outils vous permettront de tester gratuitement l’affichage de votre site sur des écrans de différentes résolutions.
Vous êtes à présent arrivé au terme de cet article au sujet du Responsive Design d’un site Internet. On espère que celui-ci vous aura permis de comprendre ce qu’est le Responsive, mais aussi son importance. Bien sûr, ce n’est pas le seul critère vous permettant un bon SEO, assurez vous de votre performance sur tout le reste !