De nos jours, il est devenu incontournable qu’un site puisse s’afficher sans encombre sur n’importe quel terminal : PC, netbooks, tablettes, smartphone… Pour parvenir à créer un site qui s’affiche correctement sur les différentes plateformes citées précédemment, il est d’usage d’utiliser des techniques de responsive design ou adaptative design.
Il est intéressant de se demander comment vérifier l’affichage d’un site sous différentes plateformes. Voici donc quelques solutions :
1. Tester son site avec les différents appareils
Si vous êtes l’heureux possesseur d’une flotte d’appareils high-tech, vous pouvez testez sans problème l’affichage de votre site par le biais de vos différents appareils.
Si vous ne possédez pas les différents appareils nécessaires, vous pouvez faire appel à vos amis et/ou à votre famille.
2. Utilisez des services en lignes
Si jamais, vous êtes « coupé » du monde, vous pouvez vous rabattre sur différents services web.
- The Responsinator : il vous suffit de renseigner l’url de votre site et vous obtiendrez l’affichage (portait et paysage) dans l’iphone, l’ipad, le kindle, le samsung Galaxy et un affichage grappy Android.
- Responsivator : test de votre site sous 4 résolutions : 320×480, 480×320, 480×800 et 800×480.
- Responsive Design Testing Tools : test sous les résolutions 240, 320, 480, 768 et 1024.
- Responsivepx : Vous pouvez paramétrer l’affichage de votre site et ainsi le visionner dans la résolution de votre choix. Il est possible de choisir sa résolution grâce à un menu situé en haut du site.
3. Des extensions pour tester l’affichage de votre site internet.
Comme vous le savez sans doute, les navigateurs Firefox et Chrome regorgent d’extensions plus ou moins utiles. Voici donc quelques extensions qui vont vous permettre de tester l’affichage de votre site intégrant un responsive design au sein de votre navigateur.
- Chrome
- Fontier
- Resolution Test
- Firefox
Si vous connaissez d’autres solutions pour tester l’affichage d’un site utilisant le responsive design, n’hésitez pas à les suggérer dans les commentaires !
* * Cette case à cocher est obligatoire
*J'accepte
Google Chrome possède une fonctionnalité intégré pour gérer les résolutions et les Headers de téléphone portable et de tablettes numérique.
Allez dans « Outils de déveleppement » et cliquer sur la petite roue tout en bas à droite 🙂
Merci pour votre contribution 😉
Pour compléter vos dires, après avoir cliquer sur la petite roue en bas à droite, il faut sélectionner l’onglet overrides, cocher devices metrics et modifier les valeurs de screen resolution.
A bientôt
Merci pour ces sites en ligne très intéressants. Je commence à les explorer et j’avoue qu’ils semblent plus accessibles que les logiciels. Ils sont aussi faciles à utiliser, surtout The Responsinator. J’ai fourni l’URL de mon site et il a fait le reste avec une rapidité époustouflante. Pour moi, il n’y a aucun doute que ce site a beaucoup d’avenir en matière d’affichage de site.
Merci, c’est ce qu’il y a de plus utile, pour un développeur de sites web, en effet !
J’ai fait un grand effort pour monter la visibilité de mon site personnel sur les moteurs de recherches.
Je peux dire que mon travail a réussi puisque mon site perso est maintenant en seconde position sur Google. Je tiens à préciser que ce rang reste seulement sur pc et non sur mobiles. Je suis coincé par les méthodes antérieures et par la suite, l’affichage de mon site sur les mobiles n’est pas satisfaisant. Responsive design, cette nouvelle méthode fera, je crois, un essor à mon ouvrage.
Énorme, moi qui passé des heures a calibrer pour tester l’affichage, browserlab est un très bon outils, mais c’est vrai que les sites en ligne que tu nous a fournit peuvent toujours dépanner, le logiciel d’adobe est vraiment simple, enfin quand on as déjà touché un logiciel d’adobe, j’ai un petit faible pour responsivepx.