Responsive design
1. Responsive ?
Définition 
Le Responsive Web design est une approche de conception 
Web qui vise à l'élaboration de sites offrant une 
ex...
Gamme d’appareil ? (1)
Gamme d’appareil ? (2)
Gamme d’appareil ? (3)
Un site pour chaque device ?
Responsive webdesign, here we are ! 
Source : http://mediaqueri.es
Quelles technologies ? 
Grilles fluides 
- 
Media queries 
- 
Images flexibles 
- 
Typographie responsive
2. Grilles fluides
Relative units 
VS 
Fixed units
Fixed units - exemple 
#wrapper 
#header 
#sidebar #content 
#wrapper{ 
width: 960px; 
} 
#header{ 
width: 960px; 
} 
#sid...
Relative or fixed ? 
Pixels 
Points 
Pourcentage 
Em
Relative units - exemple 
#wrapper 
#header 
#sidebar #content 
#wrapper{ 
width: 100%; 
} 
#header{ 
width: 100%; 
} 
#si...
Grille fluide 
25% 25% 25% 25% 
33% 33% 33% 
50% 50% 
100%
4. Images flexibles
Défault 
Images are not 
naturally fluid.
Solution : relative units 
img{ 
max-width:100%; 
height:auto; 
} 
L’image s’affichera à sa taille normal sauf si 
elle es...
Et pour les background ? 
img{ 
background: url('test.jpg') no-repeat 50% 50%; 
-webkit-background-size: cover; /* Chrome ...
3. Media queries
Définition 
Une media query est une expression dont la valeur est 
toujours true ou false. Il suffit d'associer les différ...
Types de média (css2) 
screen - handheld - print - speech - 
braille - embossed - projection - tv
Propriétés du device (css3) 
color - color-index - device-aspect-ratio 
- aspect-ratio - device-height -device-width 
- gr...
Propriétés du device (css3) 
color - color-index - device-aspect-ratio 
- aspect-ratio - device-height -device-width 
- gr...
Opérateurs logiques (css3) 
and - only - not
Exemples 
screen and (max-width: 640px) 
- 
only print 
- 
screen and (orientation: landscape) 
- 
not screen and (max-dev...
Media query dans le head 
<!DOCTYPE html> 
<html> 
<head> 
... 
<link rel="stylesheet" media="screen" href="screen_style.c...
Media query dans le css 
@media screen and (max-width: 640px) { 
h1{ 
color: red; 
} 
p{ 
color: blue; 
} 
} 
h1{ 
color: ...
3. Typographie responsive
CSS Viewport Units 
The viewport-percentage lengths are relative to the size of 
the initial containing block. When the he...
Media Queries & em 
body { 
font-size: 100%; 
} 
h1 { 
font-size: 2.5em; 
} 
@media screen and (max-width: 50em) { 
h1 { 
...
Merci pour votre attention.
Bibliographie 
The 2014 Guide to Responsive Web Design - Nick Pettit 
http://blog.teamtreehouse.com/modern-field-guide-res...
Crédits 
Loïc Le Meur on Google Glass - Loïc Le Meur 
http://commons.wikimedia.org/wiki/File:A_Google_Glass_wearer.jpg
Prochain SlideShare
Chargement dans…5
×

WebApp #2 : responsive design

1 016 vues

Publié le

WebApp #2 : responsive design

Publié dans : Logiciels
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 016
Sur SlideShare
0
Issues des intégrations
0
Intégrations
155
Actions
Partages
0
Téléchargements
25
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

WebApp #2 : responsive design

  1. 1. Responsive design
  2. 2. 1. Responsive ?
  3. 3. Définition Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d’appareil. http://www.alsacreations.com
  4. 4. Gamme d’appareil ? (1)
  5. 5. Gamme d’appareil ? (2)
  6. 6. Gamme d’appareil ? (3)
  7. 7. Un site pour chaque device ?
  8. 8. Responsive webdesign, here we are ! Source : http://mediaqueri.es
  9. 9. Quelles technologies ? Grilles fluides - Media queries - Images flexibles - Typographie responsive
  10. 10. 2. Grilles fluides
  11. 11. Relative units VS Fixed units
  12. 12. Fixed units - exemple #wrapper #header #sidebar #content #wrapper{ width: 960px; } #header{ width: 960px; } #sidebar{ width: 300px; margin-right: 20px; } #content{ width: 640px; }
  13. 13. Relative or fixed ? Pixels Points Pourcentage Em
  14. 14. Relative units - exemple #wrapper #header #sidebar #content #wrapper{ width: 100%; } #header{ width: 100%; } #sidebar{ width: 31.25%; margin-right: 2.08334%; } #content{ width: 66.66667%; }
  15. 15. Grille fluide 25% 25% 25% 25% 33% 33% 33% 50% 50% 100%
  16. 16. 4. Images flexibles
  17. 17. Défault Images are not naturally fluid.
  18. 18. Solution : relative units img{ max-width:100%; height:auto; } L’image s’affichera à sa taille normal sauf si elle est plus large que son parent. Dans ce cas elle prendra la largeur de son parent.
  19. 19. Et pour les background ? img{ background: url('test.jpg') no-repeat 50% 50%; -webkit-background-size: cover; /* Chrome & Safari */ -moz-background-size: cover; /* Firefox */ -o-background-size: cover; /* Opera */ background-size: cover; } La taille de l’image s’adapte au conteneur en centrant verticalement et horizontalement.
  20. 20. 3. Media queries
  21. 21. Définition Une media query est une expression dont la valeur est toujours true ou false. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent. http://www.alsacreations.com
  22. 22. Types de média (css2) screen - handheld - print - speech - braille - embossed - projection - tv
  23. 23. Propriétés du device (css3) color - color-index - device-aspect-ratio - aspect-ratio - device-height -device-width - grid - height - monochrome - orientation - resolution - scan - width
  24. 24. Propriétés du device (css3) color - color-index - device-aspect-ratio - aspect-ratio - device-height -device-width - grid - height - monochrome - orientation - resolution - scan - width
  25. 25. Opérateurs logiques (css3) and - only - not
  26. 26. Exemples screen and (max-width: 640px) - only print - screen and (orientation: landscape) - not screen and (max-device-width: 480px)
  27. 27. Media query dans le head <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" media="screen" href="screen_style.css" type="text/css" /> <link rel="stylesheet" media="print" href="print_style.css" type="text/css" /> ... </head> <body></body> </html>
  28. 28. Media query dans le css @media screen and (max-width: 640px) { h1{ color: red; } p{ color: blue; } } h1{ color: green; }
  29. 29. 3. Typographie responsive
  30. 30. CSS Viewport Units The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. 1vw = Equal to 1% of the width of the initial containing block. 1vh = Equal to 1% of the height of the initial containing block. 1vmin = Equal to the smaller of ‘vw’ or ‘vh’ 1vmax = Equal to the larger of ‘vw’ or ‘vh’. http://www.w3.org/TR/css3-values/
  31. 31. Media Queries & em body { font-size: 100%; } h1 { font-size: 2.5em; } @media screen and (max-width: 50em) { h1 { font-size:2em; } } @media screen and (max-width: 40em) { h1 { font-size:1.5em; } }
  32. 32. Merci pour votre attention.
  33. 33. Bibliographie The 2014 Guide to Responsive Web Design - Nick Pettit http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design Using CSS Background-size Responsively - Kean Richmond http://www.onextrapixel.com/2012/03/02/using-css-background-size-responsively/ Les Media Queries CSS3 - dew (Alsacréations) http://www.alsacreations.com/article/lire/930-css3-media-queries.html Techniques for Responsive Typography - Sara Soueidan http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/ Pragmatic responsive design - yiibu http://fr.slideshare.net/yiibu/pragmatic-responsive-design Responsive Webdesign – présent et futur de l’adaptation mobile - Stéphanie Walter http://www.alsacreations.com/article/lire/1559-responsive-web-design-present-futur-adaptation-mobile.html
  34. 34. Crédits Loïc Le Meur on Google Glass - Loïc Le Meur http://commons.wikimedia.org/wiki/File:A_Google_Glass_wearer.jpg

×