Bienvenue dans « Découvrir le design responsive »

Bonjour, je suis Didier Mazier et je vais vous présenter cette formation sur la
conception de Site Responsive, adaptée du travail de James Williamson. Cette
formation s'adresse à tous les gestionnaires de projets Web, comme à tous ceux qui
s'intéressent à l'adaptation des sites Web pour des périphériques variés de
consultations, que ce soit des smartphones ou des tablettes. L'environnement de
consultation des sites Web est en passe de devenir aujourd'hui majoritairement
mobile, et la grande diversité des dimensions des écrans, comme des fonctionnalités
qui sont offertes par les périphériques, nous imposent d'intégrer la dimension
Responsive dans tous nos processus de conception. Cette formation ne requiert pas
de connaissance approfondie des codes HTML, CSS, JavaScript, bien que nous
explorions évidemment ensemble des syntaxes à utiliser avec des exemples
simples.

Nous étudierons
les principes de
base du design
Responsive, avec
en particulier les
Viewport et la
façon de les
exploiter pour
contrôler avec des
media-Queries les
points de rupture.
Nous
comprendrons la
problématique des
écrans haute
densité et nous
nous attacherons à analyser le principe Degree Fluid.

Nous verrons également

comment concevoir en
fonction du contexte
d'utilisation et planifier le
Design responsive en
tirant parti des
fonctionnalités spécifiques
aux mobiles. Nous
explorerons ensuite les
outils pour prototyper les
designs adaptatifs et les
tester. Et puis enfin nous ferons un tour d'horizon des générateurs Degree Fluid et
des FrameWork à télécharger pour bien démarrer notre production avec un code qui
soit léger et conforme au standard. A l'issue de cette formation, vous aurez une
vision claire des bases du Design responsive et des étapes à mettre en œuvre pour
l'intégrer dans votre flux de production. Je vous souhaite une excellente formation.

2
1- Aborder le design responsif
Découvrir le design responsif
Qu'est-ce exactement
que le Design
responsive ?
Aujourd'hui, l'un des
plus grands défis
auxquels sont
confrontés les
concepteurs de sites
Web est le manque de
contrôle qu'ils ont sur le
support sur lequel seront vus les contenus qu'ils vont produire. Si nous prenons, par
exemple, l'impression.

On sait que lorsque l'on va

concevoir un magazine, on va
devoir s'occuper d'un certain
nombre de variables, par exemple
le type de papier, quel va être le
système d'impression sur lequel
nous allons produire notre
document, et puis ensuite quelles
vont être les encres que nous
allons utiliser. Bien que ces choix
vont influencer nos décisions de
conception, on va de toute façon
concevoir pour des dimensions
fixes.

A partir du moment où nous

aurons réalisé une maquette,
nous allons maîtriser tout
l'ensemble du processus et les
personnes qui vont consommer
les contenus que nous avons
imprimés vont expérimenter ces
contenus exactement de la même
manière.

A l'inverse, lorsque nous allons

concevoir des sites Web, nous allons
devoir prendre en compte un certain

2
nombre de variables considérable dans la façon dont ce contenu va être consommé.
Il va falloir tenir compte bien entendu de la grande variété de navigateurs et de
systèmes d'exploitation que les gens vont utiliser. Il va également falloir prendre en
compte le fait que les éléments que nous allons publier vont devoir, non seulement
être vus, mais imprimés, et puis également consultés de plus en plus avec des
périphériques, qui peuvent être des objets connectés comme des voitures, des
montres ou des bornes interactives. Et puis bien sûr, le changement qui va susciter
de notre part le plus d'attention va être le mobile.

L'explosion récente des clients qui ont

accès au Web sur des appareils
mobiles a fait que la conception pour
des écrans mobiles est devenue une
exigence première, et non pas une
petite considération supplémentaire.
Mais le mobile n'est qu'une partie de
cette histoire. Comme vous pouvez le
voir sur cet échantillonnage, les tailles
d'écran ne vont pas forcément
diminuer, c'est le cas pour un
téléphone, mais elles peuvent
également augmenter en ce qui concerne des publications qui vont être faites par
exemple sur des tablettes, voire sur des très grands écrans comme des téléviseurs.
Cela signifie qu'en tant que concepteur, essayer de concevoir séparément pour
chaque contexte dans lequel votre contenu pourrait être accessible est quelque
chose qui est devenu pratiquement impossible.

Et c'est ici que le Design

responsive, ou réactif, est une
stratégie de conception centrée
sur la production de contenu,
afin que celui-ci puisse
répondre à l'environnement
dans lequel il se trouve. C'est
un terme qui a été inventé par
Ethan Marcotte, qui identifie
trois techniques fondamentales
pour un design responsive.
Premièrement, des grilles
fluides pour des mises en
pages flexibles, ensuite des requêtes multimédias, ou Media queries, pour aider à
adapter le contenu à des tailles d'écran spécifiques. Et puis enfin des images et des
supports flexibles qui vont répondre également aux changements des tailles
d'écrans. Pour l'essentiel, ces trois règles techniques vont définir ce qu'est le Design
responsive, mais bien entendu, comme pour la plupart des nouveaux termes, cette
signification va bien entendu évoluer. Beaucoup de gens l'utilisent pour se référer à
des techniques ou à des stratégies qui permettent aux conceptions de répondre à
différents environnements. C'est un terme très large qui peut englober presque tout
ce qui libère votre contenu des restrictions liées à un seul contexte.

2
 L'apprentissage et la
compréhension d'un Design
responsive ne se basent pas
moins sur l'apprentissage de
techniques spécifiques que sur un
changement de la façon dont
nous pouvons penser concevoir
pour le Web. Cela implique de
repenser totalement les stratégies
de contenu en prenant plus de
temps pour considérer la façon
dont les gens peuvent utiliser et
accéder à ces contenus en fonction d'un contexte spécifique. Et puis, comment tirer
parti des diverses fonctionnalités des différents appareils que votre public est
susceptible d'utiliser. A cette fin, je pense que vous verrez que l'adoption d'un Design
responsive modifiera considérablement la façon dont vous concevez et réalisez vos
sites.

Comprendre le rôle du design responsif

Au fil des années nous avons
vu beaucoup de tendances de
conception de sites web
apparaître et disparaître. En
fait, la seule constante dans le
domaine de la conception de
sites web, c'est le changement.
Donc avec autant de nouveaux
développements et de
nouvelles techniques, il est parfois difficile de distinguer ce qui va être important de
ce qui ne l'est pas, lorsqu'il s'agit de décider ce qu'il faut apprendre et ce qu'il faut
suivre comme technique et bonne pratique. Il est donc naturel de se demander à
quel point le design responsif est important, et si vous avez besoin, ou non, de
consacrer du temps et de l'énergie nécessaire pour l'apprendre.

La façon la plus simple pour illustrer ceci

est de vous montrer en quoi c'est
important. Dans les écrans que vous
voyez apparaître ici, vous constatez que
tous peuvent se connecter et afficher
vos sites web. Et ce n'est qu'une infime
petite partie des différentes tailles
d'écrans et des résolutions disponibles.
Par le passé, nous avions une bonne
maîtrise des résolutions d'écran-cibles
lorsqu'il s'agissait de mettre en place nos conceptions. Nous avons commencé à
concevoir des pages web qui étaient basées sur une dimension de 640 par 480 et
qui a été considérée à une époque comme étant la taille d'écran standard. Et puis de
là, on est passés à 800 par 600 pixels, puis ensuite à 1024 par 768, et ainsi de suite.
Et puis, pour suivre le rythme des tailles d'écrans, nous avons simplifié notre
conception. C'était donc devenu une pratique relativement courante de créer des

2
modèles en utilisant des largeurs fixes. Une largeur fixe signifie que le site web a été
verrouillé dans une largeur spécifique quel que soit le moniteur sur lequel il est
affiché. Et il y a bien entendu toujours des techniques de mise en page standard
pour beaucoup de sites qui sont basées sur ce principe des mise-en-page fixes.

Cependant, au cours des cinq

dernières années, nous avons
observé des changements
spectaculaires dans la façon
dont les sites sont visités et
cela nous a obligés à
réexaminer la façon dont nous
concevons nos sites web.

Certains de ces changements

étaient relativement mineurs, et
puis d'autres pouvaient avoir un
impact plus important. Nous
avons ici deux rapports de taille
d'écran, à gauche nous avons
une taille d'écran qui est au
format 4/3, qui était un format
courant sur les ordinateurs de
bureau, et puis nous avons vu
apparaître au fil du temps un
nouveau rapport de taille qui
est 16/9, qui est un format beaucoup plus "cinéma". La différence majeure est que, à
gauche, nous pouvons déployer des contenus dans la hauteur, alors qu’avec un
rapport 16/9, eh bien nous allons plus être dans la largeur.

Il y a eu bien entendu d'autres

changements, comme la montée
en puissance de l'informatique
mobile, qui ont changé
radicalement la façon dont nous
concevons nos sites. Lorsque nous
voyons apparaître différentes
tailles d'écran, la question à se
poser est : qu'allons-nous cibler ?
Par le passé, il aurait pu être très
facile de dire en toute confiance
que l'écrasante majorité des
internautes allait utiliser une taille d'écran spécifique, qui pouvait correspondre à un
ordinateur de bureau, mais ce n'est plus le cas. Donc le temps et l'énergie
nécessaires pour cibler chacun de ces différents écrans serait énorme, et ce n'est
même pas la peine d'y penser, et c'est ce qui va rendre le design responsif si
important. Grâce à l'utilisation des techniques évolutives de design responsive, nous

2
allons pouvoir créer un design qui va correspondre à chacun de ces environnements
et va offrir aux utilisateurs une expérience qui va être conforme au contexte dans
lequel ils vont être visionnés. Les techniques utilisées pour créer les designs réactifs
vont continuer à évoluer bien entendu, pour faire face aux changements encore plus
grands qui se profilent à l'horizon. Nous voyons apparaître des objets connectés, des
voitures, des lunettes, des bornes mobiles, et également des montres, voire des
chaussures. Donc bien que tous ces appareils aujourd'hui pourraient représenter un
écosystème actuel, nous avons besoin, lorsque nous allons faire notre conception,
de comprendre qu'aujourd'hui ils ne représentent que la pointe de l'iceberg, et cela
souligne encore plus l'importance du design réactif. Si nous ne nous concentrons pas
sur les façons de rendre notre contenu et nos conceptions plus adaptables dans de
multiples environnements, nous allons être limités à créer des sites qui ne vont
toucher qu'une petite partie de notre cible. Alors que le design responsif pourrait être
considéré juste comme une nouvelle façon d'aborder la conception de sites,
aujourd'hui c'est en passe de devenir la norme.

Connaître les bases d'un site responsive

Commençons par voir ensemble
quelles vont être les techniques
de base sur lesquelles va
reposer la conception de sites
responsive.

Comme toutes les questions

relatives à la conception de sites
web, la conception responsive va
commencer par le HTML.

Un code HTML qui va être propre

et bien structuré va aider à créer
du contenu qui soit significatif et
plus facile à manipuler en fonction
du contexte. De même, le soin
apporté par le concepteur à la
planification de la sémantique du
site, par exemple dans les
utilisations des identifiants et des attributs de classe, va contribuer grandement à
rendre le site plus réactif. Des rôles clairs pour les éléments et une structure
cohérente vont faciliter la façon dont le site va s'afficher en s'adaptant à des
contextes spécifiques. Le HTML5 comprend également quelques fonctionnalités qui
vont permettre au site d'être plus fonctionnel sur plusieurs périphériques, en
particulier mobiles. Les nouveaux éléments de formulaires, par exemple, vont
permettre aux concepteurs de créer des formulaires qui vont profiter des interfaces
des périphériques mobiles et qui vont permettre l'envoi d'appels téléphoniques et de
textes par SMS sans nécessité de balisage supplémentaire, ou d'écrire des scripts.

2
Et puis, comme vous l'imaginez, les CSS vont jouer un rôle majeur dans la création
d'un design responsive. Les requêtes multimédia vont nous permettre d'appliquer
différents ensembles de styles en fonction des facteurs tels que la taille de l'écran,
l'orientation ou la résolution. Cela va nous permettre de modifier la disposition et la
typographie d'un design qui soit plus adapté au contexte dans lequel il est visualisé.
Les mise en page responsive sont généralement de nature fluide afin qu'elles
puissent s'adapter à l'écran sur lequel on les verra. Et puis il y a des fonctionnalités
CSS plus récentes, telles que les transitions et les transformations qui vont permettre
aux concepteurs de modifier la manière dont le contenu s'affiche et interagir avec
l'utilisateur sans nécessité d'écrire des scripts supplémentaires. Les images basées
sur les CSS peuvent également aider à réduire la quantité de ressources demandées
par la page en remplaçant des icônes ou d'autres images.

Et puis enfin Le JavaScript est également utilisé à des degrés divers par différentes
conceptions responsive. Il est principalement utilisé pour contrôler le chargement des
ressources, pour fournir des images et des supports appropriés en fonction des
besoins des différents appareils. Et puis ajouter des fonctionnalités spécifiques aux
périphériques, comme par exemple la géolocalisation et des événements tactiles.
Essentiellement avec ces trois technologies, HTML, CSS et JavaScript, nous allons
avoir une épine dorsale pour des conceptions qui vont être beaucoup plus réactives.
Nous allons, plus loin, bien entendu, explorer quelques-unes de ces techniques dans
le détail. Pour le moment, n'oubliez pas que c'est le concept et les objectifs d'un
design responsive qu'il est important de comprendre. Il existe de multiples
techniques pour aider le contenu à s'adapter et dans tous les cas, les techniques et
les stratégies qui portent sur les designs responsifs sont destinées à évoluer. Cela
signifie que vous, en tant que concepteur, vous allez devoir explorer plusieurs
techniques, et puis forger la vôtre en réfléchissant à la façon dont le design responsif
va correspondre le mieux à votre stratégie globale pour votre site.

Étudier un site responsif

Avant de commencer à parler
de techniques et de stratégies
spécifiques, prenons un
moment ensemble pour
explorer un site responsif en
action, afin que vous puissiez
voir comment ces concepts
vont être appliqués. Pour ce
faire, je vais vous montrer une
démo qui a été créée par le
talentueux Brad Frost pour
son tutoriel HTML5 Robes.
Vous allez pouvoir consulter
cette démo en suivant le lien
qui s'affiche (https://bradfrost.com/demo/mobile-first/). Nous allons commencer par
voir ici cette page dans sa version Ordinateur de bureau. Vous voyez qu'il s'agit
d'une page qui présente des produits, il s'agit bien entendu d'une page fictive, et la
première chose que l'on peut comprendre c'est que lorsque l'on va redimensionner la
fenêtre du navigateur, eh bien vous voyez que cette page va s'adapter à la taille de
l'écran. Alors bien entendu, ce n'est pas la seule chose qui va falloir vérifier lorsqu'il

2
s'agit d’un site responsif. Il va falloir voir comment ce site va s'adapter aux différents
autres appareils, notamment des périphériques mobiles. Ici nous avons une page qui
est centrée sur l'écran, elle est conçue de manière à pouvoir s'adapter à une large
gamme de résolutions de bureau.

Nous avons un menu qui se trouve en haut et nous avons en dessous un produit
avec les détails du produit et un certain nombre d'images sur lesquelles on peut
cliquer, et qui vont afficher les détails du produit qui est mis en vente. On peut ici
passer des commandes, ajouter au panier. Et puis en-dessous, nous avons des
produits qui sont similaires, puis des commentaires clients. Au bas de la page, nous
trouvons une navigation miroir qui permet de se déplacer dans les différentes
sections du site. Voyons donc maintenant comment fonctionne ce site sur une
tablette et sur un téléphone.

Ici nous sommes sur une tablette. Aujourd'hui

les écrans des tablettes sont suffisamment
grands et ont suffisamment de résolution pour
afficher la page de façon à peu près
identique, néanmoins il y a des
fonctionnalités qui sont différentes.

Vous constatez par exemple que l'on va

pouvoir, sur une tablette, faire défiler les
images grâce au doigt, en les faisant glisser.
C'est une fonctionnalité que nous
n'avions pas sur l'ordinateur de
bureau, où il fallait cliquer. Nous avons donc
ici exploité une fonctionnalité
supplémentaire.

2
 Voyons maintenant ce qui se
passe sur un écran de plus petite
taille, sur un téléphone portable,
un iPhone. Sur un téléphone
portable, où l'écran est
radicalement beaucoup plus étroit,
vous voyez que la mise en page
change de façon spectaculaire.
Tout va être condensé sur une
seule colonne. Et les choses vont
pouvoir être présentées de façon
à ce qu'elles puissent s'intégrer
sur un écran plus petit d'un
téléphone portable. Nous
constatons également que, en
haut, le menu, qui ne pourrait pas
tenir à côté du logo, est dépliable
en accordéon et qu'il y a la
prédominance d'un moteur de
recherche qui va permettre aux utilisateurs de trouver les
articles qu'ils recherchent. La navigation au niveau de l'image s'opère de la même
façon que sur une tablette. Il s'agit de pouvoir faire glisser les images avec le doigt,
mais nous avons également un certain nombre de fonctionnalités qui vont être des
fonctionnalités spécifiques aux périphériques mobiles.

Par exemple, lorsque

l'utilisateur va vouloir passer
une commande, mettre un
produit dans le panier, vous
voyez que lorsqu'il va
appuyer ici sur la quantité, on
va lui proposer directement
un clavier avec les chiffres
qui vont lui permettre de
saisir la quantité voulue. Et
puis lorsque, à l'inverse, il va
cliquer sur la taille, où il s'agit

2
d'un menu déroulant, eh bien ce menu déroulant va apparaître en bas de l'écran.
Vous voyez qu'il s'agit de fonctionnalités qui sont des fonctionnalités spécifiques aux
mobiles. Il y a également une autre fonctionnalité qui est intéressante, qui ne va pas
fonctionner ici puisqu'on est sur un site de démonstration, mais vous avez un Fime
Near Buy, qui se trouve juste en dessous la mise en panier, mais qui permettrait
d'afficher sur une carte des magasins qui seraient à proximité de l'endroit où se
trouverait l'utilisateur.

Et puis enfin, si nous faisons défiler la page vers le bas,

vous remarquez que les produits similaires et les
commentaires clients se trouvent dans des accordéons,
ce qui permet de raccourcir la hauteur de la mise en page
et de pouvoir accéder directement au menu qui se trouve
en bas, et également à une fonctionnalité intéressante
qui est celle de pouvoir déclencher une numérotation
téléphonique. Vous voyez qu'en bas, si l'utilisateur appuie
sur Call 800-800 etc., eh bien le téléphone portable,
puisque nous sommes sur un téléphone portable, va
composer ce numéro téléphonique et va mettre
l'utilisateur en liaison avec un conseiller client. Alors bien
entendu, ceci n'est qu'un bref aperçu des fonctionnalités
responsive sur cette page. Il y a bien d'autres choses
dans l'envers du décor que nous pourrions explorer, mais
plutôt que de nous concentrer sur la façon dont cette
page a été construite, concentrons-nous surtout sur le
pourquoi.

Simplement, le concepteur a répondu au contexte pour

lequel il s'est attaché à créer la meilleure expérience utilisateur adaptée à un
environnement. Alors bien souvent, nous allons être obnubilés par des aspects
techniques de la façon de construire quelque chose, de telle sorte que nous allons
perdre de vue les raisons pour lesquelles. A mesure que vous allez approfondir le
design responsif, assurez-vous donc toujours nous le faisons réellement que la
meilleure expérience utilisateur soit pour vous le critère déterminant pour toutes les
décisions que vous prendrez.

2- Appréhender les principes de bases

S’initier aux viewports mobiles
Dans ce chapitre nous allons nous
concentrer sur les concepts et
techniques communs à la conception
de sites responsive. Ces techniques
vont impacter la façon dont nous
allons concevoir pour les appareils
mobiles, et surtout la façon dont nous
allons pouvoir nous assurer de contrôler que notre contenu va bien s'afficher
correctement sur les écrans mobiles. L'aspect le plus déroutant de ces techniques

2
est essentiellement un concept qui s'appelle le concept de viewports mobiles et qu'on
a traduit parfois par Fenêtres. Il s'agit en fait de la zone d'affichage qui est prévue
pour la page web à l'écran. Dans la vidéo précédente, nous avons vu un exemple de
site responsive et nous allons voir maintenant un exemple de site qui n'est pas
responsive, de manière à bien comprendre à quoi correspond cette notion de
viewport.

Nous sommes
ici sur un
ordinateur de
bureau, avec un
navigateur
standard qui est
chrome, sur un
site test qui n'est
pas responsive.
Et vous voyez
que lorsque nous allons resserrer ici notre fenêtre, eh bien la mise en page ne va
pas bouger et nous allons arriver sur une vue qui, au final,
sera une vue partielle si les zones d'affichage sont
inférieures à celle qui a été prévue au moment de la
conception.

Ici sur un téléphone, la page va

s'afficher en tout petit et
l'utilisateur, lui, va pouvoir, non
pas zoomer avec les outils de
zoom, ou redimensionner la
fenêtre, mais il va pouvoir, avec
les doigts, faire changer le
facteur de zoom pour se
déplacer dans la page. Et on
aura de la même façon la notion
de "trou de serrure", c'est à dire
que, soit on aura une vision
complète de la page qui sera
bien trop petite, soit on pourra
aller voir des détails, mais ces détails empêcheront
d'avoir une vision globale du reste de la page.
Vous commencez donc à vous rendre compte qu'il y a
deux choses, premièrement il y a le viewport,
c'est-à-dire la taille de la zone d'affichage, et d'autre part
il y a un autre élément qui est très important, qui va
être le facteur d'agrandissement, le facteur de taille à laquelle on va présenter les
éléments.

2
 Nous pouvons donc par exemple être ici
sur un viewport de 320 par 480 pixels, et
avoir une page qui va s'afficher à cette
taille, et avec ici une échelle de 1. Et
nous pourrions être sur le même
viewport, c'est à dire sur la même zone
d'affichage, de 320 par 480, avec une
échelle d'affichage qui serait différente,
par exemple le double. Les viewports
vont également varier d'un appareil à un
autre et d'un navigateur à un autre.

Par exemple sur Safari il y a un viewport

de 980 pixels de large, alors que sur
Opera on aura un viewport de 850 pixels.

Si vous réalisez une mise en page web sur un de ces viewports, de 980 pixels ou
850 pixels, et que vous devez l'afficher sur un écran d'un téléphone portable qui va
faire 320 pixels de large, vous voyez très clairement que la page ne va pas pouvoir
être contenue dans la largeur de cet écran.

2
 Il va donc y avoir à un moment donné une
réduction de la taille de l'image de manière
qu'elle s'adapte à l'écran. Il s'agit ici d'un
rapport de taille.

À l'inverse, si vous avez

prévu une mise en page
pour un écran de 320 pixels
de large, et que vous allez
l'afficher à la taille 1 dans
un viewport de 980 pixels,
vous voyez que votre page
web va être trop petite par
rapport à la taille de l'écran
dans lequel elle va
s'afficher. Donc pour
pouvoir créer des sites
responsifs qui vont
correspondre parfaitement
aux tailles d'écrans des
mobiles, il va falloir que
vous puissiez, à la fois
contrôler la taille de la fenêtre, le viewport, mais également son facteur d'échelle
initial, et c'est ce que nous allons voir dans notre prochaine vidéo.

Contrôler les viewports

Maintenant que nous avons défini ce
que sont les viewports pour les
mobiles, nous allons voir la façon de
les contrôler.

À l'heure actuelle, il existe deux

mécanismes, deux techniques de base
pour remplacer la fenêtre d'affichage

2
par défaut du navigateur. Vous allez pouvoir utiliser, soit la balise meta viewport, ou
vous allez pouvoir utiliser une règle CSS@ viewport. Ces deux techniques vont
utiliser une syntaxe assez similaire. Nous allons donc voir des exemples de code
pour chacun d'entre eux, et puis nous allons décrire leurs effets sur la fenêtre.

La balise meta viewport est

placée dans l'en-tête de votre
site internet. Il s'agit d'une balise
meta et pour cette balise meta,
on précise que son nom est
viewport, et puis on va définir
ensuite le contenu de cette
balise, c'est-à-dire sa largeur et
puis son échelle initiale.

La règle CSS@viewport peut être placée

n'importe où dans votre CSS, mais comme
cela peut affecter les média-queries, les
requêtes medias, il est recommandé de
placer cette règle avant toute les medias-
queries dans vos styles. La plupart des
concepteurs placent cette règle directement
en tête de leur style comme étant une de
leurs premières balises de style. On va ici
préciser qu'il s'agit de la règle @viewport, et
puis on va définir la largeur, et puis on va
définir un niveau de zoom.

Voyons l'impact de ces règles et de ces balises sur un

affichage d'une page web sur un téléphone portable. Nous
sommes ici sur un téléphone portable et vous voyez que cette
page s'affiche vraiment en tout petit.

2
 Nous allons modifier ces valeurs en fixant le viewport à 320
pixels. Et vous voyez que maintenant, notre page s'affiche
correctement dans notre navigateur. Il y a donc un lien direct
de cause à effet entre la fixation du viewport par rapport à la
taille de votre écran. Notez que tous les écrans n'ont pas une
largeur à 320 pixels de large, et qu'il va falloir que l'on puisse
travailler avec éventuellement d'autres systèmes. C'est la
raison pour laquelle on peut travailler avec un viewport qui va
être basé sur une valeur en pixels, mais on peut également
travailler avec un viewport qui va être, comme c'est le cas ici,
basé sur la largeur de l'écran du périphérique sur lequel on va
consulter la page web. Donc à moins d'avoir une raison
d'utiliser une valeur en pixels, il est beaucoup plus intéressant
d'utiliser une valeur qui va être liée à la largeur de l'écran du
périphérique. Alors on pourrait également définir la hauteur du
viewport, mais en général c'est quelque chose qui ne se fait
pas. Ensuite on va définir d'autres éléments qui vont être
également très intéressants.

Nous avons vu que nous avons pu définir quelle était la largeur du viewport, de la
zone d'affichage, que nous avons pu également fixer cette valeur pour la caler sur la
largeur de l'écran du périphérique. Vous voyez que dans ces deux cas ici, nous le
voyons, à gauche avec la balise meta, et puis à droite avec la règle de CSS.

Mais nous allons pouvoir

également fixer un élément
qui est très intéressant, qui
est l'échelle initiale. Nous
avions vu dans la vidéo
précédente que l'échelle
initiale était très importante.
Si vous fixez une échelle initiale de 2, cela veut dire que votre page s'affichera avec
un zoom de 200 % par rapport à sa taille réelle sur le périphérique sur lequel vous
allez consulter votre page web.

2
 Vous pouvez donc tout à fait
définir au niveau du
viewport une échelle initiale
qui est une échelle initiale
de 1, c'est-à-dire un zoom
qui va être à 100 %. Il n'y
aura donc pas d'agrandissement de votre page.

On voit fréquemment une

combinaison de ces deux
instructions, c'est-à-dire de
demander à ce que le
viewport soit calé sur la
largeur du périphérique
device-width, et également on
demande une échelle initiale de 1. Mais c'est quelque chose qui n'est pas
obligatoirement nécessaire, puisqu'à partir du moment où vous demandez à être calé
sur la largeur du périphérique, si vous ne spécifiez pas cette échelle, elle sera de 1.
Et puis, en raison de bugs qui pourraient apparaître sur des périphériques AIOS, qui
vont affecter des pages lorsque l'orientation va changer avec une échelle initiale de
1, certains développeurs conseillent même de ne pas régler cette échelle initiale, à
moins de vouloir bien entendu une autre valeur que 100 %.

Vous pouvez également définir

une échelle d'agrandissement
minimum, 1, et une échelle
maximum d'agrandissement, ici 2,
à la fois avec les deux syntaxes.
Cela permettra à l'utilisateur de
zoomer sur votre page, mais dans
une plage délimitée par un minimum et un maximum. Notez que avec la balise meta
vous allez placer des chiffres entier, 1, 2, et que vous pourriez, dans la balise
@viewport, ajouter des valeurs en pourcentage. Mais les valeurs indiquées avec des
entiers comme c'est le cas ici fonctionnent également.

Et puis si vous souhaitez que

l'utilisateur ne puisse pas
zoomer sur la page, eh bien
vous allez pouvoir le préciser.
Vous voyez qu'ici nous avons
les deux syntaxes pour préciser
à l'utilisateur qu'il ne peut pas
redimensionner la page en zoomant sur cette page avec ses doigts sur son
téléphone. A gauche, nous avons User-scalable =no, et à droite nous avons niveau
de zoom fixed, User-zoom=fixed, c'est à dire que,pour obtenir la même chose, à
gauche nous n'autorisons pas l'utilisateur à redimensionner la page, et à droite nous
fixons un niveau de zoom.

2
 Nous avons donc vu deux
possibilités, deux balises
possibles. Laquelle utiliser ? Si
vous utilisez la balise meta, vous
êtes dans une norme qui est une
norme universelle. Alors qu'avec
la balise CSS@viewport, vous
allez devoir ajouter un préfixe. Il
va donc falloir préciser des préfixes, à la fois pour moz pour mozilla, pour webkit,
pour o pour opéra, et puis ms pour Microsoft. Donc il est préférable pour l'instant de
travailler encore avec la balise meta name = " viewport ". L'adoption de @viewport se
propage assez rapidement et nous nous attendons à avoir un support complet de
cette balise dans un avenir assez proche. Une fois que cela se produira, nous
pourrons donc l'employer de façon massive, de manière à pouvoir contrôler les vues
du navigateur lors de la création de nos design responsive.

Tenir compte des densités d'écran

En plus de la diversité très étendue des tailles d'écran, nous sommes chaque jour
confrontés à un problème qui est croissant, qui est celui des densités des écrans. La
densité des écrans est le nombre de pixels qui vont s'afficher dans la zone physique
d'un écran, et les écrans les plus récents vont présenter des densités qui sont
chaque jour supérieures.

Si nous prenons ces 2 écrans, nous

pouvons avoir à gauche un écran qui va
avoir une diagonale de 3 pouces et
demi, et qui va afficher 320 pixels de
large sur 480 pixels de haut. Et puis
nous avons à droite un périphérique qui
va être plus récent, avec un écran qui
ne sera pas plus grand qui va,
admettons également avoir une
diagonale de 3 pouces et demi, mais
qui dans cet espace va nous afficher le
double de pixels, c'est-à-dire 640 pixels
de large par 960 pixels de haut. Il y aura donc dans l'écran de droite beaucoup plus
de pixels que dans l'écran de gauche, et ces pixels n'auront bien entendu pas la
même taille à gauche qu'à droite. Le premier problème va donc consister à définir
correctement ce qu'est exactement un pixel, surtout lorsque l'on va utiliser des
écrans de densité supérieure comme par exemple les écrans Retina.

Nous allons faire la distinction entre

ce que l'on peut appeler des pixels
matériels, physiques, affichés par le
périphérique et qui sont
dépendants du périphérique, de
pixels de rendu qui eux vont être
des unités de mesure qui vont être

2
indépendants des périphériques sur lesquels on visionnera les pages Web. Voyons
comment tout cela fonctionne.

Si je reprends mes 2 écrans, j'ai

toujours à droite un écran qui va
afficher 320 pixels de large par 480
pixels de haut. Et puis à droite un
écran qui va afficher 640 pixels de
large par 960 pixels de haut. Et ce qui
se passe, vous l'avez bien compris,
c'est que à gauche les pixels n'ont
pas du tout la même taille que sur
l'écran de droite, et il y en a bien
entendu beaucoup plus à droite qu'à
gauche. Lorsque je vais réaliser des affichages d'image ou même de typographie, le
phénomène suivant va se passer : si je saisis un texte et que je lui affecte une
hauteur par exemple de 30 pixels, eh bien il va s'afficher à gauche avec une hauteur
de 30 pixels, et ce seront des gros pixels, donc la hauteur sera importante, et puis à
droite les pixels étant plus petits, la hauteur de 30 pixels sera nécessairement bien
inférieure à celle de gauche, en l'occurrence dans cet exemple exactement de la
moitié.

Ce qui veut dire que si je souhaite établir une norme pour pouvoir mesurer les
éléments, non pas en fonction du périphérique mais de manière absolue, il va falloir
que je puisse passer de la notion de pixels physiques à la notion de pixels de rendu,
et c'est ce qui est en train de se passer actuellement au niveau des nouvelles
technologies qui sont mises en place pour créer des sites Web responsives. À
gauche, j'ai un écran de 320 par 480 pixels, et puis à droite j'ai toujours mon
deuxième écran de 640 par 960 pixels.

2
 Si je veux afficher dans ces 2 écrans
un élément qui aura exactement la
même dimension, il me faudra un
certain nombre de pixels, et ce nombre
de pixels sera différent, selon que j'ai
un affichage de 320 par 480 pixels, ou
un affichage de 640 par 960 pixels.
Donc à gauche, il va me falloir un
certain nombre de pixels
pour afficher un carré
comme ici le carré jaune
que vous voyez à
l'intérieur de la grille. Ici il
fait 3 pixels par 3 pixels.
Et puis pour afficher à
droite optiquement le
même objet qui
visuellement aura la
même taille, vous voyez
que les pixels étant plus
petits, il me faudra le
double de pixels en largeur et en hauteur pour afficher le même objet avec la même
valeur visuelle. Nous avons donc ici une approche de la notion de pixels de rendu. Il
faut donc définir une unité qui va être une unité qui ne sera pas liée au périphérique
de sortie comme le pixel qui est le pixel device, le pixel du périphérique, mais qui va
être une valeur qui va être indépendante.

On peut donc définir la notion de pixels de rendu, on parle également de pixels CSS
comme étant une unité de mesure qui va établir une norme qui sera optique pour la
longueur d'un pixel, et qui va être totalement indépendante des pixels matériels.

Cette valeur, en ce qui concerne les pixels

CSS, a été fixée à 1"/196 de pouce, mais on
pourrait travailler avec d'autres valeurs, comme
c'est le cas par exemple sur Android où l'on
fonctionne avec une valeur de base qui est sur
1"/160 de pouce.

2
 Nous avons en ce qui concerne le
ratio pixel/device pour Android ici
une grille, qui va nous montrer par
exemple à quelle taille nous allons
devoir travailler une image, à
partir du moment où nous allons
travailler pour des écrans qui vont
être des écrans de densité
différente. Si nous prenons toutes
les lignes, vous voyez que la taille
affichée sera la même. Nous
sommes ici à peu près sur un peu
plus d'un demi-pouce. Et selon la
densité, puisque sur Android nous
sommes avec un ratio de 1 sur
une densité de 160, nous aurons
une image qui devra mesurer 100
pixels par 100 pixels. Et puis si
nous passons à une résolution supérieure de haute définition, HDPI à 240 pixels, eh
bien nous sommes dans un ratio de 1.5, et nous devrons donc travailler notre image
sur 150 pixels par 150 pixels, pour qu'elle s'affiche avec la même valeur optique à
l'écran. Au fur à mesure que le ratio pixels/image va s'incrémenter à 2, à 3, à 4, nous
allons bien entendu, dans la même proportion, avoir à augmenter la taille de l'image
que nous devrons travailler pour qu'elle s'affiche à la même taille sur un écran de
densité 640 qu'elle s'afficherait sur un écran de densité 160. Alors ceci peut peut-être
vous paraître un peu théorique, mais il y a une chose qu'il faut essentiellement
retenir, c'est que les densités des écrans ne sont pas les mêmes, et l'affichage des
pixels n'est pas les mêmes. Il faut donc travailler avec un système qui va nous
permettre de nous assurer que, à partir du moment où nous voulons qu'une image
s'affiche sur une certaine taille, eh bien elle s'affiche de la même manière sur les
différents écrans de même taille quelle que soit leur densité. Et dans la vidéo qui suit,
nous allons voir très concrètement quel est l'impact sur le travail que nous aurons à
faire pour nos images.

Concevoir pour des écrans de densité variable

Maintenant que nous avons vu ce qu'était la densité des écrans, et puis quels étaient
les problèmes qui étaient liés aux écrans haute résolution, voyons quels sont les
moyens d'optimiser les graphiques pour ces écrans à haute densité. Voyons donc
comment intégrer les densités variables dans notre stratégie de contenu.

La première des choses que l'on peut

faire, c'est de minimiser le recours
aux images bitmap, de manière à
pouvoir utiliser des images qui vont
être redimensionnées sans perte de
qualité, comme c'est le cas des
images bitmap. Nous allons donc

2
travailler avec du SVG, nous pouvons également travailler avec des images définies
par des codes CSS.

L'avantage du SVG, Scalable Vector

Graphic, est qu'il s'agit d'un format
vectoriel. Lorsque vous prenez une
image bitmap, comme c'est le cas ici et
que vous l'agrandissez successivement,
vous allez voir apparaître des pixels à
partir du moment où cette image va être
agrandie au-delà de sa résolution
initiale. En ce qui concerne un fichier
vectoriel, vous pouvez agrandir ou
réduire cette image, sans qu'il y ait
aucune perte de qualité, puisque le
format SVG redessine l'image à chaque redimensionnement.

Il y a des limitations à la fois pour le SVG

et les CSS. En ce qui concerne le SVG, il
s'agit d'un format qui peut être un petit
peu plus lourd, en ce qui concerne
notamment des icônes, et puis les
graphiques sont redessinés à chaque
redimensionnement de l'écran, ce qui
demande des ressources. Les CSS,
elles, ne sont pas toujours faciles à
réaliser, et puis elles vont générer un
code un petit peu parasite avec un
balisage non sémantique qui risque de
perturber des moteurs de recherche, par
exemple lorsqu'ils vont indexer les sites. Et enfin les CSS ne sont pas supportés
encore par tous les navigateurs et tous les périphériques. Il y a donc un certain
nombre de limitations qui font que l'on va encore énormément travailler avec des
images bitmap.

Lorsque l'on va travailler avec des images

bitmap, il va donc falloir prendre en
compte à chaque fois le fait qu'elles
peuvent être affichées sur des écrans
basse définition, mais également sur des
écrans haute définition. Donc nous allons

2
partir du principe, que qui peut le plus peut le moins, et nous pouvons tout à fait
envisager de commencer à travailler avec une image haute définition qui est
destinée à s'afficher sur des périphériques qui ont une densité supérieure. Et cette
même image va s'afficher dans une dimension inférieure sur des périphériques qui
ont une densité qui est inférieure.

Et puis on va gérer l'affichage en

hauteur et en largeur de cette image
en considérant qu'elle s'affichera à la
même taille.

En ce qui concerne le ciblage des

densités, on peut donc décider
d'utiliser toujours par exemple des
graphiques de haute définition.
Sachant que le poids des images va
être supérieur, et lorsqu'ils vont
s'afficher sur des périphériques qui
certes ont des écrans qui sont avec
une très haute densité, n'ont pas
forcément en termes de connexion et
de débit des systèmes qui vont être très performants. Le paradoxe est qu’aujourd’hui
les périphériques mobiles ont des écrans qui sont de très haute densité, mais qui
restent encore pour la plupart connectés avec de la 3G. Et puis d'autre part, les
ratios pixel/device vont varier en fonction des périphériques.

Donc nous allons pouvoir

travailler avec des CSS qui vont
nous permettre de déterminer
quel va être le pixel ratio. Et
vous voyez qu'ici on peut aller
dans une instruction CSS,
préciser qu’en fonction de ce
que le navigateur va trouver,
c'est-à-dire est-ce qu'il va s'agir
par exemple ici, d'un pixel ratio
de 2, c'est-à-dire d'un écran à
haute densité, eh bien on ira appliquer ici une image de haute résolution qui sera
gérée en background. Nous avons donc dans un premier temps la définition de
l'image haute résolution. Nous avons prévu une image qui est en haute résolution,

2
elle va être affichée en background, et elle sera affichée à 50 % de sa taille, puisque
on est dans un pixel ratio de 2.

On peut également travailler avec

des JavaScript qui vont trouver le
ratio device / pixel. On peut avoir
une fonction de type
getDevicePixelRatio, et puis on va
demander si l'on trouve un pixel
ratio qui est indéfini, on va
renvoyer 1, on va supposer qu'on
est sur un ratio de 1. Et puis
ensuite, si le pixel ratio n'est pas
indéfini, c'est-à-dire qu'il a été fixé,
eh bien à ce moment-là, on va
renvoyer ce pixel ratio. Et on pourra ensuite l'intégrer, c'est-à-dire déterminer ce
qu'on affichera en fonction du pixel ratio que l'on aura trouvé.

Pour réaliser des conceptions de site

responsive, il va toujours falloir
soigneusement réfléchir à nos
utilisateurs, et surtout au contexte
dans lequel ces images vont être
utilisées, et puis de l'opportunité ou
non d'utiliser des images haute
résolution pour ce site. Un jour
bientôt, nous aurons probablement
une syntaxe universelle qui va nous
permettre de spécifier quels
éléments utiliser pour quel
périphérique, et comment la bande passante pourrait jouer un rôle dans cette
sélection. À l'heure actuelle, par contre, nous devons faire de notre mieux en utilisant
les techniques qui nous sont offertes actuellement. Cela signifie que pour vous, en
tant que concepteur de site, vous allez devoir examiner attentivement toutes vos
options lors de la conception pour des densités d'écrans multiples.

Tirer parti des media queries

Les media queries, ou les requêtes médias, ou les requêtes multimédias, comme on
peut les traduire, sont une composante importante de la conception de sites Web
responsives.

Ces requêtes vont nous permettre

d'écrire des styles qui vont
correspondre aux changements de
choses, comme par exemple la taille
de l'écran ou son orientation. Il ne
s'agit pas réellement d'une nouvelle
fonctionnalité des CSS, mais plutôt

2
d'une extension de déclaration @media qui existait déjà. Grâce aux déclarations
@media, les CSS nous ont permis pendant un certain temps d'ajuster l'application
des styles par type de média, c'est-à-dire par type de périphérique, par type
d'appareil depuis déjà un certain temps.

Dans le passé, nous avons pu définir quel style

allait s'appliquer en fonction de périphériques
qui permettaient de lire l'écran, comme les
systèmes Braille, des projecteurs, des
imprimantes, voire des appareils portables
grâce à une syntaxe qui a été assez simple.

Les media queries

fonctionnaient sur un principe
assez simple, il s'agissait dans
un premier temps d'écrire une
feuille de style par type de
média. Donc on pouvait
commencer par une feuille de
style liée à l'écran, et puis
ensuite on écrivait une
deuxième feuille de style qui
était liée aux médias à
impression, mais c'est quelque
chose qui n'a jamais bien
fonctionné avec les différents périphériques mobiles. Les fabricants de téléphones
portables pour la plupart ont ignoré le média handeld, en raison essentiellement
d'une utilisation assez limitée, et puis aussi de leur volonté de pouvoir imposer leur
système dans un environnement concurrentiel. Pour combler cette lacune, des
requêtes multimédia ont été créées pour permettre aux concepteurs d'étendre les
déclarations des médias en incluant d'autres propriétés lorsqu'ils allaient filtrer
l'application de leur style. Et c'est quelque chose qui en fait a été extrêmement utile,
car cela a permis aux concepteurs de commencer à contrôler le style, en fonction de
facteurs comme la taille de l'écran, l'orientation de cet écran, la couleur, et ce sont
des choses qui sont beaucoup plus souples que la simple définition d'un type
d'appareil.

Voyons donc la syntaxe pour

comprendre comment vont
fonctionner ces media queries. Nous
avons dans un premier temps la
déclaration de la media query, et puis
ensuite nous allons utiliser des opérateurs qui peuvent être par exemple ici, not ou
only. Not va annuler les expressions qui suivent, et n'appliquer les styles que si les
conditions qui suivent ne sont pas remplies.

2
On peut également utiliser only parce qu'il y a d'anciens navigateurs, d'anciens
agents utilisateurs, qui sont plus anciens, et qui ne vont pas supporter only. Ils vont
donc ignorer les déclarations multimédia qui commencent par only. Ça peut donc
être une alternative au not.

Et puis on a le mot clé and, qui va nous permettre de combiner ensemble des
expressions.

On peut également séparer une liste de requête multimédia avec un opérateur

logique comme or, qui veut dire ou.

Nous avons ici par exemple une

définition qui va nous permettre de
déterminer un média écran avec une
largeur minimale de 480 pixels, et une
orientation qui est une orientation
paysage.

Il y a bien d'autres types d'attributs,

les plus connus sont bien entendu la
largeur, la hauteur, mais également
la largeur périphérique, ou la
hauteur du périphérique,
l'orientation, et puis d'autres
paramètres qui peuvent être
notamment des paramètres liés à la
couleur ou à la résolution. Notez
qu’un certain nombre de paramètres
vont accepter des préfixes qui sont
minimum et maximum. C'est-à-dire
que l'on va pouvoir définir une
largeur minimum ou une largeur de périphérique minimum, ou bien entendu
maximum.

Si vous utilisez un lien pour accéder à des styles externes, nous pouvons utiliser
cette syntaxe. Il s'agit d'un lien qui va aller chercher une feuille de style, avec un type
pour cette feuille de style qui est ici screen, et largeur minimum, 480 pixels.

On peut également utiliser le système @import, pour pouvoir inclure des feuilles de
style à l'intérieur d'autres feuilles de style.

Il faut également
préciser que si vous ne

2
déclarez pas un type de média, tout va être supposé. Donc si vous filtrez les
résultats pour les appliquer à tout type de média, vous pouvez également exclure le
type de média que vous voulez exclure, et le reste de la syntaxe va fonctionner
toujours très bien.

Vous pouvez
sur le site du
W3C, le
consortium qui
régule le Web,
consulter les
informations
concernant les
media queries.

Et si vous avez un doute

sur l'utilisation de
certaines media queries,
vous pouvez consulter le
site Canal use, où vous
allez pouvoir, en fonction
des différentes questions
que vous vous posez, voir
quel est l'état
d'acceptation par les
différents agents
utilisateurs, c'est-à-dire
par les différents
navigateurs. Et vous
voyez ici que sur certaines
media queries, il n'y a pas de problème, alors que sur d'autres, par exemple ici sur la
détection de la résolution, il peut y avoir des navigateurs qui n'acceptent pas bien ces
media queries. Donc à partir du moment où vous allez travailler avec des media
queries, pensez bien à vérifier que celles-ci vont être acceptées par l'ensemble des
navigateurs sur lesquels vos utilisateurs vont consulter vos sites Web.

Dans la vidéo qui va suivre, nous allons voir comment nous allons utiliser ces media
queries pour pouvoir adapter nos designs en fonction, par exemple, de points de
rupture, c'est-à-dire en fonction des différentes tailles d'écran.

Créer des points de rupture avec les media queries

Là où les media queries vont devenir réellement intéressantes, c'est qu'elles vont
nous permettre de créer des points de rupture.

2
 Alors qu'est-ce qu'un point de
rupture ? Un point de rupture c'est
en fait le moment où la mise en
page va changer de disposition, en
fonction de la largeur de l'écran. Il
ne s'agit pas ici de s'adapter à tel
ou tel périphérique, mais de
s'adapter à la largeur d'un écran.
Et vous allez voir que c'est
quelque chose qui va nous permettre de pouvoir travailler pour les principaux
périphériques.

Supposons par
exemple que nous
ciblions trois types
de périphériques
principaux,
smartphone,
tablette, et
ordinateur. Nous
allons pouvoir écrire
une media query
pour les tablettes. Ici
nous allons spécifier
que nous voulons
travailler pour des
écrans dont la
largeur est inférieure à 480 pixels. Nous allons ensuite nous baser sur une largeur
d'écran supérieure, attention il ne faut pas qu'il y ait de recouvrement, donc nous ne
pourrions pas indiquer comme largeur minimale 480, il nous faut indiquer 481. Et
puis nous allons aller jusqu'à une largeur de 768 pixels. Et nous définirons ici nos
styles pour tablette. Et puis ensuite, nous allons dire que pour toutes les tailles
supérieures à 769 pixels, eh bien nous allons appliquer des styles pour ordinateur.
Nous avons donc la possibilité en fonction de 3 media queries d'appliquer des styles
qui vont être différents pour chacun des périphériques. Sachant que nous ne visons
pas des périphériques, mais la taille de la fenêtre dans laquelle va s'afficher le site
Web.

2
 Alors nous
pouvons par
exemple ici
travailler avec une
feuille de style qui
va définir p {, c'est-
à-dire le
paragraphe, en
définissant la
largeur en
pourcentage par
rapport à son
conteneur, sa
hauteur peut être
définie en pixels,
on peut définir une
marge intérieure, la
couleur du texte et
la couleur du fond.
On peut faire de la
même manière pour les tablettes, et procéder également de la même manière pour
l'ordinateur de bureau.

Vous remarquerez que nous

avons travaillé avec la
largeur maximale, et vous
remarquerez également que
nous avons travaillé avec
l'opérateur only, de manière
à ce que les anciens agents
utilisateurs, c'est-à-dire les
vieux navigateurs, ne
prennent pas en compte ces
feuilles de style, mais se
basent sur des feuilles de
style qui seraient les feuilles
de styles alternatives. Il faut
donc prévoir des styles par
défaut pour les anciens
agents utilisateurs.

Et puis nous avons procédé

de la même façon pour les
tablettes. Et nous avons ici
précisé une plage entre 480
pixels et 768 pixels.

2
 En ce qui concerne
l'ordinateur de bureau, nous
nous sommes contentés de
spécifier des valeurs
supérieures en largeur à 769
pixels. Notez que pour
chacun de ces styles, nous
avons changé le fond de
couleur.

Et nous allons donc voir

maintenant quel est l'effet,
c'est-à-dire comment cela
fonctionne, comment le style
va changer en fonction de la
taille de l'écran. J'ai ici la page
sur laquelle j'ai appliqué mes
media queries, et vous voyez
que la couleur du pavé va
varier en fonction de la taille de
l'écran. Le texte restera blanc,
mais on aura un fond dans les
bleus pour les ordinateurs de
bureau qui sont supérieurs à
768 pixels.

Pour les tablettes entre 481 et 768 pixels, nous aurons une couleur verte, et puis
pour les smartphones dont les écrans vont être égaux ou inférieurs à 480 pixels, eh
bien nous aurons un affichage en rouge. Voyons tout simplement ici, en resserrant la
taille de l'écran, ce qui se
passe.

Vous remarquez que je suis

toujours dans la plage
supérieure à 768 pixels.

2
 Mais dès que je vais arriver à
768 pixels, eh bien l'affichage
va se faire en vert.

Et si je continue à resserrer ma
taille d'écran, vous voyez que
le style qui va s'appliquer
désormais en dessous de 481
pixels, c'est-à-dire lorsque la
largeur sera égale ou inférieure
à 480 pixels, eh bien le style
appliquera un fond rouge au
paragraphe.

Vous voyez donc qu'avec le

principe des media queries, on
va pouvoir mettre en place des
points de rupture, c'est-à-dire
des points d'arrêt où on va
déterminer à partir de quel
moment la mise en forme va
changer. Ici, très simplement
nous avons appliqué une

2
couleur de fond, mais nous allons pouvoir appliquer des styles beaucoup plus
sophistiqués, y compris des styles qui vont modifier l'emplacement des différents
éléments, ou l'affichage ou non de tel ou tel élément dans notre mise en page. Pour
terminer sur cette question des points de rupture, vous avez probablement noté que
nous avons travaillé ici non pas avec le device width, c'est-à-dire la largeur de
l'écran, mais avec le width, c'est-à-dire la largeur de la fenêtre dans laquelle était
affichée notre page Web. Il est effectivement beaucoup plus pratique de travailler
avec la largeur de la fenêtre, car on est dans un système qui va être plus souple et
plus précis.

Et puis il faut également noter

que de plus en plus de
concepteurs ne travaillent pas
sur des largeurs qui sont
définies en pixels, mais sur des
largeurs qui sont définies en
em. Le em est une unité de
mesure qui est basée sur la
taille de la police qui va être
utilisée. Ici, par exemple, sur
une largeur de 480 pixels, si
nous utilisons une police de 16
pixels, eh bien nous aurons une largeur qui sera une largeur de 30 em. Si nous
modifions la hauteur de la police, eh bien nous allons avoir des modifications qui vont
s'effectuer, puisque la valeur du em va changer. L'intérêt de travailler avec une
notation en em, est que cela bien entendu va nous obliger à faire un petit peu de
mathématiques, mais nous allons avoir un design réactif, responsive, qui va
répondre non seulement à la largeur de l'écran, mais également au niveau de zoom
des utilisateurs. En créant des points de rupture, des points d'arrêt avec des
requêtes multimédias, vous allez faire un pas important dans le design responsif. Ce
n'est bien entendu que la première étape pour créer des mises en page réactives, il
va falloir combiner
ces points d'arrêt
avec des mises en
page fluides, et
également des
grilles, ce que nous
allons voir dans les
vidéos suivantes.

Dans un fichier html

simple, nous avons
donc reporté les
éléments que nous
venons de voir. Nous
avons choisi d'utiliser
@media, et nous
avons précisé pour
les éléments qui se
trouvent avoir une
dimension inférieure

2
à 480 pixels, certaines valeurs pour le paragraphe. Nous avons ensuite spécifié pour
les écrans, qui sont en fait des écrans de tablettes ou à l'horizontal entre 480 et 768
pixels, d'autres valeurs pour le paragraphe, la typo restera toujours blanche, white,
white, et nous avons enfin ajouté les inscriptions pour les écrans dont la largeur est
supérieure à 768 pixels. Et puis nous avons terminé nos instructions de style, qui se
trouvent bien entendu dans l'en-tête. Et puis nous avons ensuite tout simplement
appliqué la balise paragraphe. Et la balise paragraphe en fonction de ce qui sera
trouvé au niveau de la largeur de l'écran, eh bien appliquera des valeurs qui sont
différentes. Voyons donc visuellement le résultat de notre travail.

Utiliser des grilles fluides

Nous allons dans cette vidéo voir la méthode qui consiste à utiliser des grilles fluides
pour littéralement servir notre contenu.

Aujourd'hui, une des analogies les plus

pertinentes sur le design responsif est
qu'il devient pratiquement évident que
l'on peut penser ce contenu comme à un
liquide.

Ce contenu doit avoir la capacité de

pouvoir circuler dans n'importe quel
conteneur où il va être visualisé. Si vous
vous limitez à créer des mises en page
fixes pour chacun de vos points d'arrêt,
vous ignorez la grande variété des tailles
d'écran dans la gamme que vous allez
cibler. Une des meilleures façons de vous
assurer que votre contenu fonctionne
indépendamment des écrans visualisés
est donc d'utiliser une disposition fluide
pour que ce contenu puisse être modifié
et redimensionné en fonction des différents points de rupture, des points d'arrêt que
vous avez définis.

2
 Comme vous pouvez l'imaginer, créer des mises en page distinctes pour chaque
point d'arrêt va créer beaucoup plus de travail que d'élaborer une seule disposition
qui va être fluide. C'est pour cette raison que les concepteurs ont adopté l'utilisation
de griffes fluides pour créer de multiples mises en page qui vont être plus rapides et
plus précises.

Les grilles fluides sont basées

essentiellement sur un système où on va
définir un nombre de colonnes et on va
définir ensuite des gouttières. Le nombre
de ces colonnes et puis la largeur de base
de ces colonnes et les gouttières est
généralement décidée par le concepteur
et elle va être liée en principe à une taille
de police par défaut, mais ça peut être
également par rapport à un ratio ou une
largeur d'écran idéale.

Beaucoup de concepteurs vont travailler

avec une grille de seize pixels parce que
c'est en général la taille de la police par
défaut pour la plupart des navigateurs.
Mais on peut également utiliser une
valeur de base qui soit différente.

Une fois que la grille est établie, les

éléments de la page vont être mappés
aux coordonnées de la grille et avec des
valeurs de dimension qui vont être
attribuées en fonction de leur position
dans la grille.

2
 Pour rendre les grilles plus fluides,
on peut également utiliser des
unités de mesure relatives comme
les ems ou des valeurs de
pourcentage pour déterminer la
largeur des colonnes et des
gouttières. Ensuite on va placer les
différents éléments sur la page et
ceux-ci vont être mesurés en
fonction de ces valeurs relatives.

Pour faciliter notre travail, il existe

des frameworks, des
environnements de travail que l'on
peut télécharger et qui vont être
constitués des éléments qui vont
être nécessaires, de manière à
définir le nombre de colonnes qui
vont être ensuite adaptés à chaque
type d'écran en fonction des points
d'arrêt que l'on aura définis. Dans
une vidéo ultérieure, nous allons
explorer ces frameworks de manière à ce que vous puissiez vous rendre compte de
ce qu'ils nous proposent et puis que vous puissiez les télécharger de manière à les
tester et voir s'ils correspondent à votre méthode de travail et puis également à vos
objectifs.

Rendre les images responsives

Examinons maintenant la question des images responsives, et puis surtout de
comment nous allons pouvoir maintenir la qualité d'affichage des images, tout en
respectant des temps de chargement qui ne vont pas être excessifs. C'est un
problème qui existe depuis maintenant quelques années, et qui n'est pas encore en
passe d'être totalement résolu.

Il est effectivement très facile de

pouvoir faire varier des mises en

2
page en fonction des tailles des écrans, nous l'avons vu par exemple avec des media
queries, et puis des points de rupture, mais en ce qui concerne les images, la
problématique est différente.

À partir du moment où nous allons

utiliser une image de grande taille
sur un petit écran, cette même image
peut être considérée sur un écran
d'ordinateur comme étant affichée en
miniature. Il va donc falloir que l'on
règle les différents problèmes, et que
l'on puisse afficher une image à la
taille adaptée à l'écran sur lequel elle
est visionnée.

On pourrait considérer que c'est un

problème qui est très facile, et qu'il
suffit, au lieu de saisir des valeurs
absolues, de travailler avec des
mesures relatives.

Si on travaille avec des dimensions relatives,

au lieu de préciser des largeurs et des
hauteurs en pixels, on va préciser des
hauteurs ou des largeurs en pourcentage. Et
l'on va décréter que telle image va être
affichée à 100 % de la largeur du conteneur
à l'intérieur duquel elle se trouve. On peut
également travailler avec une largeur
maximale.

2
 Au lieu de définir la largeur de l'image, on va
définir la largeur maximale de l'image.
L'image va donc s'afficher avec une largeur
maximale, ici de 100 % du conteneur à
l'intérieur duquel elle va se trouver. Et l'on
pourrait considérer que ces solutions sont
satisfaisantes. Toutefois, il y a quand même
des problèmes. Premièrement, l'attribut max-
width n'est pas reconnu par tous les
navigateurs, et puis surtout il y a un problème
très clair de chargement, puisque l'on va
charger quel que soit le périphérique sur
lequel on va visionner l'image, une image qui
va être très large, très lourde. Donc les temps
de chargement vont être ralentis.

Il y a d'autres solutions. On
pourrait considérer qu'il serait
intéressant de travailler les images
en fond, et à l'aide d'instructions
CSS. C'est valable pour des
images qui vont être par exemple
à vocation uniquement
décoratives. On peut par exemple
définir ici que pour des écrans qui
sont inférieurs à une largeur de
480 pixels, on va créer un élément,
et que cet élément en fond va
charger une image que nous
aurons préparée. Cette image aura
la taille qui sera requise pour
s'afficher sur cet écran. Et puis
nous aurons préparé d'autres images. Et pour les écrans entre 480 pixels et 768
pixels que nous allons définir ici au niveau de notre media query, nous allons
demander à ce que cette div aille chercher une autre image. Nous aurons préparé
une image qui est une image de taille moyenne. Et nous aurons enfin préparé une
troisième image pour les grands écrans, supérieure à 769 pixels, et ici la div ira
chercher une autre image qui sera l'image de grande taille. Nous avons donc ici
travaillé 3 images, et l'on a demandé à ce que le serveur serve l'image qui soit
adaptée à la taille de l'écran. Encore une
fois, on pourrait considérer que ce
système est un système très efficace.

Et c'est vrai, mais il pose également des

problèmes. Et le problème principal,

2
vous l'avez bien compris, c'est que ces images ne sont pas intégrées dans le flux
HTML, puisqu'il s'agit d'images de fond qui sont en background, et ça peut donc
poser des problèmes d'accessibilité, et également d'autres problèmes liés à
l'optimisation pour les moteurs de recherche.

Donc si on a besoin d'avoir des images

intégrées dans le flux HTML, cette
solution ne va pas bien fonctionner. Et
d'autre part, il y a des téléphones
portables, des anciens mobiles, pour
lesquels il va y avoir un téléchargement
systématique de toutes les images. C'est-
à-dire que lorsque nous nous imaginons
que nous allons charger la bonne image
appropriée, en fait sur ces anciens
appareils, le navigateur va charger les 3
images que nous avons préparées, la
petite, la moyenne et la grande. Et donc
nous aurons perdu le bénéfice de
l'accélération du temps de chargement.

Il y a également des solutions basées

sur le JavaScript, où le script va aller
examiner le contexte, et ensuite va
charger l'image adaptée à la largeur de
l'écran.

Ces scripts présentent un

certain nombre d'inconvénients,
ils sont quand même
néanmoins très pratiques. C'est
des solutions qui sont quand
même assez complexes à
déployer. Les temps de
chargement peuvent être plus
longs parce que bien entendu,
il va falloir charger les scripts,
et puis ensuite, parfois, ils sont
peu adaptés au préchargement
sur certains navigateurs.

2
 Vous pouvez, en ce qui
concerne ces scripts, vous
intéresser à Picturefill, qui
est un script assez récent,
qui utilise les dernières
technologies, que l'on peut
télécharger bien entendu sur
GitHub pour l'exploiter. Vous
pouvez également consulter
le mode d'emploi, avec des
explications qui sont
extrêmement complètes.
Vous avez ici également le
téléchargement de ces JavaScript. Et vous avez toutes les explications détaillées sur
la manière de le mettre en œuvre, et de manière également à pouvoir tester ce qui
se passe sur les différentes images en fonction de vos points de rupture. Reste que
le plus gros problème pour toutes ces techniques va rester le chargement des pages
par les navigateurs.

Les développeurs travaillent donc d'arrache-pied pour trouver des nouvelles

solutions, et nous allons voir dans la vidéo suivante quelques-unes de ces nouvelles
solutions émergentes.

Découvrir les solutions émergentes pour images

responsives
Nous avons vu dans la vidéo précédente des techniques pour rendre les images
responsives et nous avons vu également que ces solutions ne sont pas toujours
totalement idéales. Nous allons maintenant voir des solutions émergentes et vous
allez également constater qu'il n'y a pas de solution miracle.

Pour comprendre comment

fonctionnent ces images
réactives il faut savoir qu'au cœur
de la problématique il y a la
question de servir la bonne
image dans le bon contexte. Il ne
suffit pas d'avoir simplement une
image qui va se réduire pour les
petits écrans. Nous devons avoir
la possibilité de nous assurer que
la bonne image bien adaptée va
être servie dans le bon contexte.

2
 À l'heure actuelle, cela dépend d'essentiellement
trois facteurs. Premièrement il y a la taille de
l'écran. Deuxièmement il y a la densité de cet
écran. Et puis il y a également la connectivité qui
va jouer sur la bande passante.

On s'aperçoit que cela va générer des

facteurs qui sont contradictoires. Parfois
on va avoir sur un téléphone portable une
faible bande passante qui va rester pour
la plupart des appareils en service
actuellement calée sur de la 3G alors que
même si on voit apparaître la 4G et la 5G,
il faut savoir que l'essentiel du parc est
encore connecté la plupart du temps en
3G. D'autre part, les temps de latence
peuvent être élevés, les tailles d'écran
sont relativement réduites puisque ces
téléphones ne sont pas très très larges. Et
puis, par contre, ils ont de plus en plus
des écrans de haute résolution. Vous
voyez donc que ces facteurs peuvent
parfois être contradictoires. En ce qui concerne les tablettes, la bande passante va
également être faible mais elle peut être un peu plus élevée selon l'environnement
dans lequel on se connecte et puis la latence est toujours élevée. Les tailles d'écran
sont par contre un petit peu plus grandes et on va avoir de plus en plus des écrans
de haute résolution. En ce qui concerne les ordinateurs, il faut comprendre que la
bande passante qui la plupart du temps va être élevée peut également dans certains
cas être faible. Ces ordinateurs peuvent être connectés à des bornes wifi qui ne vont
pas forcément avoir un très très haut débit. La taille des écrans est bien entendu
assez importante et de plus en plus, ces écrans sont des écrans de haute résolution.
Pour prendre en compte ces paramètres, le W3C et des groupes de travail qui
planchent sur le HTML 5 ont mis en place un certain nombre de solutions.

La première solution est la

solution srcset où l'on va
définir pour une image un set
de ressources qui va aller
chercher telle ou telle image
en fonction d'une largeur
d'écran. Vous remarquez

2
qu'ici il y a en plus de ce srcset une ressource qui va consister à charger une image
de secours pour des navigateurs qui ne reconnaîtraient pas cette balise srcset.

Il y a une proposition concurrente

et puis également
complémentaire qui est la
solution picture. Il s'agit d'une
nouvelle balise et vous voyez
qu'ici dans un premier temps on
place une balise picture. Il y a
une description de cette image
comme dans les balises
anciennes img. Et puis en-
dessous, nous allons charger
également un srcset au cas où le
navigateur reconnaîtrait la balise
srcset et ensuite à l'intérieur de
cette balise picture, on va aller
rechercher les médias sources. Et ici on va rechercher des médias en fonction des
largeurs d'écran et puis l'on va chercher des médias qui vont être adaptés aux
résolutions des différents écrans que l'on va afficher à leur taille normale ou au
double de leur taille. Ici en l'occurrence on a défini deux sources média pour deux
tailles d'écran différentes 18em et 45em.

Notez également que l'on a ajouté une balise img src très classique en HTML pour
des navigateurs qui ne reconnaîtraient pas la balise picture.

En tant que concepteur, vous allez

donc devoir accorder une attention
toute particulière à la façon dont ces
techniques vont changer, vont
évoluer et puis dont les mises en
œuvre vont être réalisées afin que
vous soyez prêt à adopter les
nouvelles techniques au fur et à
mesure de leur apparition.

Créer des formulaires responsifs

Le design responsive ne consiste pas uniquement à modifier vos mises en page pour
qu'elles s'adaptent aux tailles des écrans. Pour créer des sites qui soient réellement
responsives, vous devez penser au contexte dans lequel le site va être utilisé et
quelles vont être les interactions des utilisateurs, en particulier en ce qui concerne
les formulaires.

2
 S'assurer que les formulaires soient
clairs et faciles à remplir est une
composante importante de toute
bonne expérience utilisateur. Étant
donné que les facteurs de mise en
forme vont changer d'un périphérique
à l'autre, il est parfois difficile de créer
des formulaires qui soient également
efficaces sur tous les périphériques.

Dans cet esprit, on va examiner ensemble quelques techniques et quelques bonnes

pratiques afin que vous puissiez rendre vos formulaires beaucoup plus responsifs. Et
il va s'agir essentiellement non pas uniquement de raisonner en fonction de la taille
de l'écran mais d'adjoindre à ces préoccupations la préoccupation principale de
comprendre comment l'utilisateur va fonctionner.

Et il faut en ce sens comprendre que

l'utilisateur va de plus en plus utiliser
majoritairement des périphériques
mobiles. Nous allons donc
principalement nous concentrer sur
des formulaires qui vont être créés
dans un premier temps pour les
périphériques mobiles. En plaçant ces
considérations en tête de liste, on va
créer des formulaires qui vont être
meilleurs et qui vont faciliter leur
adaptation ensuite sur les différents périphériques.

Bien entendu, on va constater

essentiellement des différences de mise
en forme : vous voyez qu'ici sur ces deux
écrans nous avons des champs de
formulaire où l'on va pouvoir sur un
écran en mode paysage placer les
étiquettes à gauche et puis sur un écran
d'une largeur inférieure devoir placer les
étiquettes au-dessus des différents
champs.

2
D'une manière générale, il y a des contraintes liées
au mobile qui sont essentiellement des contraintes
de hauteur mais pas uniquement. Cela va être
également des contraintes qui sont liées à
l'utilisation de ce mobile.

Effectivement le mobile est utilisé de façon tactile :

c'est avec son doigt que l'utilisateur va activer tel ou
tel champ et il est très important de maintenir des
espaces suffisants entre les différents champs pour
qu'il n'y ait pas d'activation malencontreuse d'un
champ alors que l'utilisateur voulait, et bien, activer
un autre champ.

On va donc utiliser des balises de

formulaire qui vont être des balises de
type HTML 5. Vous remarquez ici que
notre balise de champ de formulaire est
encadrée par une balise d’étiquette
label qui spécifie qu'il s'agit ici du nom
et puis ensuite il y a la balise qui va
définir quel est le champ de formulaire.

2
Nous allons entrer dans le détail de ces balises. Il faut essentiellement comprendre
que nous allons devoir assister l'utilisateur dans la saisie de ce formulaire et nous
allons devoir également nous assurer que les champs de formulaire ont été saisis de
manière valide, c'est-à-dire qu'ils correspondent bien à ce que l'on attend. Nous
avons ici dans un premier temps un champ qui va concerner la saisie d'une adresse
email. On va avoir ensuite un champ ici qui va permettre de saisir une URL et nous
avons ici un champ qui est un champ de recherche. En utilisant des balises de type
HTML 5 qui sont conformes aux règles du code, nous allons faciliter l'assistance et
nous allons également faciliter la validation. Vous voyez qu'ici il s'agit de champs qui
sont requis et ce sont des champs dont le type a été précisé. Pour l'email, le type est
email. Pour l'adresse internet, le type est URL et puis pour le champ de recherche, le
type est search.

En ce qui concerne
l'assistance, on a la
possibilité de préciser des
informations qui vont aider
l'utilisateur à remplir les
différents champs de
formulaire. C'est quelque
chose comme nous le
voyons ici qui peut tout à
fait fonctionner sur un
ordinateur de bureau.

2
 Mais lorsque vous êtes sur un
écran qui va être limité en
hauteur et où l'utilisateur va
devoir travailler de façon
tactile nous n'allons pas
bénéficier de cette place et il
va falloir que nous trouvions
une autre solution.

Dans ce cas, il va falloir donner

des indications à l'intérieur
même des champs de
formulaire où l'on va expliquer
à l'utilisateur le type de
données que l'on attend qu'il
saisisse.

Et pour ce faire, nous allons

utiliser l'attribut placeholder où on
va préciser par exemple qu'à
l'intérieur du champ on attend
votre nom. Et d'autre part, on va
également préciser si ce champ
est requis. Vous voyez qu'ici nous
avons précisé que le champ est
requis et nous avons ajouté en-
dessous un paragraphe qui
précise que le nom est requis de
manière à ce que l'utilisateur
sache que ce champ doit
obligatoirement être rempli.

2
 Si on regarde le code d'un
formulaire ici qui est saisi au
format HTML 5, vous voyez
qu' on a bien précisé à
chaque fois les labels, les
étiquettes et puis à l'intérieur
du champ de formulaire on a
précisé le type de champ et
on a également placé des
placeholders, c'est-à-dire
des explications sur ce que
l'on attend de l'utilisateur.

Et vous voyez que l'affichage ici avec un navigateur

montre clairement les placeholders à l'intérieur des
champs et vous constatez également que le champ
de recherche est bien un champ dans lequel on va
pouvoir saisir une requête.

En ce qui concerne la réalisation de ces

formulaires responsives, il y a des
bonnes pratiques qui sont premièrement
d'utiliser des éléments de formulaire
HTML 5, d'autre part d'automatiser au
maximum la saisie des différentes
données que l'on va demander à
l'utilisateur de renseigner et puis de
pouvoir éventuellement combiner les
différents éléments.

2
 La combinaison des éléments peut
effectivement être intéressante en ce sens
qu'elle va permettre de générer un gain de
place. Si au lieu de demander de saisir la rue,
le numéro de téléphone, le code postal et la
ville dans des champs séparés, on peut
demander à l'utilisateur de nous communiquer
son adresse selon un modèle qu'on va lui
communiquer : ici, numéro de rue, code postal
et ville. On est dans un système qui dans
certains cas peut générer des données qui ne seront peut-être pas extrêmement
cohérentes en termes d'exploitation sur une base de données mais l'on va faciliter la
saisie de l'utilisateur et donc améliorer son expérience. De la même façon, au lieu de
présenter trois boutons radio pour donner un choix, on va pouvoir utiliser un menu
déroulant qui va occuper beaucoup moins de place à l'écran et qui va permettre à
l'utilisateur d'avoir une vision beaucoup plus claire de notre formulaire.

Nous devons donc lorsque

nous nous attaquons à la
réalisation de formulaires
responsives, non pas
uniquement nous
concentrer sur un problème
de mise en page et de taille
d'écran mais raisonner
expérience utilisateur, c'est-
à dire de comprendre
quelles sont les
informations que l'utilisateur
souhaite nous
communiquer et quelle va
être la meilleure façon pour
lui de nous les
communiquer facilement.

Optimiser les performances du site

Lors de l'élaboration de Design Responsive, les concepteurs sont souvent tellement
préoccupés par la conception visuelle et puis les fonctionnalités du site qu'ils ont à
réaliser, qu'ils vont négliger les aspects les plus critiques de la construction de ce site
destiné à plusieurs périphériques, et c'est essentiellement la performance.

2
 Lors de la conception de sites pour des
ordinateurs, nous avons été habitués à
créer des sites qui sont conçus pour des
connexions relativement cohérentes avec
une large bande passante.

Ce n'est pas du tout le cas pour les

appareils mobiles. On doit faire face à un
ensemble de problèmes de performance
qui vont être totalement différents en
fonction du type de connexion. Et puis il n'y
a pas que le type de connexion. A partir du
moment où notre utilisateur va avoir dans
les mains un périphérique mobile, par
nature, il va être en déplacement. Il peut
être dans un ascenseur, il peut être dans
les transports en commun, et même s'il
dispose d'une connexion à large bande, il
peut y avoir en fonction de son
déplacement des affaiblissements de la bande passante. La performance du site que
nous réalisons est donc très importante en terme de rapidité de connexion.

Pour cela, il va falloir

essentiellement s'attacher
à produire un code qui soit
léger. Nous allons utiliser
des éléments qui
respectent les standards
du W3C au format
maintenant HTML5. Nous
allons supprimer tous les
balisages exotiques ou
redondants. Nous allons
également maintenir des scripts et en particulier des scripts externes qui soit légers
et qui soit très efficients. Et puis surtout, il va falloir réduire les requêtes HTTP.

Qu'est ce que sont les requêtes HTTP ? À

partir du moment où, sur un périphérique, on a
besoin de charger un script, une feuille de
style, des images, bref des éléments dont le
site a besoin pour fonctionner, il va falloir aller
chercher ces éléments sur le serveur et puis
les rapatrier vers le navigateur. Il s'agit de

2
requêtes serveur, de requêtes HTTP. Nous allons donc devoir minimiser le nombre
de requêtes HTTP.

Comment allons-nous faire pour réduire

ce nombre de requêtes HTTP? Et bien
par exemple, si nous avons plusieurs
feuilles de style CSS, nous allons
pouvoir combiner l'ensemble de ces
feuilles de style dans une seule en
utilisant une requête @media.

On peut également travailler avec des

scripts qui sont des scripts qui vont
concaténer les différents éléments.
Nous pouvons travailler par exemple
avec Quick Concat-Enhance
JavaScript.

Et vous allez trouver ce script sur

GitHub. Vous allez pouvoir le télécharger
et également consulter toute la
documentation sur son fonctionnement.
Il s'agit d'un script qui va concaténer
tous les éléments de manière à réduire
leur taille, et donc à améliorer la rapidité
avec laquelle ils vont être servis.

2
 Et puis, on peut
minimiser les
requêtes HTTP,
mais on peut
également les
optimiser. Par
exemple en
utilisant pour les
images à vocation
décorative la
balise
background-image
au lieu de la balise
img. Nous allons
utiliser au
maximum les
requêtes @media, et puis les fonctions CSS3, et puis également nous allons utiliser
les sprites. Les sprites sont en fait des collections d'images qui sont concaténées
dans un même fichier, et que l'on va pouvoir afficher, sachant qu'il n'y aura un
chargement que d'une seule image, qui ensuite pourra présenter les différentes
icônes dont on aura besoin.

On va également optimiser les ressources

externes, notamment en ce qui concerne les
JavaScript. Vous n'avez pas toujours besoin
de la totalité de la bibliothèque jQuery qui
est un véritable couteau suisse, mais vous
pouvez extraire directement les
fonctionnalités JavaScript dont vous avez
besoin, ce qui réduira les requêtes HTTP, et
qui d'autre part permettra de charger le
code de façon beaucoup plus rapide.

Et puis enfin, toujours au niveau de

l'optimisation des ressources externes, si
par exemple on utilise certaines
bibliothèques JavaScript comme Lettering,
qui va nous permettre d'affiner notre
typographie, et bien cette bibliothèque peut
être tout à fait utile sur des écrans
d'ordinateur mais ne pas avoir de fonction
réelle sur les téléphones portables, auquel
cas nous la chargerons uniquement en
fonction du contexte pour lequel elle doit
s'appliquer.

Attachez-vous donc à optimiser vos ressources de façon à ce que votre site

Responsive, non seulement fonctionne correctement sur les appareils mobiles, mais
également performe sur ces mêmes appareils.

2
3- Mettre en place une stratégie de design responsive
Concevoir en fonction du contexte
Dans ce chapitre, nous allons examiner quelles sont les stratégies que nous allons
devoir prendre en considération lorsque nous allons aborder la conception de sites
Responsive. Pour construire un site Responsive réussi, il va falloir aller beaucoup
plus loin que le simple repositionnement des éléments selon les mises en page qui
sont adaptées à des écrans. Il va falloir que l'on place notre conception dans le
contexte d'utilisation. Il va pour cela falloir que nous comprenions quels sont les
usages des utilisateurs. Il va donc y avoir des situations où, par exemple, une
application mobile séparée serait un meilleur choix que de réaliser un site qui soit
Responsive. Nous allons donc voir quelles sont ces stratégies et nous allons
comprendre quels sont les avantages, les forces et les faiblesses relatives du Design
Responsive.

L'ancienne approche
consistait à réaliser une
maquette. Dans certains
cas on prototypait, mais la
plupart du temps, on
développait même le site
en allant jusqu'à écrire le
code. Et puis on testait
ensuite ce site sur les
différents navigateurs, pour
au final, une fois que nous
étions satisfaits, nous
poser la question de savoir
comment nous allions
adapter ces contenus sur
des périphériques mobiles.
Il est bien évident que cette
approche aujourd'hui ne peut plus fonctionner comme cela.

Si l'on fait une comparaison :

supposons qu'on demande à des
ingénieurs de concevoir un véhicule
qui serait une voiture de sport flashy
et performante, et puis qu'une fois
que la voiture serait réalisée, on se
pose la question de savoir comment
lui adjoindre des caractéristiques qui
seraient celles, par exemple, d'un
4X4: supporter des charges très
lourdes, pouvoir fonctionner sur tout
type de terrain... Et puis ça ne serait
pas suffisant, on demanderait
également que le véhicule ait également les qualités d'un SUV, c'est-à-dire, puisse
embarquer toute une famille. Et pour terminer, on demanderait également à notre
équipe d'ingénieurs que ce même véhicule ait les caractéristiques d'une berline haut

2
de gamme. Vous vous rendez bien compte qu'une stratégie industrielle de ce type
serait un véritable désastre. Et bien c'est exactement la même chose en ce qui
concerne la conception de sites Web. On ne peut plus aujourd'hui concevoir pour les
écrans d'ordinateur, et ensuite se poser la question de l'adaptation.

Prenons un exemple pour

comprendre cette question
du contexte et des
fonctionnalités liées au
contexte : si nous créons par
exemple un site pour vendre
des macarons. Nous allons,
pour les ordinateurs, réaliser
une maquette qui va
privilégier l'affichage du plus
grand nombre de produits. Et
bien entendu, c'est quelque
chose qui va bien
fonctionner. Mais à partir du
moment où nous allons réaliser ce site, et que nous allons nous poser la question de
savoir comment il va fonctionner sur un périphérique mobile, il va y avoir des
questions qui vont être cruciales en terme de fonctionnalités. Est-ce que, pour
représenter le plus grand nombre de produits sur un écran où l'espace est très limité,
il va falloir par exemple créer un diaporama? On pourrait considérer que cette
solution serait satisfaisante, mais peut-être que le diaporama va être un système qui
va être difficile à faire fonctionner pour des utilisateurs. On pourrait à l'inverse se dire:
et bien pour présenter ces produits, nous allons mettre en place au premier niveau
un moteur de recherche, et ce moteur de recherche va permettre à l'utilisateur de
trouver le macaron qu'il recherche. C'est quelque chose effectivement qui
fonctionnerait, mais cela pose d'autres questions: comment allons-nous présenter
d'autres parfums et comment allons-nous proposer à cet utilisateur des suggestions?
Vous voyez qu'il y a une problématique de fonctionnalités qui est liée très clairement
au contexte de l'utilisation. Il faut donc, dans la stratégie de déploiement des sites
Internet Responsive, envisager les différents contextes d'utilisation dès le départ. Et
puis la réalité actuelle, c'est que le périphérique mobile aujourd'hui est devenu
quasiment majoritaire. Il ne s'agit donc plus d'une tendance, mais il s'agit d'une
approche qui va devenir incontournable. Dans les vidéos suivantes, nous allons
entrer dans le détail de manière à voir comment nous allons planifier ce Design
Responsive, créer des maquettes, et puis développer des stratégies de contenu
adaptées au contexte "mobile".

Planifier le design responsive

La planification de sites web avec des Design Responsive peut se révéler parfois
frustrante si l'on n'applique pas les bonnes méthodes. Il s'agit de mettre en place un
flux de production, qui va nous permettre de réaliser un site qui sera adaptable pour
tous les périphériques dans les meilleures conditions.

2
 Bien entendu, chaque projet est
unique, et les exemples que
nous allons voir ne sont pas à
prendre au pied de la lettre, ils
ne sont là que pour vous donner
une idée des méthodes à mettre
en place.

Premièrement, nous allons nous

attacher à connaître le contenu.
Le contenu est le roi, nous allons
donc devoir inventorier ces
contenus et les hiérarchiser.
Dans le cas d'un site de
e.commerce par exemple, nous
allons pouvoir placer en premier
les nouveaux produits, puis les
images de ces produits qui sont
très importantes, les
informations et le contact, le
mécanisme d'achat, c'est-à-dire
la mise en panier et le passage
de commande, et puis des
informations de connexion. Et
vous voyez qu'ici, il ne s'agit que
d'une idée, mais nous avons hiérarchisé. Nous aurions pu très bien décider que les
informations et contacts viendraient en dernier et que le passage de commande
viendrait en troisième position. Vous devez donc : 1- Inventorier les contenus, et 2-
Les hiérarchiser. Ensuite, il va falloir que vous raisonniez "mobile" d'abord à partir du
moment où vous devez travailler pour plusieurs périphériques.

Vous allez donc commencer par

travailler sur le périphérique dont
l'écran est le plus restreint en
terme de taille.

2
 Si nous prenons notre exemple
e.commerce, nous allons mettre
en place dans un premier temps
un logo, et puis nous allons
mettre ensuite en place une en-
tête, puis une navigation, enfin un
article, un deuxième article, et
puis un troisième article. Et vous
voyez que compte tenu de la taille
de notre écran, dans ce cas
précis, nous ne pouvons pas aller
beaucoup plus loin en termes de
répartition de contenu au premier
niveau.

Nous allons voir que sur

un écran d'ordinateur, la
situation va être
différente. Ici, nous
allons mettre en place
notre logo, mais nous
avons, à côté du logo,
de la place. Nous allons
donc pouvoir placer un
élément qui ne va pas
figurer sur la version
pour téléphone portable.
Ensuite nous allons
mettre en place une en-
tête, et cette en-tête,
vous le voyez, est
beaucoup plus large, donc pourra être plus complète ou différente, et puis notre
navigation, et ensuite les articles. Et vous constatez ici que sur un écran au premier
niveau, nous pouvons placer neuf articles alors que sur notre téléphone portable
nous ne pouvions faire figurer que trois articles au maximum. Nous avons donc une
situation qui est bien différente.

2
 L'étape suivante va être de considérer
quels vont être les différents points de
rupture, c'est à dire à partir de quelle
largeur d'écran nous allons faire varier
les mises en page.

Nous allons commencer par

l'écran de plus petite taille, par
exemple déterminer des écrans
en dessous de 480 pixels, et
puis ensuite nous allons mettre
en place l'écran de plus grande
taille, par exemple ici 1200
pixels. Une fois que ces deux
écrans auront été définis, il va
falloir que nous définissions les
points de rupture, c'est-à-dire les
écrans intermédiaires pour lesquels, à chaque fois, la mise en page va changer.

Une fois que ça va être fait, on

va pouvoir mettre en place les
différents éléments, répartir les
contenus pour ces différents
écrans en fonction de nos points
de rupture. Les points de rupture
vont concerner essentiellement
la mise en forme, mais pas
uniquement.

2
 Ils vont également concerner
certaines fonctionnalités,
notamment une fonctionnalité
très importante qui est la
navigation. Vous voyez qu'ici,
nous avons une navigation
que nous pouvons resserrer :
par exemple entre 1000 pixels
et 480 pixels, cette navigation
peut fonctionner. Il suffit
simplement de resserrer la
largeur des différents boutons
qui constituent cette
navigation. Mais en dessous
de 480 pixels, et bien cette
navigation ne va plus tenir dans la largeur. Vous voyez que le quatrième bouton est
passé en dessous. Nous avons donc ici un impact direct de la largeur sur la
fonctionnalité. Il faudra donc trouver une solution différente pour notre navigation. Ça
peut être un menu de type Burger (les trois petites lignes), ou ça peut être un menu
déroulant, ou un menu accordéon qui va se déplier à la demande. Mais il va falloir
que nous trouvions une solution pour des écrans inférieurs à 480 pixels, notamment
des écrans de 420 pixels.

Et puis il y a d'autres choses qu'il va

falloir prendre en compte, c'est
également des fonctions spécifiques
aux périphériques mobiles. Il peut y
avoir des fonctions que vous n'avez
pas sur les ordinateurs, qui peuvent
être la géolocalisation, qui peuvent
être liées au toucher de l'écran, et à
des fonctionnalités de
communication spécifiques aux
périphériques, comme la messagerie
ou la composition de numéros de
téléphone.

Une fois que tous ces points auront

été pris en considération, on va
considérer essentiellement dans un
premier temps l'organisation de la
navigation, ensuite on verra comment
standardiser le code source, et puis il
va falloir faire une analyse réaliste de
ce qu'il est possible de faire et de ce
qu'il n'est pas possible de faire en
termes de Design Responsive.

2
 Effectivement, nous allons nous
poser un certain nombre de
questions, et la question
fondamentale est : peut-on utiliser
une seule structure de documents
pour gérer l'affichage sur tous ces
périphériques que nous avons
définis en fonction de nos points
de rupture ? Si la réponse est
non, il va falloir se reposer une
autre question, c’est : peut-on
redéfinir les objectifs ? Et si la
réponse est non, et bien il va
falloir se poser une autre question
: y a-t-il possibilité de modifier le
contenu ? Et si la réponse est encore non, et bien nous allons arriver vers des
solutions qui vont nous faire abandonner la création d'un Design Responsive, et nous
tourner vers la création, soit d'une application mobile, soit d'un site qui soit spécifique
pour ces périphériques. Si par contre, lorsque nous sommes à la question numéro 2
de redéfinir les objectifs, ou à la question numéro 3 qui est de modifier le contenu, et
que la réponse est oui, et bien là, nous allons pouvoir commencer à construire notre
site Responsive. Et nous aurons ainsi maximisé l'organisation de notre flux de
production, et nous n'aurons pas perdu de temps à déployer des solutions qui se
révéleraient, in fine, des échecs. Et puis, puisque l'on parle de temps, il va falloir que
vous vous prépariez à rencontrer des obstacles inattendus au fur à mesure que vous
allez avancer dans votre conception. Il faut donc que vous soyez assez larges dans
la mise en place de votre planning, de telle sorte que lorsque vous rencontrerez ces
obstacles, vous ne les intégrerez pas comme étant des problèmes graves, mais
comme étant des solutions à trouver. Dans les vidéos suivantes, nous allons voir
comment gérer les contenus.

Créer des maquettes responsives

Dans votre flux de production
pour créer des designs
responsive, il y a une étape qu'il
ne faut absolument pas zapper,
c'est celle de la création de
maquettes. Vous devez à tout
moment avoir une idée très
précise de la façon dont les
contenus vont être répartis sur
les différents écrans en fonction
des points de rupture. Vous allez
donc demander à vos créatifs,
ou si vous le faites vous-même,
vous allez vous le demander à
vous-même, de réaliser des
maquettes.

2
 Et plus tôt vous réaliserez des
maquettes, plus tôt vous
prototyperez, et plus efficace
sera votre flux de production.
Vous allez pouvoir travailler avec
des outils, dans un premier
temps, comme Mockingbird, qui
vont vous permettre de créer des
maquettes filaires. Il s'agit de
maquettes de structures, où vous
allez mettre en place uniquement
des éléments comme vous voyez sur cette page, qui se mettent en place à partir
d'un menu latéral où vous allez choisir les différents éléments. Et vous allez donc
réaliser des maquettes pour les différents écrans sur lesquels vous avez à travailler.
Vous pouvez vous connecter sur Mockingbird et vous pouvez tester cet outil
gratuitement de manière à voir comment il fonctionne. Il y a bien entendu d'autres
outils qui vont vous permettre de créer des maquettes filaires. Vous pouvez
également vous reporter aux formations de notre catalogue sur le prototypage. Et
puis aujourd'hui, une fois que les maquettes filaires ont été créées et une fois que
vous avez avancé dans votre projet, vous allez pouvoir passer à ce que l'on appelle
des maquettes fonctionnelles.

Vous pouvez travailler pour ces

maquettes fonctionnelles avec un
outil comme Adobe Experience
Design qui, à l'heure où nous
réalisons cette formation, est
encore en bêta version, ou vous
pouvez également travailler avec
un outil comme Figma qui va vous
permettre en ligne de créer des
maquettes qui sont très proches
des maquettes filaires mais qui
vont être fonctionnelles, c'est-à-
dire que vous allez pouvoir relier
différents éléments entre eux, et simuler des clics ou des interactions notamment de
toucher sur les périphériques mobiles. Et ces maquettes sont très intéressantes à
mettre en place. Alors Figma est un module qui est freemium, donc il y a une version
gratuite que vous allez pouvoir également tester pour voir quel est l'outil qui
correspond le mieux à votre protocole de travail. En tout état de cause, il va falloir
systématiquement qu'à chaque étape de votre production vous ayez une idée très
précise de la façon dont les contenus sont répartis, et vous n'allez pouvoir avoir cette
idée qu'à l'aide de maquettes. Pensez donc à toujours intégrer la création et la
validation de maquettes responsive dans votre flux de production.

2
 Développer une stratégie de contenu
La stratégie de contenu est vraiment au coeur du problème. Si aujourd'hui nous
mettons en ligne des sites internet, c'est pour proposer des contenus aux utilisateurs
mais également pour que ceux-ci puissent interagir avec ces contenus. Que ce soit
des sites informatifs ou que ce soit des sites à visée commerciale, le problème reste
le même : il faut que les contenus soient particulièrement bien présentés et adaptés
au type d'écran sur lesquels ils vont être consultés. Voyons comment mettre en place
une stratégie de contenu.

Premièrement nous allons devoir

identifier le contenu pertinent. Ensuite
il va falloir organiser la structure de ce
contenu et puis nous allons devoir
également gérer ce contenu, et pour
gérer ce contenu nous allons devoir
savoir comment il va être réparti.

Nous pouvons avoir un contenu réparti

sur quatre colonnes et puis en fonction
d'un point de rupture il va être ensuite
réparti sur trois puis sur deux, puis sur
une colonne et nous n'allons pas
placer le même contenu ni dans la
même disposition sur chacun de ces
écrans. Il va donc falloir gérer ces
contenus.

Voyons par exemple une mise en page

où nous allons proposer des produits.
Ici nous avons dans un premier temps
la présentation du visuel du produit,
ensuite nous avons son descriptif et
puis nous présentons des produits
similaires et puis enfin la possibilité de
passer la commande. Et sur un écran
suffisamment large comme c'est le cas
ici, vous voyez que cette disposition est
tout à fait satisfaisante et que nous
allons pouvoir dérouler un certain
nombre de produits et que les utilisateurs vont pouvoir rapidement non seulement
faire leur choix mais d'autre part recevoir des suggestions de produits
complémentaires.

2
À partir du moment où nous allons passer sur des écrans
qui vont être de très faible largeur, la problématique va être
différente puisque nous ne pourrons pas présenter les
choses de la même façon. Nous serons dans une
présentation qui ne sera plus une présentation dans la
largeur mais une présentation dans la hauteur. La répartition
du contenu va donc être différente et il va falloir gérer ce
contenu, c'est-à-dire effectuer des choix et définir des
priorités d'affichage des contenus. Vous voyez par exemple
sur cet écran que la mise en panier ne peut pas apparaître
en affichage de premier niveau.

Pour gérer ces contenus, nous allons donc

avoir des objectifs prioritaires qui vont être
dans un premier temps de faire valoir le
contenu le plus important du point de vue de
l'utilisateur, et puis ensuite nous allons établir
des relations claires et enfin nous allons
faciliter l'accès au maximum sur les petits
écrans.

Nous allons donc commencer par lister le

contenu. Nous pouvons ici définir qu'il y a le
visuel du produit. Nous avons ensuite la
présentation de produits similaires. Nous
avons la mise en panier et nous avons la
description du produit.

Nous allons dans un deuxième temps

hiérarchiser ces éléments. Nous pouvons
décréter que le visuel produit est le plus
important, ensuite la mise en panier pour nous
est fondamentale car nous voulons que
l'utilisateur puisse effectuer un achat
d'impulsion, et nous allons ensuite placer la
description du produit et puis enfin les produits
similaires. Nous avons donc dans un premier
temps défini les contenus et dans un deuxième
temps nous les avons hiérarchisés.

2
 Nous allons maintenant voir comment
répartir ces contenus en fonction des
dispositions et en fonction des tailles
des écrans pour les périphériques que
nous ciblons. Nous pouvons sur quatre
colonnes placer les éléments dans
l'ordre suivant. Ce n'est pas un
problème ici de placer la mise en
panier en bout de colonne puisque
même si c'est quelque chose qui est
considéré comme important en termes
de hiérarchie, vous voyez que il apparaît au premier niveau. Sur trois colonnes par
contre, nous allons avoir à supprimer un des éléments et nous avons un choix à
faire. Donc une fois que nous avons défini les contenus, hiérarchisé les contenus, au
moment de la répartition de ces contenus nous allons devoir faire des choix et ici le
choix a été de reléguer les suggestions de produits similaires ailleurs. Sur deux
colonnes, nous allons pouvoir placer la description du produit sous le visuel du
produit et placer en face le dispositif de mise en panier. Et puis sur une colonne,
nous n'allons placer que les éléments fondamentaux, c'est-à-dire le produit et la mise
en panier. Ça ne veut pas dire que les autres éléments qui ne font pas partie de
notre choix primaire vont disparaître, mais simplement ils vont apparaître d'une façon
qui sera complémentaire et qui ne sera pas un affichage de premier niveau.

Lorsque nous allons faire

notre mise en page, nous
allons partir du plus petit
vers le plus grand et nous
allons donc mettre en
place les différents
éléments pour réaliser
notre mise en page. Vous
voyez que ici nous avons
des maquettes filaires
extrêmement simplifiées
à titre d'exemple mais
vous devrez réaliser des
maquettes peut être un petit peu plus précises pour que tous les éléments qui
devront être mis en place soit bien présents sur les écrans pour lesquels vous allez
travailler. Une fois que cette étape aura été réalisée, vous voyez que nous avons une
compréhension beaucoup plus claire des types de contenu que nous allons avoir à
faire réaliser, que ça soit en termes de taille des images ou en terme également de
contenu rédactionnel. Il est donc très important de ne pas zapper cette étape et de
bien intégrer la phase de contenu responsive dans notre flux de production.

2
 Comprendre le contexte mobile
Tout au long de cette formation, nous avons utilisé le terme de contexte pour faire
référence à l'expérience et à l'interaction des utilisateurs avec nos sites à l'aide de
différents périphériques. Comprendre le contexte est utile car cela va nous aider à
faire des hypothèses sur la façon dont quelqu'un va utiliser notre site, quel va être
son point de vue, ses capacités et également les limites qu'il va rencontrer. Pendant
très longtemps nous avons conçu uniquement pour le contexte de bureau et le
contexte mobile doit également être pris en compte. Alors c'est quelque chose qui
est relativement nouveau même s'il y a une évolution rapide entre les premiers
téléphones et puis les smartphones que nous utilisons actuellement.

Il faut bien prendre en compte le fait que non

seulement cette évolution ne va pas s'
arrêter mais elle va également s'accélérer.

Nous entendons un certain nombre

d'affirmations à propos du contexte. On va
fréquemment vous dire que les utilisateurs
mobiles par nature se déplacent et c'est
tout à fait juste. On va également vous dire
que les utilisateurs mobiles sont pressés :
ils n'ont qu'un temps limité pour consulter
le contenu que vous leur proposez et c'est
également vrai. La conséquence est qu'il
va falloir que nous simplifions
considérablement nos contenus en
fonction de ce contexte mobile. Et puis on
va également entendre des affirmations sur
les connexions. On va nous dire les connexions sont lentes et je vous l'ai déjà répété
à plusieurs reprises dans les vidéos précédentes. Quoiqu'en disent les opérateurs, il
faut se baser sur le fait que les connexions dans le meilleur des cas correspondent à
de la 3G et vous allez également entendre cette évidence que les écrans sont petits
puisque de toute façon un téléphone portable par nature doit être porté et tenir dans
une poche et c'est également vrai : cela veut dire qu'il va falloir non seulement
simplifier mais également limiter les fonctionnalités et l'appel aux différentes
ressources.

2
 Nous sommes
aujourd'hui tous
mobiles. Or les
utilisateurs de
mobiles vont
présenter une
diversité dans les
comportements et
dans les besoins. Donc le contexte mobile n'est pas tout. Il y a bien entendu les
affirmations que nous venons de voir précédemment mais il va falloir également que
nous ciblions un public particulier en fonction de nos objectifs.

Et le seul point commun avec tous

ces utilisateurs, c'est qu'ils sont
connectés aujourd'hui en
permanence. On va donc pouvoir
s'adresser à eux dans leurs
déplacements.

Ce qui est certain par rapport au contexte

mobile, c'est que les écrans sont bien
entendu de taille réduite et de taille variée
: nous ne pouvons pas travailler pour une
seule taille d'écran et puis que nous
avons une connexion permanente. Mais il
faut également prendre en compte les
spécificités liées au contexte mobile et qui
vont nous donner des axes qui vont nous
permettre de pouvoir mieux communiquer
auprès des utilisateurs. Sur les
périphériques mobiles les utilisateurs
disposent d'un GPS, ils peuvent être
géolocalisés et nous allons donc pouvoir
leur envoyer des informations
contextuelles et ils vont interagir avec ces périphériques avec le toucher avec le
doigt. Il faudra particulièrement le prendre en compte dans la réalisation de nos
interfaces en facilitant le toucher sur nos écrans. Il y a également dans ces
téléphones à des accéléromètres et puis une caméra, ce qui est très important, un
microphone sans oublier le lecteur d'empreintes et bien entendu puisqu'il s'agit
d'outils de communication la possibilité de téléphoner et d'envoyer des messages
texte. Nous voyons donc que le contexte mobile nous offre beaucoup plus de
possibilités de communication qu'il ne nous impose de contraintes.

2
 Exploiter les fonctionnalités mobiles
Nous avons vu dans la vidéo précédente où nous avons étudié le contexte mobile
que ces périphériques nous proposent des fonctionnalités spécifiques qui peuvent
être intéressantes et que nous avons envie d'exploiter. Notre objectif est toujours de
créer des expériences qui soient attrayantes pour l'utilisateur sur les appareils avec
lesquels il va consulter nos contenus, mais il va falloir que nous fassions quand
même attention.

Les attentes des utilisateurs sont

très claires, l'utilisateur n'attend
pas une fonctionnalité, il attend
une expérience enrichie et
intégrée, c'est-à-dire que la
fonctionnalité doit pouvoir lui
apporter une possibilité
supplémentaire. Une fonctionnalité n'est pas pour l'utilisateur valable s'il s'agit d'un
exploit technique. Pour lui cette fonctionnalité doit répondre à un besoin qu'il va avoir
dans la consultation des contenus que nous lui proposons.

Les outils que nous allons pouvoir utiliser

sont le GPS, l'accéléromètre, également la
boussole.

Nous pouvons également travailler avec la

caméra, le microphone, les haut-parleurs. Il
y a également d'autres possibilités : il faut
toujours se rappeler que nous avons un
écran qui est un écran tactile et nous allons
également travailler avec un périphérique
dont les fonctions de base sont le téléphone
et la messagerie. Nous allons donc pouvoir
exploiter essentiellement ces
fonctionnalités. Et puis n'oublions pas que
maintenant tous ces smartphones sont
équipés de Bluetooth, nous allons donc
également pouvoir utiliser cet outil de

2
communication pour pouvoir envoyer des messages lorsqu ils vont passer à
proximité de bornes que nous aurons placées par exemple dans un magasin.
L'impact sur la conception de ces fonctionnalités est variable.

Il faut quand même se poser

des questions
fondamentales.
Premièrement, comment
l'utilisateur va-t-il interagir
avec le site ? Deuxièmement,
quelles sont les attentes de
ces utilisateurs ? Il ne sert à
rien d'implémenter une
fonctionnalité qui n'est pas
attendue. Ensuite comment
ces fonctionnalités vont-elles
s'intégrer dans la structure responsive du document que nous allons créer et puis
comment nous allons la prendre en compte pour le design et en particulier dans la
répartition du contenu à l'écran ? Et enfin existe-t-il des alternatives aux
fonctionnalités que l'on a envie de mettre en place ?

Nous avons ici un exemple de

fonctionnalité qui est en fait d'utiliser la
balise téléphone où nous avons spécifié
dans le lien à href qu'il s'agit d'un téléphone
et nous avons spécifié le numéro de
téléphone et lorsque l'utilisateur appuiera
sur ce lien le fait que nous ayons spécifié
dans la balise qu'il s'agissait d'un téléphone
fera en sorte que son téléphone
déclenchera la composition de ce numéro.
Il s'agit ici d'une fonctionnalité qui est liée
aux périphériques mobiles smartphones et
qui donc est prévue par le code HTML 5.

Dans certains cas, les choses ne sont pas

aussi simples et il va falloir recourir à des
Java Scripts qui vont pouvoir récupérer des
informations sur par exemple la
géolocalisation.

2
 Vous pouvez notamment vous
0intéresser à la bibliothèque
Modernizr qui va vous permettre
de détecter un certain nombre de
paramètres liés aux périphériques
mobiles et qui vont ensuite pouvoir
vous permettre de déclencher des
fonctionnalités qui vont être liées à
ces paramètres comme les
paramètres de géolocalisation ou
l'accéléromètre, voire la boussole.

Vous allez devoir considérer

attentivement les fonctionnalités que
vous souhaitez utiliser puis
rechercher ce qui est nécessaire
pour pouvoir ajouter cette
fonctionnalité. Une fois que vous
allez comprendre ce qui est impliqué
dans sa mise en œuvre, vous serez
mieux préparé à décider si cette
fonctionnalité est appropriée pour
votre conception. Indépendamment
de ce que vous décidez, ne perdez
jamais de vue qu’au final, c'est
l'utilisateur qui va décider.

Produire du HTML fluide

Bien que le HTML ne reçoive pas autant
d'attention que les CSS lorsque l'on parle
de conception de sites web responsives,
la façon dont nous allons structurer notre
HTML est tout aussi importante que la
façon dont nous allons créer nos propres
styles. Il y a donc une importance du
codage du HTML qu' il faut prendre en
compte. Bien entendu, lorsque nous
allons travailler pour des tailles d'écrans
différents et des périphériques qui vont se
comporter différemment, il y a un besoin
de style mais il y a également besoin
d'une structure solide pour le code.

2
 Les bonnes pratiques sont dans un premier
temps d'écrire du code propre sans balise qui
soit exotique ou redondante et puis ensuite il
va falloir utiliser le HTML 5 et pour pouvoir
bien structurer ces documents, vous allez
pouvoir vous intéresser aux microformats sur
schema.org également sur le site du
w3.org/TR/microdata. En utilisant les
microformats du HTML 5 et bien entendu un
code propre, vous allez produire des sites
responsives qui seront solides.

Il faut également penser à utiliser des zones de

contenus qui sont des zones de contenus
standard : plus nous standardiserons ces
zones de contenus, par exemple avec des
balises comme article et puis nous allons
devoir fragmenter notre code.

Lorsque nous allons prévoir des mises en page

pour différents périphériques, nous allons
structurer notre code de façon différente en
fonction des périphériques pour lesquels nous
allons travailler.

On va pouvoir également utiliser des scripts.

Par exemple lorsque nous allons avoir un menu

2
à afficher, nous allons pouvoir avec un script de type JavaScript modifier la
présentation de ce menu ici avec le burger menu. L'utilisation de ces scripts n'est pas
toujours forcément très facile et il va falloir que vous vous documentiez. Mais il existe
de nombreuses librairies de script qui sont très utiles et qui sont très bien
documentées.

Vous pouvez vous intéresser

notamment à la bibliothèque
Southstreet de Filamentgroup qui va
rassembler un certain nombre de
propriétés qui vont détecter au niveau
des périphériques des fonctionnalités
et avec laquelle vous allez pouvoir
également produire des contenus
particulièrement bien adaptables.
Vous voyez donc qu'il y a d'un côté
bien entendu les CSS mais il y a
également de l'autre côté la nécessité
d'écrire un code HTML qui soit fluide
et propre.

Tester le design responsive

2
 Les tests sont une composante
essentielle dans la gestion de
projet web et c'est
particulièrement vrai en ce qui
concerne le design responsive.
Alors il y a pléthore d'outils qui
permettent de gérer ce genre de
tests et je vais vous en présenter
quelques-uns qui
personnellement m'ont intéressé
et que vous allez pouvoir tester.
Mais dites-vous bien que ces
outils, qu'ils soient en ligne ou que vous les téléchargiez, sont des outils qui ne
pourront jamais totalement émuler correctement les périphériques physiques. Il va
donc falloir que vous vous dotiez des principaux périphériques qui sont utilisés par
votre public-cible afin de réellement effectuer des tests qui minimiseront les erreurs.
Nous pouvons commencer ici par voir le Multi Device Website Mockup Generator qui
va vous permettre de naviguer à l'intérieur de ces différents écrans avec un même
site dont vous aurez entré l'URL ici. Ce qui est intéressant, c'est que vous avez une
vue d'ensemble immédiate et puis d'autre part que vous allez pouvoir effectuer une
capture d'écran pour pouvoir la présenter notamment à vos clients.

Il y a un autre outil qui est très intéressant qui est le

Responsinator et qui va permettre ici de vérifier ce que
va donner votre site web dans différents périphériques,
que ce soit en vertical ou que ce soit en horizontal. Vous allez donc pouvoir avec cet
outil vérifier que votre site s'affiche correctement sur ces différents périphériques.

Et puis il y a également un
site en ligne qui est très

2
intéressant qui est isResponsive. Avec isResponsive, vous allez pouvoir non
seulement afficher votre site pour ces périphériques mais vous allez pouvoir, et c'est
très intéressant, faire varier la largeur de l'écran de manière à contrôler où se
trouvent vos points de rupture. Donc c'est un outil qui sur ce plan est très intéressant.

Et puis enfin je vous propose

un autre outil qui est le Linked
Union Emulator, qui pour
l'instant est encore en Beta et
qui est une extension de
Chrome. Vous allez donc le
trouver sur le Chrome
Webstore et vous allez en
cliquant sur le bouton l'ajouter
à Chrome et vous pourrez
ensuite vérifier la validité de
vos sites avec un émulateur. Il
s'agit d'un émulateur qui va
fonctionner dans Chrome mais qui va fonctionner sur votre ordinateur. Il ne s'agit pas
d'un service en ligne. Rappelons encore pour conclure sur ce sujet que tous ces
émulateurs et tous ces services en ligne ne remplaceront jamais les tests qui seront
effectués sur les vrais périphériques physiques utilisés par votre public cible.

Découvrir les frameworks à grilles fluides

Plutôt que de tout
construire from scratch,
c'est-à-dire à partir de
zéro, nous allons pouvoir
nous appuyer sur des
générateurs de grilles et
des frameworks qui vont
nous permettre de mettre
en place des grilles fluides
et vous allez le voir d'aller
bien au-delà car ils vont
nous procurer tous les
éléments nécessaires pour
pouvoir bâtir des sites qui soient responsives sans avoir à entreprendre tout le travail
de base de fondation de ce qui va permettre d'aligner les contenus en fonction des
différentes tailles des écrans.

Le principe de la grille fluide et à

partir d'une maquette qui va être
définie par des colonnes et par
des gouttières de pouvoir
répartir ensuite ce contenu sur
les différents écrans. Alors on a
des mises en page qui peuvent

2
être simples et constantes qui ne vont pas bouger mais on va également avoir des
maquettes qui vont pouvoir évoluer avec des mises en page complexes et variables.

À partir d'une grille fluide, on va

donc pouvoir adapter le contenu
à différentes mises en forme, à
différentes mises en page.

Le système de générateur de
grilles fonctionne en nous
fournissant une feuille de style
CSS qui va nous permettre ensuite
de pouvoir aligner ce contenu en
appliquant des classes. Mais on
peut également travailler avec des
frameworks qui eux vont nous
fournir beaucoup plus que cela. Ils
vont nous fournir bien entendu la
feuille de style CSS mais ils vont
également nous fournir une feuille
de style spécifique pour la
typographie et puis également des
templates, c'est-à-dire des
modèles de mise en page et puis enfin les JavaScripts qui vont nous permettre de
répartir le contenu en fonction de ce qui aura été détecté en termes de largeur
d'écran. Voyons quelques-uns de ces frameworks qui sont particulièrement
intéressants et qui vont vous permettre de gagner un temps précieux et une
productivité certaine.

Vous pouvez commencer par vous

intéresser à Simple Grid qui est une
grille CSS qui va vous permettre de
créer des sites web responsives.

2
Vous n'avez ici qu'à la télécharger et puis ensuite vous appliquerez les classes pour
vos différents éléments. Vous notez que cette grille est basée sur douze colonnes et
puis qu'elle permet de définir la taille des éléments en fonction de la largeur de ces
colonnes. Le code est très simple à comprendre et vous allez pouvoir la tester pour
voir si elle correspond à vos besoins. Mais Simple Grid n'est pas le seul système
existant.

Vous pouvez travailler également avec

Grid Generator et ici on a un système
qui est intéressant parce qu'il va vous
permettre ici de déterminer à partir
d'un nombre de colonnes et puis d'une
marge qui est exprimée en
pourcentage de procéder à un calcul
de la grille. Et puis une fois que vous
avez calculé votre grille, et bien vous
allez pouvoir copier le code à la fois
HTML et le code CSS et le mettre en
application, en appliquant ensuite les
différentes classes pour vos éléments. C'est un système qui va vous permettre de
gagner un temps bien entendu précieux dans la réalisation de vos sites web
responsives.

Et puis on peut aller beaucoup plus loin

par exemple avec Initializr qui a été
créé par Jonathan Verrecchia. Nous
allons pouvoir ici avoir accès à ce que
l'on appelle un FrameWork complet,
c'est-à-dire que on va nous fournir
absolument tous les éléments pour
créer notre site web, y compris les
modèles de base HTML. Le principe de
Initializr est que nous allons pouvoir
travailler avec des standards du
marché, comme par exemple Bootstrap et une fois que nous aurons choisi un
système, nous allons ensuite pouvoir le régler finement, c'est-à-dire décider de ce
dont nous avons ou pas besoin. Et effectivement ce système est intéressant car il va
nous permettre d'alléger considérablement le code. Une fois bien entendu que vous
aurez choisi ce dont vous avez besoin, et bien vous le téléchargerez et vous pourrez
procéder à la création, à la conception de votre site web. Il n'y a pas que Initializr
avec les systèmes Bootstrap. Il y a des concurrents qui sont également très
intéressants en termes de légèreté du code.

On peut par exemple

travailler avec Skeleton qui
fonctionne sur le même
principe. Il s'agit d'un
FrameWork complet mais
dont le code est
extrêmement léger. On
fonctionne sur le même

2
principe d'une grille de 12 colonnes sur 960 pixels qui a tendance aujourd'hui à
devenir le standard. Il y a ensuite un code qui est relativement simple à appliquer et
puis ce qui est intéressant également c'est que la typographie a déjà été prémâchée
d'une certaine manière et vous allez pouvoir l'appliquer très facilement.

Et puis si ces deux

frameworks ne vous
satisfont pas ou ne
correspondent pas tout à
fait à vos besoins, vous
pouvez également vous
intéresser à un autre
FrameWork qui est
également très connu et
très utilisé qui est
Foundation. Le principe de
ce FrameWork est le même
que pour les précédents :
vous allez pouvoir travailler
à la fois avec des outils qui vont être extrêmement faciles à utiliser et puis ce qui est
vraiment très intéressant avec Foundation, c'est que l'on est dans un univers qui a
été conçu de façon extrêmement sémantique, ce qui va permettre d'avoir un code
extrêmement propre sans balises compliquées et qui vont faciliter le travail des
moteurs de recherche qui indexeront ensuite votre site. Vous avez donc le choix à la
fois en termes de générateur de grilles et de frameworks pour pouvoir vous mettre le
pied à l'étrier et commencer à réaliser des sites responsives qui sont basés sur des
standards solides.

Conclure sur le design responsive

Nous voici arrivés au terme de cette
formation consacrée aux bases du design
responsive. J'espère qu'elle vous a
intéressée, autant que j'ai eu du plaisir à la
préparer pour vous. Vous avez
certainement constaté que tous les points
que nous avons vus sont en constante
évolution et que les techniques de
développement de sites doivent en
permanence s'adapter à de nouveaux
périphériques, sachant que le prochain
défi à relever sera celui, vous l'avez
compris, des objets connectés. Et puis la

2
question ne se pose plus aujourd'hui de savoir si votre site doit ou non être responsive : il est
soit responsive, soit condamné à terme. D'autre part, il est très clair que la conception doit être
mobile first, c'est-à-dire prévue pour le mobile d'abord. Souvenez-vous que lorsque l'on va
poser la question à l'utilisateur de base de savoir comment il accède à nos contenus, il ne va
pas répondre avec tel ou tel navigateur ou avec une application mais vous répondra
simplement avec mon téléphone. Cela indique qu'il n'est pas sensible aux techniques que nous
allons utiliser mais aux réponses que nous allons apporter à ses attentes. Et puis par contre se
posera encore quelque temps la question de savoir où placer la limite lorsqu'il va s'agir de
décider de développer soit un site soit une application mobile.

Donc en premier lieu, la

clé de la réussite est de
savoir rester à l'écoute de
votre public cible pour
comprendre quelle est
l'évolution de ces usages
et de leur contexte pour
ensuite adapter vos
dispositifs à ces attentes.
Je vous souhaite de
réaliser avec succès de
très beaux sites
responsives.

2
2