Par Louis Adam le 24/04/2013 Article Rating

Un site adaptable : Pour qui ? Pourquoi ?

Personne n’aime zoomer sur une tablette ou un smartphone. C’est peu pratique, peu agréable, et ce n’est finalement pas une solution efficace. Si, il y a quelques années, le marché des utilisateurs de terminaux mobiles était encore trop restreint pour qu’on leur prête une réelle attention, les choses ont bien changé depuis : selon le cabinet Strategy Analytics, un peu plus de 40 millions de tablettes ont été livrées dans le monde au 1er trimestre 2013. Une tendance qui n’est pas prête de s’inverser, au vu des baisses des prix de ces appareils.

 

Le livre d'Ethan Marcotte, un des grands défenseurs du responsive webdesign

Face à cela, la réponse des webdesigners semblait toute trouvée : le Responsive Web Design. L’idée est assez simple à comprendre, plus délicate à mettre en pratique : un seul site Web, dont les éléments se réagencent et se réorganisent pour assurer le confort visuel de l’utilisateur en fonction de sa résolution d'écran. « La vraie difficulté pour la plupart des designers, c’est de concevoir le site et son contenu comme un flux et non de façon figée comme avant », explique Geoffrey Dorne, webdesigner et blogueur sur Graphism.fr. C’est en effet le premier obstacle que rencontrent les sites qui veulent passer à un design responsive : le poids de l’existant. Il est beaucoup plus simple de repartir de zéro, la plupart du temps, mais c’est une possibilité qui reste assez rare, pour des questions de coûts.

La première question qui se pose, c’est de savoir si l’on doit passer son site en Responsive, avant de savoir si on le peut. « Tous les sites ne s’y prêtent pas » précise Geoffrey Dorne. « Avant de se lancer dans un tel projet, il faut se poser les bonnes questions. Qui sont les gens qui lisent mon site ? Avec quels types d’appareils ? Et les contenus peuvent-ils être vraiment adaptés à toutes les tailles d’écran ? ». 

Une étude des utilisateurs d'un site et de leurs habitudes s’impose donc, en préambule à toute refonte du design. On ne doit pas perdre de vue l’utilisateur, car c’est vers lui avant tout qu’est orientée toute cette philosophie. « Pour le moment, le Responsive Web Design c’est un état transitoire. J’espère vraiment qu’on arrive à créer des expériences nouvelles en exploitant la totalité des possibilités offertes par les téléphones portables, des sites qui soient vraiment adaptés à ces nouveaux modes de consommation » conclut Geoffrey Dorne

Le responsive au service des musées français

Au rang des belles réussites du Responsive Web design, on se doit de citer l’initiative de Geoffrey Dorne et Julien Dorra : la responsive museum week. Pendant une semaine en 2012 ces deux graphistes ont proposé au grand public de revoir et corriger les feuilles de styles CSS des sites de leurs musées favoris, afin de les rendre plus responsive et plus agréable à visiter. « Le déclencheur, ça a été la sortie du site du musée Pompidou » explique Geoffrey Dorne. « C’était un projet qui avait coûté 2 millions d’euros, un chiffre impressionnant pour un site Web. Du coup, mon premier réflexe quand il a été mis en ligne, ça a été de le consulter sur ma tablette et sur mon smartphone. Et je me suis rendu compte que le design ne s’adaptait pas du tout, j’ai été obligé de zoomer. » Et rapidement l’idée est lancée, comme un pavé dans la mare. Le but ? Communiquer auprès des musées, mais aussi à l’égard du grand public, et sensibiliser à la question de la mobilité, qui devient de plus en plus importante dans le domaine du Web design. Au total, en une semaine, l’initiative a récolté une douzaine de participations, remixant la page d’accueil de 12 musées différents.

Voir tous les dossiers Web

Notations 

Sélection de tutoriels

Créez votre portfolio (2)
Par la rédaction le 19/10/2011
Dans ce didacticiel nous allons voir ensemble comment créer sous Photoshop (peu importe la version) un portfolio simple mais efficace puis comment découper le design afin de l’intégrer en utilisant le couple HTML / CSS. Le design de celui-ci est minimaliste et je pense que cela est important et valable sur n’importe lequel des supports où vous pouvez présenter vos travaux (par exemple pour le book).

[Voir le tuto...]

Autres tutoriels Flash, Web
Colorisation dans Flash
Par la rédaction le 01/10/2006

DOMAINE : Couleur
LOGICIEL : Flash
NIVEAU : Amateur

Cet exercice va vous montrer qu'il est possible de faire de la colorisation de dessin directement dans Flash pour ensuite pouvoir animer les éléments. - Dan Drapper/Philippe Beaudran

[Voir le tuto...]

Autres tutoriels Flash, Web
Flash : page de chargement /preloading
Par la rédaction le 10/05/2006

DOMAINE : Web
LOGICIEL
: Flash
NIVEAU:
Amateur
PUBLIE LE :
10-05-06

Lorsque votre site tout entier ou même une partie en Flash est un peu trop lourde, un chargement est nécessaire. Aussi appelé "preload", voici comment réaliser cette "salle d'attente". - Maurice Philippon

[Voir le tuto...]

Autres tutoriels Flash, Web