Il m’arrive souvent de parler avec les gens de webdesign, et essayer de trouver avec eux une façon intelligente de structurer l’information qu’ils veulent afficher sur leur site web. Alors c’est parti pour les mockups en tout genre et quelques fois, je commence à leur parler de responsive web design.
En général, c’est le moment où l’on me fixe du style « c’est quoi ça encore ? ».
Alors aujourd’hui, je me suis décidé, j’essaye d’expliquer clairement ce à quoi vous allez être confrontés prochainement , designers, intégrateurs, e-commerçants…etc 
Jusqu’à aujourd’hui, on parlait de deux types de design d’interfaces, un premier qui est fixe et le second qui s’ajuste à la largeur de votre navigateur (je vous invite à revoir les classiques du CSS si vous êtes totalement perdu(e)). Ce type d’affichage était uniquement adapté à de l’affichage sur un ordinateur (donc sur un navigateur).
Avec l’émergence des smartphones, tablettes et autres terminaux en tout genre, on voit de plus en plus de demandes de client du genre « ah mais je veux que ça soit compatible partout, oui partout ».
A partir de là, trois choix s’offrent à vous :
- j’ai d’énormes budgets -> je fais un webdesign optimisé desktop, une appli iPhone, une appli Android (sans compter les Windows Phone, Samsung Bada…) mais aussi une appli iPad…etc
- je génère un fichier CSS différent selon la plateforme qui charge le contenu, ce qui me donne au final des fichiers du style mobile.css, tablette.css et screen.css
- je me sers du responsive -> je créé un seul fichier CSS qui s’adapte aux différentes tailles d’écran, donc à des résolutions différentes, afin de garantir que mon site soit ok sur toutes les plateformes
Vous voulez des exemples ?
Bon ben je vais vous en donner
Si vous souhaitez tester les différentes résolutions et donc interfaces différentes sans pour autant sortir vos iPhone / tablettes…etc vous pouvez tout simplement réduire ou agrandir la taille de votre navigateur afin d’afficher les différentes vues.
Premier exemple : Fork
Je vous montre les différents screens pour celui-ci, vous testerez vous-mêmes les autres hein
Voici la version desktop :
Vous avez ensuite la version tablette, qui comme vous le voyez, s’adapte bien à la résolution d’écran d’une tablette :
Et enfin la version smartphone, encore plus réduite :
Et voici d’autres exemples :
- Earth Hour superbement réalisé, qui plus est pour une bonne cause !
- Food Sense, à ne pas louper, surtout si vous avez faim ! Photos magnifiques.
Si le sujet vous plaît, n’hésitez surtout pas à vous balader sur Internet et à rechercher, vous trouverez beaucoup de sites conçus de cette façon.
Il faut savoir que le responsive n’est pas très couteux et qu’il peut s’avérer très utile pour des professionnels ayant des budgets limités.
Si vous avez des questions sur le responsive web design, n’hésitez pas à nous laisser un message dans les commentaires ci-dessous
