Tutoriels >> Le Responsive Design

Le Responsive Design


Le Responsive Design permet de construire un site internet afin qui s’adapte automatiquement à plusieurs tailles d’écrans prédéfinies. Dans cet exemple nous passerons outre les éléments primaires du HTML et du CSS que vos pouvez retrouver dans un de nos précédents documents.


Nous allons ici aborder la construction basique d'une page répondant aux impératifs du responsive design grâce aux Media Queries. Derrière ce nom un peu barbare se cache une merveille du CSS qui permet de cibler directement une résolution spécifique, un type de média, une taille d'écran, etc., ceci afin d'adapter automatiquement un gabarit de site internet au périphérique sur lequel il est affiché.


Pour ce faire, vous n'aurez besoin de rien d'autres que des Media Queries instaurées depuis le CSS3. Une longue explication ne serait pas nécessaire et l’exemple et bien souvent la meilleurs formule. Vous trouverez donc un template complet détaillée ci-dessous qu’il suffit de reprendre pour avoir la base de votre page.

Ici, nous utilisons une transformation en 4 étapes. La première concerne la page de base lorsqu’elle est affichée en plein écran sur un navigateur, il s’agit tout simplement des attributs de base de votre CSS. Ensuite, vous définirez vos styles si la page passe en-dessous de la barre des 980 pixels, puis des 700, et pour finir, des 480. Les tailles sont exprimées en pourcentage de leurs tailles initiales, les blocs et les images s’adaptent ainsi facilement aux différentes résolutions intermédiaires qu’il n’est donc pas utile de gérer, tout est fait automatiquement.


Voici un exemple de mise en forme CSS que nous allons détailler un peu plus bas, cliquez ici pour vois le rendu dans votre navigateur :


#header {
	height: 100px;
	padding: 10px;
	background: #f0efef;
}
#content {
	width: 728px;
	padding: 10px;
	float: left;
}
#sidebar {
	width: 232px;
height: #content.height;
	padding: 10px;
	float: right;
}
#footer {
	padding: 10px;
	clear: both;
	background: #f0efef;
} /* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
	width: 94%;
}
#content {
	width: 65%;
	padding: 1%;
}
#sidebar {
	width: 30%;
	padding: 1%;
}
} /* for 700px or less */
@media screen and (max-width: 700px) {
#content {
	width: auto;
	float: none;
}
#sidebar {
	width: auto;
	float: none;
}
} /* for 480px or less */
@media screen and (max-width: 480px) {
#header {
	height: auto;
}
h1 {
	font-size: 24px;
}
#sidebar {
	display: none;
}
}

Comme vous pouvez le constater, nous avons en premier lieu défini nos styles de manière tout à faire classique. Viennent ensuite les Media Queries qui nous permettent d'y ajouter quelques spécificités très simplement grâce à la ligne :


 @media screen and (max-width: 700px) { } 

Vous indiquez ainsi à votre CSS qu'il devra prendre en considération ce qui se trouve à l'intérieur de la balsie @media screen une fois que la taille de l'écran passera en dessous de la barre des 700px. Vous pouvez alors, au choix, soit proposer un affichage en poucentage afin que votre gabarit s'adapte simplement à la fenêtre d'affichage, soit redéfinir des tailles plus petites, ou même supprimer les div, en rajouter. Bref, tout est possible.


Le Responsive Design n'est donc vraiment pas quelque chose de très compliqué à la première approche et on se familiarise très rapidement avec ses notions élémentaires. Le plus difficile reste de structurer des pages en gardant à l'esprit qu'elles doivent pouvoir se destructurer facilement pour rester lisible sur l'ensemble des formats, mais ce n'est qu'une question d'habitude à prendre.


Voici le fichier HTML utilisé pour la réalisation de cette page :


<body>
<div id="pagewrap">
  <div id="header">
    <h1>Header de la page</h1>
  </div>
  <div id="content">
    <h2>Cadre principal</h2>
    <p> Votre contenu à cet emplacement.</p>
  </div>
  <div id="sidebar">
    <h3>Sidebar</h3>
    <p> Contenu additionnel.</p>
  </div>
  <div id="footer">
    <h4>Footer</h4>
  </div>
</div>
</body>