responsive design (cas pratique)
DESCRIPTION
Approche proposée au responsive design dans le cadre d'un exercice.TRANSCRIPT
![Page 1: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/1.jpg)
Olivier Dommange
Webdesign
Responsive design
Interface graphique
Media queries
Supports
Impression
![Page 2: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/2.jpg)
Media queries – Olivier Dommange 1
Interface graphique
![Page 3: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/3.jpg)
Media queries – Olivier Dommange 2
Interface graphique
![Page 4: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/4.jpg)
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{}
![Page 5: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/5.jpg)
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" />
![Page 6: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/6.jpg)
Media queries – Olivier Dommange 5
Media queries (supports ecran)
![Page 7: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/7.jpg)
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;}
![Page 8: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/8.jpg)
Media queries – Olivier Dommange 7
Media queries (impression)
![Page 9: Responsive design (cas pratique)](https://reader034.vdocument.in/reader034/viewer/2022042813/548693efb47959e70c8b5286/html5/thumbnails/9.jpg)
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;}