• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 03/09/2019

Introduction au responsive design

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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 !

"Le web c'est ça", et plus encore dans le futur ! Cette image est tirée du blog de Brad Frost, webdesigner & consultant (http://bradfrost.com/blog/).

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 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 ! :D

Le Cyborg T-800 : l’équivalent d’un (vieux ?) site non responsive… Qui va difficilement sauver le monde !
Le Cyborg T-800 aka Schwarzy : l’équivalent d’un (vieux ?) site non responsive… Qui va difficilement sauver le monde !

Le Cyborg T-1000 : l’équivalent d’un site parfaitement responsive capable de s’adapter dans n'importe quelle circonstance !
Le Cyborg T-1000 : l’équivalent d’un site parfaitement responsive capable de s’adapter dans n'importe quelle circonstance ! 

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.

Un seul site capable d'être visible sur tous les écrans !
Un seul site visible 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 !

La magie du responsive en action ! Sur un écran de mobile ou d'ordinateur le site d'OpenClassrooms se ré-adapte sans problème
La magie du responsive en action ! Quelque soit l'écran, le site d'OpenClassrooms se ré-adapte sans problème

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. 

Deux écrans Full HD, avec pour le mobile une résolution/densité plus élevée
Deux écrans Full HD, avec pour le mobile une résolution/densité plus élevée

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.

Le responsive design une fois adopté, vous ne pourrez qu'être accro !
Le responsive design une fois adopté, vous ne pourrez qu'être accro !

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. 

Le confort unique d'un  site responsive consultable de manière optimale

Surfer agréablement sur un site responsive 

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 !

*Le responsive design c'est génial !
*Le responsive Design c'est génial !

Exemple de certificat de réussite
Exemple de certificat de réussite