Site Web Responsive Design
Voir au format PDFVous êtes ici : >> RESPONSIVE-DESIGN / Site Web Responsive Design
Temps d'étude : 2h. 
Niveau : Facile.
Une base de site web responsive design
Voici une base responsive, n'hésitez pas à l'utiliser pour vos projets :
Voici le code Html :
base-responsive.html
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Base Template Responsive 2 colonnes Full Width</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" lang="fr" content="DESCRIPTION DU SITE"> <meta name="author" content="AUTEUR"> <meta name="robots" content="index, follow"> <link rel="favicon-icon" href="img/favicon.png"> <link rel="shortcut icon" href="img/favicon.ico"> <link rel="stylesheet" href="css/base-responsive.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </head> <body> <header> <div class="container"> <div class="header-logo"> <h1 class="header-nom-site">Nom Du Site</h1> </div> <div class="header-slogan"> <p>Le Slogan du Site</p> </div> <div class="header-droite"> <span>Zone Haut Droite</span> </div> <div class="clear"></div> </div> </header> <nav> <div class="container"> <ul> <li><a href="">Accueil</a></li> <li><a href="">Qui Sommes nous ?</a></li> <li><a href="">Contact</a></li> </ul> </div> </nav> <section> <div class="container"> <main> <h1>Titre de page</h1> <hr> <!-- Titre et niveaux --> <h1>Titre niveau 1</h1> <h2>Titre niveau 2</h2> <h2>Titre niveau 3</h2> <h2>Titre niveau 4</h2> <h5>Titre niveau 5</h5> <h6>Titre niveau 6</h6> <hr> <!-- Image Responsive --> <h2>Responsive images</h2> <p>Afin que vos images soient responsive, vous pouvez utiliser la classe <code>.img-responsive</code>.</p> <p><img class="img-responsive" src="http://placehold.it/700x350" alt="image manquante"></p> <hr> <!-- Paragraphe --> <h2>Paragraphe</h2> <p>Le Lorem Ipsum est simplement du faux texte employé dans la <a href="#">composition et la mise en page avant impression</a>. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p> <p> Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum</p> <hr> <!-- Liste --> <h2>Liste Non Ordonnée</h2> <p>Voici un exemple de liste non ordonnée.</p> <ul> <li>Element A</li> <li>Element B</li> <li>Element C</li> <li>Element D</li> <li>Element E</li> </ul> <hr> <h2>Liste Ordonnée</h2> <p>Voici un exemple de liste ordonnée.</p> <ol> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> </ol> <hr> <h2>Liste non mise en forme</h2> <p>Pour une liste non mise en forme, vous pouvez utiliser la classe <code>list-unstyled</code>.</p> <ul class="list-unstyled"> <li>Element</li> <li>Element</li> <li>Element</li> <li>Element</li> <li>Element</li> </ul> <hr> <h2>Liste en ligne</h2> <p>Pour une liste sur une seule ligne, vous pouvez utiliser la classe <code>list-inline</code>.</p> <ul class="list-inline"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul> <hr> <h2>Bouton</h2> <p>Vous pouvez appliquer la classe css <code>btn</code> pour avoir un style prédéfinie sur vos boutons.</p> <p><a href="#" class="btn">Submit</a></p> <hr> <!-- Tables --> <h2>Tables</h2> <p>Exemple d'un tableau de données</p> <table> <thead> <tr> <th>#</th> <th>Prénom</th> <th>Nom</th> <th>Pseudo</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Julien</td> <td>Cottet</td> <td>j.cottet</td> </tr> <tr> <th>2</th> <td>Amandine</td> <td>Thoyer</td> <td>lamandine</td> </tr> <tr> <th>3</th> <td>Thomas</td> <td>Winter</td> <td>twinter</td> </tr> </tbody> </table> </main> <aside> <h2>Sidebar</h2> <p>Contrairement à une opinion répandue, <a href="#">le Lorem Ipsum</a> n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.</p> </aside> <div class="clear"></div> </div> </section> <footer> <div class="container"> © Copyright 2016 </div> </footer> </body> </html>
Et, voici le code CSS :
base-responsive.css
/***************** GENERAL *****************/
body{
margin: 0;
padding: 0;
color: #333;
font: 1em/1.2 Helvetica, Arial, Geneva, sans-serif;
}
p{ line-height: 1.5; margin: 0; }
a:link { color: #337ab7; text-decoration: none; }
a:visited { color: #002366; }
a:focus { color: #000; }
a:hover { text-decoration: underline; }
a:active { color: #f43c80; }
hr{
margin: 1em 0 2em 0;
border: 0;
border-top: 1px solid #ddd;
}
table{
border-collapse: collapse;
border-top: 1px solid #ddd;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
th, td{
padding: 0.5em 1em;
vertical-align: top;
text-align: left;
border-bottom: 1px solid #ddd;
}
.container{
max-width: 70em;
margin: 0 auto;
}
.clear{ clear: both; }
h1, h2, h2, h2, h5, h6 {
font-weight: 500;
margin: 0 0 0.5em;
}
.img-responsive { max-width: 100%; }
/***************** GENERAL *****************/
/***************** HAUT *****************/
header {
padding: 1em 3em;
min-height: 30px;
background: #dedede;
}
.header-slogan , .header-droite { padding: 0.3em 0 0 0; }
.header-logo{
float: left;
margin-bottom: 1em;
margin-right: 5%;
width: 30%;
/* background: red; */
}
h1.header-nom-site { margin: 0; font-size: 1.5em; }
.header-slogan
{
float: left;
width: 30%;
margin-bottom: 1em;
margin-right: 5%;
text-align: center;
/* background: blue; */
}
.header-droite
{
float: left;
width: 30%;
text-align: right;
/* background: green; */
}
/***************** HAUT *****************/
/***************** MENU *****************/
nav{
background: #555;
text-align: center;
min-height: 30px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
margin: 0;
}
nav ul li a{
display:inline-block;
text-decoration: none;
padding: 0 2em;
color: #fff !important;
min-height: 30px;
line-height: 30px;
}
nav ul a:hover{
background: #337ab7;
text-decoration: none;
}
/***************** MENU *****************/
/***************** CONTENU *****************/
section{ padding: 1em;}
main
{
float: left;
width: 65%;
margin-right: 5%;
margin-bottom: 1em;
}
aside
{
float: left;
width: 30%;
margin-bottom: 1em;
}
/***************** CONTENU *****************/
/***************** BAS *****************/
footer
{
color: #fff;
background: #555;
padding: 1em 1.25em;
}
/***************** BAS *****************/
/***************** RESPONSIVE TABLETTE *****************/
@media (max-width: 60em)
{ /* une seule colonne (one column page) */
body:before{ background: #fda500; content: "responsive version tablette"; position: absolute; color: #fff; padding: 2px; font-size: 12px; }
main{ width: 100%; }
aside{ width: 100%; }
}
/***************** RESPONSIVE TABLETTE *****************/
/***************** RESPONSIVE SMARTPHONE *****************/
@media (max-width: 36em)
{ /* width 100% pour les éléments du header et du menu (full width) */
body:before{ background: #337ab7; content: "responsive version smartphone"; position: absolute; color: #fff; padding: 2px; font-size: 12px; }
.header-logo{ width: 100%; text-align: left; }
.header-slogan{ width: 100%; text-align: left; }
.header-droite{ width: 100%; text-align: left; }
nav ul li a{ display: block; border-bottom: 1px solid #c0c0c0; text-align: left; }
}
/***************** RESPONSIVE SMARTPHONE *****************/
/***************** REPRISE FACULTATIVE *****************/
.list-unstyled{
padding-left: 0;
list-style: none;
}
.list-inline{
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li{
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
.btn{
color: #fff !important;
background-color: royalblue;
border-color: #222;
display: inline-block;
padding: .5em 1em;
margin-bottom: 0;
font-weight: 400;
line-height: 1.2;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: .2em;
text-decoration: none;
}
.btn:hover{
color: #fff !important;
background-color: #111;
}
.btn:focus{
color: #fff !important;
background-color: #fda500;
}
.btn:active{
color: #fff !important;
background-color: #f43c80;
}
/***************** REPRISE FACULTATIVE *****************/
Desktop écran d'ordinateur :
Tablette :
Smartphone :
Tablette :
Smartphone :
Quelques explications sur le code Html et Css
Tout d'abord, au niveau de l'arborescence, un dossier /base-responsive/ est créé.
Le fichier base-responsive.html est créer à la racine de ce même dossier
2 sous dossiers sont créés : /img/ et /css/
Voici un lien vers l'icone favicon.ico et favicon.png a enregistrer et à placer dans le dossier /img/ du projet.
Le code JavaScript ci-dessous permet l'interprétation des balises html5 (header, footer, main, aside, nav, etc.) par les anciens navigateurs :
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>Ensuite, ce n'est pas un conteneur qui contient tout le site mais bien un conteneur à l'intérieur de chaque zone importante (header, nav, section, footer) pour donner un effet pleine largeur (full width).
<header> <div class="container"> ... </div> </header> <nav> <div class="container"> ... </div> </nav> <section> <div class="container"> ... </div> </section> <footer> <div class="container"> ... </div> </footer>
C'est la raison pour laquelle le container n'a pas été nommé avec un ID mais une classe
.container afin que l'on puisse la rappeler plusieurs fois.Le haut et menu du site
1 zone compose le menu du site et 3 zones prennent position dans la partie du haut de site header-logo, header-slogan et header-droite :<header> <div class="container"> <div class="header-logo"> <h1 class="header-nom-site">Nom Du Site</h1> </div> <div class="header-slogan"> <p>Le Slogan du Site</p> </div> <div class="header-droite"> <span>Zone Haut Droite</span> </div> <div class="clear"></div> </div> </header> <nav> <div class="container"> <ul> <li><a href="">Accueil</a></li> <li><a href="">Qui Sommes nous ?</a></li> <li><a href="">Contact</a></li> </ul> </div> </nav>Le code CSS de base pour ces différentes zones est le suivant :
/***************** HAUT *****************/
header {
padding: 1em 3em;
min-height: 30px;
background: #dedede;
}
.header-slogan , .header-droite { padding: 0.3em 0 0 0; }
.header-logo{
float: left;
margin-bottom: 1em;
margin-right: 5%;
width: 30%;
}
h1.header-nom-site { margin: 0; font-size: 1.5em; }
.header-slogan
{
float: left;
width: 30%;
margin-bottom: 1em;
margin-right: 5%;
text-align: center;
}
.header-droite
{
float: left;
width: 30%;
text-align: right;
}
/***************** HAUT *****************/
/***************** MENU *****************/
nav{
background: #555;
text-align: center;
min-height: 30px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
margin: 0;
}
nav ul li a{
display:inline-block;
text-decoration: none;
padding: 0 2em;
color: #fff !important;
min-height: 30px;
line-height: 30px;
}
nav ul a:hover{
background: #337ab7;
text-decoration: none;
}
/***************** MENU *****************/
Vous pouvez apercevoir que chaque zone se voit dotée d'une largeur de 30 % de l'écran, ainsi lorsqu'une connexion aura lieu avec un plus petit écran, le site sera elastique et s'adaptera automatiquement (pourcentage % = responsive fluide).
Concernant le haut de site, nous n'avons pas défini de règle différente ou complémentaire dans la version responsive inférieure a 60 em (pour écran intermédiaire type tablette).
En revanche, pour la version responsive inférieure à 36 em (pour petit écran type smartphone), nous avons défini le code suivant :
@media (max-width: 36em)
{
body:before{ background: #337ab7; content: "responsive version smartphone"; position: absolute; color: #fff; padding: 2px; font-size: 12px; }
.header-logo{ width: 100%; text-align: left; }
.header-slogan{ width: 100%; text-align: left; }
.header-droite{ width: 100%; text-align: left; }
nav ul li a{ display: block; border-bottom: 1px solid #c0c0c0; text-align: left; }
}
Pour une meilleure visibilité (par le mobinaute), ce code permet d'étirer les zones du haut à 100% (sur toute la largeur) et ainsi ne plus bénéficier de l'effet côte à côte
float: left;.De la même manière, les liens du menu prendront toute la place en largeur.
La 1ère ligne
body:before permet de garder une indication lors des tests (par l'intérmédiaire de la propriété content qui nous permet d'intégrer du texte dans le code Html), il ne faudra pas oublier de la retirer lors de la mise en ligne (en production).Le contenu du site
2 zones composent le milieu du site main et aside :<section> <div class="container"> <main> <h1>Titre de page</h1> <hr> <!-- Titre et niveaux --> <h1>Titre niveau 1</h1> <h2>Titre niveau 2</h2> <h2>Titre niveau 3</h2> <h2>Titre niveau 4</h2> <h5>Titre niveau 5</h5> <h6>Titre niveau 6</h6> <hr> <!-- Image Responsive --> <h2>Responsive images</h2> <p>Afin que vos images soient responsive, vous pouvez utiliser la classe <code>.img-responsive</code>.</p> <p><img class="img-responsive" src="http://placehold.it/700x350" alt="image manquante"></p> <hr> <!-- Paragraphe --> <h2>Paragraphe</h2> <p>Le Lorem Ipsum est simplement du faux texte employé dans la <a href="#">composition et la mise en page avant impression</a>. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p> <p> Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum</p> <hr> </main> <aside> <h2>Sidebar</h2> <p>Contrairement à une opinion répandue, <a href="#">le Lorem Ipsum</a> n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, s'est intéressé à un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant la Renaissance, est un traité sur la théorie de l'éthique. Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit amet...", proviennent de la section 1.10.32.</p> </aside> <div class="clear"></div> </div> </section>
Voici le code CSS pour la partie contenu :
/***************** CONTENU *****************/
section{ padding: 1em;}
main
{
float: left;
width: 65%;
margin-right: 5%;
margin-bottom: 1em;
}
aside
{
float: left;
width: 30%;
margin-bottom: 1em;
}
/***************** CONTENU *****************/
La zone
main se voit dotée d'une largeur de 65 % de l'écran et aside d'une largeur de 30% de l'écran, avec les 5% de marges cela fait bien 100%, ainsi lorsqu'une connexion aura lieu avec un plus petit écran, le site sera elastique et s'adaptera automatiquement (pourcentage % = responsive fluide).Le milieu de site est sur 2 colonnes et sera réduit a 1 colonne (l'une en dessous de l'autre) dans la version responsive inférieure à 60 em pour une taille d'écran moyen (type tablette).
/***************** RESPONSIVE TABLETTE *****************/
@media (max-width: 60em)
{ /* une seule colonne (one column page) */
body:before{ background: #fda500; content: "responsive version tablette"; position: absolute; color: #fff; padding: 2px; font-size: 12px; }
main{ width: 100%; }
aside{ width: 100%; }
}
/***************** RESPONSIVE TABLETTE *****************/
Par conséquent, pour la version responsive inférieure à 36 em (petit écran type smartphone), il ne sera pas nécessaire d'y retoucher (puisque cela aura été fait dans la version type tablette).
Le bas du site
Le bas du site n'est pas concerné par la partie responsive.RESPONSIVE DESIGN
1. Le Responsive Design 2. Exemples 3. Creer Sa Page Web 4. Site Web Responsive Design
