1 Responsive Web Design – Code – Stéphanie Walter
Responsive Web Design
mediaqueries, images & performance
Stéphanie Walte...
2 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie
Designer web et mobile, spécialisée...
3 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie
Partagés sous licence Attribution -...
4 Responsive Web Design – Code – Stéphanie Walter
Application, site dédié, site
responsive, adaptive
Mais de quoi on parle...
5 Responsive Web Design – Code – Stéphanie Walter
6 Responsive Web Design – Code – Stéphanie Walter
lesgrosmotsdumobile.com
7 Responsive Web Design – Code – Stéphanie Walter
Part de marché par pays
http://www.kantarworldpanel.com/smartphone-os-ma...
8 Responsive Web Design – Code – Stéphanie Walter
Comportement utilisateur
http://think.withgoogle.com/mobileplanet/fr/
9 Responsive Web Design – Code – Stéphanie Walter
http://www.themobileplaybook.com/fr/
10 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée
Téléchargement sur un store/market et installation
11 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée
Accès aux fonctionnalités « natives » de l’appareil
12 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée
Branding : mon logo, mes couleurs
13 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée
Impression de performance et utilisation hors ligne
14 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée – les limites
Développement spécifique : iOS, Andr...
15 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée – les limites
Passage par la case « Validation »
16 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée – les limites
Mises à jour non transparentes
17 Responsive Web Design – Code – Stéphanie Walter
L’application dédiée – les limites
Partage de contenu à prévoir dans l’...
18 Responsive Web Design – Code – Stéphanie Walter
Une solution mobile « en ligne »
Un développement unifié et multiplatef...
19 Responsive Web Design – Code – Stéphanie Walter
Une solution mobile « en ligne »
Des mises à jour transparentes pour le...
20 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié
Une URL différente par version
http://m.flickr.com/#/...
21 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié
22 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié
Ne nécessite pas une refonte totale = cohabitation av...
23 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié – les limites
Sur optimisation = perte de repères vis...
24 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié – les limites
Partages sociaux et marketing plus comp...
25 Responsive Web Design – Code – Stéphanie Walter
Et redirection hasardeuse
26 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié – les limites
SEO : duplicate content, URL multiples ...
27 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié – les limites
Maintenance d’une liste d’appareils dét...
28 Responsive Web Design – Code – Stéphanie Walter
Site mobile dédié – les limites
wtfmobileweb.com
29 Responsive Web Design – Code – Stéphanie Walter
“ I don't care who you are or where you’re from I still Love you «
« S’...
30 Responsive Web Design – Code – Stéphanie Walter
http://mediaqueri.es/
31 Responsive Web Design – Code – Stéphanie Walter
http://zurb.com/responsive
32 Responsive Web Design – Code – Stéphanie Walter
Hausse de 211 % des ventes sur mobile.
skinnyties.com
33 Responsive Web Design – Code – Stéphanie Walter
www.brice.fr
34 Responsive Web Design – Code – Stéphanie Walter
www.liberation.fr
35 Responsive Web Design – Code – Stéphanie Walter
Pourquoi partir sur un site responsive ?
36 Responsive Web Design – Code – Stéphanie Walter
Un processus unifié
Un seul développement = maintenance facilitée sur l...
37 Responsive Web Design – Code – Stéphanie Walter
SEO friendly
SEO friendly : une seule URL, une seule stratégie, partage...
38 Responsive Web Design – Code – Stéphanie Walter
SEO friendly
Un label « mobile-friendly » sur les sites pour Google
39 Responsive Web Design – Code – Stéphanie Walter
40 Responsive Web Design – Code – Stéphanie Walter
Business friendly
Un impact non négligeable sur le ROI
• + 42% d’augmen...
41 Responsive Web Design – Code – Stéphanie Walter
Un site responsive – les limites
• Moins d’accès au hardware de
l’appar...
42 Responsive Web Design – Code – Stéphanie Walter
Quelle stratégie pour quel usage ?
43 Responsive Web Design – Code – Stéphanie Walter
Site en m. dédié (ou beta en m. responsive)
Planter l’idée d’une straté...
44 Responsive Web Design – Code – Stéphanie Walter
BBC news beta responsive : m.bbc.com/news
45 Responsive Web Design – Code – Stéphanie Walter
Retrofitting
Prendre un site existant, détruire les largeurs, le faire ...
46 Responsive Web Design – Code – Stéphanie Walter
Site Responsive Mobile First
On repart de zéro et on refond tout le sit...
47 Responsive Web Design – Code – Stéphanie Walter
Page par page
Aka “on commence par une portion du site” (budget, temps,...
48 Responsive Web Design – Code – Stéphanie Walter
Cohabitation application / site responsive
Site responsive // app iOS /...
49 Responsive Web Design – Code – Stéphanie Walter
Un site responsive, la base technique
• Grilles fluides
• CSS3 pour ré-...
50 Responsive Web Design – Code – Stéphanie Walter
Le concept de viewport
et de pixel sur mobile
51 Responsive Web Design – Code – Stéphanie Walter
Un pixel n’est pas un pixel
• Le pixel est l'unité minimale adressable ...
52 Responsive Web Design – Code – Stéphanie Walter
Le viewport
Surface virtuelle qu’un mobile
accepte d’afficher par défau...
53 Responsive Web Design – Code – Stéphanie Walter
Le viewport
Comment expliquer qu’allocine.fr rentre en entier sur mon m...
54 Responsive Web Design – Code – Stéphanie Walter
Le viewport
La taille du viewport dépend du navigateur : entre 800 et 1...
55 Responsive Web Design – Code – Stéphanie Walter
La balise meta viewport
• Se place dans le <head> et permet de prendre ...
56 Responsive Web Design – Code – Stéphanie Walter
Sans contrôle du viewport
Largeur du « viewport » = 980 px (Android)
57 Responsive Web Design – Code – Stéphanie Walter
Prendre le contrôle du viewport
<meta name="viewport" content=" width=d...
58 Responsive Web Design – Code – Stéphanie Walter
En résumé
La première étape pour créer un site responsive est de prendr...
59 Responsive Web Design – Code – Stéphanie Walter
D’autres valeurs possibles
<meta tag> Exemple définition
width width=de...
60 Responsive Web Design – Code – Stéphanie Walter
Attention à ne pas désactiver le zoom
• Il est tentant d’utiliser ce qu...
61 Responsive Web Design – Code – Stéphanie Walter
Les standards
• Meta viewport = Apple
• Bug dans le « snap mode » IE 10...
62 Responsive Web Design – Code – Stéphanie Walter
Des unités fluides pour
un design fluide !
63 Responsive Web Design – Code – Stéphanie Walter
Une mise en page fluide pour du responsive
La première étape pour passe...
64 Responsive Web Design – Code – Stéphanie Walter
Liquide, adaptive, responsive layout
liquidapsive.com
65 Responsive Web Design – Code – Stéphanie Walter
Unité fixe
• Le Pixel - px
– Unité « fixe »
– Dépendance à la résolutio...
66 Responsive Web Design – Code – Stéphanie Walter
Unités fluides
• Le Cadratin – em
– Unité « fluide »
– Sur une police :...
67 Responsive Web Design – Code – Stéphanie Walter
Unités fluides
• Pourcentage - %
– Unité « fluide »
– Sur une police : ...
68 Responsive Web Design – Code – Stéphanie Walter
Unités fluides
• Root EM – rem
– Unité « fluide »
– Sur une police : ta...
69 Responsive Web Design – Code – Stéphanie Walter
Unités fluides
Support de rem
70 Responsive Web Design – Code – Stéphanie Walter
Unités fluides
• vw vh
– Relatives à la taille du viewport (fenêtre
de ...
71 Responsive Web Design – Code – Stéphanie Walter
Unités fluides
vmin = plus petite entre vw ou vh
vmax = plus grande ent...
72 Responsive Web Design – Code – Stéphanie Walter
Unités fluides
Support de vw, vh, vmin, vmax
73 Responsive Web Design – Code – Stéphanie Walter
Les largeurs fluides
• min-width : pour une largeur minimum
• max-width...
74 Responsive Web Design – Code – Stéphanie Walter
En résumé
.wrapper {
max-width: 1000px;
}
.sidebar {
width: 20%
}
.main...
75 Responsive Web Design – Code – Stéphanie Walter
Adapter son contenu et
mise en page flexible :
les media-queries
76 Responsive Web Design – Code – Stéphanie Walter
Les media queries
• CSS2 : media = print, media = screen, media = handh...
77 Responsive Web Design – Code – Stéphanie Walter
Cibler selon la taille
Les media-queries permettent d’écrire du CSS en ...
78 Responsive Web Design – Code – Stéphanie Walter
Deux syntaxes, comme en CSS2
<link rel="stylesheet" type="text/CSS" med...
79 Responsive Web Design – Code – Stéphanie Walter
Deux syntaxes, comme en CSS2
body {
max-width: 1024px;
}
@media (max-wi...
80 Responsive Web Design – Code – Stéphanie Walter
Les media queries en pratique
body{
background-color:rgb(211, 189, 204)...
81 Responsive Web Design – Code – Stéphanie Walter
Les plus utilisées
Media query Utilisation
min-width: … px Quand le vie...
82 Responsive Web Design – Code – Stéphanie Walter
Les media queries mutuellement exclusifs
• On applique chaque style sép...
83 Responsive Web Design – Code – Stéphanie Walter
Concept de point de rupture
Le design se réadapte à la taille du naviga...
84 Responsive Web Design – Code – Stéphanie Walter
Choisir les points de rupture
FAUX !
(enfin plutôt
suicidaire et non
fu...
85 Responsive Web Design – Code – Stéphanie Walter
Concept de point de rupture
Définir les points de rupture (breakpoints)...
86 Responsive Web Design – Code – Stéphanie Walter
Choisir les points de rupture
• Oubliez le mythe des périphériques, on ...
87 Responsive Web Design – Code – Stéphanie Walter
En pratique, conception mobile first
matrioshka dolls. retro filter via...
88 Responsive Web Design – Code – Stéphanie Walter
En pratique, conception mobile first
http://codepen.io/inpixelitrust/pe...
89 Responsive Web Design – Code – Stéphanie Walter
En pratique, conception mobile first
• Sur Mobile, le flux « normal » d...
90 Responsive Web Design – Code – Stéphanie Walter
En pratique, conception mobile first
@media (min-width:480px) and
(max-...
91 Responsive Web Design – Code – Stéphanie Walter
En pratique, conception mobile first
@media (min-width: 640px){
.wrappe...
92 Responsive Web Design – Code – Stéphanie Walter
En pratique, conception mobile first
@media (min-width:480px) and (max-...
93 Responsive Web Design – Code – Stéphanie Walter
En pratique, conception mobile first
@media (min-width: 1024px){
.conte...
94 Responsive Web Design – Code – Stéphanie Walter
Flexbox FTW
http://www.alsacreations.com/tuto/lire/1659-une-grille-
res...
95 Responsive Web Design – Code – Stéphanie Walter
Flexbox FTW
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
96 Responsive Web Design – Code – Stéphanie Walter
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
97 Responsive Web Design – Code – Stéphanie Walter
Les « grid framework »
• Automatiser la tâche : ne pas réinventer la ro...
98 Responsive Web Design – Code – Stéphanie Walter
En résumé
• Utiliser des media-queries pour créer du style adaptatif et...
99 Responsive Web Design – Code – Stéphanie Walter
L’adaptation au-delà de
la mise en page
100 Responsive Web Design – Code – Stéphanie Walter
Gérer les débordements de texte : overflow hidden
• Masquer tous les d...
101 Responsive Web Design – Code – Stéphanie Walter
Gérer les débordements de texte : word-wrap: break-
word
• Découper le...
102 Responsive Web Design – Code – Stéphanie Walter
Gérer les débordements de texte : text-overflow: ellipsis
• Masquer la...
103 Responsive Web Design – Code – Stéphanie Walter
Des images responsive
Fonctionne même avec une taille fixe dans le HTM...
104 Responsive Web Design – Code – Stéphanie Walter
Les vidéos responsive
• Rendre une vidéo fluide avec la balise
<video>...
105 Responsive Web Design – Code – Stéphanie Walter
Le problème des iframes … http://codepen.io/inpixelitrust/pen/myKveY
106 Responsive Web Design – Code – Stéphanie Walter
Le problème des iframes …
• Donner une largeur de 100% à l’iframe ? Ou...
107 Responsive Web Design – Code – Stéphanie Walter
Le problème des iframes … le gros vilain hack
1. Encapsuler l’iframe d...
108 Responsive Web Design – Code – Stéphanie Walter
Le problème des iframes la version viewport units
@video-width: 780px;...
109 Responsive Web Design – Code – Stéphanie Walter
Le problème des iframes … Résolu
Fonctionne avec « tout » type d’ifram...
110 Responsive Web Design – Code – Stéphanie Walter
Embed Responsively
http://embedresponsively.com/
111 Responsive Web Design – Code – Stéphanie Walter
Les cartes (Google Maps)
Utiliser le même « hack » que les vidéos ?
ht...
112 Responsive Web Design – Code – Stéphanie Walter
Les cartes (Google Maps)
Utiliser une carte « statique » (= image) pou...
113 Responsive Web Design – Code – Stéphanie Walter
Typographie Responsive un peu de lecture
Responsive Typography:The Bas...
114 Responsive Web Design – Code – Stéphanie Walter
Et tellement plus …
• Gestion des tableaux ??
– Supprimer des colonnes...
115 Responsive Web Design – Code – Stéphanie Walter
Et tellement plus …
Voir le cours d’ergonomie mobile pour plus de comp...
116 Responsive Web Design – Code – Stéphanie Walter
Pour aller plus loin consultez ma formation
Formation Design et Ergono...
117 Responsive Web Design – Code – Stéphanie Walter
Le problème des images
en mobilité
118 Responsive Web Design – Code – Stéphanie Walter
Le « problème » des images en responsive
• Plusieurs choses qu’on « ai...
119 Responsive Web Design – Code – Stéphanie Walter
Les problème du retina
• 4 x plus de pixels sur une même zone
• Des im...
120 Responsive Web Design – Code – Stéphanie Walter
Les problème du retina
• Doubler la taille physique des images ?
• Réd...
121 Responsive Web Design – Code – Stéphanie Walter
[CSS] image @2x uniquement pour les écrans HDPI
• Une solution en CSS ...
122 Responsive Web Design – Code – Stéphanie Walter
[CSS] image @2x uniquement pour les écrans HDPI
• Version standard : m...
123 Responsive Web Design – Code – Stéphanie Walter
Les solutions futures : <picture>
• Proposée par http://responsiveimag...
124 Responsive Web Design – Code – Stéphanie Walter
Les solutions futures : <picture>
• D’un point de vue de la direction
...
125 Responsive Web Design – Code – Stéphanie Walter
Can I use <picture> ?
http://caniuse.com/#search=picture
126 Responsive Web Design – Code – Stéphanie Walter
Les solutions futures : attribut « srcset »
• Une proposition au W3C p...
127 Responsive Web Design – Code – Stéphanie Walter
« srcset » et images retina
• On peut utiliser des descripteurs 1x, 2x...
128 Responsive Web Design – Code – Stéphanie Walter
« srcset » et le descripteur « w »
• On peut ajouter à notre liste d’i...
129 Responsive Web Design – Code – Stéphanie Walter
« srcset » et « size »
• L’attribut « size » permet de spécifier la la...
130 Responsive Web Design – Code – Stéphanie Walter
« srcset » et « size »
« si la fenêtre d’affichage est plus grande que...
131 Responsive Web Design – Code – Stéphanie Walter
Can I use srcset ?
http://caniuse.com/#search=srcset
132 Responsive Web Design – Code – Stéphanie Walter
Et on peut mélanger picture et srcset
Bon, ok, c’est peut-être un poil...
133 Responsive Web Design – Code – Stéphanie Walter
Un peu de lecture
• Responsive Images Done Right: A Guide To <picture>...
134 Responsive Web Design – Code – Stéphanie Walter
La bidouille de compression JPG
• Compresser l’image
en double de tail...
135 Responsive Web Design – Code – Stéphanie Walter
Aller plus loin …
Which responsive images solution should you use?
136 Responsive Web Design – Code – Stéphanie Walter
Les « font-icons » c’est flexible !
• Plus besoin d’images et sprites
...
137 Responsive Web Design – Code – Stéphanie Walter
Les « font-icons » c’est flexible !
• Inconvénients :
– Monochrome
– P...
138 Responsive Web Design – Code – Stéphanie Walter
icomoon.io
139 Responsive Web Design – Code – Stéphanie Walter
Utilisation
• Chargement de la font-icon dans la CSS comme n’importe q...
140 Responsive Web Design – Code – Stéphanie Walter
Le SVG : s’abstraire des pixels
• Scalable Vector Graphics
• Vectoriel...
141 Responsive Web Design – Code – Stéphanie Walter
Le SVG : s’abstraire des pixels
Tutoriel logo cliquable en SVG
• Génér...
142 Responsive Web Design – Code – Stéphanie Walter
Le SVG : s’abstraire des pixels
Resolution Independence With SVG
• Pos...
143 Responsive Web Design – Code – Stéphanie Walter
Un SVG responsive
Making SVGs Responsive with CSS
• On peut ajouter de...
144 Responsive Web Design – Code – Stéphanie Walter
Un système d’icônes SVG réutilisables
https://lincolnloop.com/blog/svg...
145 Responsive Web Design – Code – Stéphanie Walter
Un système d’icônes SVG réutilisables
On peut même en changer les coul...
146 Responsive Web Design – Code – Stéphanie Walter
https://useiconic.com/icons/
147 Responsive Web Design – Code – Stéphanie Walter
Animations d’icônes SVG
http://www.transformicons.com/ http://livicons...
148 Responsive Web Design – Code – Stéphanie Walter
Quelques ressources pour découvrir le SVG
• The Ultimate guide to SVG
...
149 Responsive Web Design – Code – Stéphanie Walter
Se passer des images : gradient
• Remplacer des images par des gradien...
150 Responsive Web Design – Code – Stéphanie Walter
Se passer des images : border-radius
• Création de coins arrondis
bord...
151 Responsive Web Design – Code – Stéphanie Walter
Se passer des images : box-shadow
• Créer des ombres portées sans imag...
152 Responsive Web Design – Code – Stéphanie Walter
Créer des boutons en pure CSS
• Pas d’images utilisées
• Flexible : on...
153 Responsive Web Design – Code – Stéphanie Walter
Et la performance dans
tout ça ?
154 Responsive Web Design – Code – Stéphanie Walter
Chaque seconde compte
• ¼ des utilisateurs quittent
un site qui met pl...
155 Responsive Web Design – Code – Stéphanie Walter
Mobile VS desktop
• 31% des utilisateurs interrogés
s’attendent à ce q...
156 Responsive Web Design – Code – Stéphanie Walter
Taille de la page moyenne
Vos gains de performance en mobile seront ég...
157 Responsive Web Design – Code – Stéphanie Walter
La composition d’une page
Les images sont au final ce qui pèse le plus...
158 Responsive Web Design – Code – Stéphanie Walter
Pagespeed
http://developers.google.com/speed/pagespeed/insights/
159 Responsive Web Design – Code – Stéphanie Walter
Dareboost
https://www.dareboost.com/fr/home
160 Responsive Web Design – Code – Stéphanie Walter
Webpagetest http://www.webpagetest.org/
161 Responsive Web Design – Code – Stéphanie Walter
Un besoin de performance – tester les sites !
• Voir le temps de charg...
162 Responsive Web Design – Code – Stéphanie Walter
Quelques généralités (valables pour tous)
• CSS au début (bloquent
le ...
163 Responsive Web Design – Code – Stéphanie Walter
Quelques généralités (valables pour tous)
• Autant que possible, une
s...
164 Responsive Web Design – Code – Stéphanie Walter
Quelques généralités (valables pour tous)
http://refresh-sf.com/yui/
•...
165 Responsive Web Design – Code – Stéphanie Walter
Réduire les dépendances aux scripts extérieurs
• jQuery : 94Ko.
• Comp...
166 Responsive Web Design – Code – Stéphanie Walter
Réduire les dépendances aux scripts extérieurs
Is jQuery Too big for m...
167 Responsive Web Design – Code – Stéphanie Walter
Evitez les dépendances aux boutons sociaux
Pleins de JS et ressources ...
168 Responsive Web Design – Code – Stéphanie Walter
http://simplesharingbuttons.com/
169 Responsive Web Design – Code – Stéphanie Walter
http://kraken.io/
170 Responsive Web Design – Code – Stéphanie Walter
Réduire les requêtes en utilisant des sprites
• Combinez les images da...
171 Responsive Web Design – Code – Stéphanie Walter
Utiliser des data URIs pour les toutes petites images
• Encodage d’ima...
172 Responsive Web Design – Code – Stéphanie Walter172
173 Responsive Web Design – Code – Stéphanie Walter
Optimisation côté serveur
• Activez la compression gzip sur le serveur...
174 Responsive Web Design – Code – Stéphanie Walter
Mobile first
display: none = ressources chargées.
Penser et intégrer l...
175 Responsive Web Design – Code – Stéphanie Walter
Mobile first
• Commencer par le HTML et CSS du site mobile, utiliser l...
176 Responsive Web Design – Code – Stéphanie Walter
Mobile first
• Charger conditionnellement les ressources lourdes uniqu...
177 Responsive Web Design – Code – Stéphanie Walter
Mobile first
• La technique matchMedia
• La syntaxe des media queries ...
178 Responsive Web Design – Code – Stéphanie Walter
Un exemple de carte Google Adaptive
Adaptive Maps
179 Responsive Web Design – Code – Stéphanie Walter
Un exemple de carte Google Adaptive
• Par défaut on charge
l’image sta...
180 Responsive Web Design – Code – Stéphanie Walter
Quelques ressources pour aller plus loin dans
l’optimisation
• Ajax-In...
181 Responsive Web Design – Code – Stéphanie Walter
Pour aller plus loin
Beginner’s Guide to Website Speed Optimization
182 Responsive Web Design – Code – Stéphanie Walter
Pour aller plus loin
Formation Performance Web
183 Responsive Web Design – Code – Stéphanie Walter
Quelques autres astuces
et propriétés qui vous
seront utiles
184 Responsive Web Design – Code – Stéphanie Walter
Propriétés utiles pour l’optimisation : Background-size
• Changer la t...
185 Responsive Web Design – Code – Stéphanie Walter
Favicons sur mobile ?
http://realfavicongenerator.net/
186 Responsive Web Design – Code – Stéphanie Walter
Le futur et tout ce dont je
n’ai pas le temps de vous
parler …
187 Responsive Web Design – Code – Stéphanie Walter
D’autres layouts et propositions
• CSS3 Multiple Column layout
gérer u...
188 Responsive Web Design – Code – Stéphanie Walter
D’autres propriétés qui commencent à devenir
intéressantes
• Viewport ...
189 Responsive Web Design – Code – Stéphanie Walter
Les APIs
• Détecter des capacités « natives » de l’appareil :
• Device...
190 Responsive Web Design – Code – Stéphanie Walter
Tester son site sur
mobile
191 Responsive Web Design – Code – Stéphanie Walter
Firefox « vue adaptative »
CTRL + SHIFT + M // ALT + CMD + M
192 Responsive Web Design – Code – Stéphanie Walter
Chrome et l’inspecteur d’élément
Chrome permet d’inspecter l’élément e...
193 Responsive Web Design – Code – Stéphanie Walter
Bookmarklet navigateur
http://lab.maltewassermann.com/viewport-resizer/
194 Responsive Web Design – Code – Stéphanie Walter
Bookmarklet navigateur
http://breakpointtester.com/
195 Responsive Web Design – Code – Stéphanie Walter
Émulateurs
• http://www.responsinator.com
• http://quirktools.com/scre...
196 Responsive Web Design – Code – Stéphanie Walter
SDK officiels
http://www.mobilexweb.com/emulators http://www.opera.com...
197 Responsive Web Design – Code – Stéphanie Walter
Browserstack - responsive
http://www.browserstack.com/responsive
198 Responsive Web Design – Code – Stéphanie Walter
Sur des « vrais » appareils
199 Responsive Web Design – Code – Stéphanie Walter
Open Device Lab
http://opendevicelab.com/
200 Responsive Web Design – Code – Stéphanie Walter
Débug à distance
201 Responsive Web Design – Code – Stéphanie Walter
Mixture.io Live Refressh Multi Device
http://docs.mixture.io/mixture
202 Responsive Web Design – Code – Stéphanie Walter
Mixture + Weinre
• mixture.io + weinre
203 Responsive Web Design – Code – Stéphanie Walter
Prepros
Prepros avec du multidevice testing
204 Responsive Web Design – Code – Stéphanie Walter
Tester son site sur plusieurs appareils
http://www.browsersync.io/ htt...
205 Responsive Web Design – Code – Stéphanie Walter
Allez plus loin
Techniques for mobile and responsive cross-
browser te...
206 Responsive Web Design – Code – Stéphanie Walter
Bibliographie
• The Mobile Book – Smashing Magazine
• Responsive Web D...
207 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie
Partagés sous licence Attribution...
Prochain SlideShare
Chargement dans…5
×

Optimisation mobile et responsive web design : mediaqueries, images et performance

5 075 vues

Publié le

Comme chaque année depuis 4 ans, je donne un cours aux étudiants de différentes filières en présentiel et à distance de l'Université de Strasbourg sur l'optimisation mobile et le responsive web design. Le cours se découpe en deux parties : une première partie consacrée au design et à l'ergonomie où les étudiants voient les bonnes pratiques accompagnés d'exercices concrets qui leur permettent de réaliser un concept de site responsive, de la première idée à la réalisation finale en passant par la création de personas, d'une architecture d'information cohérente, du contenu des différentes pages et vues au wireframe. Une seconde plus technique consacrée à comment construire un site responsive en HTML/CSS en prenant en compte la performance, les problématiques d'images, de médias complexes, etc.

0 commentaire
15 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 075
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 811
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
15
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Optimisation mobile et responsive web design : mediaqueries, images et performance

  1. 1. 1 Responsive Web Design – Code – Stéphanie Walter Responsive Web Design mediaqueries, images & performance Stéphanie Walter — @WalterStephanie
  2. 2. 2 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie Designer web et mobile, spécialisée en interface et expérience utilisateurs
  3. 3. 3 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
  4. 4. 4 Responsive Web Design – Code – Stéphanie Walter Application, site dédié, site responsive, adaptive Mais de quoi on parle au juste ?
  5. 5. 5 Responsive Web Design – Code – Stéphanie Walter
  6. 6. 6 Responsive Web Design – Code – Stéphanie Walter lesgrosmotsdumobile.com
  7. 7. 7 Responsive Web Design – Code – Stéphanie Walter Part de marché par pays http://www.kantarworldpanel.com/smartphone-os-market-share/
  8. 8. 8 Responsive Web Design – Code – Stéphanie Walter Comportement utilisateur http://think.withgoogle.com/mobileplanet/fr/
  9. 9. 9 Responsive Web Design – Code – Stéphanie Walter http://www.themobileplaybook.com/fr/
  10. 10. 10 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Téléchargement sur un store/market et installation
  11. 11. 11 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Accès aux fonctionnalités « natives » de l’appareil
  12. 12. 12 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Branding : mon logo, mes couleurs
  13. 13. 13 Responsive Web Design – Code – Stéphanie Walter L’application dédiée Impression de performance et utilisation hors ligne
  14. 14. 14 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Développement spécifique : iOS, Android, Windows, etc. (différents langages)
  15. 15. 15 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Passage par la case « Validation »
  16. 16. 16 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Mises à jour non transparentes
  17. 17. 17 Responsive Web Design – Code – Stéphanie Walter L’application dédiée – les limites Partage de contenu à prévoir dans l’application
  18. 18. 18 Responsive Web Design – Code – Stéphanie Walter Une solution mobile « en ligne » Un développement unifié et multiplateforme
  19. 19. 19 Responsive Web Design – Code – Stéphanie Walter Une solution mobile « en ligne » Des mises à jour transparentes pour les utilisateurs
  20. 20. 20 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié Une URL différente par version http://m.flickr.com/#/home http://www.flickr.com/
  21. 21. 21 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié
  22. 22. 22 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié Ne nécessite pas une refonte totale = cohabitation avec site desktop
  23. 23. 23 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites Sur optimisation = perte de repères visuels parfois pour l’utilisateur
  24. 24. 24 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites Partages sociaux et marketing plus compliqué
  25. 25. 25 Responsive Web Design – Code – Stéphanie Walter Et redirection hasardeuse
  26. 26. 26 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites SEO : duplicate content, URL multiples et redirection, Google n’aime pas ça !
  27. 27. 27 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites Maintenance d’une liste d’appareils détectés // faux positifs (les navigateur mentent) http://bradfrostweb.com/blog/post/this-is-the-web/
  28. 28. 28 Responsive Web Design – Code – Stéphanie Walter Site mobile dédié – les limites wtfmobileweb.com
  29. 29. 29 Responsive Web Design – Code – Stéphanie Walter “ I don't care who you are or where you’re from I still Love you « « S’adapter à n’importe quel type d’appareil et support de manière transparente pour l’utilisateur » Le concept de Responsive Web Design
  30. 30. 30 Responsive Web Design – Code – Stéphanie Walter http://mediaqueri.es/
  31. 31. 31 Responsive Web Design – Code – Stéphanie Walter http://zurb.com/responsive
  32. 32. 32 Responsive Web Design – Code – Stéphanie Walter Hausse de 211 % des ventes sur mobile. skinnyties.com
  33. 33. 33 Responsive Web Design – Code – Stéphanie Walter www.brice.fr
  34. 34. 34 Responsive Web Design – Code – Stéphanie Walter www.liberation.fr
  35. 35. 35 Responsive Web Design – Code – Stéphanie Walter Pourquoi partir sur un site responsive ?
  36. 36. 36 Responsive Web Design – Code – Stéphanie Walter Un processus unifié Un seul développement = maintenance facilitée sur le long terme
  37. 37. 37 Responsive Web Design – Code – Stéphanie Walter SEO friendly SEO friendly : une seule URL, une seule stratégie, partages simplifiés
  38. 38. 38 Responsive Web Design – Code – Stéphanie Walter SEO friendly Un label « mobile-friendly » sur les sites pour Google
  39. 39. 39 Responsive Web Design – Code – Stéphanie Walter
  40. 40. 40 Responsive Web Design – Code – Stéphanie Walter Business friendly Un impact non négligeable sur le ROI • + 42% d’augmentation de revenu tout support • + 13.6% taux de conversion global • + 377.6% augmentation de revenus sur iPhone • + 71.9% taux de conversion sur iPhone • 24 % du trafic vient du mobile Source
  41. 41. 41 Responsive Web Design – Code – Stéphanie Walter Un site responsive – les limites • Moins d’accès au hardware de l’appareil • souvent perçu comme « moins performant » • Des compétences techniques poussées et spécialisées Photo Dave Catchpole
  42. 42. 42 Responsive Web Design – Code – Stéphanie Walter Quelle stratégie pour quel usage ?
  43. 43. 43 Responsive Web Design – Code – Stéphanie Walter Site en m. dédié (ou beta en m. responsive) Planter l’idée d’une stratégie mobile à plus long terme, solution de transition Source
  44. 44. 44 Responsive Web Design – Code – Stéphanie Walter BBC news beta responsive : m.bbc.com/news
  45. 45. 45 Responsive Web Design – Code – Stéphanie Walter Retrofitting Prendre un site existant, détruire les largeurs, le faire “rentrer” au chausse pied pour petits écrans
  46. 46. 46 Responsive Web Design – Code – Stéphanie Walter Site Responsive Mobile First On repart de zéro et on refond tout le site avec une approche mobile first
  47. 47. 47 Responsive Web Design – Code – Stéphanie Walter Page par page Aka “on commence par une portion du site” (budget, temps, etc.)
  48. 48. 48 Responsive Web Design – Code – Stéphanie Walter Cohabitation application / site responsive Site responsive // app iOS // app Android
  49. 49. 49 Responsive Web Design – Code – Stéphanie Walter Un site responsive, la base technique • Grilles fluides • CSS3 pour ré-agencer les blocs • Images flexibles Ethan Marcotte – Responsive Webdesign
  50. 50. 50 Responsive Web Design – Code – Stéphanie Walter Le concept de viewport et de pixel sur mobile
  51. 51. 51 Responsive Web Design – Code – Stéphanie Walter Un pixel n’est pas un pixel • Le pixel est l'unité minimale adressable par le contrôleur vidéo 720 x 1280 316 dpi 1280 x 740 96 dpi Comprendre le Viewport dans le Web mobile
  52. 52. 52 Responsive Web Design – Code – Stéphanie Walter Le viewport Surface virtuelle qu’un mobile accepte d’afficher par défaut sur l’écran = fenêtre d’affichage de notre navigateur viewport Sur bureau = largeur de la fenêtre de navigation
  53. 53. 53 Responsive Web Design – Code – Stéphanie Walter Le viewport Comment expliquer qu’allocine.fr rentre en entier sur mon mobile ?
  54. 54. 54 Responsive Web Design – Code – Stéphanie Walter Le viewport La taille du viewport dépend du navigateur : entre 800 et 1024 px 980px980px
  55. 55. 55 Responsive Web Design – Code – Stéphanie Walter La balise meta viewport • Se place dans le <head> et permet de prendre le contrôle de la dimension de notre fenêtre d’affichage <meta name="viewport" content=" … ">
  56. 56. 56 Responsive Web Design – Code – Stéphanie Walter Sans contrôle du viewport Largeur du « viewport » = 980 px (Android)
  57. 57. 57 Responsive Web Design – Code – Stéphanie Walter Prendre le contrôle du viewport <meta name="viewport" content=" width=device-width, initial-scale=1.0 ">
  58. 58. 58 Responsive Web Design – Code – Stéphanie Walter En résumé La première étape pour créer un site responsive est de prendre le contrôle de la fenêtre d’affichage en insérant dans la balise <head> de votre site ce qui suit : <meta name="viewport" content="width=device-width, initial-scale=1.0"> 58
  59. 59. 59 Responsive Web Design – Code – Stéphanie Walter D’autres valeurs possibles <meta tag> Exemple définition width width=device-width / width=320 Spécifie la largeur du viewport height height=device-height / height=640 Spécifie la hauteur du viewport (peu utilisé) initial-scale initial-scale=2.0 Le degré de zoom au premier affichage de la page (en général 1.0) user-scalable user-scalable=no / yes Définit si l’utilisateur peut ou non zoomer minimum-scale minimum-scale=0.5 Définit la valeur limite pour un zoom arrière maximum-scale maximum-scale=2.5 Définit la valeur maximale pour un zoom (agrandissement) target-densityDpi target-densityDpi=high- dpi Permet de changer la densité d’une page (déconseillé)
  60. 60. 60 Responsive Web Design – Code – Stéphanie Walter Attention à ne pas désactiver le zoom • Il est tentant d’utiliser ce qui suit pour désactiver le zoom – minimum-scale = 0 – maximum-scale = 0 – user-scalable = no • Rappelez-vous que désactiver le zoom peut causer des soucis d’accessibilité à vos utilisateurs 
  61. 61. 61 Responsive Web Design – Code – Stéphanie Walter Les standards • Meta viewport = Apple • Bug dans le « snap mode » IE 10 < 400px • Specs W3C @viewport = standard (dans le futur) @viewport { width: device-width; } @-ms-viewport { width: device-width; } Aller plus loin : http://inpx.it/Z31Kr3
  62. 62. 62 Responsive Web Design – Code – Stéphanie Walter Des unités fluides pour un design fluide !
  63. 63. 63 Responsive Web Design – Code – Stéphanie Walter Une mise en page fluide pour du responsive La première étape pour passer d’un site à largeur fixe à un site responsive (ou pour construire un site responsive) est d’utiliser des unités fluides pour construire sa grille fixe fluide
  64. 64. 64 Responsive Web Design – Code – Stéphanie Walter Liquide, adaptive, responsive layout liquidapsive.com
  65. 65. 65 Responsive Web Design – Code – Stéphanie Walter Unité fixe • Le Pixel - px – Unité « fixe » – Dépendance à la résolution du périphérique – Valeur « compilée » finale en CSS
  66. 66. 66 Responsive Web Design – Code – Stéphanie Walter Unités fluides • Le Cadratin – em – Unité « fluide » – Sur une police : taille relative à la taille de la police de l’élément parent. – Sur une largeur / hauteur : relative à la taille de la police de l’élément – Répercutions en cascade
  67. 67. 67 Responsive Web Design – Code – Stéphanie Walter Unités fluides • Pourcentage - % – Unité « fluide » – Sur une police : taille relative à la taille de la police de l’élément parent. – Sur une largeur : relative à la taille en pixel de l’élément parent
  68. 68. 68 Responsive Web Design – Code – Stéphanie Walter Unités fluides • Root EM – rem – Unité « fluide » – Sur une police : taille relative à la taille de la police de HTML – Sur une largeur / hauteur : relative à la taille la taille de la police de HTML – Pas de cascade
  69. 69. 69 Responsive Web Design – Code – Stéphanie Walter Unités fluides Support de rem
  70. 70. 70 Responsive Web Design – Code – Stéphanie Walter Unités fluides • vw vh – Relatives à la taille du viewport (fenêtre de navigation) – 100 vw = 100% de la largeur du navigateur – 100 vh = 100% de la hauteur du navigateur! http://cdpn.io/vrfDG
  71. 71. 71 Responsive Web Design – Code – Stéphanie Walter Unités fluides vmin = plus petite entre vw ou vh vmax = plus grande entre vw ou vh  Sensibles aux changements d’orientation
  72. 72. 72 Responsive Web Design – Code – Stéphanie Walter Unités fluides Support de vw, vh, vmin, vmax
  73. 73. 73 Responsive Web Design – Code – Stéphanie Walter Les largeurs fluides • min-width : pour une largeur minimum • max-width : pour une largeur maximum • min-height : hauteur minimum • max-height : hauteur maximum
  74. 74. 74 Responsive Web Design – Code – Stéphanie Walter En résumé .wrapper { max-width: 1000px; } .sidebar { width: 20% } .main { width: 80%; } .wrapper { width: 1000px; } .sidebar { width: 200px; } .main { width: 800px; } Pas responsive
  75. 75. 75 Responsive Web Design – Code – Stéphanie Walter Adapter son contenu et mise en page flexible : les media-queries
  76. 76. 76 Responsive Web Design – Code – Stéphanie Walter Les media queries • CSS2 : media = print, media = screen, media = handheld … • CSS3 spécifications : media queries • Servent à définir nos « paliers » « Permet d’appliquer différentes styles en fonction des spécificités du navigateur qui consulte la page ».
  77. 77. 77 Responsive Web Design – Code – Stéphanie Walter Cibler selon la taille Les media-queries permettent d’écrire du CSS en fonction de la taille du navigateur > 850 px < 790px < 380px
  78. 78. 78 Responsive Web Design – Code – Stéphanie Walter Deux syntaxes, comme en CSS2 <link rel="stylesheet" type="text/CSS" media="(max-width: 480px)" href="mobile.CSS" /> « Si ma fenêtre de navigation est inférieur ou égal à 480px » Syntaxe externe :
  79. 79. 79 Responsive Web Design – Code – Stéphanie Walter Deux syntaxes, comme en CSS2 body { max-width: 1024px; } @media (max-width:480px) { body { width: auto; /* et pleins d’autres trucs super cool qui s’appliqueront aux petits écrans ! */ } } Syntaxe interne :
  80. 80. 80 Responsive Web Design – Code – Stéphanie Walter Les media queries en pratique body{ background-color:rgb(211, 189, 204); } @media (max-width :780px) { body{ background-color:rgb(233, 215, 163); } } http://codepen.io/stephanie_cours/full/btAEi
  81. 81. 81 Responsive Web Design – Code – Stéphanie Walter Les plus utilisées Media query Utilisation min-width: … px Quand le viewport est plus grand ou au égal à … px max-width: … px Quand le viewport est plus petit ou au égal à … px min-device-width: … px Quand la taille de l’écran est plus grande ou au égal à … px max-device-width: … px Quand la taille de l’écran est plus petite ou au égal à … px orientation : portrait // orientation: landscape Cibler l’orientation de l’appareil min-device-pixel-ratio : 1.5 Pour cibler certains appareils avec une densité de pixel élevée La liste complète sur le site du W3C.
  82. 82. 82 Responsive Web Design – Code – Stéphanie Walter Les media queries mutuellement exclusifs • On applique chaque style séparément • Il faut répéter les styles que l’on veut pour chaque taille : risque d’oubli • Pas besoin d’écraser un style non désiré  Le texte ne passera en blanc qu’entre 500 et 699 px
  83. 83. 83 Responsive Web Design – Code – Stéphanie Walter Concept de point de rupture Le design se réadapte à la taille du navigateur à chaque point de rupture Source
  84. 84. 84 Responsive Web Design – Code – Stéphanie Walter Choisir les points de rupture FAUX ! (enfin plutôt suicidaire et non futureproof)
  85. 85. 85 Responsive Web Design – Code – Stéphanie Walter Concept de point de rupture Définir les points de rupture (breakpoints) en fonction du contenu Voir la démo en ligne
  86. 86. 86 Responsive Web Design – Code – Stéphanie Walter Choisir les points de rupture • Oubliez le mythe des périphériques, on ne sait pas de quoi demain sera fait • Placer les points de rupture : – « Quand le contenu casse » – « Quand le contenu devient illisible » • 70 - 80 caractères par ligne = bonne moyenne • Pensez à des points de rupture secondaires pour des micro-optimisation (navigation, typographie, etc.) Définir ses points de rupture
  87. 87. 87 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first matrioshka dolls. retro filter via Shutterstock
  88. 88. 88 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first http://codepen.io/inpixelitrust/pen/qEKgOy
  89. 89. 89 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first • Sur Mobile, le flux « normal » de la page (aka on fait rien)
  90. 90. 90 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width:480px) and (max-width:639px) { .sidebar { display: flex; } .first { margin-right: 20px; } }
  91. 91. 91 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width: 640px){ .wrapper { display: flex; } .content { flex-grow: 1; flex-shrink: 0; flex-basis: 70%; } }
  92. 92. 92 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width:480px) and (max-width:639px), (min-width: 1024px){ .sidebar { display: flex; } .first { margin-right: 20px; } }
  93. 93. 93 Responsive Web Design – Code – Stéphanie Walter En pratique, conception mobile first @media (min-width: 1024px){ .content { flex-basis: 60%; } }
  94. 94. 94 Responsive Web Design – Code – Stéphanie Walter Flexbox FTW http://www.alsacreations.com/tuto/lire/1659-une-grille- responsive-avec-flexbox-et-LESS.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout- module.html
  95. 95. 95 Responsive Web Design – Code – Stéphanie Walter Flexbox FTW https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  96. 96. 96 Responsive Web Design – Code – Stéphanie Walter https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
  97. 97. 97 Responsive Web Design – Code – Stéphanie Walter Les « grid framework » • Automatiser la tâche : ne pas réinventer la roue • Des classes « toutes faites » • Peut-être lourd • « En ai-je vraiment besoin ? » • Foundation, Bootstrap, KNACSS, Skeleton, CSSgrid, et tant d’autres… 97
  98. 98. 98 Responsive Web Design – Code – Stéphanie Walter En résumé • Utiliser des media-queries pour créer du style adaptatif et des styles appliqués spécifiquement à certaines tailles de fenêtre de navigation • Baser les points de rupture sur le contenu (et non les appareils) • Préférer min-width et construire en mobile-first pour assurer une plus grand comptabilité
  99. 99. 99 Responsive Web Design – Code – Stéphanie Walter L’adaptation au-delà de la mise en page
  100. 100. 100 Responsive Web Design – Code – Stéphanie Walter Gérer les débordements de texte : overflow hidden • Masquer tous les dépassements : element{ overflow : hidden ; } Source : alsacréations
  101. 101. 101 Responsive Web Design – Code – Stéphanie Walter Gérer les débordements de texte : word-wrap: break- word • Découper le mot pour qu’il entre dans l’espace : element{ word-wrap: break-word; }
  102. 102. 102 Responsive Web Design – Code – Stéphanie Walter Gérer les débordements de texte : text-overflow: ellipsis • Masquer la fin du mot avec une ellipse : element{ overflow : hidden ; text-overflow: ellipsis; }
  103. 103. 103 Responsive Web Design – Code – Stéphanie Walter Des images responsive Fonctionne même avec une taille fixe dans le HTML !! img{ max-width: 100%; width: auto; } http://inpx.it/13VKGYK
  104. 104. 104 Responsive Web Design – Code – Stéphanie Walter Les vidéos responsive • Rendre une vidéo fluide avec la balise <video> : Demo elastic video http://inpx.it/10OKCt3
  105. 105. 105 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … http://codepen.io/inpixelitrust/pen/myKveY
  106. 106. 106 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … • Donner une largeur de 100% à l’iframe ? Oui mais on perd le ratio http://codepen.io/inpixelitrust/pen/myKveY
  107. 107. 107 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … le gros vilain hack 1. Encapsuler l’iframe dans un container 2. Tricher pour donner au container un ratio de 16/9 3. Appliquer le 100% sur l’iframe http://codepen.io/inpixelitrust/pen/myKveY
  108. 108. 108 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes la version viewport units @video-width: 780px; iframe { width: 100vw; max-width: @video-width; height: 56.25vw; } @media (min-width:@video-width) { iframe { height: calc(@video-width * 0.5628205128205128); } } Conserver le ratio 16/9 des images fullscreen et vidéos
  109. 109. 109 Responsive Web Design – Code – Stéphanie Walter Le problème des iframes … Résolu Fonctionne avec « tout » type d’iframe : vimeo, youtube, slidershare, etc. http://fitvidsjs.com/ un plugin pour automatiser l’ajout du container sur les vidéos
  110. 110. 110 Responsive Web Design – Code – Stéphanie Walter Embed Responsively http://embedresponsively.com/
  111. 111. 111 Responsive Web Design – Code – Stéphanie Walter Les cartes (Google Maps) Utiliser le même « hack » que les vidéos ? http://bradfrostweb.com/blog/post/adaptive-maps/
  112. 112. 112 Responsive Web Design – Code – Stéphanie Walter Les cartes (Google Maps) Utiliser une carte « statique » (= image) pour mobile ?
  113. 113. 113 Responsive Web Design – Code – Stéphanie Walter Typographie Responsive un peu de lecture Responsive Typography:The Basics A More Modern Scale for Web Typography
  114. 114. 114 Responsive Web Design – Code – Stéphanie Walter Et tellement plus … • Gestion des tableaux ?? – Supprimer des colonnes : http://elvery.net/demo/responsive- tables/#unseen – Afficher un choix de colonnes : http://filamentgroup.com/examples/rwd-table-patterns/ – Ajouter un ascenseur : http://zurb.com/playground/playground/responsive- tables/index.html – Déconstruire les colonnes : http://jquerymobile.com/demos/1.3.0- beta.1/docs/tables/table-reflow.html#
  115. 115. 115 Responsive Web Design – Code – Stéphanie Walter Et tellement plus … Voir le cours d’ergonomie mobile pour plus de composants responsive http://bradfrost.github.io/this-is-responsive/patterns.html
  116. 116. 116 Responsive Web Design – Code – Stéphanie Walter Pour aller plus loin consultez ma formation Formation Design et Ergonomie mobile
  117. 117. 117 Responsive Web Design – Code – Stéphanie Walter Le problème des images en mobilité
  118. 118. 118 Responsive Web Design – Code – Stéphanie Walter Le « problème » des images en responsive • Plusieurs choses qu’on « aimerait » pouvoir prendre en compte : – Taille de l’écran – Résolution de l’écran (retina) – Bande passante – Besoins de la direction artistique Why Responsive Images Is So Hard
  119. 119. 119 Responsive Web Design – Code – Stéphanie Walter Les problème du retina • 4 x plus de pixels sur une même zone • Des images « floues » sur les écrans avec un pixel ratio supérieur à 2 Source http://inpx.it/13VL2ys
  120. 120. 120 Responsive Web Design – Code – Stéphanie Walter Les problème du retina • Doubler la taille physique des images ? • Réduire de 50 % l’image dans le HTML => Problème : image 2 fois plus grosses = problème de performance sur les mobiles Note : @2x = convention Apple pour noter les assets en double de tailles pour du developpement d’applications natives 120
  121. 121. 121 Responsive Web Design – Code – Stéphanie Walter [CSS] image @2x uniquement pour les écrans HDPI • Une solution en CSS : utiliser des média queries device-pixel-ratio (non standard ! ) • Version standard : min-resolution( 192dpi)  Problème : toujours 2 images à maintenir Source http://inpx.it/13VMkJO
  122. 122. 122 Responsive Web Design – Code – Stéphanie Walter [CSS] image @2x uniquement pour les écrans HDPI • Version standard : min-resolution( 192dpi)  Problème : toujours 2 images à maintenir Source http://inpx.it/13VNCEC
  123. 123. 123 Responsive Web Design – Code – Stéphanie Walter Les solutions futures : <picture> • Proposée par http://responsiveimages.org • Une syntaxe qui permettra de charger une image en fonction de la résolution de l’écran et taille du navigateur • Syntaxe similaire à la balise <video> + des media queries
  124. 124. 124 Responsive Web Design – Code – Stéphanie Walter Les solutions futures : <picture> • D’un point de vue de la direction artistique, proposer différentes images dans différents contextes • Un polyfill « picturefill » pour tester • Démo
  125. 125. 125 Responsive Web Design – Code – Stéphanie Walter Can I use <picture> ? http://caniuse.com/#search=picture
  126. 126. 126 Responsive Web Design – Code – Stéphanie Walter Les solutions futures : attribut « srcset » • Une proposition au W3C par Apple • Conserver la balise <img> et lui ajouter un attribut srcset avec différents paramètres • Une syntaxe plus complexe que <picture> • Possibilité de proposer différentes images basées sur la résolution et taille du viewport Scrset les spécifications http://inpx.it/13VPugH
  127. 127. 127 Responsive Web Design – Code – Stéphanie Walter « srcset » et images retina • On peut utiliser des descripteurs 1x, 2x qui correspondent à une densité de pixel • On va charger l’image large.jpg pour les écrans rétina dans ce cas
  128. 128. 128 Responsive Web Design – Code – Stéphanie Walter « srcset » et le descripteur « w » • On peut ajouter à notre liste d’images un descripteur « w » dans lequel on renseigne la largeur « réelle » de l’image – Ex : l’image large.jpg fait 1920px x 768px • Le navigateur va « piocher » dans cette liste d’images celle qui lui convient le mieux en fonction de, euh, bah en fait il fait ce qu’il veut !
  129. 129. 129 Responsive Web Design – Code – Stéphanie Walter « srcset » et « size » • L’attribut « size » permet de spécifier la largeur d’affichage de l’image (aka de combien de pixels on a besoin dans la mise en page) • On peut également y ajouter des points de rupture pour spécifier différentes largeurs d’affichage en fonction du gabarit de la page • Par défaut sizes="100vw" l’image prend toute la taille de la fenêtre d’affichage
  130. 130. 130 Responsive Web Design – Code – Stéphanie Walter « srcset » et « size » « si la fenêtre d’affichage est plus grande que 790px, mon image fait la moitié de la taille de son parent, sinon elle fait 100% de la taille du viewport » Et le navigateur se débrouille. Yeahy !
  131. 131. 131 Responsive Web Design – Code – Stéphanie Walter Can I use srcset ? http://caniuse.com/#search=srcset
  132. 132. 132 Responsive Web Design – Code – Stéphanie Walter Et on peut mélanger picture et srcset Bon, ok, c’est peut-être un poil complexe mais c’est possible
  133. 133. 133 Responsive Web Design – Code – Stéphanie Walter Un peu de lecture • Responsive Images Done Right: A Guide To <picture> And srcset • Responsive Images in Practice • Responsive Images: If you’re just changing resolutions, use srcset. • L’attribut srcset pour des images responsive
  134. 134. 134 Responsive Web Design – Code – Stéphanie Walter La bidouille de compression JPG • Compresser l’image en double de taille avec un gros taux de compression • La redimensionner en HTML http://www.netvlies.nl/blog/design-interactie/retina-revolution
  135. 135. 135 Responsive Web Design – Code – Stéphanie Walter Aller plus loin … Which responsive images solution should you use?
  136. 136. 136 Responsive Web Design – Code – Stéphanie Walter Les « font-icons » c’est flexible ! • Plus besoin d’images et sprites • Changer facilement la couleur • Changer facilement la taille sans perte ni pixellisation http://css-tricks.com/examples/IconFont/
  137. 137. 137 Responsive Web Design – Code – Stéphanie Walter Les « font-icons » c’est flexible ! • Inconvénients : – Monochrome – Pas possible d’utiliser en arrière plan – Utilisation moins « sémantique » http://css-tricks.com/examples/IconFont/
  138. 138. 138 Responsive Web Design – Code – Stéphanie Walter icomoon.io
  139. 139. 139 Responsive Web Design – Code – Stéphanie Walter Utilisation • Chargement de la font-icon dans la CSS comme n’importe quelle autre police • Utilisation en pseudo-classe :before • Insertion via data-attribut ou classe dans le HTML En pratique http://inpx.it/Z7TOox
  140. 140. 140 Responsive Web Design – Code – Stéphanie Walter Le SVG : s’abstraire des pixels • Scalable Vector Graphics • Vectoriel = agrandissable à l’infini sans pertes • Pas pour des images type « photo »
  141. 141. 141 Responsive Web Design – Code – Stéphanie Walter Le SVG : s’abstraire des pixels Tutoriel logo cliquable en SVG • Générer avec du code • Générer depuis des logiciels (Illustrator, Inkscape et même Photoshop depuis la CC 2014
  142. 142. 142 Responsive Web Design – Code – Stéphanie Walter Le SVG : s’abstraire des pixels Resolution Independence With SVG • Possibilité d’utiliser du SVG dans la balise <img> • Possibilité d’utiliser du SVG comme image en CSS (background)
  143. 143. 143 Responsive Web Design – Code – Stéphanie Walter Un SVG responsive Making SVGs Responsive with CSS • On peut ajouter des media-queries dans le SVG et le rendre responsive
  144. 144. 144 Responsive Web Design – Code – Stéphanie Walter Un système d’icônes SVG réutilisables https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/ • Déclarer les icônes • Utiliser les icônes
  145. 145. 145 Responsive Web Design – Code – Stéphanie Walter Un système d’icônes SVG réutilisables On peut même en changer les couleurs directement en CSS https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/
  146. 146. 146 Responsive Web Design – Code – Stéphanie Walter https://useiconic.com/icons/
  147. 147. 147 Responsive Web Design – Code – Stéphanie Walter Animations d’icônes SVG http://www.transformicons.com/ http://livicons.com/
  148. 148. 148 Responsive Web Design – Code – Stéphanie Walter Quelques ressources pour découvrir le SVG • The Ultimate guide to SVG • A Compendium of SVG Information • Creating SVG vector graphics for maximum browser compatibility • Pocket Guide to Writing SVG • svg-news.com • Working with SVG • Building better interface with SVG
  149. 149. 149 Responsive Web Design – Code – Stéphanie Walter Se passer des images : gradient • Remplacer des images par des gradients CSS 3 : background: linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /* W3C */ background: -moz-linear-gradient(top, #1e5799 0%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ Editeur de gradient colorzilla
  150. 150. 150 Responsive Web Design – Code – Stéphanie Walter Se passer des images : border-radius • Création de coins arrondis border-radius : 10px ; Border-radius : 10px 5px 10px 5px ;
  151. 151. 151 Responsive Web Design – Code – Stéphanie Walter Se passer des images : box-shadow • Créer des ombres portées sans image box-shadow: 10px 10px 5px #888; box-shadow: 0 0 0 3px red, 0 0 0 5px yellow, 0 0 0 7px grey;
  152. 152. 152 Responsive Web Design – Code – Stéphanie Walter Créer des boutons en pure CSS • Pas d’images utilisées • Flexible : on peut changer le texte facilement • Plus léger
  153. 153. 153 Responsive Web Design – Code – Stéphanie Walter Et la performance dans tout ça ?
  154. 154. 154 Responsive Web Design – Code – Stéphanie Walter Chaque seconde compte • ¼ des utilisateurs quittent un site qui met plus de 4 secondes à charger Via Kissmetrics
  155. 155. 155 Responsive Web Design – Code – Stéphanie Walter Mobile VS desktop • 31% des utilisateurs interrogés s’attendent à ce qu’un site sur mobile soit aussi rapide que sur bureau, si ce n’est plus rapide Via Kissmetrics
  156. 156. 156 Responsive Web Design – Code – Stéphanie Walter Taille de la page moyenne Vos gains de performance en mobile seront également applicables aux autres utilisateurs ! 2 MB Source
  157. 157. 157 Responsive Web Design – Code – Stéphanie Walter La composition d’une page Les images sont au final ce qui pèse le plus lourd http://httparchive.org/interesting.php#bytesperpage
  158. 158. 158 Responsive Web Design – Code – Stéphanie Walter Pagespeed http://developers.google.com/speed/pagespeed/insights/
  159. 159. 159 Responsive Web Design – Code – Stéphanie Walter Dareboost https://www.dareboost.com/fr/home
  160. 160. 160 Responsive Web Design – Code – Stéphanie Walter Webpagetest http://www.webpagetest.org/
  161. 161. 161 Responsive Web Design – Code – Stéphanie Walter Un besoin de performance – tester les sites ! • Voir le temps de chargement des ressources • Voir l’ordre de chargement • Voir les facteurs bloquants (JS, etc) « Network » panel du Dev tool de Chrome
  162. 162. 162 Responsive Web Design – Code – Stéphanie Walter Quelques généralités (valables pour tous) • CSS au début (bloquent le rendu) • Chargement de certains JS en asynchrone quand possible http://inpx.it/XNbabn
  163. 163. 163 Responsive Web Design – Code – Stéphanie Walter Quelques généralités (valables pour tous) • Autant que possible, une seule feuille de style (3 max) = une seule requête (éviter les @import) • Eviter les redirections !! http://inpx.it/XNbabn
  164. 164. 164 Responsive Web Design – Code – Stéphanie Walter Quelques généralités (valables pour tous) http://refresh-sf.com/yui/ • Minifier le code en prod, compressez les fichiers, combinez vos CSS et JS pour avoir le moins de requêtes possibles
  165. 165. 165 Responsive Web Design – Code – Stéphanie Walter Réduire les dépendances aux scripts extérieurs • jQuery : 94Ko. • Compressé + gzipé : +30Ko • Utiliser une petite partie de jQuery avec sizzlejs (récupération des sélecteurs uniquement) ou http://zeptojs.com • Utiliser uniquement les parties dont on a besoin :jquip • Utiliser du VanillaJS
  166. 166. 166 Responsive Web Design – Code – Stéphanie Walter Réduire les dépendances aux scripts extérieurs Is jQuery Too big for mobile ?
  167. 167. 167 Responsive Web Design – Code – Stéphanie Walter Evitez les dépendances aux boutons sociaux Pleins de JS et ressources externes chargées qui alourdissent le site http://zurb.com/article/883/small-painful-buttons-why-social-media-bu
  168. 168. 168 Responsive Web Design – Code – Stéphanie Walter http://simplesharingbuttons.com/
  169. 169. 169 Responsive Web Design – Code – Stéphanie Walter http://kraken.io/
  170. 170. 170 Responsive Web Design – Code – Stéphanie Walter Réduire les requêtes en utilisant des sprites • Combinez les images dans un « sprite » quand c’est possible Les sprites CSS
  171. 171. 171 Responsive Web Design – Code – Stéphanie Walter Utiliser des data URIs pour les toutes petites images • Encodage d’images en base64 pour éviter une requête supplémentaire • Sur de très petites images ou des patterns • Peut-être utilisé dans le HTML et dans le CSS • A utiliser avec parcimonie ! http://css-tricks.com/data-uris/
  172. 172. 172 Responsive Web Design – Code – Stéphanie Walter172
  173. 173. 173 Responsive Web Design – Code – Stéphanie Walter Optimisation côté serveur • Activez la compression gzip sur le serveur • Activez la mise en cache des ressources  .htaccess
  174. 174. 174 Responsive Web Design – Code – Stéphanie Walter Mobile first display: none = ressources chargées. Penser et intégrer le mobile en premier ?
  175. 175. 175 Responsive Web Design – Code – Stéphanie Walter Mobile first • Commencer par le HTML et CSS du site mobile, utiliser les media- queries pour « ajouter » des contenus/images = progressive enhancement @media (min-width: 640px){ … }
  176. 176. 176 Responsive Web Design – Code – Stéphanie Walter Mobile first • Charger conditionnellement les ressources lourdes uniquement pour les grands écrans • Eviter les display:none sur les ressources dont on a pas besoin en mobile • Ne pas les charger à la base • Les charger conditionnellement ensuite en fonction de la taille de l’écran Conditional Loading for Responsive Designs
  177. 177. 177 Responsive Web Design – Code – Stéphanie Walter Mobile first • La technique matchMedia • La syntaxe des media queries en JS ! • Support : http://caniuse.com/#feat=matchmedia • Polyfill https://github.com/paulirish/matchMedia.js La méthode matchMedia ou les Media Queries pour JavaScript
  178. 178. 178 Responsive Web Design – Code – Stéphanie Walter Un exemple de carte Google Adaptive Adaptive Maps
  179. 179. 179 Responsive Web Design – Code – Stéphanie Walter Un exemple de carte Google Adaptive • Par défaut on charge l’image statique (et renvoie l’utilisateur sur Gmaps directement) • Au dessus de 550px on va charger la map Google Maps Adaptive Maps
  180. 180. 180 Responsive Web Design – Code – Stéphanie Walter Quelques ressources pour aller plus loin dans l’optimisation • Ajax-Include-Pattern librairie pour du chargement de ressources supplémentaires en Ajax • Velocity 2011 • Le concept de RESS : responsive design + server side composent • RESS: Responsive Design + Server Side Components • Getting started with RESS
  181. 181. 181 Responsive Web Design – Code – Stéphanie Walter Pour aller plus loin Beginner’s Guide to Website Speed Optimization
  182. 182. 182 Responsive Web Design – Code – Stéphanie Walter Pour aller plus loin Formation Performance Web
  183. 183. 183 Responsive Web Design – Code – Stéphanie Walter Quelques autres astuces et propriétés qui vous seront utiles
  184. 184. 184 Responsive Web Design – Code – Stéphanie Walter Propriétés utiles pour l’optimisation : Background-size • Changer la taille de l’image de background background-size: 100% 100%; background-size: 250px 70px;
  185. 185. 185 Responsive Web Design – Code – Stéphanie Walter Favicons sur mobile ? http://realfavicongenerator.net/
  186. 186. 186 Responsive Web Design – Code – Stéphanie Walter Le futur et tout ce dont je n’ai pas le temps de vous parler …
  187. 187. 187 Responsive Web Design – Code – Stéphanie Walter D’autres layouts et propositions • CSS3 Multiple Column layout gérer un nombre différents de colonnes en fonction de l’écran • CSS grid layout création d’une grille “virtuelle” pour placer les éléments • CSS3 Template Layout: associer un élément de layout à un nom et le placer sur une grille invisible
  188. 188. 188 Responsive Web Design – Code – Stéphanie Walter D’autres propriétés qui commencent à devenir intéressantes • Viewport Percentage Lengths vw, vh, vmin, vmax : unités en % relatives à la dimension du viewport • CSS4 nouvelles media queries : • @media(luminosity: normal|dim|washed) adapter à la luminosité de l’écran • @media(hover) pour savoir si l’appareil supporte le :hover ou non • @media(pointer:none|coarse|fine) adapter à la précision du pointeur de l’appareil
  189. 189. 189 Responsive Web Design – Code – Stéphanie Walter Les APIs • Détecter des capacités « natives » de l’appareil : • DeviceorientationEvent détecter l’orientation de l’appareil (gyroscope) • Geolocation API détecter la position géographique de l’utilisateur • Vibration API : accéder nativement aux vibrations de l’appareil (pour du gaming HTML5) • Network information API récupérer des informations sur le type de connexion de l’utilisateur Mozilla WebAPI : une liste très complète des API disponibles
  190. 190. 190 Responsive Web Design – Code – Stéphanie Walter Tester son site sur mobile
  191. 191. 191 Responsive Web Design – Code – Stéphanie Walter Firefox « vue adaptative » CTRL + SHIFT + M // ALT + CMD + M
  192. 192. 192 Responsive Web Design – Code – Stéphanie Walter Chrome et l’inspecteur d’élément Chrome permet d’inspecter l’élément en vue mobile et d’émuler un User Agent En savoir plus
  193. 193. 193 Responsive Web Design – Code – Stéphanie Walter Bookmarklet navigateur http://lab.maltewassermann.com/viewport-resizer/
  194. 194. 194 Responsive Web Design – Code – Stéphanie Walter Bookmarklet navigateur http://breakpointtester.com/
  195. 195. 195 Responsive Web Design – Code – Stéphanie Walter Émulateurs • http://www.responsinator.com • http://quirktools.com/screenfly • http://bradfrostweb.com/demo/ish/ • http://responsivepx.com/
  196. 196. 196 Responsive Web Design – Code – Stéphanie Walter SDK officiels http://www.mobilexweb.com/emulators http://www.opera.com/fr/developer/mobile-emulator
  197. 197. 197 Responsive Web Design – Code – Stéphanie Walter Browserstack - responsive http://www.browserstack.com/responsive
  198. 198. 198 Responsive Web Design – Code – Stéphanie Walter Sur des « vrais » appareils
  199. 199. 199 Responsive Web Design – Code – Stéphanie Walter Open Device Lab http://opendevicelab.com/
  200. 200. 200 Responsive Web Design – Code – Stéphanie Walter Débug à distance
  201. 201. 201 Responsive Web Design – Code – Stéphanie Walter Mixture.io Live Refressh Multi Device http://docs.mixture.io/mixture
  202. 202. 202 Responsive Web Design – Code – Stéphanie Walter Mixture + Weinre • mixture.io + weinre
  203. 203. 203 Responsive Web Design – Code – Stéphanie Walter Prepros Prepros avec du multidevice testing
  204. 204. 204 Responsive Web Design – Code – Stéphanie Walter Tester son site sur plusieurs appareils http://www.browsersync.io/ http://mixture.io/
  205. 205. 205 Responsive Web Design – Code – Stéphanie Walter Allez plus loin Techniques for mobile and responsive cross- browser testing: An Envato case study. Mobile Workflow by Addy Osmani
  206. 206. 206 Responsive Web Design – Code – Stéphanie Walter Bibliographie • The Mobile Book – Smashing Magazine • Responsive Web Design – Ethan Marcotte • Mobile First – Luke Wrobkewski • Contrent Strategy for Mobile – Karen Mcgrane • Design process in the responsive age • Designing for Touch – Josh Clark • Ma liste d’articles sur diigo.com
  207. 207. 207 Responsive Web Design – Code – Stéphanie Walterwww.inpixelitrust.fr @WalterStephanie Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

×