Exemples

Voir au format PDF
Vous êtes ici : >> RESPONSIVE-DESIGN / Exemples
Temps d'étude : 1h. Niveau : Facile.
Tags : Exemples
Fichier(s) utile(s) pour ce cours : /

Le ViewPort

L'attribut « viewport » permet de préciser au navigateur quelle taille il doit prendre pour afficher une page web.

width=device-width permet de régler la largeur de la page web sur la largeur de la fenêtre de l'appareil qui consulte actuellement la page

initial-scale=1 permet de régler le niveau de zoom sur 100 % (par défaut).

Pour démarrer une structure de site web responsive, nous utiliserons les balises et attributs suivants :

responsive1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Mon Site Responsive</title >
			<link rel="stylesheet" href="responsive1.css">
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>
			...
		</body>
	</html>

Exemple sans responsive design (taille fixe)

Il n'y a pas si longtemps que cela (quelques années) les sites web étaient construits avec des mesures fixes et ne s'adaptaient pas aux différents écrans car il n'y en avait souvent qu'un seul (l'écran d'ordinateur de bureau).

Voici un exemple Html simple SANS responsive design FIXE :

fixe1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site SANS Responsive</title>
			<link rel="stylesheet" href="fixe1.css">
		</head>
		<body>
			<div class="zone-fixe"> Zone Fixe</div>
		</body>
	</html>

La partie Css :

fixe1.css
	.zone-fixe{ 
		width: 1000px; 
		background: blue;
		color: white;
		padding: 10px;	
	}
Explication du code :

La propriété width permet d'indiquer la largeur, dans notre cas elle fera 1000 pixels, ce qui est une taille fixe.
Essayez donc de redimensionner votre fenêtre, vous verrez qu'elle fera toujours toujours 1000 pixels et sur les petits écrans (petites fenêtres en largeur) cela risque de créer une scrollbar (barre de défilement) horizontale, c'est ce que nous voulons absolument éviter ! c'est ce qu'on appelle un site web n'étant pas responsive et par conséquent fixe. A éviter !

La propriété background n'est présente que pour afficher et voir notre zone sur l'écran.

Résultat
Taille grand écran (ordinateur de bureau) :
image manquante
Rien à signaler de particulier


Taille écran moyen (ordinateur portable) :
image manquante
Nous voyons l'apparition d'une scrollbar horizontale et cela est très déconseillé !


Taille écran réduit (tablette) :
image manquante
La scrollbar horizontale s'agrandit car la taille est fixe !


Taille petit écran (mobile) :
image manquante
Sur un mobile, la scrollbar est très importante et donc cela risque d'être difficile pour le mobinaute de lire le texte qui pourrait être écrit complétement à droite (et même si son téléphone mobile fait apparaitre la page sur un seul affichage (de manière condensée) cela risque d'être très petit et le mobinaute sera obligé de zommer !


fléche Informations
Les largeurs complément fixes sont à proscrire car elles ne sont plus adaptées aux modes de consommation et aux habitudes de surf des internautes !


Avantages Inconvénients
Moins prise de tête (normal : aucun responsive) Plus du tout adapté à notre époque !

Exemple simple responsive design fluide

Voici un exemple Html simple de responsive design fluide :

fluide1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site Responsive Fluid</title>
			<link rel="stylesheet" href="fluide1.css" />
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>
			<div class="zone-fluid"> 
				Zone Fluid
			</div>
		</body>
	</html>

La partie Css :

fluide1.css
	.zone-fluid{
	background: red;
	width: 70%;
	}
Explication du code :

La propriété width permet d'indiquer la largeur, dans notre cas elle fera 70 %.
70 % de quoi ? 70 % de la taille de la fenêtre, essayez donc de redimensionner votre fenêtre, vous verrez qu'elle sera toujours à bonne largeur, l'utilisation des pourcentages c'est ce qu'on appelle du responsive fluide (une fois que cela est généralisé à tout le site web).

La propriété background n'est présente que pour afficher et voir notre zone sur l'écran.

Résultat
Taille grand écran (ordinateur de bureau) :
image manquante
La largeur fait bien 70 % de 1200 pixels (soit environ 840 pixels).


Taille écran moyen (ordinateur portable) :
image manquante
La largeur fait bien 70 % de 992 pixels (soit environ 695 pixels). ET SURTOUT : nous n'avons pas de scrollbar.


Taille écran réduit (tablette) :
image manquante
La largeur fait bien 70 % de 768 pixels (soit environ 538 pixels). Sans Scrollbar.


Taille petit écran (mobile) :
image manquante

La largeur fait bien 70 % de 380 pixels (soit environ 266 pixels). Et même dans le cas du plus petit écran nous n'avons pas de scrollbar car nous faisons toujours 70 % de quelque chose, nous serons donc toujours moins large de 30 % !

fléche Informations
Les pourcentages constituent une bonne option à privilégier mais nous ne construisons pas la totalité d'un site web avec des pourcentages, nous en reparlerons plus bas dans ce tuto.


Avantages Inconvénients
Largeur toujours adaptée Pas de contrôle sur la manière dont s'affichent les éléments dans une situation précise. C'est toujours la même.

Exemple simple responsive design Adaptatif

Pour cet exemple, nous retrouvons l'utilisation des pixels. je sais qu'on a dit que l'utilisation des pixels seulement n'était pas une bonne solution, mais là, nous les utiliserons avec les medias queries

Voici un exemple Html simple de responsive design adaptatif :

adaptatif1.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site Responsive Adaptatif</title>
			<link rel="stylesheet" href="adaptatif1.css" />
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>
			<div class="zone-adaptative"> 
				Zone adaptative
			</div>
		</body>
	</html>

La partie Css :

adaptatif1.css
	.zone-adaptative{
	background: orange;
	}
	@media (min-width: 768px) {
	  .zone-adaptative {
		width: 750px;
	  }
	}
	@media (min-width: 992px) {
	  .zone-adaptative {
		width: 970px;
	  }
	}
	@media (min-width: 1200px) {
	  .zone-adaptative {
		width: 1170px;
	  }
	}
Explication du code :

La propriété width permet d'indiquer la largeur, dans notre cas .zone-adaptative n'a aucune largeur particulière (et donc par défaut : la totalité en largeur de la fenêtre).
La régle @media permet d'indiquer et d'adapter la largeur de notre .zone-adaptative selon la taille et résolution d'écran.
C'est ce qu'on appelle du RESPONSIVE ADAPTATIF ! il s'agit d'un comportement différent exprimé en fonction de diverses situations.

La suite des explications se trouve dans les résultats :

La propriété background n'est présente que pour afficher et voir notre zone sur l'écran.

Résultat
Taille grand écran (ordinateur de bureau) :
image manquante
La largeur de notre zone fait bien 1170 pixels. La largeur de l'écran est supérieure ou au minimum sur 1200 pixels (@media (min-width: 1200px)), nous avons donc la place nécessaire pour 1170px.


Taille écran moyen (ordinateur portable) :
image manquante
La largeur de notre zone fait bien 970 pixels. La largeur de l'écran est supérieure ou au minimum sur 992 pixels (@media (min-width: 992px)), nous avons donc la place nécessaire pour 970px.


Taille écran réduit (tablette) :
image manquante
La largeur de notre zone fait bien 750 pixels. La largeur de l'écran est supérieure ou au minimum sur 768 pixels (@media (min-width: 768px)), nous avons donc la place nécessaire pour 750px.


Taille petit écran (mobile) :
image manquante

La largeur n'est pas précisée. Par conséquent lorsque la largeur n'est pas précisée, elle fait toute la largeur de l'écran ! et pas 1 pixel de plus, du coup on prend la totalité de la place dont on dispose et on n'est sûr de ne pas déborder et de ne pas avoir de scrollbar horizontale (barre de defilement).

fléche Bon à savoir
Noter que nous ne réglons pas forcément la hauteur (height) car cela dépend du contenu à l'intérieur de chaque zone.


Observations FireBug image manquante

Comme vous pouvez le constater plusieurs largeurs (width) sont transmises au navigateur, et selon la largeur de la fenêtre il barre (annule) celles qui ne correspondent pas à nos médias queries.

fléche En Conclusion
Cet exemple est une bonne option à privilégier, c'est un avantage d'avoir un contrôle précis (au pixel près) sur le code, mais cela peut parfois être long et contraignant de réécrire le comportement d'une multitude de zones, nous l'avons fait pour une zone mais imaginez le code que nous devrions écrire et les tests que nous devrions réaliser si nous avions 50 zones par page et un nombre conséquent de pages ? Cela peut forcer a réécrire toute la partie css du site 4 fois. Nous allons donc retenir cette option pour la suite en la combinant à l'utilisation des pourcentages (adaptatif + fluide !)


Avantages Inconvénients
Contrôle précis dans chaque situation Beaucoup de code à réécrire

Exemple responsive design Fluide et Adaptatif

Alors, qu'est-ce qui serait le mieux entre le fluid et l'adaptatif d'après vous ? les deux comportent des avantages et des inconvénients, mais pourquoi choisir ?

Pour monter en puissance et en efficacité, l'idéal serait plutôt de combiner les deux !!

Un site web responsive design peut être à la fois fluide et adaptatif !

Fluide = utilisation des pourcentages.
Adaptatif = Différence par type d'écran (régles medias queries)

Voici un exemple Html simple de responsive design fluide et adaptatif :

responsive-design.html
	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site Responsive Fluide et Adaptatif</title>
			<link rel="stylesheet" href="responsive-design.css" />
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>
			<div class="zone-1"> 
				<div class="zone-2"> Zone 2 </div>
				<div class="zone-3"> Zone 3 </div>
				<div class="clear"></div>
			</div>
		</body>
	</html>

La partie Css :

responsive-design.css
	.zone-1{
	background: brown;
	color: white;
	border: 3px solid #000;
	}
	.zone-2{
	width: 100%;
	background: pink;
	color: white;
	}
	.zone-3{
	width: 100%;
	background: gray;
	color: white;
	}
	.clear{ clear: both; }
	@media (min-width: 768px) {
	  .zone-1 {	width: 750px; }
	}
	@media (min-width: 992px) {
	  .zone-1 {	width: 970px; }
	  .zone-2, .zone-3 { width: 50%; float: left; }
	}
	@media (min-width: 1200px) {
	  .zone-1 {	width: 1170px;  }
	  .zone-2, .zone-3 { width: 50%; float: left; }
	}
Explication du code :

Nous avons une zone .zone-1 qui fait office de conteneur et qui contient donc les deux autres .zone-2 et .zone-3
La propriété width de la zone .zone-1 n'a aucune largeur particulière (et donc par défaut : la totalité en largeur de la fenêtre).
La propriété width de la zone .zone-2 est fixée a 100% de son parent (le parent est zone-1 qui fait la totalité de la fenêtre). idem pour la zone .zone-3
Il est donc normal que zone-2 et zone-3 s'affichent l'une en dessous de l'autre.

SAUF QUE, nous avons prévu des cas différents (@media) en fonction des situations :
  • Taille grand écran (ordinateur de bureau - @media (min-width: 1200px))
    La largeur de notre zone-1 est fixées a 1170 pixels.
    .zone-2 et .zone-3 sont redimenssionées à 50% de leur parent (le parent est zone-1 a 1170px) et sont mis en position float: left;. Par conséquent zone-2 et zone-3 se retrouvent côte à côte.


  • Taille écran moyen (ordinateur portable - @media (min-width: 992px))
    La largeur de notre zone-1 est fixée à 970 pixels.
    .zone-2 et .zone-3 sont redimenssionées à 50% de leur parent (le parent est zone-1 a 970px) et sont mis en position float: left;. Par conséquent zone-2 et zone-3 se retrouvent côte à côte.


  • Taille écran réduit (tablette - @media (min-width: 768px))
    La largeur de notre zone-1 est fixée a 750 pixels.
    .zone-2 et .zone-3 ne sont pas en position float: left; et prennent 100% de largeur, du coup sur écran réduit elles passeront l'une en dessous de l'autre pour profiter de la pleine largeur dont ils disposent.


  • Taille petit écran (mobile / smartphone)
    Il n'y a pas de régle pour le mobile, c'est donc le style par défaut (en dehors des @media) qui s'applique.
    .zone-2 et .zone-3 ne sont pas en position float: left; et prennent 100% de largeur, du coup sur petit écran elles passeront l'une en dessous de l'autre pour profiter de la pleine largeur dont ils disposent.


Cet exemple démontre à la fois une utilisation des pourcentages (sur le principe du responsive design fluid) et aussi l'utilisation des media queries (@media sur le principe du responsive design adaptatif).

Résultat
Taille grand écran (ordinateur de bureau) :
image manquante

Taille écran moyen (ordinateur portable) :
image manquante

Taille écran réduit (tablette) :
image manquante

Taille petit écran (mobile) :
image manquante

Sur mobile, nous n'avons pas vraiment la place de mettre les zones côte à côte et préférons les empiler l'une en dessous de l'autre.

fléche En Conclusion
C'est la solution à suivre ! Pour construire votre site web avec un responsive design précis vous aurez besoin de l'adaptatif (avec les régles @media) mais pour ne pas réécrire votre site web 4 fois vous aurez besoin du fluide avec les pourcentages ! vive le responsive adaptatif et le responsive fluide !


Le bénéfice peut paraitre faible sur cet exemple mais si vous travaillez de cette façon en pourcentage tout en prévoyant les cas spécifique @media, à coup sûr cela vous soulagera dans la construction d'un site web tout entier.

La régle @Media

Comme vous le savez, en fonction de la largeur de la fenêtre, la régle « @media » permet de préciser au navigateur quelle propriété CSS il doit adopter et prendre en compte pour l'affichage sur une page web.

Pour cela, le code CSS suivant est à retenir :

	@media (min-width: 768px) {	  ...	} /* régle pour les affichages inférieur a 768px de large */
	@media (min-width: 992px) {	  ...	} /* régle pour les affichages inférieur a 992px de large */
	@media (min-width: 1200px) {  ...	} /* régle pour les affichages inférieur a 1200px de large */
Nous voyons ci-dessus l'utilisation du MIN-WIDTH (pour largeur minimum)
Nous aurions pu également le voir dans l'autre sens MAX-WIDTH (pour largeur maximum)
	@media (max-width: 768px) {	  ...	} /* régle pour les affichages supérieur a 768px de large */
	@media (max-width: 992px) {	  ...	} /* régle pour les affichages supérieur a 992px de large */
	@media (max-width: 1200px) {  ...	} /* régle pour les affichages supérieur a 1200px de large */
Ou éventuellement mettre des conditions associées, exemple :
	@media (min-width: 768px) and (max-width: 992px) { … } /* régle pour les affichages supérieure a 768px et inférieur a 992px de large */
Il est également possible de préciser l'orientation de l'appareil : 
	@media (orientation: portrait) { … } /* régle pour les affichages en mode portrait */

N'oubliez pas : il est possible de travailler avec les unités de mesures en POURCENTAGE et en EM pour éviter de devoir réécrire tous les comportements de son site dans des media queries.

En effet, l'idéal est d'utiliser les POURCENTAGES et EM pour que la taille de son site soit adaptable et de conserver l'utilisation des medias queries pour les comportements spécifiques liés à des contraintes matérielles.

Comment savoir si un site web est responsive design ?

Pour cela il suffit de redimensionner la fenêtre du navigateur et de la réduire afin de voir si le contenu s'adapte.

Si le site n'est pas responsive design, vous verrez une barre de défilement horizontale s'afficher.

Exemple en plein écran :

image manquante

Exemple en écran réduit :

image manquante

fléche Attention
Cela est à bannir !


Les zones restent à la même échelle en terme de taille (largeur) et une scrollbar (barre de défilement horizontale) fait son apparition !

Voici le comportement engendré lorsqu'une page web est responsive design :

image manquante

Les zones se réduisent en largeur, tout tient sur la largeur de la page, l'objectif est donc atteint !

Comment savoir si un site web possède une version mobile ?
Dans la plupart des cas, le site web vous propose la consultation de leur version mobile (parfois il vous redirige dessus sans vous demander de confirmation).

Le site web détecte que vous utilisez un smartphone (via l'utilisation du langage JavaScript).

Allez au chapitre suivant : 3. Creer Sa Page Web

RESPONSIVE DESIGN

1. Le Responsive Design 2. Exemples 3. Creer Sa Page Web 4. Site Web Responsive Design