La plupart des Web designers con­nais­sent les avantages d’un site Web res­pon­sive. Si vous souhaitez mettre en ligne un site Web res­pon­sive, vous devrez tout d’abord faire en sorte que la pré­sen­ta­tion graphique soit adaptée sur dif­fé­rents supports (or­di­na­teurs de bureau, or­di­na­teurs portables, tablettes et smart­phones). Vous devrez effectuer une vé­ri­fi­ca­tion du caractère res­pon­sive de votre site Web au plus tard lors de la fi­na­li­sa­tion de ce dernier. Grâce à dif­fé­rents outils de test pour sites Web res­pon­sive, on peut ra­pi­de­ment dé­ter­mi­ner si la mise en page s’adapte à tous les types d’appareils et d’affichage. Cela vaut la peine de choisir les bons outils, c’est pourquoi nous vous pré­sen­tons une sélection de 7 outils gratuits pour vérifier l’op­ti­mi­sa­tion de votre site en res­pon­sive Web design.

Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée

Test de res­pon­sive Webdesign sur votre na­vi­ga­teur Web

Les outils présentés dans cette partie fonc­tion­nent avec tous les na­vi­ga­teurs Internet et systèmes d’ex­ploi­ta­tion et peuvent être utilisés gra­tui­te­ment sans ins­crip­tion. Pour cela, indiquez sim­ple­ment l’URL du site Internet que vous voulez tester pour vérifier sa re­pré­sen­ta­tion sur dif­fé­rentes tailles d’écran. Ces outils de webdesign simulent dans ce but les dif­fé­rentes ré­so­lu­tions d’affichage des appareils. Vous pouvez également naviguer dans le site en cours de vé­ri­fi­ca­tion, comme lors d’une visite normale depuis un na­vi­ga­teur Web. Les outils de Webdesign ne per­met­tent par con­sé­quent pas seulement d’afficher une page Web isolée, mais de naviguer sur le site entier et de comparer plusieurs types d’affichage.

Outil de Mozilla Firefox

Si vous utilisez Firefox comme na­vi­ga­teur Internet, une option est intégrée pour effectuer des tests de res­pon­sive Webdesign : cliquez pour cela sur le Menu puis sur « outils dé­ve­lop­peur » et enfin « tester la taille de l’écran ». La page ainsi chargée va être affichée sur un fond noir, disposant d’options pour modifier la ré­so­lu­tion de l’affichage. On peut par exemple opter pour un affichage de petite taille (320x480) ou encore de grande taille (1920x900). Toutes les ré­so­lu­tions courantes sont dis­po­nibles pour vos tests.

Screenfly

Cette ap­pli­ca­tion Web vous permet aussi de choisir parmi dif­fé­rentes ré­so­lu­tions pour votre test de res­pon­sive Webdesign (ré­so­lu­tions d’or­di­na­teurs portables standards, or­di­na­teurs de bureau, smart­phones et tablettes).  Avec Screenfly, vous pouvez aussi tester des ré­so­lu­tions in­di­vi­duel­le­ment, ce qui rend l’ap­pli­ca­tion très po­ly­va­lente.

res­pon­si­vepx

Cet outil propose la même liberté quant au choix des dif­fé­rentes ré­so­lu­tions que Screenfly. A l’aide de res­pon­si­vepx, vous pouvez modifier la hauteur et la largeur de l‘écran virtuel  jusqu’à 3 000 pixels.

Screen­check de Cyber Crab

Cette ap­pli­ca­tion Web vous permet de tester un site Web res­pon­sive de la même manière que les deux outils pré­cé­dents. Screen­check est développé par cybercrab.com et peut être utilisé sur son site Internet.

De­mons­tra­ting Res­pon­sive Design

De­mons­tra­ting Res­pon­sive Design propose dif­fé­rents formats clas­siques de test de res­pon­sive Webdesign. L’avantage de cet outil est qu’il permet de passer sim­ple­ment et ra­pi­de­ment d’un format à un autre.

Res­pon­si­na­tor

Res­pon­si­na­tor affiche si­mul­ta­né­ment la pré­sen­ta­tion d’un site Web en six formats dif­fé­rents d’appareils mobiles. Chaque format est présenté à la fois à la verticale et à l’ho­ri­zon­tale. Parmi ces dif­fé­rents formats, on retrouve les pré­sen­ta­tions des appareils les plus courants, à savoir iPhone, Android, iPad etc.

Am I Res­pon­sive?

Le site Internet Am I Res­pon­sive? vous présente l’affichage d’une URL sur quatre formats d’appareils de chez Apple pour effectuer vos tests de res­pon­sive Webdesign : or­di­na­teur de bureau (ré­so­lu­tion: 1.600 x 992 pixels), or­di­na­teur portable (1.280 x 802 pixels), tablette (768 x 1.024 pixels) et mobile (320 x 480 pixels). L’avantage de cet outil est d’avoir un aperçu direct des dif­fé­rentes tailles d’écran exis­tantes.

En résumé

Afin de vérifier le caractère res­pon­sive de votre site Internet, vous devriez utiliser des outils de test en reponsive Webdesign très utiles. Il ne faut cependant pas compter uni­que­ment sur de tels outils. Il reste en effet toujours plus sûr de vérifier la com­pa­ti­bi­lité de votre site Internet avec de vrais supports existants plutôt que vir­tuel­le­ment depuis des ap­pli­ca­tions Web.

Certains aspects ne sont pas toujours re­pré­sen­tés cor­rec­te­ment lors de si­mu­la­tions de res­pon­sive Webdesign : les dif­fé­rences de per­for­mance des appareils, les dif­fé­rents na­vi­ga­teurs  ou l’uti­li­sa­tion d’un écran tactile mul­ti­point (multi-touch) peuvent toujours vous réserver des surprises, même après plusieurs tests de res­pon­sive Webdesign. Certains problèmes tels que l‘ap­pa­ri­tion d’une barre de scrolling peuvent par exemple ap­pa­raître sur un test de re­pré­sen­ta­tion de site Web sur un smart­phone tactile. Cette barre servant à faire défiler le contenu n’est par dé­fi­ni­tion jamais présente sur les supports tactiles.

Cependant, il reste toujours pertinent d’utiliser ces outils en ligne en com­plé­ment de tests de res­pon­sive Web­de­signs di­rec­te­ment depuis les supports matériels. Ces outils per­met­tent aux Web­de­sig­ners de modifier la ré­so­lu­tion du format de test très sim­ple­ment et ra­pi­de­ment.

Aller au menu principal