Introduction au responsive design
Dans
cette première partie, avant de nous attaquer à la réalisation de
maquettes proprement dites sur Photoshop, nous allons étudier et surtout
comprendre la notion de responsive :
- Qu’est-ce que le responsive design ?
- Quels sont les avantages et les inconvénients d'un site responsive ?
- Quand et pourquoi faut-il utiliser le responsive design ?
- Comment design-t-on un site responsive ?
C'est
ce que nous allons maintenant découvrir ensemble. Alors en route pour
cette aventure fascinante à la découverte du responsive design !
Qu’est-ce que le responsive design ?
De nos jours, le responsive design est vraiment incontournable dans le processus de création d’un site web. Révolution majeure dans le web design, c'est parce que vous utilisez internet partout et qu'internet est maintenant présent sur tous vos écrans, que vous ne pouvez plus concevoir un site web sans le penser responsive !
Justement, vous consultez peut-être ce cours sur OpenClassrooms depuis votre tablette ou votre smartphone ?
Et bien si c'est le cas, sachez que c'est grâce au responsive design que vous pouvez apprécier ce cours avec un confort maximal sur votre écran. 
Mais c'est quoi le responsive design au juste ?
En
tant que grand fan de science-fiction, si je devais trouver une
métaphore amusante pour expliquer la notion même de "responsive", je
penserais tout de suite à un film à succès des années 90 : Terminator 2 -
le jugement dernier (avec notre célèbre Schwarzy international). Ce
film, en plus d'être la suite du 1er opus, est aussi connu dans le
cinema pour avoir introduit des effets spéciaux 3D impressionnants grâce
au "Morphing".
Cette technique révolutionnaire en son temps, comme l'est aujourd'hui le responsive dans le web, permettait au méchant de l'histoire (le cyborg T-1000) de prendre n'importe quelle apparence grâce à sa composition en métal "liquide". Et le héros du film, incarné par un cyborg T-800 vieille génération en "purs boulons d'aciers", avait bien du mal à lutter contre ce rival polymorphe...
Cette technique révolutionnaire en son temps, comme l'est aujourd'hui le responsive dans le web, permettait au méchant de l'histoire (le cyborg T-1000) de prendre n'importe quelle apparence grâce à sa composition en métal "liquide". Et le héros du film, incarné par un cyborg T-800 vieille génération en "purs boulons d'aciers", avait bien du mal à lutter contre ce rival polymorphe...
Cette capacité qu'a le cyborg T-1000 de pouvoir se transformer ou de pouvoir recomposer son apparence suivant un contexte déterminé, me
rappelle énormément les spécificités d'un site web responsive qui est
capable de s'adapter et de se transformer suivant l'écran sur lequel il
est consulté.
L'image est assez tirée par les cheveux, je le reconnais, mais au moins je suis sûre qu'elle vous restera dans la tête ! 
Concrètement :
Le
responsive design est une approche autour du design et du code qui
permet de concevoir et de réaliser un seul et unique site qui s’adaptera
sur tous les écrans.
Le responsive c'est puissant ! (Super Mega Giga Power MAX)
Grâce à l'approche du responsive design, votre site sera visible sur tous les écrans.
Et quand je parle de tous les écrans, je fais bien sûr allusion à celui
de votre mobile, de votre tablette ou de votre ordinateur, peu importe
sa résolution ou sa taille : qu’il fasse 5 ou 34 pouces !
Et qui
sait avec le responsive ? Si l'on prend en compte les avancées
techniques actuelles et futures, il sera peut-être bientôt possible de
consulter votre site sur une montre connectée comme l'Apple Watch, des
lunettes de réalité virtuelle comme l'Occulus Rift ou des lunettes
Holographique comme l'Holosens de Microsoft... Et même d'autres supports
que nous n'avons même pas encore imaginés ! 
Le responsive c'est (aussi) technique
Pour que la magie opère, il y a bien sûr plusieurs aspects techniques dont il faudra tenir compte :
- Il faudra vous contraindre à l'utilisation d'une grille de composition flexible ou dite "fluide". Nous verrons bientôt en détail cette notion...
- Un site responsive utilisera les media queries issus de CSS3, afin de pouvoir adapter tout son contenu (interface, textes, images ,etc.) suivant la résolution et le type de support sur lequel il sera affiché.
- Il faudra prendre en compte le "viewport", qui détermine l'affichage de votre site en fonction de la surface du navigateur du terminal sur lequel votre site est consulté. Il est possible de lui indiquer un niveau de zoom pour avoir un affichage optimal de tous vos éléments.
La notion de "viewport" est assez technique, je vais faire une petite parenthèse dessus pour que vous la compreniez mieux.
La notion de viewport
Il
faut d'abord bien comprendre que vous pouvez tout à fait avoir un écran
d'ordinateur et un écran de mobile qui soient tous les deux Full HD
(c'est-à-dire parfaitement capables d'afficher une image constituée de
1080 lignes et 1920 pixels par ligne). Pourtant, et fort heureusement,
le contenu d'un site responsive ne sera pas affiché de la même façon sur
ces deux écrans. Je vais éclaircir mon idée avec une anecdote :
On
m'a déjà demandé l'utilité du responsive design, en m'arguant qu'il
suffisait de créer des maquettes fixes et non responsives sur 3 types de
résolutions différentes : une basse (pour le mobile), une moyenne (pour
la tablette) et une Full HD (pour l'écran d'ordinateur). Et hop le tour
était joué... Je vois déjà certains de vos regards plein d'effrois, et
c'est bien normal. Car si vous êtes un minimum sensibles à la
technologie, ou comme moi grands technophiles, vous savez que nos
terminaux mobiles ont aussi une résolution Full HD, et même au delà pour certains smartphones haut de gamme !
En
effet, l'erreur de mon interlocuteur était de confondre les dimensions
réelles d'un écran et la résolution/densité d'un écran. Si je devais
suivre son raisonnement, mon site s'afficherait bien sûr correctement
sur mon écran d'ordinateur, car la version "fixe Full HD" serait visible
sur ce type d'écran. Mais ce qu'il n'a pas prévu, c'est que mon site
reconnaîtrait également l'écran de 5 pouces Full HD de
mon smartphone, et que j'aurais par conséquent cette même version fixe
"Full HD" affichée dessus... Mais il serait bien sûr tout petit, voir
microscopique, comparé à son homologue de 27 pouces ou plus ! 
Nous
serions donc sur un redimensionnement de la taille bête et méchant, un
"mini-moi" de mon site difficilement lisible et donc inutilisable.
Cet écueil est évité grâce au responsive design, avec la fonction intégrée qu'est le viewport.
Vous
l'aurez compris, grâce au viewport, je vais pouvoir gérer l'affichage
de mon site responsive en prenant en compte la dimension et la
résolution/densité de l'écran du terminal sur lequel il sera affiché.
- Attention, à un niveau avancé, il faudra vous plonger dans le Javascript ou le Jquery, deux langages de programmation très utiles pour adapter certains éléments de navigation ou modules spécifiques (comme les carrousels d'images, appelés aussi "sliders d'images", très utilisés aujourd'hui, dans les site de e-commerces par exemple).
Quels sont les avantages et les inconvénients d'un site responsive ?
Vous
n'allez plus concevoir vos sites de la même façon en ayant une approche
responsive design. Rappelez-vous le jour où vous avez gouté pour la
première fois une tartine de Nutella, cela a totalement changé
votre conception de la tartine grillé, qui est passée d'une simple
tartine à la meilleure tartine de tous les temps ! Et bien, vous aurez,
j'ose l'espérer, la même sensation quand vous allez créer votre premier
site responsive.
Vous verrez qu'en plus de cette merveilleuse sensation, créer un site responsive comporte beaucoup d'avantages :
- Il n’y a qu’un seul site à créer ! Contrairement aux sites mobiles (vous savez, ces sites sur votre navigateur mobile commençant par "m.sitemobiledoublon.com", que l'on pourrait considérer comme des placébos de sites, en attente d'une totale refonte responsive), vous n'aurez pas besoin de développer 2 sites différents (ou plus encore).
- Un seul site à créer, cela signifie donc... Une seule URL nécessaire pour accéder à votre site ! Plus besoin de vous encombrer de plusieurs adresses web (une pour un site et une autre pour sa version mobile par exemple).
- En terme de maintenance, vous n'aurez qu'un seul site à gérer et c'est évidemment beaucoup de temps gagné pour la mise à jour de vos contenus.
- Concevoir un site responsive est moins coûteux que la réalisation d'une application native demandant un développement lourd et une bonne connaissance des langages de programmation évoluant dans les environnements iOS, Android et Windows Phone.
- Un site responsive offre une expérience unifiée sur tous les supports. Quelque soit l'écran, l’expérience utilisateur est toujours optimale contrairement à un site "d’ancienne génération fixe".
- Un site responsive répond parfaitement aux exigences du SEO, contrairement au cas de figure où vous auriez à la fois un site et un site mobile.
- Si vous évoluez dans un milieu professionnel, concevoir un site responsive, c'est aussi l’occasion de montrer que vous êtes totalement raccord avec notre époque et les besoins du marché, en utilisant ce standard basé sur les meilleures technologies du web.
- Et cerise sur le gâteau, votre site sera une belle création qui brillera de 1000 feux quelque soit l'appareil sur lequel ils sera visible !
Les avantages d'accord, mais les inconvénients dans tout ça ?
À
une époque pas si lointaine que ça à l'échelle d'une vie, mais
lointaine quand même à l'échelle du web, l'approche responsive design
avait certains inconvénients comme :
- Une mise en place qui prend du temps : de mauvaises langues vous diront peut-être que le responsive c'est beaucoup de temps et d'efforts pour pas grand chose. Ne les écoutez pas ! Aujourd'hui, concevoir un site responsive est devenu standard, ce "temps" de conception fait partie de la réflexion intrinsèque du webdesigner, qui a pour préoccupation première l'expérience utilisateur.
- Le besoin d'avoir de bonnes connaissances techniques : ce qui a été et sera toujours vrai pour n'importe quel projet web. Les technologies évoluant, il faudra sans cesse se remettre à niveau. Mais heureusement grâce au développement de frameworks comme Bootstrap (que nous aborderons plus tard dans le cours et dont nous nous servirons pour intégrer un site responsive), la tâche est devenue accessible même aux débutants motivés.
- Enfin, certains designers trouvaient que : "le responsive, à cause de ses contraintes, tuait la créativité, ne figeait plus la mise en page et faisait perdre toute notion de composition". Je répondrais personnellement que de la contrainte née la créativité, et que depuis le responsive, la notion de composition s'est renouvelée : elle est devenue évolutive.
Que
nous travaillions dans le présent ou que nous nous projetions dans le
futur, vous voyez qu'il n'y a plus vraiment d'inconvénients à concevoir
des sites responsive... Mis à part peut-être, sortir de sa zone de
confort si vous êtes habitués à ne réaliser que des sites fixes. Ou si
vous êtes novice, de faire le grand saut vers une aventure pleine
d'inattendue dans un monde en constante mutation ! Dans tous les cas, si
vous vous éveillez au responsive design, vous verrez que cette approche
est tout à fait évidente.
Le
responsive design est en effet une approche qui répond à un besoin
tangible : celui de pouvoir surfer agréablement sur un site, depuis
n'importe quel écran.
Incontournable
aujourd'hui, ce processus de création est déjà adopté par des millions
de webdesigner à l'heure où vous lisez ces lignes. Et vous aussi dès à
présent, avec ce premier chapitre, vous faites partie de ce club
d'initiés qui ont compris l'importance du responsive...
... Et c'est vraiment grandiose !
Aucun commentaire:
Enregistrer un commentaire