responsive webdesign - devenir un #rwd master
Post on 20-Jun-2015
4.299 Views
Preview:
TRANSCRIPT
RESPONSIVE WEBDESIGNPOUR DEVENIR RWD MASTER
jonathanpath rwdiesa
1 MISE EN PAGE HTMLCSSESSENTIEL POUR ABORDER LE RWD
jonathanpath rwdiesa
11 DISPLAY
jonathanpath rwdiesa
La base
display blockltdivgt ltpgt ltformgt ltheadergt ltfootergt ltsectiongt
Prend la largeur du conteneur
display inlineltspangt ltagt
Prend la largeur du contenantOn ne peut peut pas attribuer de hauteur ni de largeur
display inline-blockSemblable agrave laquoinlineraquo mais on peut attribuer une hauteur et une largeurCompatible avec IE8+On peut simuler displayinline-block sur IE6 et 7 avec
display inlinezoom 1
11 DISPLAY
jonathanpath rwdiesa
Mise en page avec display inline-block
blocblocbloc
blocblocbloc
bloc display inline-block lt=IE7 Hack display inlinezoom 1width 33margin-bottom 1em
Note entre chaque bloc il y a un espace qui correspond agraveun caractegravere Il y a plusieurs meacutethodes pour faire disparaicirctre cet espace (article creativjuiz alsacreation)
11 DISPLAY
jonathanpath rwdiesa
Centrer un bloc
width 1140pxmargin 0 autodisplay block
Mettre un margin auto agrave gauche et agrave droite drsquoun bloc (display block) permet de le
centrer
auto auto
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
Le conteneur ne prend pas en compte la hauteur des blocs flottants qursquoil contient
float rightPlace le bloc agrave droite
display block
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
display block
Solution ndeg1
clear both
Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
1 MISE EN PAGE HTMLCSSESSENTIEL POUR ABORDER LE RWD
jonathanpath rwdiesa
11 DISPLAY
jonathanpath rwdiesa
La base
display blockltdivgt ltpgt ltformgt ltheadergt ltfootergt ltsectiongt
Prend la largeur du conteneur
display inlineltspangt ltagt
Prend la largeur du contenantOn ne peut peut pas attribuer de hauteur ni de largeur
display inline-blockSemblable agrave laquoinlineraquo mais on peut attribuer une hauteur et une largeurCompatible avec IE8+On peut simuler displayinline-block sur IE6 et 7 avec
display inlinezoom 1
11 DISPLAY
jonathanpath rwdiesa
Mise en page avec display inline-block
blocblocbloc
blocblocbloc
bloc display inline-block lt=IE7 Hack display inlinezoom 1width 33margin-bottom 1em
Note entre chaque bloc il y a un espace qui correspond agraveun caractegravere Il y a plusieurs meacutethodes pour faire disparaicirctre cet espace (article creativjuiz alsacreation)
11 DISPLAY
jonathanpath rwdiesa
Centrer un bloc
width 1140pxmargin 0 autodisplay block
Mettre un margin auto agrave gauche et agrave droite drsquoun bloc (display block) permet de le
centrer
auto auto
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
Le conteneur ne prend pas en compte la hauteur des blocs flottants qursquoil contient
float rightPlace le bloc agrave droite
display block
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
display block
Solution ndeg1
clear both
Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
11 DISPLAY
jonathanpath rwdiesa
La base
display blockltdivgt ltpgt ltformgt ltheadergt ltfootergt ltsectiongt
Prend la largeur du conteneur
display inlineltspangt ltagt
Prend la largeur du contenantOn ne peut peut pas attribuer de hauteur ni de largeur
display inline-blockSemblable agrave laquoinlineraquo mais on peut attribuer une hauteur et une largeurCompatible avec IE8+On peut simuler displayinline-block sur IE6 et 7 avec
display inlinezoom 1
11 DISPLAY
jonathanpath rwdiesa
Mise en page avec display inline-block
blocblocbloc
blocblocbloc
bloc display inline-block lt=IE7 Hack display inlinezoom 1width 33margin-bottom 1em
Note entre chaque bloc il y a un espace qui correspond agraveun caractegravere Il y a plusieurs meacutethodes pour faire disparaicirctre cet espace (article creativjuiz alsacreation)
11 DISPLAY
jonathanpath rwdiesa
Centrer un bloc
width 1140pxmargin 0 autodisplay block
Mettre un margin auto agrave gauche et agrave droite drsquoun bloc (display block) permet de le
centrer
auto auto
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
Le conteneur ne prend pas en compte la hauteur des blocs flottants qursquoil contient
float rightPlace le bloc agrave droite
display block
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
display block
Solution ndeg1
clear both
Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
11 DISPLAY
jonathanpath rwdiesa
Mise en page avec display inline-block
blocblocbloc
blocblocbloc
bloc display inline-block lt=IE7 Hack display inlinezoom 1width 33margin-bottom 1em
Note entre chaque bloc il y a un espace qui correspond agraveun caractegravere Il y a plusieurs meacutethodes pour faire disparaicirctre cet espace (article creativjuiz alsacreation)
11 DISPLAY
jonathanpath rwdiesa
Centrer un bloc
width 1140pxmargin 0 autodisplay block
Mettre un margin auto agrave gauche et agrave droite drsquoun bloc (display block) permet de le
centrer
auto auto
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
Le conteneur ne prend pas en compte la hauteur des blocs flottants qursquoil contient
float rightPlace le bloc agrave droite
display block
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
display block
Solution ndeg1
clear both
Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
11 DISPLAY
jonathanpath rwdiesa
Centrer un bloc
width 1140pxmargin 0 autodisplay block
Mettre un margin auto agrave gauche et agrave droite drsquoun bloc (display block) permet de le
centrer
auto auto
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
Le conteneur ne prend pas en compte la hauteur des blocs flottants qursquoil contient
float rightPlace le bloc agrave droite
display block
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
display block
Solution ndeg1
clear both
Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
Le conteneur ne prend pas en compte la hauteur des blocs flottants qursquoil contient
float rightPlace le bloc agrave droite
display block
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
display block
Solution ndeg1
clear both
Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
display block
Solution ndeg1
clear both
Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
12 FLOAT
jonathanpath rwdiesa
Sortir du flux
float leftPlace le bloc agrave gauche
float rightPlace le bloc agrave droite
clearfix
Solution ndeg2Mettre une class clearfix sur le contenant
Meilleure solution parce que cela eacutevite de rajouter un eacuteleacutement HTML qui nrsquoa pas de valeur
seacutemantique
clearfixafter content display blockclear bothheigth 0 visibility hidden
eacuteleacutement geacuteneacutereacute par clearfixafter
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
12 FLOAT
jonathanpath rwdiesa
Mise en page
float leftwidth 300px
display blockmargin-left 350px
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
Margin
Width Height
13 MODELE DE BOITES
jonathanpath rwdiesa
width + padding + border + margin
bloc
Padding
Border
width
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
13 MODELE DE BOITES
jonathanpath rwdiesa
Se simplifier la vie avec CSS3
Largeur du bloc = width
-webkit-box-sizing border-box -moz-box-sizing border-box box-sizing border-box
Margin
Width Heightbloc
Padding
Border
width
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
14 LA SUITE SUR
jonathanpath rwdiesa
Learnlayoutcom
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH
jonathanpath rwdiesa
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
21 VIEWPORT
jonathanpath rwdiesa
Taille de fenecirctre virtuelle
Navigateur Viewport Taille reacuteelle
Bureau Taille de la fenecirctre Taille de la fenecirctre
Mobile 980px 320px 480px
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
21 VIEWPORT
jonathanpath rwdiesa
Paramegravetres
Paramegravetre Signification
Initial-scale Zoom par deacutefaut
Maximum-scale Zoom maximum
User-scalable=no Interdit agrave lrsquoutilisateur de zoomer
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Que srsquoaffiche-t-il sur un mobile si je mets ce code sur un site
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
21 VIEWPORT
jonathanpath rwdiesa
Combo breaker
ltmeta name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=nogt
Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la
hauteur du viewport
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
22 DEVICE-WIDTH
jonathanpath rwdiesa
Largeur deacuteclareacutee par le peacuteripheacuterique
bull iPhone 3 et iPhone 4 ont le mecircme device-width malgreacute leur densiteacute de pixels diffeacuterente
bull Le device-width sur Safari est identique en portrait qursquoen paysage ()
bull Un device-width (en portrait) peut globalement varier de 240px agrave 640px selon les terminaux mobiles
En savoir plus Lire lrsquoexcellent article de goetter sur ce sujet
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
23 VIEWPORT=DEVICE-WIDTH
jonathanpath rwdiesa
nous permet de faire du rwd
ltmeta name=ldquoviewportldquo content=ldquowidth=device-widthldquogtLa fenecirctre virtuelle est eacutegale agrave la largeur de lrsquoeacutecran
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
3 MEDIA QUERIESVIVE CSS3
jonathanpath rwdiesa
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
Quelles significations agrave votre avis
Type Signification
screen
handheld
embossed
projection
tty
tv
all
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Type Signification
screen eacutecrans
handheld mobile ou petite taille
embossed Imprimantes braille
projection projecteurs
tty terminal
tv teacuteleacuteviseur
print Impression
all tout
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
31 ATTRIBUT MEDIA
jonathanpath rwdiesa
depuis CSS2
Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles
Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
32 CRITERES
jonathanpath rwdiesa
peut ecirctre preacutefixeacute par min- et max- pour les valeurs numeacuteriques
Critegravere Signification
color support de la couleur (bitspixel)
aspect-ratio ratio du peacuteripheacuterique de sortie (par exemple 169)
device-aspect-ratio densiteacute de pixels utile pour deacutetecter ldquoRetinaldquo
device-height hauteur deacuteclareacutee par le peacuteripheacuterique
device-width largeur deacuteclareacutee par le peacuteripheacuterique
height hauteur du viewport
width largeur du viewport
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
33 ORIENTATION
jonathanpath rwdiesa
Paysage ou Portrait
bull permet de savoir si un peacuteripheacuterique est en vue portrait ou paysage
bull Certains navigateurs lrsquoimpleacutementent eacutegalement en calculant le ratio hauteurlargeur
bull Petit deacutetail il y a une faille sur iPhone si on active la console drsquoerreurs on ne peut plus deacutetecter lrsquoorientation
media (orientation portrait) ou media (orientation landscape)
Navigateurs qui supportent le paramegravetre orientation sur caniusecom
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
34 EXEMPLES
jonathanpath rwdiesa
Ameacuteliorations ou deacutegradation progressive
nav li display inlinemedia (max-width 780px) nav li display block
Deacutegradation progressivenav li display blockmedia (min-width 780px) nav li display inline
Ameacutelioration progressive
Mobile first
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
35 COMPATIBILITE
jonathanpath rwdiesa
lt= IE8
bull Respondjs script javascript qui simule les medias queries pour les anciennes version drsquoIE
bull Une deacuteclaration CSS uniquement pour lt=IE8 bull lt--[if lt IE 9]gtltlink href=ldquoIEcssldquo gtlt[endif]--gtbull lt-ie9 avec Boilerplate
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
4 DESIGN FLUIDEPOUR SrsquoADAPTER A TOUTES LES TAILLES
jonathanpath rwdiesa
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
41 PIXEL
jonathanpath rwdiesa
Exemple de changement de largeur
Version Largeur du site
Classique 960px
Tablette 768px
Mobile 320px
Exemple Thegraveme Focus
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
41 PIXEL
jonathanpath rwdiesa
Avantages Inconveacutenients
+
- maitrise des changements - beaucoup de points de rupture - beaucoup drsquoespace sur les cocircteacutes dans certains cas - difficulteacute de changer la taille des polices
-
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
42 EM
jonathanpath rwdiesa
Taille de typographie relative
Exemple Thegraveme Focus
1em = Taille de police par deacutefaut du navigateur
em Taille de police relative au parent
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
42 EM
jonathanpath rwdiesa
Si on veut agrandir la taille de la typographie sur mobile
media (max-width 480px) p font-size 20px h1 font-size 30px h2 font-size 25px
px On change la taille pour chaque deacuteclaration
media (max-width 480px) body font-size 15em
em On change la taille une seule fois
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton
laquoWidthraquo sur la largeur drsquoun site
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
laquoPaddingraquo sur un bouton NON
laquoWidthraquo sur la largeur drsquoun site POSSIBLE
La taille drsquoune marge inteacuterieure est relative agrave la typographie
La largeur drsquoun site deacutepend de la taille de la fenecirctre
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
42 EM
jonathanpath rwdiesa
On meacutelange laquoemraquo et px
Certains preacutefegraverent tout deacutefinir en laquoemraquopour avoir une coheacuterence globale
Drsquoautres de garder la largeur des blocs en laquopxraquopour eacuteviter de faire de nombreux calculs et drsquoavoir des valeurs telles que 344293837em
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
42
jonathanpath rwdiesa
Exploiter toute la largeur exploitable
2 colonnes qui font la mecircme taille
float leftwidth 48
float rightwidth 48
Taille de la fenecirctre
Exemple CSSgrid
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
42
jonathanpath rwdiesa
Deacutefinir les points de rupture
Drsquoapregraves le critegravere 1011 de accessiwebfaire en sorte que les colonnes aient maximum 80 caractegraveres par ligne
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
5 OPTIMISERET SURTOUT PENSER MOBILE FIRST
jonathanpath rwdiesa
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
51 OPMISATIONS GENERALES
jonathanpath rwdiesa
POUR SITES BUREAUX
bull Javascript en bas de pagebull CSS en haut de pagebull Compression en 1 seul fichier CSS et javascriptbull Utilisation de sprites CSS etou encoder en data URIbull Optimisation de la taille des images (shmushit jpegmini
imageoptim)bull Reacuteduire la taille du DOMbull Favoriser CSS3 tant que possible (mais attention aux
deacutegradeacutes et aux animations infinies)
Deacutetail sur Developer Yahoo performances
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
CHARGEMENT DrsquoIMAGES PLUS PETITES
Grands eacutecrans media (min-width 481px) img background-image url(lsquoimg-bigjpgrsquo)
Petits eacutecrans media (max-width 480px) img background-image url(lsquoimg-smalljpgrsquo)
Penser agrave faire le chargement des grandes images pour lt=IE8 lt-ie9 img background-image url(lsquoimg-bigjpgrsquo)
Voir lrsquoarticle correspondant sur goetterfr
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
NE PAS AFFICHER LES IMAGES DONT ON A PAS BESOIN
display none sur le contenant et non sur lrsquoimage media (max-width 480px) bloc display none
bloc ltimggt
Voir lrsquoarticle correspondant sur le blog de theystolemynickname
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
JAVASCRIPT
bull Ne pas mettre les scripts js en bas de page pour iOS Safari mobile attend de les charger pour afficher la page(marche par contre sur Android)bull Solution Chargement asynchrone de JS lazyloadlight
bull Se passer de jQuery amp jQuery mobile si possible
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
52 OPMISATIONS MOBILE
jonathanpath rwdiesa
MOBILE FIRST
Penser premiegraverement agrave la version mobile permet drsquoavoir une version minimaliste avec peu drsquoinformation et de code agrave
charger Il nrsquoy a pas meilleure optimisation
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
6 ADAPTIONS ECRANS TOUCHTOUCH PAS A TOUT
jonathanpath rwdiesa
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
61 PAS DrsquoEFFET DE SURVOL
jonathanpath rwdiesa
QUE DES CLICS
bull A chaque fois que vous pensez agrave un effet de survol reacutefleacutechissez agrave lrsquoalternative eacutecran laquotouchraquo
bull Important de deacutesactive les effets de survol sur les eacutecrans laquotouchraquo pour eacuteviter drsquoavoir lrsquoeffet qui srsquoactive au clic
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
62 FIXER
jonathanpath rwdiesa
AVEC PRECAUTION
bull Si vous avez une menu fixe sur version bureau deacutesactiver le sur mobile ou sinon faites un hack pour que cela fonctionne
bull Attention agrave la petite taille drsquoeacutecran des mobiles
top related