Dans cet article vous trouverez des informations sur
ce qu'est un site responsive , comment
créer des pages adaptables aux mobiles et desktops et quels sont ses
avantages pour se positionner sur les moteurs de recherche.
Qu'est-ce qu'un site responsive ?
Un
site Web réactif ou
réactif est un site qui améliore l'expérience utilisateur en fonction de l'appareil que nous utilisons pour le consulter.
Un
site réactif aux yeux d'un utilisateur normal est n'importe quel site Web, et il devrait en être ainsi. En réalité, s'il est bien fait, il cache une technologie qui lui permet d'être utilisé de la meilleure façon sur les appareils les plus populaires. Par exemple, sur un pc de bureau on peut lire agréablement un texte disposé en deux ou trois colonnes, mais sur un smartphone ? Ce serait de la merde, il doit donc être mis à l'échelle pour être affiché, par exemple, dans une seule colonne.
Il en va de même pour
les images ou autres éléments du site Web. La
taille d'écran limitée des smartphones rend également difficile le clic sur des éléments petits ou trop proches, ce qui ne crée peut-être pas de problèmes sur le bureau. Les photos et
les images réactives s'adaptent parfaitement à la largeur de l'écran et vous n'avez pas besoin de zoomer ennuyeux sur le contenu. Imaginez avoir un formulaire de contact avec un bouton qui permet d'envoyer un email mais sur lequel l'utilisateur ne peut pas cliquer car il est trop petit. Vous voulez perdre un client potentiel ?
Ou imaginez un site où les textes sont petits, vous ne savez pas où cliquer, devant recourir à des zooms fréquents avec pour résultat que l'utilisateur quitte votre site immédiatement. Bien sûr, vous pourriez créer un site uniquement pour les smartphones, mais excluriez-vous tous les autres appareils ? Pour cette raison,
les sites web responsive permettent d'avoir un site unique et de réajuster automatiquement sa mise en page pour améliorer son ergonomie sur chaque appareil utilisé.
En améliorant l'
expérience utilisateur , nous pouvons faire en sorte que vos clients potentiels passent plus de temps sur votre site Web, augmentant ainsi les chances de conversion.
Site responsive : comment créer un design réactif ?
Si vous souhaitez
créer votre propre site Web, je vous recommande de trouver un
modèle de conception réactive . Vous pouvez trouver d'excellents modèles gratuits ou payants en utilisant la plateforme Wordpress . Avant de choisir parmi les différents thèmes responsive,
assurez-vous que la mise en page responsive est bien utilisable pour les téléphones mobiles et pour les mises en page PC avec différentes résolutions.
Assurez-vous que le
menu se transforme convenablement en s'adaptant à la taille de l'écran : une icône à trois lignes apparaît généralement en haut à droite ou en haut à gauche , appelée menu hamburger, qui permet de visualiser la liste des pages mobiles. Sur les appareils plus grands, un
menu avec des éléments horizontaux en haut de la page est souvent utilisé.
Responsive Css et Html : Point d'arrêt et Media Query
La magie qui permet le changement de mise en page dans un site adapté aux mobiles en fonction de la largeur de l'appareil est la programmation d'un css responsive . Les points d'arrêt sont décidés par le concepteur Web réactif qui établit des bandes d'appareils en fonction de la résolution. A ces bandes de largeur de l'appareil avec les règles css associées .
Ainsi, la mise en page html responsive avec des images et des textes insérés ne change pas, mais différentes règles sont appelées en fonction de la largeur de l'écran, ou pour être plus précis de la fenêtre du navigateur dans laquelle la page est ouverte.
Le point d'arrêt (ou requête multimédia) choisi doit tenir compte à la fois des résolutions d'écran les plus courantes sur le marché et des appareils avec lesquels votre public cible consulte les pages Internet. En général, nous utilisons une requête média allant de 1px de large à 600px ou 700px pour les téléphones mobiles, un point d'arrêt jusqu'à 1000px pour les tablettes et un dernier à partir de 1300px pour les écrans d'ordinateurs ; ce ne sont pas des règles fixes et dépendent toujours du type de projet graphique et de l'évolution de la technologie.
Différences entre un site Web réactif et un site Web adaptatif
Un
site web responsive a une mise en page unique qui change selon l'espace de la fenêtre dans laquelle on le regarde : le navigateur affiche le contenu en fonction de la requête média déclarée dans le css.
Dans un
site adaptatif mobile, le serveur propose la meilleure version pour l'appareil qui se connecte. Par conséquent, il existe plusieurs thèmes pour chaque appareil.
L'approche est très différente et on peut conclure en résumé que les sites responsive sont plus légers, plus agréables à naviguer et plus faciles à modifier et à gérer côté SEO. Un site adaptatif peut être utilisé pour les projets qui nécessitent un contenu et une mise en page ad hoc pour chaque appareil. Cependant, il est possible de rendre adaptatif un ancien site en développant une nouvelle version pour les mobiles, alors qu'il n'est pas possible de rendre facilement responsive un site existant.
Mobile vs Desktop : Parcourir les données avec les appareils
Avec la généralisation des smartphones et tablettes, l'usage exclusif de l'ordinateur de bureau pour surfer sur internet n'est plus qu'un lointain souvenir. Aujourd'hui, nous consultons quotidiennement des ressources en ligne telles que les journaux, les emails et certainement les réseaux sociaux, non plus exclusivement via des PC, mais beaucoup plus fréquemment avec nos smartphones. Même une étude menée par Hootsuite montre qu'en 2018, 88% des utilisateurs italiens de Facebook y ont accédé via un smartphone.
En ce qui concerne les sites Web, selon les recherches de Comscore , ces dernières années, 25% (9,3 millions) des 37,3 millions d'Italiens qui se connectent n'ont utilisé que des smartphones ou des tablettes, tandis que 24% (9, 1 millions) ne se sont connectés que via PC. Les 51 % d'utilisateurs restants accèdent à Internet à l'aide des deux appareils. Si l'on considère qu'il existe différents modèles de smartphones et de tablettes avec différentes tailles d'écran, cela signifie que chacun de nous voit le site différemment.
Les avantages des sites web responsive pour l'indexation Google
L'algorithme de Google qui décide dans quelle position afficher les sites Web est secret, mais nous en savons quelque chose. Depuis quelques années (précisément depuis le 21 avril 2015), Google a accordé une grande importance aux sites responsive au détriment des "anciens" sites qui n'ont pas la capacité de s'adapter aux écrans des nouveaux appareils que nous utilisons pour nous connecter.
Il y a quelques années, un site en version desktop et un site séparé, avec une version mobile, ont été créés. Cependant, comme on sait aujourd'hui que deux sites au contenu dupliqué habituel sont pénalisés par Google, avec pour conséquence de sombrer au bas des résultats de recherche, le site web responsive est devenu la meilleure solution pour résoudre le problème, devenant un véritable classement
facteur qui affecte le positionnement dans la SERP.
Comment savoir si votre site web est responsive ?
Si votre site est très ancien, il y a de fortes chances que ce ne soit pas le cas, mais pour être sûr, Google a fourni cet outil avec lequel vous pouvez le vérifie : https://search.google.com/test/mobile-friendly?hl=FR
Parfois, cela ne suffit pas, car cela ne vous montre que si le site est adapté aux mobiles et non adapté aux mobiles et aux ordinateurs de bureau en même temps, mais cela peut vous donner une idée. Ouvrez simplement le lien et écrivez le nom de votre site dans la barre.
