Download pdf - Responsive webdesign - devenir un #rwd master

RESPONSIVE WEBDESIGNPOUR DEVENIR RWD MASTER

jonathanpath rwdiesa

1 MISE EN PAGE HTMLCSSESSENTIEL POUR ABORDER LE RWD


11 DISPLAY


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


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


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


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


Sortir du flux



display block

Solution ndeg1

clear both

Mettre un eacutelement laquoblockraquo en dessous des eacutelements flottants agrave lrsquointeacuterieur du conteneur

12 FLOAT


Sortir du flux



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


Mise en page

float leftwidth 300px

display blockmargin-left 350px

Margin

Width Height

13 MODELE DE BOITES


width + padding + border + margin

bloc

Padding

Border

width

13 MODELE DE BOITES


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


Learnlayoutcom

2 TAILLE DrsquoECRAN VIEWPORT DEVICE-WIDTH


21 VIEWPORT


Taille de fenecirctre virtuelle

Navigateur Viewport Taille reacuteelle

Bureau Taille de la fenecirctre Taille de la fenecirctre

Mobile 980px 320px 480px

21 VIEWPORT


Paramegravetres

Paramegravetre Signification

Initial-scale Zoom par deacutefaut

Maximum-scale Zoom maximum

User-scalable=no Interdit agrave lrsquoutilisateur de zoomer

21 VIEWPORT


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


Combo breaker


Je ne pourrais pas zoomer et je pourrais uniquement visualiser la largeur et la

hauteur du viewport

22 DEVICE-WIDTH


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


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


31 ATTRIBUT MEDIA


Quelles significations agrave votre avis

Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


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


depuis CSS2

Malheureusement handeld est ignoreacutepar la grande majoriteacute des navigateurs mobiles

Il faut donc utiliser ldquoscreenldquocomme pour les navigateurs bureaux

32 CRITERES


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


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


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


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


41 PIXEL


Exemple de changement de largeur

Version Largeur du site

Classique 960px

Tablette 768px

Mobile 320px

Exemple Thegraveme Focus

41 PIXEL


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


Taille de typographie relative


1em = Taille de police par deacutefaut du navigateur

em Taille de police relative au parent

42 EM


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


On meacutelange laquoemraquo et px

laquoPaddingraquo sur un bouton

laquoWidthraquo sur la largeur drsquoun site

42 EM



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



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


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


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


51 OPMISATIONS GENERALES


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


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



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



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



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


61 PAS DrsquoEFFET DE SURVOL


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


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


11 DISPLAY


La base







11 DISPLAY



blocblocbloc

blocblocbloc



11 DISPLAY


Centrer un bloc



centrer

auto auto

12 FLOAT


Sortir du flux




display block

12 FLOAT


Sortir du flux



display block

Solution ndeg1

clear both


12 FLOAT


Sortir du flux



clearfix



seacutemantique



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



11 DISPLAY


La base







11 DISPLAY



blocblocbloc

blocblocbloc



11 DISPLAY


Centrer un bloc



centrer

auto auto

12 FLOAT


Sortir du flux




display block

12 FLOAT


Sortir du flux



display block

Solution ndeg1

clear both


12 FLOAT


Sortir du flux



clearfix



seacutemantique



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



11 DISPLAY



blocblocbloc

blocblocbloc



11 DISPLAY


Centrer un bloc



centrer

auto auto

12 FLOAT


Sortir du flux




display block

12 FLOAT


Sortir du flux



display block

Solution ndeg1

clear both


12 FLOAT


Sortir du flux



clearfix



seacutemantique



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



11 DISPLAY


Centrer un bloc



centrer

auto auto

12 FLOAT


Sortir du flux




display block

12 FLOAT


Sortir du flux



display block

Solution ndeg1

clear both


12 FLOAT


Sortir du flux



clearfix



seacutemantique



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



12 FLOAT


Sortir du flux




display block

12 FLOAT


Sortir du flux



display block

Solution ndeg1

clear both


12 FLOAT


Sortir du flux



clearfix



seacutemantique



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



12 FLOAT


Sortir du flux



display block

Solution ndeg1

clear both


12 FLOAT


Sortir du flux



clearfix



seacutemantique



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



12 FLOAT


Sortir du flux



clearfix



seacutemantique



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



12 FLOAT


Mise en page



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



Margin

Width Height

13 MODELE DE BOITES



bloc

Padding

Border

width

13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



13 MODELE DE BOITES





Margin

Width Heightbloc

Padding

Border

width

14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



14 LA SUITE SUR


Learnlayoutcom



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION





21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



21 VIEWPORT






21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



21 VIEWPORT


Paramegravetres





21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



21 VIEWPORT


Combo breaker



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



21 VIEWPORT


Combo breaker



hauteur du viewport

22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



22 DEVICE-WIDTH













31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION









31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION





31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



31 ATTRIBUT MEDIA



Type Signification

screen

handheld

embossed

projection

tty

tv

print

all

31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



31 ATTRIBUT MEDIA


depuis CSS2

Type Signification

screen eacutecrans




tty terminal


print Impression

all tout

31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



31 ATTRIBUT MEDIA


depuis CSS2



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



32 CRITERES











33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



33 ORIENTATION


Paysage ou Portrait






34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



34 EXEMPLES






Mobile first

35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



35 COMPATIBILITE


lt= IE8





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION





41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



41 PIXEL




Classique 960px

Tablette 768px

Mobile 320px


41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



41 PIXEL



+


-

42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



42 EM






42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



42 EM







42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



42 EM





42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



42 EM







42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



42 EM





42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



42




float leftwidth 48

float rightwidth 48


Exemple CSSgrid

42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION



42








POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION







POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION





POUR SITES BUREAUX
















bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION














bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION







bloc ltimggt




JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION





JAVASCRIPT





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION





MOBILE FIRST







QUE DES CLICS



62 FIXER


AVEC PRECAUTION







QUE DES CLICS



62 FIXER


AVEC PRECAUTION





QUE DES CLICS



62 FIXER


AVEC PRECAUTION



62 FIXER


AVEC PRECAUTION

