WebApp #2 : responsive design

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

Responsive webdesign, here we are !
Source : http://mediaqueri.es

Quelles technologies ?
Grilles fluides
-
Media queries
-
Images flexibles
-
Typographie responsive

Relative units
VS
Fixed units

Fixed units - exemple
#wrapper
#header
#sidebar #content
#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
#wrapper
#header
#sidebar #content
#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%

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 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.

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

Opérateurs logiques (css3)
and - only - not

Exemples
screen and (max-width: 640px)
-
only print
-
screen and (orientation: landscape)
-
not screen and (max-device-width: 480px)

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;
}

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 & 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;
}
}

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

Crédits
Loïc Le Meur on Google Glass - Loïc Le Meur
http://commons.wikimedia.org/wiki/File:A_Google_Glass_wearer.jpg

WebApp #2 : responsive design

Contenu connexe

En vedette (20)

Similaire à WebApp #2 : responsive design (20)

Plus de Jean Michel (15)

WebApp #2 : responsive design