Un site réalisé en responsive design est un site qui s’adapte à tous les formats d’outils : ordinateurs, tablettes, smartphone. Nous vous avons expliqué pourquoi il est désormais indispensable d’avoir un site Internet « responsive » pour la performance de votre e-marketing, mais comment savoir si mon site est responsive??
Bien sur, le meilleure solution consiste à valider sur tous les outils l’apparence de votre site, mais même les 10 formats principaux ne sont pas faciles à réunir!
Il existe plusieurs manières de vérifier le responsive de votre site :
1 – La méthode « à l’arrache »
Vous n’avez pas le temps, vous voulez vérifer très vite. La solution consiste à redimensionner votre fenêtre de navigateur pour vérifier comment réagit votre site. Pour cela, il suffit de réduire votre écran en cliquant sur l’icone qui est dans votre navigateur en haut à droite de l’écran.
Une fois votre écran réduit, il suffit de porter votre souris dans le coin en bas à droite puis de faire grandir et/ou rétrécir votre écran. Vous constaterez les modifications de votre site Internet en fonction de la taille de l’écran. Cette méthode suffit souvent à constater les dysfonctionnements du développement en responsive. Elle présente l’intérêt de comprendre comment votre site est codé et comment il s’adapte aux variations de tailles d’écran ainsi que quand on franchit des seuils (disparition du menu, suppression d’images etc…)
Mais attention, elle ne suffira pas pour faire un contrôle de qualité digne d’une recette de mise en ligne.
2 – La méthode externe :
Vous pouvez utiliser un outil externe qui va simuler votre site Internet à de nombreuses résolutions d’écran. Vous pourrrez ainsi voir exactement ce que donne votre site sur chacune des configurations. Nous vous donnons 3 outils disponibles et gratuits pour visualiser votre site sur une multitude d’outils. Nous préférons utiliser quirktools qui donne de manière très rapide un très grand nombre de configurations différentes ; pireresponsive ; quirktools; responsinator. Leur utilisation est très simple. Il suffit de saisir l’adresse du site à tester puis de regarder dans les différentes configurations de résolution proposées l’apparence de votre site.
3 – La méthode navigateur :
Les navigateurs proposent des extensions qui permettent de simuler des formats différents. Dans crome, le nom des extensions sont « reponsive web design tester » et « responsive inspector ». dans firefox , « responsive web design tester » dans opera, « responsive resize » dans Safari… ça fonctionne très bien mais il faut prendre le temps de charger l’extension.
Les outils de développement des navigateurs vous offrent également une possibilité : la vue adaptative responsive pour firefox, la vue adaptative est également disponible dans crome en utilisant le mode emulation. Comme leur nom l’indique, ce sont des outils de développeurs. Donc ils sont au milieu d’autres outils de contrôle du code, de javascript, de déboggage etc… J’invite les néophytes à éviter cette solution.
4 – Les autres méthodes :
Il existe d’autres méthodes, mais je les déconseille également car elles prennent beaucoup de temps et sont réservées à des techniciens. Il existe en effet des émulateurs que l’on peut installer sur son ordinateur qui couvrent un ou plusieurs appareils. C’est beaucoup plus long pour un résultat au fond pas fondametalement différent.
En conclusion :
Choisissez la méthode qui vous convient le mieux, aucune n’est parfaite mais toutes permettent quand même de se faire une idée assez précise de l’apparence de votre site dans différents formats. Mais gardez à l’esprit que ces simulateurs ne sont en fait que des simulateurs de la taille d ‘un écran (à part les derniers), les différentes versions de navigateurs n’interprettent pas le code de la même manière. Donc, ce que vous voyez dans une taille d’écran donnée pourra varier en fonction du navigateur utilisé pas le visiteur ainsi que sa version…
Bon courage.