java

samedi 1 octobre 2016

TOUT S'AVOIR SUR LE DESIGN PRO

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​ ! 
"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 !   
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 !   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 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 ! 
Visible sur tous les écrans​ ne veut pas dire que votre site sera une simple redimension de  celui­ci à l'échelle d'un écran plus petit ou plus grand... Il est plutôt question d'adaptation et  de restructuration en fonction des spécificités et contraintes de chaque support.  
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é. 
Les ​media queries​ sont des spécifications (ou "règles") de CSS3 qui permettent de définir  des propriétés CSS qui ne s’appliqueront qu’à certaines largeurs d’écrans (pour la mise en  page ou la taille des textes par exemple). 
● 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  Cet écueil est évité grâce au responsive design, avec la fonction intégrée qu'est le ​viewport​.   La résolution/densité d'un écran est calculée en ​Pixel Par Pouces ​ou​ PPP​. Actuellement  les écrans de terminaux mobiles, ainsi que les ordinateurs Apple, ont des densités très  élevées. Cela permet d'avoir un rendu très net des éléments affichés à l'écran,  contrairement à des écrans classiques. Par exemple avec l'écran Retina d'un Macbook pro  qui a une densité de 220 PPP, vous avez un affichage des éléments (en terme de  dimension) équivalent à un écran de 1280x800 pixels, et pourtant vous êtes bien sur une  résolution de 2880x1800 pixels ! Il suffit de constater la netteté de toutes les interfaces et  icônes (et je ne parle pas du piqué incroyable des photos sur ces écrans...  ) 
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). 
Si vous n'êtes pas très à l'aise avec la partie programmation, et que cet intermède sur les  aspects techniques vous a légèrement refroidi : ​pas de panique !  
Cette initiation est conçue pour vous faire avant tout découvrir et aimer le responsive  design. Vous verrez avec moi une méthode pratique pour vous aider à ​maquetter​ votre site  responsive très facilement.     
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 !  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". 
Soyez vigilant à cette notion également incontournable dans le web : l​'expérience  utilisateur​ ou l'​UX​. Son champ d'action s'étend sur plusieurs domaines comme le  marketing, l'ergonomie, le design, le développement, les tests utilisateurs, le design  d'interaction ou bien la recherche et le recoupement d'informations pour ne citer qu'eux. 
Cette expertise est devenue un axe stratégique primordial dans la conception de projets  web ou la création d'applications. Pour une expérience utilisateur réussie, votre site doit être  : fiable, utilisable et agréable pour l'utilisateur. 
● 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. 
Le ​SEO​ (​Search Engine Optimization

) regroupe l'ensemble des techniques permettant  d'optimiser la référencement naturel de votre site sur les moteurs de recherche. De nos  jours, c'est un aspect essentiel à prendre en compte si vous souhaitez améliorer le visibilité  de votre site. 
● 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.  

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 !  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​ ! 
"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 !   
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 !   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 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 ! 
Visible sur tous les écrans​ ne veut pas dire que votre site sera une simple redimension de  celui­ci à l'échelle d'un écran plus petit ou plus grand... Il est plutôt question d'adaptation et  de restructuration en fonction des spécificités et contraintes de chaque support.  
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é. 
Les ​media queries​ sont des spécifications (ou "règles") de CSS3 qui permettent de définir  des propriétés CSS qui ne s’appliqueront qu’à certaines largeurs d’écrans (pour la mise en  page ou la taille des textes par exemple). 
● 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  Cet écueil est évité grâce au responsive design, avec la fonction intégrée qu'est le ​viewport​.   La résolution/densité d'un écran est calculée en ​Pixel Par Pouces ​ou​ PPP​. Actuellement  les écrans de terminaux mobiles, ainsi que les ordinateurs Apple, ont des densités très  élevées. Cela permet d'avoir un rendu très net des éléments affichés à l'écran,  contrairement à des écrans classiques. Par exemple avec l'écran Retina d'un Macbook pro  qui a une densité de 220 PPP, vous avez un affichage des éléments (en terme de  dimension) équivalent à un écran de 1280x800 pixels, et pourtant vous êtes bien sur une  résolution de 2880x1800 pixels ! Il suffit de constater la netteté de toutes les interfaces et  icônes (et je ne parle pas du piqué incroyable des photos sur ces écrans...  ) 
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). 
Si vous n'êtes pas très à l'aise avec la partie programmation, et que cet intermède sur les  aspects techniques vous a légèrement refroidi : ​pas de panique !  
Cette initiation est conçue pour vous faire avant tout découvrir et aimer le responsive  design. Vous verrez avec moi une méthode pratique pour vous aider à ​maquetter​ votre site  responsive très facilement.     
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 !  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". 
Soyez vigilant à cette notion également incontournable dans le web : l​'expérience  utilisateur​ ou l'​UX​. Son champ d'action s'étend sur plusieurs domaines comme le  marketing, l'ergonomie, le design, le développement, les tests utilisateurs, le design  d'interaction ou bien la recherche et le recoupement d'informations pour ne citer qu'eux. 
Cette expertise est devenue un axe stratégique primordial dans la conception de projets  web ou la création d'applications. Pour une expérience utilisateur réussie, votre site doit être  : fiable, utilisable et agréable pour l'utilisateur. 
● 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. 
Le ​SEO​ (​Search Engine Optimization

) regroupe l'ensemble des techniques permettant  d'optimiser la référencement naturel de votre site sur les moteurs de recherche. De nos  jours, c'est un aspect essentiel à prendre en compte si vous souhaitez améliorer le visibilité  de votre site. 
● 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.  

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 !  LES ENJEUX DU RESPONSIVE DESIGN 
Les enjeux du responsive design sont nombreux et ils ne ne sont pas uniquement techniques.  Dans le chapitre précédent, vous avez bien compris le besoin d'avoir un site visible sur tous 
les écrans avec une interface qui s'adapte parfaitement à son support, pour que l'expérience  utilisateur soit toujours parfaite. Mais il y a aussi un aspect plus stratégique et économique  derrière l'adoption du responsive design, lié à l'​évolution du comportement des  utilisateurs sur internet​. 
Il suffit d'observer dans les transports en commun le nombre de personnes collées à leur  smartphone pour comprendre les chiffres qui suivent : 
● En 2014, on comptait déjà un peu plus de ​30 millions de mobinautes ​(personnes  utilisant internet depuis un téléphone mobile) en France, soit ​55% de la population​ !  ● 80% des mobinautes accèdent quasi­quotidiennement à internet.  (Sources: Comscore & Médiamétrie) 
Et ces chiffres sont en constante progression... D'ailleurs utilisez­vous plus votre mobile ou  votre ordinateur pour naviger sur internet ? Et votre entourage ? Vous verrez que les  réponses sont sans équivoque. 
​Naviguer sur internet 
depuis son mobile, une habitude qui supplante le surf sur un ordinateur  Que vous soyez une grande enseigne, un photographe, un webdesigner en freelance, ou un  étudiant fraîchement diplômé à la recherche d’un emploi, avoir un site responsive est  indispensable si vous souhaitez rester visible et compétitif. Ceci, afin de ne pas vous couper  de ce coeur de cible que sont les mobinautes... 
L'adoption du responsive design  Le webdesigner a une place de choix pour assister aux grandes évolutions de l’internet : en  fonction des projets sur lequel il est commissionné, il peut voir et anticiper les tendances qui  "trustent" le marché du web. Et avec l’explosion des ventes de mobiles, je peux vous dire que 
mon carnet de commandes regorge de demandes concernant la création de sites responsive  !   
Mais je vais en profiter pour rebondir un peu sur les évolutions du webdesign que j'ai pu  suivre durant ma carrière. Nous allons remonter le temps ensemble, et traverser différentes  époques avant que 2011 n'arrive avec le responsive design ! 
Un petit saut dans le temps  Il était une fois... En fait je vais quand même vous épargner la naissance de l'informatique,  d'internet et du CD­ROM.   
Quand j'ai commencé ma carrière de webdesigner, dans les années 2000, mes premiers  sites étaient statiques avec des gabarits fixes en HTML. Tout était optimisé au KiloOctet près,  car à l'époque le débit était très faible (du 56k), il y avait donc peu d'images et beaucoup de  texte. Ensuite avec le haut débit, il y a eu la période des sites très visuels. La vidéo était  encore très difficile à mettre en place, mais je pouvais déjà m'exprimer davantage  graphiquement. A moi les créations sans limite sur Photoshop ! 

Entre 2003 et 2007, il y a eu les grandes heures de gloire du logiciel Adobe Flash avec la  création de sites animés incroyables.  
Le site du Père Noël de la poste pour l'agence Spiderdreams, entièrement réalisé en Flash  Mais bien évidemment à l'époque, les smartphones et tablettes n'existaient pas ! Il aura fallu  attendre 2009 avec l'iPhone 3GS de Apple pour commencer à surfer confortablement sur le  net. Et la suite de l'histoire, vous la connaissez puisque depuis ce jour, le marché mobile n'a  cessé d'augmenter. 
Adobe Flash​ est un logiciel d'animation qui a introduit la notion d'interactivité riche et  sophistiquée dans les sites web. Ce logiciel a eu un grand succès à l'époque, mais malgré  une technologie mature, son format .swf est aujourd'hui tombé en désuétude dans la  création web. Les langages de programmation (comme le HTML, le CSS ou JavaScript) ont  su évoluer très vite et le remplacer. 
Il y a pourtant eu de grands défenseurs de Flash, une guerre l'opposait même au langage  HTML5 ! Mais omnibulés par une approche uniquement artistique, ces designers en avaient  oublié l'un des fondamentaux de leur métier : répondre aux problématiques du marché.  Flash ne répond plus du tout à ce besoin, et en particulier à l'émergence du mobile. Il reste  malgré tout utilisé pour la création de bannières publicitaires, et sa dernière version permet  d'exporter des animations basiques en HTML5. 
J'ai croisé tardivement le responsive design en 2012, alors qu'outre manche cela faisait déjà  plus de 3 ans que ces notions étaient abordées dans le domaine du web design. Il est arrivé  timidement en France, et malgré les réticences de certains de mes confrères qui ne voyaient  pas du tout l'intérêt de cette approche, j'avais pour ma part compris que le responsive design  allait changer de manière radicale la façon de concevoir les sites web. Au delà de mon rôle  de "créatif", avec mes yeux de concepteur, j'ai pu observer les premiers comportements des  utilisateurs mobiles, le potentiel des premiers sites responsive, les évolutions des langages  de programmation comme le HTML5 et le CSS3, Javascript et Jquery, l'arrivée de la vidéo en  puissance, de dessins et d'animations générées en code... Bref j'ai pu me projeter dans le  futur. 
Je reconnais qu'entre 2012 et 2015, il n'y a pas eu de bond phénoménal. Mais encore une  fois, à l'échelle du web, 3 ans c'est énorme ! Le constat est d'autant plus flagrant aujourd'hui  dans mon activité professionelle : la proportion de sites responsive dans les commandes  clients est passée de 10% à 100%  en 3 ans.  
Le responsive design fait désormais partie de ces savoir­faire qu'un webdesigner doit  connaître s'il veut continuer à être compétitif et être considéré comme un expert dans son  domaine. 
Adopter le responsive design pour la création de son site, c’est répondre aux normes et  exigences du web actuel. Il faut ainsi être conscient que même si nous continuons à surfer  sur un écran d’ordinateur (car il est encore difficile de se passer de son ordinateur en tant  qu’outil), ​l’écran du mobile domine déjà le web​ ! 
Il domine tous les écrans !  Et si vous doutez encore de cette affirmation, revenons simplement quelques semaines en  arrière : le 21 avril 2015, Google lance son nouveau label "Mobile friendly". 
Mobile Friendly​ est un label créé par Google. Les sites bénéficiant de ce label répondent à  tous les critères exigés par la firme afin de permettre une consultation optimale sur mobile  en terme d’ergonomie. Lors d’une recherche sur smartphone, l'algorithme de Google  privilégie la remontée des pages web considérées "mobile friendly" au dessus des sites ne  répondant pas à ces nouveaux critères, et ce même s'ils sont bien référencés en version  "desktop". 
Si vous souhaitez en savoir plus sur le label, je vous conseille ​cet article sur le site de  Cézame conseil​. 
Il est inutile de préciser qu’avec un site responsive, vous serez naturellement "mobile friendly"  en plus d’être "desktop friendly".    Un deux­en­un fort appréciable !  
Google, moteur de recherche n°1 dans le monde, anticipe depuis un moment une montée en  puissance du mobile et de son utilisation sur le web. Et ce n'est pas le seul ! Bien  évidemment, les enjeux commerciaux sont énormes. Que ce soit au niveaux de l’exploitation  des données ou les futurs services à la carte proposés sur nos smartphones, le marché  mobile retient toutes les attentions de tous les acteurs du web, jusqu’à la prochaine révolution  technologique.  
 Vous l’aurez compris, ​le responsive design est une solution quasi­obligatoire  aujourd’hui​… 
Quand faut­il utiliser le responsive design ?  Le responsive design est une notion incontournable en webdesign. Et comme j'insiste à tout  bout de champs, vous l'avez maintenant bien intégré.    
Mais... 
... Comme je le disais un peu plus haut, en 2012, j’ai dû à plusieurs reprises défendre mon  point de vue sur ce sujet face à des confrères sceptiques, qui arguaient la mort de la  créativité (et parallèlement arguaient le même constat vis­à­vis du HTML5 face à flash !). Je  n’étais pas d’accord avec eux, et même si je savais que le responsive était plus qu’un effet de  mode, je pouvais néanmoins comprendre que ​le responsive n’était pas la réponse à tout​. 
Et oui, je suis personnellement un grand défenseur du responsive design : je suis fasciné par  la notion même de responsive, qui peut s’appliquer dans des domaines autres que le web  comme l’architecture ou la mode, mais aussi dans la communication graphique. 
Le responsive est déjà présent dans d'autres domaines comme celui de l'architecture avec  les espaces modulables. Il envahit même le design graphique traditionnel, bouleversant ses  fondamentaux et les principes liés à l'identité graphique, avec des réflexions autour du  "responsive logo". Si vous êtes curieux, vous pouvez admirer quelques expérimentations  sur ce site :​http://www.responsivelogos.co.uk/​. Après tout l'identité aussi doit pouvoir se  transformer pour s'adapter correctement à tous les écrans. 
Mais même si je suis un grand défenseur du responsive design, je ne suis pas non plus un  gourou obstiné.   
Même si de nos jours, il est préférable d'avoir un site responsive, il n'est pas forcément la réponse à  tous les projets...  Nous allons voir dans quels types de projets le responsive est utilisé, et dans quels cas il est  possible de s'en passer. 
Pour quels types de projets 

dois­je

 utiliser le responsive design ? 
Soyons clair, concevoir un site responsive est devenu une norme pour : 
● les sites institutionnels   ● les sites d'entreprise, ou sites dits "corporate"  ● les sites d'informations  ● les portfolios  ● les sites de e­commerce  ● certains sites produits  
Le site polygon.com est un site de news sur les jeux vidéo complètement responsive 
Quand puis­je m'en passer ? 
Si si, il reste des projets pour lesquels il est possible de se passer du responsive. 
● C'est notamment le cas des ​sites publicitaires évènementiels​ qui privilégient une  expérience innovante pour l’utilisateur. Cela nécessite parfois le confort d’un grand  écran et l'utilisation de technologies lourdes, comme la vidéo ou la 3D, pour renforcer  cette sensation d’immersion dans l’écran. L’expérience responsive adaptée au mobile  n’est alors pas nécessaire.  Le site ​sortieenmer.com​ par exemple, réalisé pour le célèbre équipementier marin Guy  Cotten, est une expérience qui se veut volontairement lisible uniquement sur un écran  d'ordinateur. Cela afin de nous faire profiter d'une expérience (angoissante) unique ! (À  consulter en plein écran bien sûr) 
Le site sortieenmer.com nous immerge dans une aventure conçue pour ordinateur.  ● Il y a aussi le cas de​ sites avec des fonctionnalités avancées​, tels que les géants  facebook ou twitter, pour lesquels il est préférable d’avoir une application mobile  native qui tirera pleinement profit de la puissance de votre terminal. Cela permettra,  par exemple, de gérer la prise de photos et de vidéos de manière optimale ou encore  de gérer parfaitement le système de notifications, alors parfaitement intégré au  système de votre smartphone.  
l'application native de Facebook permet de profiter de toutes ses fonctionnalités sans soucis de  performance. 
● Et pour finir il y a bien sûr le cas des ​jeux vidéo​, où l’expérience est 100% plus  efficace par le biais d’une application mobile ! 
Le célèbre jeu mobile Angry birds Star Wars 
Responsive design, choix d'une expérience qui ne se fait pas en dessous d'une certaines  taille d'écran (comme pour l'exemple de sortieenmer) ou application native (iOs, Android et  Windows Phone), le plus important est de bien cibler votre besoin, afin d'avoir une  expérience utilisateur toujours réussie ! 
PENSEZ "RESPONSIVE DESIGN" ! 
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 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 !  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  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.  
Croyez moi, rien n'est plus rapide qu'un crayon pour poser une idée ! Je défie souvent mes  étudiants, qui rebutent à faire cet exercice, de tracer un simple trait, un rectangle, un cercle  ou même un personnage le plus rapidement possible. Leurs armes ? Photoshop ou  Illustrator. Et les miennes ? un tableau et une craie. Devinez qui est le plus rapide pour un  résultat tout aussi clair et précis ?   
Plaisanterie à part, dans le milieu professionnel, beaucoup de grands patrons déplorent le  fait que de nombreux étudiants ne savent pas exprimer leur idées sur papier. Vous savez ce  qu'il vous reste à faire : vous n'avez pas besoin de savoir dessiner, juste d'avoir confiance  en vous, et d'acheter un crayon ! 
● 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, avec une belle vidéo en fond de site...
... 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 tous les bons écrans  Il existe dans le navigateur Chrome un simulateur de terminaux. ​Attention, Il faut être à  l'aise avec le code pour l'exploiter pleinement​. 
En allant dans le menu "Afficher" > "Options pour développeurs" > "Outils de  développement", vous aurez accès à une interface qui vous permettra de choisir l'appareil  que vous voulez pour visualiser l'aperçu de votre site.  
Dans l'exemple ci­dessous, vous pouvez voir le rendu simulé du site responsive d'un  développeur web de talent, ​Yoann Coualan​, sur un iPhone 6 Plus. 
Vous pourrez simulez grâce à cette option de Chrome tous les terminaux mobile du moment 
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 à 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​. 
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 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 menu "Hamburger"​ que l'on retrouve partout dans les applications mobiles, est un  symbole standardisé pour signifier la présence d'un menu "tiroir" proposant l'accès à toutes  les parties d'un site. Ce menu est ainsi toujours accessible, mais il ne prend jamais de place  comme il apparait et disparait au gré de vos besoins. Il tire son nom du fait que les 3 traits  horizontaux pourraient représenter un hamburger avec les tranches de pain et le steak au  milieu. 
● 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 
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.  
Présentation des différentes espèces en danger sur Species in pieces 
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é ! 
Je vous recommande d'aller sur le site ​Pinterest.com​. Ce réseau social de partage d'images  est une mine d'or pour les inspirations visuelles ! Tapez les mots­clés "mobile" et "interface"  dans le moteur de recherche et découvrez ce que d'autres designers ont créé ou repéré.  Sachez que vous pouvez également sauvegarder vos propres collections d'images sur  Pinterest, et y ajouter au fur et à mesure les exemples qui vous inspirent, afin de pouvoir les 
retrouver plus tard et d'avoir toujours à disposition vos propres galeries personnelles  d'inspiration.   
Trouvez l'inspiration sur Pinterest  Et si vous cherchez de l'inspiration en mouvement, je vous recommande ​capptivate.co​, qui  répertorie de nombreuses captures d'interfaces mobiles animées. 
L'inspiration en mouvement sur le site Capptivate.co  STRUCTUREZ VOTRE SITE AVEC DES WIREFRAMES 
Dans ce chapitre, nous allons enfin commencer à concevoir notre site en responsive design !  J'espère que vous êtes prêt à rentrer dans le vif du sujet et à être créatif.    

La première étape consiste à définir l’arborescence et la structure de votre site et ensuite ​à  dessiner clairement et simplement​, écran par écran, les différentes zones éventuelles de  votre site : La barre de navigation, les contenus textes ou images, les boutons valider et  retour, le player vidéo, la carte interactive, etc. Autant d’éléments qui nous permettront de  nous projeter sur la structure de votre site ! 
La notion de wireframe pour structurer le design  Je vous ai dit que nous allions commencer à concevoir notre site mais ça ne veut pas dire  que vous devez avoir immédiatement ouvert votre logiciel Photoshop ! 
C'est l'heure de sortir vos crayons 
Et oui, le travail de conception commence bien souvent avec un papier et un crayon, afin de  réaliser des wireframes. Ces derniers sont très importants pour structurer le design d'un site. 
Les wireframes ou représentations "filaires" (aussi parfois appelées "maquettes fil de fer" en  français) permettent de poser sur papier (ou écran) la structure d'un site ou d'une  application. On y définit très simplement les zones et emplacements des futures images,  textes, boutons, etc., de chaque page du site. 
J’aime beaucoup le travail de dessin à la main pour créer les wireframes. L’efficacité du  dessin n’est plus à prouver, car rapidement vous pourrez poser les premières briques de  votre projet. Dans le chapitre précédent, j'avais bien insisté sur le coté pratique de cette  méthode. Rapide en exécution, elle se révèle d'une efficacité monstre si vous travaillez dans  le cadre d'un projet en groupe à l'école ou dans le milieu professionnel. 
Les échanges entre collaborateurs sont très importants. Et sur le papier, vous anticipez tous  les besoins en un coup de crayon, vous échangez surtout rapidement, et vous rebondissez  d'idées en idées en un rien de temps ; là où, si vous aviez commencer à dessiner votre cercle  sur Photoshop, il se serait sans doute écoulé 2 précieuses minutes durant lesquelles des  centaines d'idées et de questions peuvent jaillir ! 
En plus, le crayon est un outil universel : pas besoin de cours de dessin, seul poser l'idée  compte et surtout échanger, échanger, échanger... 
Voici les premières ébauches sur papier du projet sur lequel je vais travailler tout au long de ce  cours...  Si vous êtes perfectionnistes, et que vous appréciez les beaux outils, il existe même une  boutique​UIstencil.com​, qui vend tout l’attirail du parfait ergonome/UX Designer, pour que  vous puissiez vous éclater à dessiner des wireframes sur papier. 
Le site UIstencil.com 
Cheminons ensemble 
Ces wireframes sont essentiels car ils vont donner une vision globale de chaque écran, mais  surtout définir ​le ou les chemins utilisateur​ de votre site. 
Le chemin utilisateur est trés différent d'une arborescence qui présente toute les pages d'un  site. Il décrit, écran par écran, des scénarios possibles du parcours de l'utilisateur tout au  long de la consultation de votre site. 
En quoi est­ce utile ? 
Décrire ces scénarios vous permettra : 
● d'imaginer comment votre site peut être consulté et utilisé ;  ● d'être sûr du bon déroulement des pages de votre site. Par exemple, dans la cas d'un  portfolio, assurez­vous que votre futur employeur arrivera bien à la page contact  depuis la home page (page d'accueil), en passant par la page de vos projets.  ● De guider l'utilisateur tout au long de la consultation de votre site et d'anticiper les  erreurs éventuelles qui pourraient le faire partir de votre site à tout jamais ! 
Notre exemple fil rouge   Afin de rentrer dans le concret et de ne pas me perdre en route, je vais m'appuyer tout au  long de ce cours sur un projet­exemple que je vais développer à chaque étape de la  conception. 
Je sais que vous êtes maintenant persuadé tout comme moi qu'un site responsive est la  bonne réponse à beaucoup de projets web différents (site d'information, de e­commerce...).  Alors puisque nous avons le choix, autant se faire plaisir ! Je vous propose de voyager un  peu avec moi, en réalisant un site photo directement inspiré de mon dernier voyage : les  temples d'Angkor au Cambodge.  
Dans mes premières esquisses, je place donc tous les éléments d'interfaces dont je vais  avoir besoin, et je décris en même temps le chemin utilisateur allant de la home page à la  partie galerie photo. 
Mon cheminement utilisateur  Sur la home page, nous aurons accès aux premiers contenus en faisant défiler la page qui  s'étend sur plusieurs écrans : 
1. Le visiteur arrive d'abord sur une superbe image des temples d'Angkor pour que la  magie opère immédiatement en l'immergeant sans attendre dans ces ruines au passé  incroyable. Sous mon titre, j'installe une introduction qui, tout comme la photo  principale, invite au voyage. L'utilisateur scroll / fait défiler la page vers le bas.  2. L'utilisateur arrive sur une illustration de la carte du Cambodge pour situer plus  précisément les temples d'Angkor. Un texte décrivant la situation géographique, et me  présentant au passage, permettra à l'utilisateur de mieux préparer son voyage.  3. J'invite ensuite l'utilisateur à visiter les temples avec des extraits de la partie galerie  photos. Si le charme opère, je passe ainsi directement à la partie 4 !  4. L'utilisateur se promène dans les ruines des cités khmers, dans la partie galerie photo  où j'y expose tous mes clichés.  Vous voyez, le chemin utilisateur vous a permis de comprendre comment je compte faire  voyager celui­ci au sein de mes pages. Vous aussi, essayez­vous rapidement à décrire ce  type de chemin sur vos propres projets ! 
Les wireframes sur écran 
Il est possible de représenter graphiquement de différentes façons le chemin utilisateur. Nous  allons voir dans le prochain chapitre comment passer rapidement du crayon à l'écran. 
Mais est­ce vraiment bien utile de recopier nos dessins à l'écran ? 
Et bien, cela dépend bien sûr de l'ampleur de votre projet, mais en général oui ! 
● Cela vous permettra de poser définitivement tous les éléments de votre site ainsi que  son arborescence. Autant dire que cela donnera un peu de clarté à tous les gribouillis  que vous, ou vos collaborateurs, auront fait.   ● Dans un travail de groupe, ce document numérique servira de référence tout au long  de votre projet. 
Quelques exemples 
Dans le cadre de mon rôle de formateur, j'entraîne souvent mes étudiants à cet exercice du  wireframe et du cheminement utilisateur. Voici ainsi quelques exemples de travaux réalisés  en classe : 
​Projet 2ème année ICAN Webdesign ­ 
application Universcience  Dans cet exemple très graphique du cheminement utilisateur ​(à lire de bas en haut)

, mes  étudiants ont posé le fonctionnement d'une application dédiée à l'établissement public  Universcience (issu du rapprochement entre le Palais de la découverte et la Cité des  sciences et de l'industrie à Paris), suivant 3 cas de figure : 
1. En tant qu'utilisateur (représentée par la bulle "you"), vous êtes soit déjà inscrit,  auquel cas vous vous connectez (bulle connexion). Soit vous êtes un utilisateur qui  ne souhaite pas s'inscrire, mais qui pourra tout de même accéder aux fonctionnalités  basiques de l'application (bulle invité), soit enfin vous êtes un nouvel utilisateur (bulle  inscription).  2. Un fois l'étape d'identification réalisée, vous avez accès au menu de votre application  qui vous permettra par exemple de réserver vos billets pour une exposition, de chatter  avec la communauté, etc. ; ce menu étant le "hub" (plateforme centrale) de tous vos  besoins.  Dans le prochain exemple, des étudiants de 4ème année ont posé des wireframes sur le  logiciel Balsamiq que nous verrons au prochain chapitre, pour concevoir un advertgame : une 
application ludique mettant en scène une communauté d'utilisateurs se défiant autour de  challenges par selfies interposés. Très utiles, ces wireframes mis au propre sur l'écran après  une première recherche au crayon, ont permis au designer de l'équipe de travailler avec des  structures de référence tout au long du projet. 
  
​Projet 4ème année ICAN Webdesign ­ 
Neuronolus   Et le résultat en images, une fois maquetté sur Photoshop : 
​tada !  Ne vous inquiétez pas nous arrivons bientôt à la fameuse maquette du site sur Photoshop.  Mais avant, concluons cette partie en posant nous aussi nos wireframes avec Balsamiq !  CRÉEZ VOS WIREFRAMES AVEC BALSAMIQ 
Dans ce chapitre, nous allons découvrir en vidéo comment utiliser Balsamiq pour créer les  wireframes de votre site responsive. 
Rapide et très intuitif, ce logiciel vous permettra très vite de poser une structure pour toutes  les pages de votre site, grâce à sa bibliothèque d'éléments très fournie. II jouit d'une bonne  réputation dans la communauté des designers d'interfaces et UX designer, mais il est  malheureusement payant. Pour le découvrir, vous disposez tout de même d'une version  d'essai gratuite valable 30 jours, que je vous invite maintenant à télécharger. 
Rendez­vous sur le site de ​Balsamiq​ et cliquez sur l'onglet "​Download​" pour télécharger  l'application pour PC ou pour Mac : "Download Mockups". Celle­ci sera complète et 
utilisable gratuitement pendant 30 jours. Au delà, vous devrez utiliser une clé payante pour  pouvoir enregistrer vos travaux (comptez actuellement 89$ pour une licence individuelle). 
Découvrir Balsamiq Mockups  Une fois installé de votre côté, faisons un rapide tour d'horizon de cet outil qui, je vous  rassure, est vraiment très intuitif ! 
 Pour télécharger les vidéos de ce cours, 

devenez Premium 
Virak cool trip  Rentrons à présent dans le détail, en reprenant le wireframe d'une page de mon projet fil  rouge dans les temples d'Angkor. 
 Pour télécharger les vidéos de ce cours, 

devenez Premium 
Nous avons mis l'accent sur la partie mobile, mais bien sûr les wireframes de la version  desktop peuvent se faire dans la foulée. 
Si vous le souhaitez, je vous propose de retrouver tout le projet Balsamiq de mon site photo  afin de voir à quoi il ressemble et de vous en inspirer si nécessaire : 
>> ​Télécharger le projet complet balsamiq 
Voilà ! Vous devriez bientôt avoir vous aussi une belle vue d'ensemble de votre projet avant  de passer, dans la prochaine partie, à la maquette graphique détaillée sur Photoshop.   
Cette partie est maintenant terminée. N'oubliez pas de faire votre quiz avant de passer à la  partie suivante ! Vous trouverez le lien dans ​le plan principal du cours​ ou dans le menu à  droite. À vous de jouer ! 
● Question 1  ● Le responsive design c’est :  ○ Un effet de mode dans le Web qui disparaîtra au fil du temps.  ○ Une technique qui permet de réaliser un seul et unique site capable de  s’adapter à tous les écrans.  ○ Un terme technique qui désigne les sites uniquement conçus pour les  téléphones mobiles.  ○ Un style de design graphique qui fait suite au “flat design”.  ● Question 2 
● Le ​SEO

 (ou le référencement) est très important de nos jours lorsque que  l’on créé un site web, mais en quoi consiste­t­il ?  ○ Il sert à organiser le contenu de pages web.  ○ C’est une certification qui qualifie votre site en termes de fiabilité et de sécurité.  ○ C’est un nouveau langage de programmation.  ○ C’est l'ensemble des techniques permettant d'optimiser la visibilité de votre site  sur les moteurs de recherche.  ● Question 3  ● Même si le responsive est devenu une norme dans la conception de projet  web, dans quel cas ne sommes­nous pas obligés de l’utiliser ?  ○ Dans la création d’une application de type jeu vidéo  ○ Dans la création d’un site portfolio  ○ Dans la création d’un site institutionnel  ○ Le responsive est toujours la bonne réponse, quel que soit le cas de figure !  ● Question 4  ● Dans le processus de création de votre site responsive, vous serez amené à  tester votre site...  ○ Autant de fois qu’il le faudra, car il y a toujours des optimisations à faire.  ○ 1 seule fois, car cela marche toujours du 1er coup.  ○ 1 seule fois et si cela ne marche pas, c’est que vous devez abandonner.  ○ Entre 2 et 3 fois.  ● Question 5  ● Qu’est­ce que le “Mobile First” ?  ○ C’est concevoir votre projet en partant du mobile vers les autres écrans.  ○ C’est un classement des appareils les plus utilisés dans le monde.  ○ C’est une norme qui précède la norme “Mobile two”.  ○ C’est une notion philosophique chez les ergonomes web.  ● Question 6  ● Qu’est­ce que le menu hamburger ?  ○ Un type de plat que l’on peut trouver sur les sites de restauration.  ○ Une icône représentant l’accès à un menu sur une interface mobile.  ○ Une icône permettant de commander un hamburger depuis votre mobile.  ○ Un effet visuel d’animation de menu sur votre site web.  ● Question 7  ● A quoi associez­vous “les gestuelles” sur votre mobile ?  ○ Aux différentes animations sur votre site. 
○ A la reconnaissance de mouvement devant une caméra.  ○ A l’ergonomie tactile.  ○ Aux différents mouvements d’un avatar virtuel.  ● Question 8  ● Quel réseau social permet d’épingler de nombreuses inspirations  graphiques pour vos projets ?  ○ Facebook  ○ Instagram  ○ Pinterest  ○ Youtube  ● Question 9  ● A quoi servent les wireframes ?  ○ Elles servent à déterminer la structure de votre interface.  ○ Elles servent à vous contraindre dans votre liberté créative.  ○ C’est un style graphique très à la mode dans le web.  ○ C’est une technique de programmation web.  ● Question 10  ● Qu’est­ce qu’un cheminement utilisateur ?  ○ C’est un lien menant l’utilisateur directement à l’arborescence d’un site ou  d’une application.  ○ C’est un scénario d’utilisation de votre site ou de votre application par  l’utilisateur.  ○ C’est une étude sur la réflexion que peut avoir l’utilisateur sur les images  affichées sur votre site.  ○ C’est un historique des pages parcourues par l’utilisateur. 
Il vous reste encore 10 questions à répondre.   

Aucun commentaire:

Publier un commentaire