View
358
Download
1
Category
Preview:
DESCRIPTION
WebApp #2 : responsive design
Citation preview
Responsive design
1. Responsive ?
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
Gamme d’appareil ? (1)
Gamme d’appareil ? (2)
Gamme d’appareil ? (3)
Un site pour chaque device ?
Quelles technologies ?
Grilles fluides-
Media queries-
Images flexibles-
Typographie responsive
2. Grilles fluides
Relative units VS
Fixed units
Fixed units - exemple
#header
#sidebar #content
#wrapper
#wrapper{ width: 960px; } #header{ width: 960px; } #sidebar{ width: 300px; margin-right: 20px; } #content{ width: 640px; }
Relative or fixed ?
Pixels
Points
Pourcentage
Em
Relative units - exemple
#header
#sidebar #content
#wrapper
#wrapper{ width: 100%; } #header{ width: 100%; } #sidebar{ width: 31.25%; margin-right: 2.08334%; } #content{ width: 66.66667%; }
Grille fluide
25% 25% 25% 25%
33% 33% 33%
50% 50%
100%
4. Images flexibles
Images are not naturally fluid.
Défault
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.
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.
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é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
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 - grid - height - monochrome - orientation - resolution - scan - width
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
Opérateurs logiques (css3)
and - only - not
screen and (max-width: 640px)-
only print-
screen and (orientation: landscape)-
not screen and (max-device-width: 480px)
Exemples
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>
Media query dans le css
@media screen and (max-width: 640px) { h1{ color: red; } p{ color: blue; } }
h1{ color: green; }
3. Typographie responsive
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/
Media Queries & embody { 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; } }
Merci pour votre attention.
BibliographieThe 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/
Techniques for Responsive Typography - Sara Soueidan http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/
Les Media Queries CSS3 - dew (Alsacréations) http://www.alsacreations.com/article/lire/930-css3-media-queries.html
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
CréditsLoïc Le Meur on Google Glass - Loïc Le Meur http://commons.wikimedia.org/wiki/File:A_Google_Glass_wearer.jpg
Recommended