Spotlight

Responsive web design: Présentation et Tutoriel

Charles Serra 27 septembre 2012 Actualités, Articles, Mobile, Tutoriels, Web, Web Mobile Pas de commentaire

I. Le web face à la diversité des supports

De nos jours, les smartphones, tablettes tactiles, notebooks, écrans larges, smart tv ont littéralement envahis le marché pour nous permettre entre autre de surfer sur internet. Les différences de caractéristiques de ces supports comme le type d’interactions (écran tactile / boutons), la taille de l’écran (très grande diversité), l’environnement d’utilisation (chez soi, dans les transports…), mais aussi le taux de connexion grandissant à partir des mobiles ont fait naître le besoin d’adapter les sites web pour plusieurs résolutions ou dimensions d’écran.

Cependant, il est impossible de développer une version dédiée à chaque support car ils sont trop nombreux, et vite démodables. Cibler quelques marques représentant la majorité des visiteurs serait une option. Mais les couts de développement restent élevés, et les choix trop risqués. Cette problématique a longtemps été bloquante. Mais grâce à la volonté de tous de normaliser l’utilisation du web, une solution très satisfaisante est née.

II. Quelle stratégie adopter?

Au lieu de créer autant de version du site web que de périphérique pouvant se connecter dessus, il est préférable d’adapter automatiquement le design de son site en fonction du support, on parle alors de « Responsive web design ». Le responsive web design est une philosophie de développement qui consiste à utiliser le maximum de la surface disponible d’un support, en fonction de son orientation, ou sa résolution tout en adaptant l’ergonomie du site. Ainsi, le même site web, répond exactement aux attentes des utilisateurs. Une méthode de conception consiste à développer une version mobile, puis d’étendre la conception vers des dimensions habituelles. Cette approche nommée « Mobile first » permet de se focaliser sur les besoins des visiteurs utilisant un smartphone, plutôt que de décliner une version comportant des éléments peu serviables en réalité.

III. Conclusion

Adopter la philosophie d’un web design responsive n’est pas compliqué si on y réfléchit dès la conception du site. Aussi, nous verrons qu’un web design responsive ne consiste pas uniquement à réorganiser les quelques colonnes proposée par le site : On peut retravailler l’ergonomie selon le support du visiteur. On notera quand même que le responsive web design est difficile à appliquer lorsque les sites proposent beaucoup d’information (les magazines et journaux par exemple), il s’agit d’un nouveau défi.

IV. Tutoriel

Concrètement, Le web design responsive est une feuille de style CSS3 composée de balises spécifiques qui vont permettre d’utiliser tel ou tel bloc de style en fonction du support.

IV.1. Déroulement

Dans ce tutoriel, nous allons prendre comme exemple une pizzeria « Pizza-Yellow » qui souhaiterait avoir son site vitrine, avec un design responsive 3 en 1 qui couvre les smartphones, tablettes tactiles et ordinateurs. Nous nous limiterons à la page d’accueil, mais il vous sera très facile de faire les autres pages si vous le souhaitez.

Voici le résultat obtenu à la fin du tutoriel: Pizza-Yellow

IV.2. Cahier des charges

Globalement, le site aura :

Un menu
Un bandeau permettant d’afficher une photo (différente pour les smartphones)
Un bloc de contenu principal
Un bloc latéral présentant divers aspect de la pizzeria
Un footer composé de liens utiles

Page d’Accueil :

Le contenu principal proposera les actualités de la pizzeria

IV.3. Conception

IV.3.1. Smartphone (à partir de 0px)

On proposera un bouton de type « quick to call » pour faciliter la prise de contact avec le restaurant. Il y aura le bandeau avec la photo du moment, les actualités, et les différentes pages du menu dans le footer.

IV.3.2. Tablettes tactiles / Netbooks (à partir de 600px)

On proposera le menu, le bandeau, les actualités, et nous ajouterons les mentions légales, les CGV et des infos sur l’entreprise dans le footer.

IV.3.3. Ordinateur (à partir de 900px)

Par rapport à la version pour les tablettes tactiles / netbooks, nous ajouterons un bloc lattéral qui présentera un peu plus la pizzeria.

IV.3.4. Croquis

SMARTPHONES

TABLETTES tactiles

ORDINATEURS

IV.4. Codage du site PIZZA-YELLOW

IV.4.1. Responsive & CSS3

Jusqu’ici, j’ai parlé de «balises» pour ne pas aller trop loin trop vite. Il ne s’agit pas de balises à proprement parler, mais de « Medias Queries », soit requête de média. Elles permettent de cibler un support par rapport à une ou plusieurs expressions qui la composent, et d’appliquer le style définit dans son bloc si toute les expressions qui la composent sont vraies.

Syntaxe:

@media expression1 and expression2
{
    elementHTML1 { style à appliquer } 
    elementHTML2 { style à appliquer }
}

@media expression1 and expression2

{

elementHTML1 { style à appliquer }

elementHTML2 { style à appliquer }

}

Information! «@media» Précise que nous allons utiliser une Media Queries

En voici un premier exemple simple:

@media screen and (min-width: 900px) 
{ 
     body{ background: #000; } 
}

@media screen and (min-width: 900px)

{

body{ background: #000; }

}

Information!

- screen est un type de média. Ils permettent de cibler le type de support (imprimante, vidéo projecteur, etc etc).

- min-width permet de tester la largeur du support. Consultez la liste des fonctions permettant de tester entre autre la résolution, l’orientation ou comme ici, la largeur du support utilisé.

Comme vous l’aurez deviné, tant la syntaxe est parlante, si le support qui veut afficher la page est un écran (smartphone, tablette, ordinateur…), et que sa largeur est supérieur à 900 pixels, alors le style qui est définit dans le bloc sera appliqué.

Si vous trouvez ce premier exemple assez clair, réjouissez-vous: Je n’ai pas trouvé de requête plus complexe, si ce n’est d’ajouter une expression supplémentaire à la requête finale mais rien de bien méchant.

Nous allons maintenant commencer le codage du site! :-)

IV.4.2. Structure HTML

La structure du site étant assez simple, justifiée et schématisée précédemment, nous n’allons pas nous attarder dessus, au profit de la définition de la feuille de style.

Attention! Sans la balise << <meta name=”viewport” content=”width=device-width” /> >>, le navigateur du support risque de bloquer le desgin responsive que nous allons définir.

Information! J’ai ajouté les classes css “min…” et “max…” pour vous permettre de repérer facilement les éléments qui s’afficheront ou non en fonction de la taille du support. Ces classes ne servent strictement à rien d’autres puisqu’elles sont trop génériques pour que leur style associé soit appliqué.

Structure HTML de Pizza-Yellow

<!DOCTYPE html>
<html>
    <head>
        <title>Pizza-Yellow</title>
        <link href="ressources/styles/site.css" rel="stylesheet" type="text/css" />
		<meta name="viewport" content="width=device-width" />
    </head>
	<body>
		<div id="wrapper">

			<div id="header">

				<div id="logo">
					<a href="index.html" title="Pizza-Yellow"><img src="ressources/images/pizza-yellow.png" title="Pizza-Yellow" alt="Pizza-Yellow" ></a>
					<p>Pizza - Yellow</p>
					<div style="clear:both;"></div>
				</div>

				<ul id="menu">
					   <li class="min600"><a href="index.html#actuellement" title="Actuellement">Actuellement</a></li>
					   <li class="telephoner max600"><a href="tel:+33605030299" title="telephoner"><span>Téléphonez nous!</span><img src="ressources/images/call.png" title="téléphoner" alt="téléphoner"/></a></li>
					   <li class="min600 sep-menu"></li>
					   <li class="min600"><a href="index.html#carte" title="Carte">Carte</a></li>
					   <li class="min600 sep-menu"></li>
					   <li class="min600"><a href="index.html#contact" title="Contact">Contact</a></li>
				</ul>	

				<div id="pic">
					<img class="max600" src="ressources/images/pizza360.png" title="pizza" alt="pizza" />
					<img class="min600" src="ressources/images/pizza640.png" title="pizza" alt="pizza" />
				</div>
			</div>

			<div id="content">
				<div id="main">
					<h1>Actualités</h1>
					<div class="news">
						<div class="info">
							<h2>Carte 2012-2013</h2>
							<p>
								But I must explain to you how all this mistaken idea 
								of denouncing pleasure and praising pain was born and I 
								will give you a complete account of the system, and expound 
								the actual teachings of the great explorer of the truth, the 
								master-builder of human happiness. No one rejects, dislikes, or avoids pleasure				
							</p>						
						</div>
						<div class="sep"></div>
						<div class="info">
							<h2>Nouvelle recette!</h2>
							<p>
								To you how all this mistaken idea 
								of denouncing pleasure and praising pain was born and I 
								will give you a complete account of the system, and expound 
								the actual teachings of the great explorer of the truth, the 
								master-builder of human happiness. No one rejects, dislikes, or avoi.			
							</p>						
						</div>
						<div class="sep"></div>						
						<div class="info">
							<h2>Nouveau site</h2>
							<p>
								Pleasure and praising pain was born and I 
								will give you a complete account of the system, and expound 
								the actual teachings of the great explore			
							</p>	
						</div>
					</div>
				</div>
				<div id="about-us" class="min900">
					<div>
						<p class="titre">Nos Engagements</p>
						<a href="index.html#nos_engagements" title="Nos engagements"><img src="ressources/images/us.jpg" title="Nos engagements" alt="Nos engagements" /></a>
						<p class="description">
							These cases are perfectly simple and easy to distinguish. 
							In a free hour, when our power of choice is untrammelled and when nothing prevents our being...
						</p>
						<span><a href="index.html#nos_engagements" title="Consulter nos engagements">+</a></span>
						<div style="clear:both"></div>
					</div>
					<div>
						<p class="titre">La Préparation</p>
						<a href="index.html#preprations" title="La préparation"><img src="ressources/images/dough.jpg" title="La préparation" alt="la préparation" /></a>
						<p class="description">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
							Ut enim ad minim veniam, quis nostrud exercitation 
							non proident, sunt in culpa qui officia deserunt mollit anim id est laborum...
						</p>
						<span><a href="index.html#la_preparation" title="Consulter nos processus de preparation">+</a></span>
						<div style="clear:both"></div>					
					</div>
					<div>
						<p class="titre">Nos Ingrédients</p>
						<a href="index.html#ingredients" title="Ingredients"><img src="ressources/images/ingredients.jpg" title="Ingredients" alt="ingredients" /></a>
						<p class="description">
							Quis nostrud exercitation 
							ullamco laboris nisi ut aliquip ex ea commodo consequat. 
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
							dolore eu fugiat nulla pariatur. Excepteur sint occaecat...
						</p>
						<span><a href="index.html#nos_ingredients" title="en apprendre plus sur nos ingrédients">+</a></span>
						<div style="clear:both"></div>					
					</div>
				</div>
				<div style="clear:both"></div>
			</div>

			<div id="footer">
				<ul class="max600">
					<li>
						<ul>
						   <li ><a href="index.html#actuellement" title="Actuellement">Actuellement</a></li>
						   <li><a href="index.html#carte" title="Carte">Carte</a></li>
						   <li><a href="index.html#contact" title="Contact">Contact</a></li>
						</ul>
					</li>
				</ul>
				<ul class="min600">
					<li>
						<ul>
							<li><a href="#Actuellement">Actuellement</a></li>
							<li><a href="#Carte">Carte</a></li>
							<li><a href="#Contact">Contact</a></li>
						</ul>
					</li>
					<li>
						<ul>
							<li><a href="#Mentions_légales">Mentions légales</a></li>
							<li><a href="#CGV">CGV</a></li>
							<li>SA au capital de 250 000€</li>
						</ul>
					</li>
					<li></li>					
				</ul>
				<div style="clear:both;"></div>
				<div>Ceci est un exemple de site web responsive développé pour HurricaneScript.com par Charles Serra. Toutes les données utilisées sont fictives.</div>
			</div> 

		</div>
	</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<!DOCTYPE html>

<html>

<head>

<title>Pizza-Yellow</title>

</head>

<body>

<p>Pizza - Yellow</p>

</div>

<li class="min600"><a href="index.html#actuellement" title="Actuellement">Actuellement</a></li>

<li class="telephoner max600"><a href="tel:+33605030299" title="telephoner"><span>Téléphonez nous!</span><img src="ressources/images/call.png" title="téléphoner" alt="téléphoner"/></a></li>

<li class="min600"><a href="index.html#carte" title="Carte">Carte</a></li>

<li class="min600"><a href="index.html#contact" title="Contact">Contact</a></li>

</ul>

</div>

<h1>Actualités</h1>

<h2>Carte 2012-2013</h2>

<p>

But I must explain to you how all this mistaken idea

of denouncing pleasure and praising pain was born and I

will give you a complete account of the system, and expound

the actual teachings of the great explorer of the truth, the

master-builder of human happiness. No one rejects, dislikes, or avoids pleasure

</p>

</div>

<h2>Nouvelle recette!</h2>

<p>

To you how all this mistaken idea

of denouncing pleasure and praising pain was born and I

will give you a complete account of the system, and expound

the actual teachings of the great explorer of the truth, the

master-builder of human happiness. No one rejects, dislikes, or avoi.

</p>

</div>

<h2>Nouveau site</h2>

<p>

Pleasure and praising pain was born and I

will give you a complete account of the system, and expound

the actual teachings of the great explore

</p>

</div>

<div>

<p class="titre">Nos Engagements</p>

These cases are perfectly simple and easy to distinguish.

In a free hour, when our power of choice is untrammelled and when nothing prevents our being...

</p>

</div>

<div>

<p class="titre">La Préparation</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation

non proident, sunt in culpa qui officia deserunt mollit anim id est laborum...

</p>

</div>

<div>

<p class="titre">Nos Ingrédients</p>

Quis nostrud exercitation

ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

dolore eu fugiat nulla pariatur. Excepteur sint occaecat...

</p>

</div>

</div>

<li>

<ul>

<li ><a href="index.html#actuellement" title="Actuellement">Actuellement</a></li>

<li><a href="index.html#carte" title="Carte">Carte</a></li>

<li><a href="index.html#contact" title="Contact">Contact</a></li>

</ul>

</li>

</ul>

<li>

<ul>

<li><a href="#Actuellement">Actuellement</a></li>

<li><a href="#Carte">Carte</a></li>

<li><a href="#Contact">Contact</a></li>

</ul>

</li>

<li>

<ul>

<li><a href="#Mentions_légales">Mentions légales</a></li>

<li>SA au capital de 250 000€</li>

</ul>

</li>

</ul>

<div>Ceci est un exemple de site web responsive développé pour HurricaneScript.com par Charles Serra. Toutes les données utilisées sont fictives.</div>

</div>

</body>

</html>

IV.4.3. Style de base

Comme dans toute feuille de style, nous allons définir les styles de base:

/* Styles généraux */
body, ul, li, h1, h2, h3, h4, div, p, a { margin:0; padding:0; }
body { font-family: sans-serif; font-size:12px; margin:10px 0;}
h1 {display: block;text-transform:uppercase;text-decoration: none;font: 20px Helvetica;letter-spacing: 25px;text-align: center;color: #9B7C00;text-shadow: 0px 3px 8px #9B7C00;border-bottom:dotted 1px #999; padding:1% 0;}
h2 {display: block;text-decoration: none;font: 16px Helvetica;letter-spacing: 2px;text-align: center;color: #9B7C00;text-shadow: 0px 3px 8px #9B7C00;padding:0.5% 0;}
ul li { list-style-type:none; }
a { text-decoration: none; color: #fff;}
.sep { height:1px; border-top:solid 1px #DBDBDB; padding:0 10%; margin:2% 0;}

/* Styles généraux */

body, ul, li, h1, h2, h3, h4, div, p, a { margin:0; padding:0; }

body { font-family: sans-serif; font-size:12px; margin:10px 0;}

h1 {display: block;text-transform:uppercase;text-decoration: none;font: 20px Helvetica;letter-spacing: 25px;text-align: center;color: #9B7C00;text-shadow: 0px 3px 8px #9B7C00;border-bottom:dotted 1px #999; padding:1% 0;}

h2 {display: block;text-decoration: none;font: 16px Helvetica;letter-spacing: 2px;text-align: center;color: #9B7C00;text-shadow: 0px 3px 8px #9B7C00;padding:0.5% 0;}

ul li { list-style-type:none; }

a { text-decoration: none; color: #fff;}

.sep { height:1px; border-top:solid 1px #DBDBDB; padding:0 10%; margin:2% 0;}

Information! Comme précisé côté html, j’ai fais des les classes css “min…” et “max…” pour mettre en évidence les éléments qui sont affichés ou non en fonction des versions

IV.4.4. CSS Smartphones

Afin de continuer dans notre approche de conception Mobile First, nous allons commencer par définir les styles des éléments de la page lorsqu’un smartphone souhaite l’afficher. Ce bloc sera le plus complexe (toutes proportions gardées) puisque que nous allons définir pour la première fois les styles à appliquer. Les autres blocs de styles issus des medias queries (dédiés pour les tablettes et pc) hériterons des styles définit par ce media queries dédié au smartphone (en effet, lorsqu’une tablette tactile ou un pc souhaitera afficher la page, la taille sera forcément supérieure à 0px), à condition que ces derniers ne les redéfinissent pas. Ça tombe bien, nous n’avons pas l’intention de tout réecrire à chaque fois, ce ne serait pas productif, et encore moins logique.

Après avoir comparé les croquis, on peut voir que le style dédié au smartphone cache:

L’image du bandeau dédiée aux tablettes et ordinateurs
Tous les éléments du menu, sauf l’élement avec la classe “telephoner” qui est en fait notre bouton “quick to call” permettant de téléphoner rapidement au restaurant.
Le bloc latéral présentant divers aspect de la pizzeria
Des éléments du footer, dédiés aux tablettes et ordinateurs

Une fois les spécificités de la version traitées identifiée, il est facile de définir les styles à appliquer, et on se retrouve à traiter une feuile de style CSS2. Nous souhaitons que la media queries dédiée à la “version” smartphone démarre à une largeur du support supérieure à 0px, ce qui se traduit par:

@media screen and (min-width: 0px).

Nous obtenons donc le bloc suivant:

Information! Vous devez absolument styliser les dimensions de vos éléments en pourcentage: Même si les medias queries permettent de cibler le support avec précision, c’est à vous qu’il appartient de définir le style à appliquer.

@media screen and (min-width: 0px) 
{ 
	img.min600,ul#menu li.min600,#about-us.min900, #footer ul.min600 {display:none;}
	body{ background: #f0f0f0; } 
	#wrapper { /*width:88%;*/ width:90%; margin: 0 3.2%;}
	#header { width:100%;}

	#logo { width:70%; position:relative; margin: 0 auto;margin-bottom:2.3%;}
	#logo a { width: 20%; display:inline-block;}
	#logo a img { width: 100%; }
	#logo p { padding: 2% 0;border-top: dotted 1px green;border-bottom: dotted 1px red;position: absolute;left: 12%;top: 15%;display:inline-block; text-transform:uppercase; text-align:center; width:75%;  font: 13px Tahoma;color: #09F;text-shadow: 0px 2px 3px #555;margin-left: 10%;}	

	ul#menu { width:100%;margin:0 auto;margin-bottom:2.3%;}
	ul#menu li { width: 47%; float:left; display: block; background: blue;height: 40px;}
	ul#menu li img { width:30px;} 
	ul#menu li a{width: 100%; display: block; text-align:center;padding: 5% 0;}
	ul#menu li.telephoner { float:none;width:91%;height:initial; padding: 10px; background-color: #FFA300;border-radius: 40px; margin: 0 auto;}
	ul#menu li.telephoner a{ padding:0;}
	ul#menu li.telephoner a span{ display:block; text-transform:uppercase;letter-spacing:3px;}
	ul#menu li.telephoner a img{ width: 10%;}

	#pic { width:95%;margin:0 auto;margin-bottom:2.3%;}
	#pic img{ width:100%; }	

	#content { width:90.7%; background-color:#E2E2E2; margin:0 auto;padding:2.3%}
	#content  #main .news .info:first-child { margin-top:3.3%; }
	#content  #main .news .info p{ text-indent:30px; color:#A5652A;margin-top:1.3%;}
	#content  #main .news .info p:first-letter{ color:#BB6413; font-size:16px;}

	#footer { padding:2.3%; background: #B6A47D;width:90.7%; margin:0 auto;}
	#footer > ul  { margin:0 auto; width:76px; margin-bottom:2%; height:45px;}
	#footer > ul > li { float:left;text-align:center;}
	#footer > ul > li a { color:#757575; }
	#footer > div { text-align:center; color:#fff; }	
}

@media screen and (min-width: 0px)

{

img.min600,ul#menu li.min600,#about-us.min900, #footer ul.min600 {display:none;}

body{ background: #f0f0f0; }

#wrapper { /*width:88%;*/ width:90%; margin: 0 3.2%;}

#header { width:100%;}

#logo { width:70%; position:relative; margin: 0 auto;margin-bottom:2.3%;}

#logo a { width: 20%; display:inline-block;}

#logo a img { width: 100%; }

#logo p { padding: 2% 0;border-top: dotted 1px green;border-bottom: dotted 1px red;position: absolute;left: 12%;top: 15%;display:inline-block; text-transform:uppercase; text-align:center; width:75%; font: 13px Tahoma;color: #09F;text-shadow: 0px 2px 3px #555;margin-left: 10%;}

ul#menu { width:100%;margin:0 auto;margin-bottom:2.3%;}

ul#menu li { width: 47%; float:left; display: block; background: blue;height: 40px;}

ul#menu li img { width:30px;}

ul#menu li a{width: 100%; display: block; text-align:center;padding: 5% 0;}

ul#menu li.telephoner { float:none;width:91%;height:initial; padding: 10px; background-color: #FFA300;border-radius: 40px; margin: 0 auto;}

ul#menu li.telephoner a{ padding:0;}

ul#menu li.telephoner a span{ display:block; text-transform:uppercase;letter-spacing:3px;}

ul#menu li.telephoner a img{ width: 10%;}

#pic { width:95%;margin:0 auto;margin-bottom:2.3%;}

#pic img{ width:100%; }

#content { width:90.7%; background-color:#E2E2E2; margin:0 auto;padding:2.3%}

#content #main .news .info:first-child { margin-top:3.3%; }

#content #main .news .info p{ text-indent:30px; color:#A5652A;margin-top:1.3%;}

#content #main .news .info p:first-letter{ color:#BB6413; font-size:16px;}

#footer { padding:2.3%; background: #B6A47D;width:90.7%; margin:0 auto;}

#footer > ul { margin:0 auto; width:76px; margin-bottom:2%; height:45px;}

#footer > ul > li { float:left;text-align:center;}

#footer > ul > li a { color:#757575; }

#footer > div { text-align:center; color:#fff; }

}

Cette trentaine de ligne permet de définir la plupart du style à appliquer pour notre site. Nous venons de faire le plus dur! Surtout, n’hésitez pas à passer un peu de temps dessus, analyser les styles appliqués à tel ou tel endroit grâce aux outils de développement des navigateurs. Si vous avez des questions, je me ferai un plaisir de vous répondre!

IV.4.5. CSS Tablettes tactiles / Netbooks

Nous devons analyser à nouveau quels sont les éléments à afficher ou cacher. Cette fois, la comparaison est à faire par rapport à la version mobile: Comme je l’ai dit plus haut, la requête dédiée aux smartphones sera toujours vérifiée (la largeur de l’écran sera toujours >0px). Nous avons juste à redéfinir les éléments qui sont déjà affichés ou définir ceux qui ne l’ont jamais été.

Cacher l’image du bandeau dédiée au smartphone et afficher celle disponible à partir de la version tablette.
Cacher le bouton de type “quick to call” dédié à la version smartphone, et afficher le menu disponible à partir de la version tablette.
Cacher les éléments du footer dédiés à la version smartphone et afficher ceux qui sont disponibles à partir de la version tablette.

La version tablette tactile / notebook du site démarre à 600px. La media queries sera donc:

@media screen and (min-width: 600px).

Nous nous retrouvons à nouveau à traiter du css assez simple, et nous obtenons le bloc suivant:

@media screen and (min-width: 600px) 
{ 
	img.max600, ul#menu li.telephoner, #footer ul.max600 {display:none;}
	img.min600{display:block;}
	ul#menu li.min600 {display:inline-block;}
	#footer ul.min600 { display:block; }
	body{ background: #C1D1E2; } 	
	#logo p {font-size:25px;top:23%;}	

	ul#menu { width:80%;height: 40px;border-radius:40px;}
	ul#menu li { width: 33%; height: 100%;background: transparent url("../images/menu-fond.jpg") repeat-x;}
	ul#menu li:hover { background: #1D6F1D;}
	ul#menu li:first-child{border-bottom-left-radius: 40px;border-top-left-radius: 40px;}
	ul#menu li:last-child{border-bottom-right-radius: 40px;border-top-right-radius: 40px;}
	ul#menu li.sep-menu { height:40px; width:0.5%;background: #248A03;}
	ul#menu li a { line-height: 40px;padding:0; }
	ul#menu li img { width:30px;} 
	ul#menu li a{}		

	#footer > ul  { width:260px;}
	#footer > ul > li {  text-align:left;}
	#footer > ul > li:first-child {  margin-right:17%;}
	#footer > ul > li:last-child { clear:both; }

}

@media screen and (min-width: 600px)

{

img.max600, ul#menu li.telephoner, #footer ul.max600 {display:none;}

img.min600{display:block;}

ul#menu li.min600 {display:inline-block;}

#footer ul.min600 { display:block; }

body{ background: #C1D1E2; }

#logo p {font-size:25px;top:23%;}

ul#menu { width:80%;height: 40px;border-radius:40px;}

ul#menu li { width: 33%; height: 100%;background: transparent url("../images/menu-fond.jpg") repeat-x;}

ul#menu li:hover { background: #1D6F1D;}

ul#menu li:first-child{border-bottom-left-radius: 40px;border-top-left-radius: 40px;}

ul#menu li:last-child{border-bottom-right-radius: 40px;border-top-right-radius: 40px;}

ul#menu li.sep-menu { height:40px; width:0.5%;background: #248A03;}

ul#menu li a { line-height: 40px;padding:0; }

ul#menu li img { width:30px;}

ul#menu li a{}

#footer > ul { width:260px;}

#footer > ul > li { text-align:left;}

#footer > ul > li:first-child { margin-right:17%;}

#footer > ul > li:last-child { clear:both; }

}

…une vingtaine de lignes de plus et nous avons notre version Tablette tactile / notebook fonctionnelle, n’est-ce pas merveilleux? Continuons…

IV.4.5. CSS Ordinateurs

Comme précédemment, nous devons analyser ce qui diffère entre la version que nous traitons, et la version antérieure que nous venons de définir. Reprenons les croquis. Clairement, il n’y a que le bloc latéral qui apparaît dans cette version. Nous allons devoir apporter les modifications suivantes:

Afficher le bloc latéral
Mettre le bloc principal(actualités) à gauche et le bloc latéral à droite

Rappelons que la version bureau du site commence à 900px, ce qui donne la media queries suivante:

@media screen and (min-width: 900px).

Et nous obtenons le bloc de style suivant:

@media screen and (min-width: 900px) 
{ 
	#about-us.min900 { display:block;}

	body{ background: #BBBBBB; } 
	#wrapper { margin:0 auto;}
	#logo p {top:55px;}	
	#main { float:left; width:75%;}
	#about-us { float:right;width:20%;padding: 1.3%;color:#fff;border-left: solid 1px #D8D8D7;}	
	#about-us > div { margin-bottom:7%;background: #CCB579;}
	#about-us > div:last-child { margin-bottom:0;}
	#about-us > div p.titre { text-align: center; font-size:16px; font-weight:bold;line-height:35px;}
	#about-us > div > a { display:block; text-align:center;height: 100px;overflow: hidden;}
	#about-us > div  a img { width:80%;}	
	#about-us > div p.description { text-indent:30px; padding:5.3%;}
	#about-us > div span { float:right; margin-right:3%;margin-bottom:3%; font-size:20px; color:#fff;background: #A5652A;padding:3%;border-radius:20px;}
	#about-us > div span:hover { background:#BB6413; }
}

@media screen and (min-width: 900px)

{

#about-us.min900 { display:block;}

body{ background: #BBBBBB; }

#wrapper { margin:0 auto;}

#logo p {top:55px;}

#main { float:left; width:75%;}

#about-us { float:right;width:20%;padding: 1.3%;color:#fff;border-left: solid 1px #D8D8D7;}

#about-us > div { margin-bottom:7%;background: #CCB579;}

#about-us > div:last-child { margin-bottom:0;}

#about-us > div p.titre { text-align: center; font-size:16px; font-weight:bold;line-height:35px;}

#about-us > div > a { display:block; text-align:center;height: 100px;overflow: hidden;}

#about-us > div a img { width:80%;}

#about-us > div p.description { text-indent:30px; padding:5.3%;}

#about-us > div span { float:right; margin-right:3%;margin-bottom:3%; font-size:20px; color:#fff;background: #A5652A;padding:3%;border-radius:20px;}

#about-us > div span:hover { background:#BB6413; }

}

Et oui, cette quinzaine de ligne définit notre version bureau qui sera désormais de moins en moins affichée… Mais nous n’avons pas vraiment finis encore…

IV.4.6. CSS Finitions

Rappelez vous, même si les medias queries permettent de cibler précisément le support, c’est à nous qu’il appartient de définir le style à appliquer. Or, il y a un problème: Les tailles des polices ne peuvent pas être définit en pourcentages. Faisons donc quelques finitions…

Nous allons ajouter quelques clauses dans notre feuille de style afin de gérer les débordements de police
Pourquoi pas aussi modifier la propriété “letter-spacing” (écart entre les lettres) de notre élément “h1″ pour qu’il soit plus adapté au support.
Actuellement, le bandeau grandit proportionnellement à la largeur du support. Ce n’est pas très utile, d’autant plus que le bandeau prendra trop de place au risque de nuire. Nous allons donc le limiter à 700px lorsque l’écran fait au moins 700px de large (devinez la media queries…).

Attention! Ajoutez ces clauses entre les blocs de styles de la version tablette et ordinateur, sinon le css ne sera pas appliqué en fonction des priorités (typique au css tout court)

@media screen and (max-width: 420px)
{
	h1{ letter-spacing: 8px;}
}

@media screen and (max-width: 280px)
{
	h1{ font-size:16px; letter-spacing: 10px;}
	h2{ font-size:12px;}
}

@media screen and (max-width: 230px)
{
	h1{ font-size:13px;letter-spacing: 5px;}
	h2{ font-size:10px;}
}

@media screen and (min-width: 280px)
{
	#logo p {font-size:15px;}
}

@media screen and (min-width: 320px)
{
	#logo p {font-size:19px;}
}

@media screen and (min-width: 700px)
{
	#pic img{ width:600px; margin:0 auto;}	
}

@media screen and (max-width: 420px)

{

h1{ letter-spacing: 8px;}

}

@media screen and (max-width: 280px)

{

h1{ font-size:16px; letter-spacing: 10px;}

h2{ font-size:12px;}

}

@media screen and (max-width: 230px)

{

h1{ font-size:13px;letter-spacing: 5px;}

h2{ font-size:10px;}

}

@media screen and (min-width: 280px)

{

#logo p {font-size:15px;}

}

@media screen and (min-width: 320px)

{

#logo p {font-size:19px;}

}

@media screen and (min-width: 700px)

{

#pic img{ width:600px; margin:0 auto;}

}

Retrouvez la démo de ce tutoriel grâce à ce lien: Pizza-Yellow

Ce tutoriel est maintenant terminé, j’espère que vous aurez appris pleins de choses! J’attends vos réactions et vos questions si vous en avez!

A bientôt!

À propos de l'auteur

Charles Serra

Développeur passionné par le web depuis quelques années. Ces domaines sont le .Net, Entity Framework 4.1, MVC3, Razor Engine, POCOs, SQL Server, jQuery, HTML(5) & CSS(3) et Référencement. Pour en savoir plus sur moi.

Laisser une réponse

Cliquez ici pour annuler la réponse.

Tu dois être connecté(e) pour poster un commentaire.

Spotlight

Responsive web design: Présentation et Tutoriel

I. Le web face à la diversité des supports

II. Quelle stratégie adopter?

III. Conclusion

IV. Tutoriel

IV.1. Déroulement

IV.2. Cahier des charges

IV.3. Conception

IV.3.1. Smartphone (à partir de 0px)

IV.3.2. Tablettes tactiles / Netbooks (à partir de 600px)

IV.3.3. Ordinateur (à partir de 900px)

IV.3.4. Croquis

IV.4. Codage du site PIZZA-YELLOW

IV.4.1. Responsive & CSS3

IV.4.2. Structure HTML

Structure HTML de Pizza-Yellow

IV.4.3. Style de base

IV.4.4. CSS Smartphones

IV.4.5. CSS Tablettes tactiles / Netbooks

IV.4.5. CSS Ordinateurs

IV.4.6. CSS Finitions

À propos de l'auteur

Laisser une réponse

Populaires

Mots clés

Fin de Flash Player sur Android 4.1