le souffle des mots
java
vendredi 18 novembre 2016
mardi 15 novembre 2016
samedi 8 octobre 2016
lundi 3 octobre 2016
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’estce que le responsive design ? ● Quels sont les avantages et les inconvénients d'un site responsive ? ● Quand et pourquoi fautil utiliser le responsive design ? ● Comment designton 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’estce 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 penserresponsive !
"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 sciencefiction, 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 T1000) de prendre n'importe quelle
apparence grâce à sa composition en métal "liquide". Et le héros du film, incarné par un cyborg T800 vieille génération en "purs boulons d'aciers", avait bien du mal à lutter contre ce rival polymorphe...
Cette capacité qu'a le cyborg T1000 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 T800 aka Schwarzy : l’équivalent d’un (vieux ?) site non responsive… Qui va difficilement sauver le monde !
Le Cyborg T1000 : 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 celuici à 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 lasurface 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 "minimoi" 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 ecommerces 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. Rappelezvous 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’estce que le responsive design ? ● Quels sont les avantages et les inconvénients d'un site responsive ? ● Quand et pourquoi fautil utiliser le responsive design ? ● Comment designton 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’estce 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 penserresponsive !
"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 sciencefiction, 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 T1000) de prendre n'importe quelle apparence grâce à sa composition en métal "liquide". Et le héros du film, incarné par un cyborg T800 vieille génération en "purs boulons d'aciers", avait bien du mal à lutter contre ce rival polymorphe...
Cette capacité qu'a le cyborg T1000 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 T800 aka Schwarzy : l’équivalent d’un (vieux ?) site non responsive… Qui va difficilement sauver le monde !
Le Cyborg T1000 : 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 celuici à 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 lasurface 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 "minimoi" 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 ecommerces 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. Rappelezvous 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 quasiquotidiennement à internet. (Sources: Comscore & Médiamétrie)
Et ces chiffres sont en constante progression... D'ailleurs utilisezvous 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 CDROM.
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 savoirfaire 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 deuxenun 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 quasiobligatoire aujourd’hui…
Quand fautil 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
doisje
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 ecommerce ● certains sites produits
Le site polygon.com est un site de news sur les jeux vidéo complètement responsive
Quand puisje 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 cassetê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 cassetê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 devraisje dire ce large écran !
Comment designton 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. ● Projetezvous 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 ! Rappelezvous, 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 cidessous, 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 cidessus 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.
Inspirezvous 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 motsclé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 boutiqueUIstencil.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 estce 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, assurezvous 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 projetexemple 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 ecommerce...). 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 celuici au sein de mes pages. Vous aussi, essayezvous 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 estce 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.
Rendezvous sur le site de Balsamiq et cliquez sur l'onglet "Download" pour télécharger l'application pour PC ou pour Mac : "Download Mockups". Celleci 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 consistetil ? ○ 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 sommesnous 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’estce 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’estce 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 associezvous “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’estce 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.
mercredi 21 septembre 2016
« Nous sommes à des kilomètres de nos vies, et c'est d'une beauté à couper le souffle. »
Éditions : Pocket Jeunesse.
Genre : Jeunesse.
Année de sortie : 2016.
Nombre de pages : 288.
Synopsis : « Une fois le lycée terminé, Hunter et sa demi-sœur Ashlin décident de prendre une année sabbatique et d'emménager chez leur père. Là-bas, ils retrouvent Chance, un garçon fantastique avec qui ils passent tous leurs étés depuis l'enfance. Si le jeune homme les a toujours fascinés, Ashlin et Hunter éprouvent bientôt pour lui de tout autres sentiments. Mais ils comprennent aussi que les excentricités de Chance dissimulent une vérité bien plus noire… »
Mon avis :
Je ne sais pas par où commencer. Dès les premières pages, j'ai su que ce roman me plairait. Arrivée au milieu, j'étais persuadée que ce serait un coup de cœur. Toutes mes certitudes se sont embrouillées lorsque j'ai lu les dernières pages, puis en le refermant je me suis dit « ça, c'est bien plus qu'un coup de cœur ».
Ashlin et Hunter sont frères et sœurs, et ils décident de passer un an chez leur père où ils vont retrouver Chance, leur meilleur ami d'enfance. Leurs sentiments pour ce grand enfant ont évolués depuis. Mais derrière le côté frivole de Chance se cache certainement une vérité bien plus grave qu'il ne le prétend. Chance est de ces personnages qui nous troublent, nous fascinent, nous obsèdent et nous passionnent. Je n'arrête pas de penser à lui depuis que j'ai commencé ce roman. L'auteur a créé trois jeunes adultes si attachants et d'une justesse si touchante qu'on ne peut que les aimer, vouloir le mieux pour eux. Ce sont des personnages que vous ne trouverez nulle part ailleurs, et que vous devez découvrir, sinon je peux vous assurer que vous passez à côté de quelque chose de fabuleux, de fort.
Je ne veux rien vous dire de l'intrigue. Je ne veux rien vous dire tout court, et tout vous dire en même temps. Vous devez savoir que ce roman va vous surprendre sans cesse, du début à la fin. Vous allez tomber amoureux de Chance, parce que c'est comme ça. Vous allez découvrir des liens sentimentaux nouveaux, uniques, hors du commun. Mais vous allez aussi avoir peur, vous inquiéter, sentir votre cœur accélérer. Et surtout, il risque peut-être de se briser, parce que ce livre peut paraître tendre et léger, mais il renferme des réalités bien plus sombres que tout ce que nous pouvons imaginer. Et en le terminant, c'est comme si mon cœur était entier et en milliers de morceaux à la fois. J'ai eu l'impression qu'il s'arrêtait, j'ai refermé ce roman et je me suis dit que non, il devait guérir, aller mieux, parce que c'était comme ça que ça devait se finir. L'auteur en a décidé ainsi, et en y repensant, c'est une fin extraordinaire qu'elle nous offre ici. Une fin qui allait au-delà de toutes mes espérances. Une fin qui a décidé que ce roman ferait à présent parti de mes livres préférés.
La plume de l'auteur est assez simple d'un point de vue extérieur. Mais lorsqu'on est plongé dans l'histoire, elle est addictive au possible, rendant l'histoire plus que passionnante mais surtout d'une puissance extraordinaire. Comme je le disais, on s'attend plutôt à quelque chose qui soit dans le léger, et on se retrouve finalement avec un roman fort, unique, qui nous marque. Les dialogues sont plein d'émotions et il y en a certains qui me restent en tête tant je les ai trouvés beaux. Je me suis sentie à ma place dans ce livre, et c'était un supplice de le terminer et de devoir en sortir.
J'ai tant de choses à dire sur ce roman, que je me tais, parce que je n'ai qu'une envie : que vous découvriez tout ça de vous-même. Alors éteignez votre ordinateur, sortez de chez vous et rendez-vous à la librairie la plus proche. Achetez cette merveille, enfermez-vous dans votre chambre et dévorez cette perle rare. Vous irez de surprises en surprises, et ensuite vous viendrez me dire si vous aussi, ça vous a fait ce quelque chose d'unique, ce quelque chose qui me suit encore et que je veux garder parce que je veux relire ce roman, encore et encore, jusqu'à ce qu'il n'ait plus de secrets pour moi. Chose impossible, peu importe, je le relirai. Ça c'est une certitude.
Un roman unique, un coup de cœur, un coup de foudre, un de mes livres préférés à présent.
Inscription à :
Articles (Atom)