responsive design (cas pratique)
DESCRIPTION
Approche proposée au responsive design dans le cadre d'un exercice.TRANSCRIPT
Olivier Dommange
Webdesign
Responsive design
Interface graphique
Media queries
Supports
Impression
Media queries – Olivier Dommange 1
Interface graphique
Media queries – Olivier Dommange 2
Interface graphique
Media queries – Olivier Dommange 3
Interface graphique (HTML – CSS)
<div id="entete"> <div id="entete_espace"> <h3>Ecran<br /> Mobile<br /> Impression</h3> <h1>Page Web adaptative</h1> <h2>Une page dynamique qui réagit aux supports</h2> </div> </div> <div id="page"> <div id="col_gauche"> <div id="corps_entete"> <h1><span>Titre</span></h1> <p> [...] </p> </div> <div id="article"> <h1>Titre</h1> <img src="images/strategie.png" /> <p> [...] </p> <div class="clear"></div> </div> <div id="article"> <h1>Titre</h1> <img src="images/ecrans.png" /> <p> [...] </p> <div class="clear"></div> </div> </div> <div id="col_droite"> <h2>En savoir plus...</h2> <p>[...]</p> <ul id="liens"> <li> <a href="http://www.site.com"> <h3>Titre du lien</h3><p>Description</p> </a> </li> <li> <a href="http://www.site.com"> <h3>Titre du lien</h3><p>Description</p> </a> </li> </ul> </div> <div class="clear"></div> <div id="pied">2011 - Atelier : Page Web adaptative</div> </div>
/* ========================================== *\ 1. MISE EN PAGE ========================== \* ========================================== */ div#entete{width:100%; height:230px; background-color:#FF3304;} div#entete_espace{width:1050px; margin:0px auto 0px auto; color:#fff;} div#page{width:1050px; margin:0 auto; } div#col_gauche{width:730px; float:left;} div#col_droite{width:270px; float:right; margin:50px 0 0 0;} div#pied{color:#fff; font-size:11px; height:45px; background-color:#000; padding:10px;} .clear{clear:both;} /* ========================================== *\ 2. MISE EN FORME ========================= \* ========================================== */ /* 2.1 Entete (entete) ----------------------*/ div#entete_espace h1{font-size:56px; width:650px; font-family:Verdana, sans-serif; font-weight:normal; margin:0 0 6px 0;} div#entete_espace h2{font-size:10px; font-weight:normal;} div#entete_espace h3{font-size:13px; font-weight:normal; max-width:100px; margin:0px 0px 25px 0px; padding:10px; background-color:#1ABD02;} div#entete_espace p{font-size:9px;} div#entete_espace img{float:right; margin:0px 0px 0px 10px;} /* 2.2 Corps entete) ------------------ */ div#corps_entete{margin:50px 0;} div#corps_entete h1{padding:0; margin:0 0 25px 0; font-family:"Times New Roman", Times, serif; font-weight:normal; width:auto; font-size:26px; line-height:32px; white-space:nowrap;} div#corps_entete h1 span{color:#fff; background-color:#000; padding:3px 8px;} div#corps_entete p{color:#000; font-size:11px; margin-bottom:14px; line-height:15px;} /* 2.2 Corps (colonne 1) ------------------ */ div#article{border:17px solid #eee; padding:5px; margin:0 0 17px 0; box-shadow:0px 1px 3px #999; min-height:180px;} div#article img{float:left; width:200px; margin:0 20px 0 0;} /* 2.3 Corps (colonne 2) ------------------ */ div#col_droite h2{font-size:22px; font-family:"Times New Roman", Times, serif; font-weight:normal; color:#000; margin:0 0 15px 0;} div#col_droite p{font-size:11px; line-height:20px; margin:0 7px 14px 7px;} ul#liens{list-style-type:circle; margin:0 0 0 30px; color:#999;} ul#liens li{margin-bottom:17px;} ul#liens h3{color:#ff3304;} ul#liens p{margin:0;} ul#liens a{ border:1px solid #ddd; border-radius:4px; padding:3px 6px; display:block; text-decoration:none; color:#000;} ul#liens a:hover{border-color:#999; background-color:#f5f5f5;} ul#liens a:hover h3{}
Media queries – Olivier Dommange 4
Media queries
Medias Fonctions
screen Écrans color Profondeur de la couleur (bits/pixel)
handheld Mobiles color‐index Table de couleurs indexées
print Impression aspect‐ratio Ratio de la taille (ex. 16/9)
aural / speech Vocales device‐aspect‐ratio Ratio de la zone d'affichage du périphérique
braille Plages braille device‐height Hauteur en pixel du périphérique
embossed Imprimantes braille device‐width Largeur en pixels du périphérique
projection Projecteurs grid Affichage (bitmap ou grid – ex. lcd)
tty Terminal (caractères mono espace) height Hauteur en pixel de la zone d'affichage
tv Télévision monochrome Profondeur des niveaux de gris (bits/pixel)
all Tous (par défaut) orientation Orientation du périphérique (portait ou landscape)
resolution Résolution du périphérique
scan Balayage des téléviseurs (progressive ou interlace)
width Largeur en pixels de la zone d'affichage
<!-- Current --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- < 800px --> <link href="css/screen800.css" rel="stylesheet" type="text/css" media="only screen and (min-width:750px) and (max-width:1024px)" /> <!-- < 480px --> <link href="css/screen480.css" rel="stylesheet" type="text/css" media="only screen and (min-width:480px) and (max-width:749px)" /> <link href="css/handheld.css" rel="stylesheet" type="text/css" media="only screen and (max-width:479px)" /> <!-- Tel mobile --> <link href="css/handheld.css" rel="stylesheet" type="text/css" media="handheld" /> <!-- Impression --> <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
Media queries – Olivier Dommange 5
Media queries (supports ecran)
Media queries – Olivier Dommange 6
Feuilles de style
screen800.css div#entete{width:100%; height:230px; background-color:#FF3304;} div#entete_espace{width:750px; margin:0px auto 0px auto; color:#fff;} div#page{width:750px; margin:0 auto; } div#col_gauche{width:480px; float:left;} div#col_droite{width:220px; float:right; margin:50px 0 0 0;}
screen480.css div#entete_espace h1{font-size:36px; width:400px; font-family:Verdana, sans-serif; font-weight:normal; margin:0 0 6px 0;} div#entete{width:100%; height:230px; background-color:#FF3304;} div#entete_espace{width:350px; margin:0px auto 0px auto; color:#fff;} div#page{width:400px; margin:0 auto; } div#col_gauche{width:400px;} div#article img{float:left; width:350px; margin:5px;} div#col_droite{display:none;}
handheld.css div#entete_espace h1{font-size:36px; width:100%; font-family:Verdana, sans-serif; font-weight:normal; margin:0 0 6px 0;} div#entete{width:100%; height:230px; background-color:#FF3304;} div#entete_espace{width:100%; margin:0px auto 0px auto; color:#fff;} div#page{width:100%; margin:0 auto; } div#col_gauche{width:100%;} div#article img{width:100%; margin:5px 0;} div#col_droite{display:none;}
Media queries – Olivier Dommange 7
Media queries (impression)
Media queries – Olivier Dommange 8
Feuilles de style (impression)
print.css div#entete_espace h1{font-size:30pt; width:100%; font-family:Verdana, sans-serif; font-weight:normal; margin:0 0 6px 0;} div#entete_espace h2{font-size:10pt;} div#entete_espace h3{display:none;} div#entete{width:100%; height:auto;} div#entete_espace{width:100%; margin:0px auto 0px auto; color:#fff;} div#page{width:100%; margin:0 auto; } div#col_gauche{width:100%;} div#col_droite{display:none;} div#corps_entete{margin:1cm 0 0 0;} div#corps_entete h1{padding:0; margin:0 0 0.2cm 0; font-family:Verdana, sans-serif; font-weight:normal; width:auto; font-size:14pt; line-height:normal;} div#corps_entete h1 span{padding:0px;} div#article{border:0; padding:5px; margin:0 0 17px 0; box-shadow:0px 1px 3px #999; min-height:0;}