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 !
Auteur : Chob
Passionné par le digital sous toutes ses formes : médias sociaux, web design, emarketing, outils utiles, blogging, open data, dataviz...
409 articles, certains bons, d'autres moins ;-)
13 commentaires
Alex Bardera
nov 17, 2012
http://responsivetest.com teste les dernières tablettes et smartphone.
---------------------------
Suivez cette personne sur Twitter : alexbardera
Florian
juil 28, 2012
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.
video buzz
avr 20, 2012
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.
Chob
avr 20, 2012
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…
---------------------------
Suivez cette personne sur Twitter : choblab
Lentille de couleur
avr 20, 2012
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.
baby sitting bruxelles
avr 20, 2012
Vraiment cool ça, surtout Responsinator
Pyo
avr 11, 2012
Sympa la tool !
Nicolas ROSSI
avr 5, 2012
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.
---------------------------
Suivez cette personne sur Twitter : Sitadapt
CirtaNews
mar 26, 2012
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…
Alex de WP Themes Pro
mar 22, 2012
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 ^^
---------------------------
Suivez cette personne sur Twitter : wp_themes_pro
Chob
mar 22, 2012
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
---------------------------
Suivez cette personne sur Twitter : choblab
candidat
mar 21, 2012
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.
Chob
mar 21, 2012
Ca marche, il faut juste saisir le nom de domaine en lieu et place des sites prédéfinis
---------------------------
Suivez cette personne sur Twitter : choblab