• 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

Pensez "responsive design" !

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

Penser responsive, si vous êtes de la "vielle école", plutôt habitués à concevoir un design en partant de l'écran de l'ordinateur, c'est d'abord changer son point de vue sur les méthodes classiques. Et si vous découvrez fraîchement la conception web, c'est également être capable de se projeter sur le "comportement" de votre site, quelque soit l'écran sur lequel il sera affiché, dans sa forme et ses fonctionnalités. 

Mais commençons par le début, le point de départ essentiel, l'objet premier qui va déterminer la création de votre site responsive, la pensée number one... La notion de mobile first !

La notion de "mobile first"

Avant, les sites étaient bien sûr conçus pour les seuls écrans sur lesquels on pouvait naviguer sur internet : les écrans d'ordinateur ou "desktop". Mais l'arrivée des smartphones a posé plusieurs problématiques d'adaptation de contenus.

Au début, le réflexe fut de créer un site dédié au mobile, vivant côte à côte avec le site desktop, en harmonie... Ou presque. Car la mise à jour du contenu était évidemment un vrai casse-tête. Alors le responsive arriva, mais une autre problématique avec elle : comment faire "rentrer" tout le contenu de mon site desktop dans un petit écran de mobile ? Cela entraînait des process très longs et pas toujours optimisés... Car on ne remettait pas en cause le contenu de départ adapté au desktop et non au mobile.

C'est comme si, alors que vous avez toujours vécu dans un appartement de 50m2, vous étiez forcés de déménager dans un appartement de 14m2 ! Vous devez vous improviser en véritable champion du Tetris pour réussir à tout rentrer dans ce minuscule espace. 

Il suffit parfois de changer de point de vue

Changeons de paradigme et imaginez plutôt que vous avez toujours vécu dans un appartement de 14m2, et que du jour au lendemain vous déménagez dans un appartement de 50m2.

Vous avez saisi la nuance ? ;)

Il est beaucoup plus facile de faire ce chemin et de partir d'une contrainte forte mais néanmoins optimisée (l'appartement de 14m2), pour aller vers un enrichissement progressif de votre contenu (l'appartement de 50m2).

Vive  l'espace ! Oups je spoile la partie 4 !
Vive l'espace ! (Oups je spoile un peu la partie 3...)

Grâce à une approche proposée par Luke Wroblewski en 2011 (dans son livre "Mobile First" aux éditions A Book Apart), tout devient beaucoup plus évident. Cette nouvelle approche se base sur une méthodologie prenant en compte le mobile comme point de départ dès la conception.

Mobile First !
Mobile First !

Fini le casse-tête du contenu issu du desktop à moduler aux forceps dans le mobile, le mobile est le point de départ : Mobile First.

  • Le contenu est d'abord pensé pour le mobile.

  • Le design et les fonctionnalités ne se voient plus dégradés mais "enrichis" pour la tablette et le desktop.

En effet nous passons d’un petit format avec des fonctionnalités riches et puissantes dès le départ, à un grand format qui offre encore plus d'espaces : les possibilités deviennent immenses avec ce large horizon, ou devrais-je dire ce large écran ! ;) 

Comment design-t-on un site responsive ?

Alors finalement, à quoi ça ressemble le travail de conception d'un site responsive ? C'est ce que nous allons voir dans la pratique à partir de maintenant.

Le processus de conception / création d'un site responsive
Le processus de conception / création d'un site responsive

Avant de nous attaquer au design graphique proprement dit, il est important d’adopter une certaine philosophie. Le responsive design a changé la façon de concevoir les sites web et le processus de création. Il est important de prendre en considération une constante dans le métier de webdesigner, qui fait de lui un véritable challenger prêt à relever tous les défis : les contraintes.

Et il en existe plusieurs liées au responsive design pour s'assurer du bon fonctionnement de votre site.

Un temps de conception en amont important... Mais nécessaire !

Vous l'aurez bien compris, ce temps est nécessaire afin d'avoir une vision globale et précise de votre projet de site responsive, et il doit donc être pris en considération dans vos projets.

Quelques conseils pour l'aborder :

  • Posez vos idées sur papier. 

  • Réfléchissez en profondeur à la structure de votre site, en créant de nombreux wireframes, avant de vous lancer dans le code. C'est ce que nous verrons justement dans les deux prochains chapitres.

  • Projetez-vous sur votre projet, et anticipez la façon dont va réagir votre site suivant les écrans sur lequel il sera affiché (mise en page, interaction, navigation...).Vous avez maintenant un seul et unique site, et non pas plusieurs pour chaque format d'écran. Il doit donc réagir en tenant compte de son environnement (l'écran, le navigateur, la puissance de votre appareil, etc.) comme un organisme "vivant". Il faudra donc penser à tous les cas de figure.

  • Pensez le contenu pour le responsive (images adaptables, médias, blocs de texte...).

  • Et bien sûr, n'oubliez pas : mobile first !

Adoptez une grille de composition

Les colonnes et gouttières formant la grille de composition seront un peu les rails de votre site : tous les éléments images, textes, etc., devront se caler dessus afin de réagir correctement lors du changement d'affichage sur les différents écrans. De prime abord vous aurez l'impression d'être bridés dans votre créativité, contraints à un aspect de "blocs" rectangulaires sur vos créations... Mais vous verrez qu'avec l'expérience, il est tout à fait possible de "casser" cette impression.

Par exemple le site des piscines Leidgens, malgré son apparence, est bel et bien lui aussi basé sur une grille ! Rappelez-vous, plus il y a de contraintes, plus vous vous devez de faire preuve de créativité. ;)

De belles formes géométriques inscrites malgré tout dans une grille
De belles formes géométriques, avec une belle vidéo en fond de site...
...Basés sur une grille de composition!
... Basées sur une grille de composition !

De nombreuses phases de prototypage... Pour plus de fiabilité !

Même si certains navigateurs permettent de simuler l'aperçu de votre site sur les formats d'un écran mobile, il sera au bout d'un moment indispensable de tester votre site sur le ou les appareils de "destination" sur lesquels sera visible votre site responsive (un mobile, une tablette, un écran d'ordinateur). Ceci afin d'anticiper les erreurs et de les corriger au plus vite en créant de nouvelles versions de votre site, jusqu'à la version finale fonctionnelle.

Dans la mesure du possible, testez directement vos sites sur le bon écran
Dans la mesure du possible, testez directement vos sites sur tous les bons écrans

De l’ordinateur au mobile : quelques principes de base en ergonomie tactile 

Que vous soyez sur un mobile ou une tablette, vous devez vraiment considérer l'approche "desktop" à des années lumières de l'approche "mobile". Ce sont 2 appréhensions différentes de l'interface en terme d'interaction. La différence tient dans l'une des parties de votre main : vos doigts.

Tout à porter de vos doigts
Tout à portée de vos doigts

Qui dit mobile, dit tactile

Concevoir un site responsive en partant du "Mobile first", vu l'écran et le support, nécessite quelques notions de bases en ergonomie tactile.

Nous allons concentrer un aspect essentiel de cette ergonomie avec la notion de gestuelle.

Voici une image illustrant les principaux gestes effectuer sur un écran de mobile
Les principaux gestes effectués sur un écran de mobile 

Dans l'illustration ci-dessus vous avez une représentions schématique de différents gestes :

  • Pincer vers l'interieur

  • Pincer vers l'exterieur

  • Glisser de haut en bas ou l'inverse 

  • Glisser vers la droite

  • Laisser 2 doigts appuyés longtemps sur l'écran

  • Taper une fois sur l'écran

  • Appuyer longtemps sur l'écran

Tous ces gestes sont devenus des mouvements naturels que nous faisons tous les jours sur un mobile avec nos doigts. Ces mouvements ne sont pas anodins puisqu'ils nous permettent de naviguer sur les interfaces mobiles et de créer des interactions (faire défiler une page, activer la connexion d'un lien vers une autre page, jouer un son, zoomer sur une image, faire apparaitre un menu secondaire...), à l'instar d'un trackpad sur ordinateur.

Il est important de prendre en considération cet aspect qui va déterminer les choix ergonomiques de votre site visible sur mobile.

Voyons cela en exemple !

Le site de Creative Slashers aperçu mobile
Le site de Creative Slashers aperçu mobile

le site de Creative Slashers aperçu Desktop
le site de Creative Slashers aperçu desktop

Dans cet exemple nous pouvons voir que sur le site de Creative Slashers :

  • Le menu de navigation du haut se transforme suivant sa version (desktop ou mobile) et n'a pas la même apparence. En mobile, pour répondre à des besoins d'ergonomie tactile, il se trouve sous la forme d'un menu déporté en haut à droite, accessible via une icône "hamburger" symbolisé par "3 traits". Sur la version desktop, où il y a plus de place, il peut s'étendre directement sur toute la largeur de l'écran.

  • Le contenu aussi s'adapte. Sur la version mobile, le contenu utile est présent sous la forme d'une zone de texte que l'on peut faire défiler horizontalement. Sur la version desktop, où on a plus d'espace, le contenu s'enrichit d'images et défile verticalement.

Vous pouvez vous apercevoir que l'ergonomie, que ce soit sur mobile ou desktop, doit être pensée comme un concept global et capable de mutation. Vous devez penser la transformation de votre site en prenant en compte tous ces paramètres.

Encore une fois, cette faculté à vous projeter et anticiper comment s'affichera votre site suivant un écran déterminé, sera primordiale. Dans les prochaines parties du cours elle nous sera très utile pour concevoir votre site responsive.

Inspirez-vous

La navigation tactile est une composante essentielle de l'expérience utilisateur sur mobile. Les applications natives sur smartphones furent les premières à inspirer les sites responsive en terme de design et d'ergonomie (d'ailleurs elles restent une formidable source d'inspiration aujourd'hui !). Ces applications mobiles prennent uniquement en considération l'utilisation tactile, et cela permet d'exploiter à 100% toutes les possibilités offertes par l'interaction tactile. 

Et si le code ne vous fait pas peur, vous verrez que quand vous aurez maîtriser les bases du responsive, ajouter ou concevoir des animations enrichira grandement votre site responsive en lui apportant un peu de magie et d'étoiles dans les yeux de vos utilisateurs.

En terme d'application, Clear est un bon exemple. Ce logiciel de "to do list" m'a beaucoup supris à l'époque. Je trouvais génial de pincer mon écran pour plier ou déplier l'interface afin d'accéder à d'autres parties de l'application. L'effet 3D très réussi, donne un petit panache élégant à cette interface très colorée ! Le tout étant bien sûr très fluide. Cela donne une idée intéressante des possibilités en ergonomie tactile.

l'application Clear sur iOs
l'application Clear sur iOs

Pincer pour plier et déplier en toute fluidité !
Pincer pour plier et déplier en toute fluidité !

Il y a aussi un très joli site responsive Species in pieces, qui regroupe tous les animaux en danger sur notre planète, avec de jolies animations géométriques ou "low poly" pour les connaisseurs. 

Species in pieces
Présentation des différentes espèces en danger sur Species in pieces

De belles animations sur votre mobile
Avec de belles animations de transition

Il y a tant d'exemples sur le net, n'hésitez pas à fouiller, à télécharger des applications sur les stores de vos mobiles préférés et à partager vos trouvailles sur le forum. Plus vous aurez d'exemples, plus vous serez inspiré !

Le célèbre réseau social d'images:  Pinterest
Trouvez l'inspiration sur Pinterest

de l'animation d'interface sur le site capptivate
L'inspiration en mouvement sur le site Capptivate.co

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