Tester en un clic si le design de votre site web est « responsive »

La problématique : la multitude des écrans

Jadis (il y a 4-5 ans), la seule problématique d’un web designer était de définir l’optimisation d’un site web pour la profondeur d’écran : 800*600 ou 1024*768 ? Bien sûr, il y avait également la question de la compatibilité entre les navigateurs, et notamment IE6, l’épine dans le pied (pain in the ass comme diraient les anglo-saxons). Et puis s’est ajoutée la problématique mobile, d’abord avec les téléphones, et maintenant avec les tablettes. Et la TV de salon vient complexifier le paysage. Le dilemme : faut-il créer autant de sites que de terminaux ou d’écrans ?

La solution : le responsive design

Le design adaptable ou réactif (je n’ai pas trouvé de traduction idéale) consiste à concevoir un site en assurant un affichage optimal quel que soit l’écran. Concrètement, il s’agit d’une conception fondée sur la flexibilité. L’interface est construite autour de grilles contenant un certain nombre de colonnes : la disposition des colonnes s’adapte à la taille de l’écran. Idem pour les images dont la taille et la disposition sont optimisées pour s’ajuster à l’écran. Au coeur du dispositif, on trouve les media queries : ces requêtes détectent le terminal et ses caractéristiques d’affichage pour servir la version adaptée.

Les applications pour tester l’adaptabilité d’un site web

The Responsinator et surtout http://responsive.is/, trouvé chez Johan Bleuzen.

L’article à lire sur le sujet

Gaétan de Design Spartan dit tout et offre pour les plus curieux une bibliographie complète, ne cherchez pas plus loin !

Rubriques : Design

Auteur : Chob

Passionné par le digital sous toutes ses formes : médias sociaux, web design, emarketing, outils utiles, blogging, open data, dataviz...

503 articles, certains bons, d'autres moins ;-)


Profil Google+

Pourquoi la refonte de votre site web est un échec » « Extraits enrichis (rich snippets) : un guide visuel
13 Commentaires
  1. Salut, dans le même domaine il y à http://quirktools.com/screenfly/ qui est plus complet. Puis il y à le site http://theme-responsive.com/ qui regroupe tout sur le responsive.

  2. Et bien moi responsinator ne fonctionne pas si bien que ça. Il m’affiche le site web normal alors que j’ai installé une version mobile.

    • En fait, Responsinator affiche votre site tel qu’il est et ne tient pas compte des versions mobiles. J’utilise par ex. un plugin pour ce blog et Responsinator m’affiche la version desktop. Mais une version mobile ne fait pas de votre site un site responsive justement. La définition d’un site responsive, c’est qu’il s’adapte et non qu’il existe également dans une autre version spécifique pour mobile…

  3. Sympa comme tool, je songe de plus en plus à faire une version mobile vu la recrudescence et l’avenir de ce type de trafic. Responsinator me conforte vraiment dans cette voie. :)

  4. Vraiment cool ça, surtout Responsinator

  5. Attention ! Les navigateurs mobiles peuvent réagir différemment. Et le fait qu’il y ai la scroll-bar réduit la taille de la zone et donc ne reproduit pas exactement le rendu sur mobile.

    Il suffit de redimensionner la fenêtre de son navigateur pour avoir le même rendu. Mais ceci dit, c’est très sympa ! J’ai même fait un lien vers responsinator sur mon site Sitadapt.

  6. En effet… Le “responsive web design” est né suite à un besoin grandissant. De nos jours, il n’y a pas un client qui demande un site Internet sans demander une version mobile de celui-ci. Seulement en quelques années le nombre d’appareils et de résolutions servant à consulter des sites web a tout simplement explosé : ordinateurs, smartphones, tablettes, web TV, grille-pain, format portrait, paysage, etc…

  7. Ce sont des outils intéressants, je partage cet article de suite avec mes followers !

    Je ne sais pas ce que ça donne sur iPad mais avec mon site sur iPhone (qui n’est pas responsive), la largeur du site s’adapte à la largeur de l’écran. Après c’est minuscule, enfin tout ça pour dire que le rendu n’est pas le même.

    En revanche si le thème est responsive, c’est impeccable pour tester sans s’amuser à redimensionner son écran ^^

    • Merci Alex. De ce que je comprends, c’est vraiment fait pour tester un site conçu comme responsive. Si par ex. tu as choisi un thème WP responsive, tu peux vérifier s’il l’est réellement. Mais si ton thème ou ton site n’est pas responsive, tu vois juste à quel point il n’est pas adapté à tous les écrans ;-)

  8. C’est moi qui ne sais pas le faire fonctionner Responsive ou il ne fonctionne qu’avec les sites déjà prédéfinis ?
    Par contre The Responsinator marche bien et facilement, merci pour le lien.

Laisser un commentaire

Votre adresse email ne sera pas publiée, c'est promis.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Copyright © 2014 Choblab – Tendances digitales | Mentions légales

Haut ↑