HTML & CSS : page "responsive"

Une page web doit apparaitre correctement non seulement sur un grand écran (PC de bureau) mais aussi sur un petit écran (tablette et smartphone).
On dit qu'elle doit être "responsive".
Il s'agit d'un vrai challenge car un écran d'ordinateur de bureau c'est plus de 1600 pixels de large alors qu'un smartphone c'est 300 pixels de large en mode portrait ...

Page responsive : solution basique

Compte tenu de l'importance croissante de l'internet mobile (internet à partir de terminaux mobiles : smartphones et tablettes) chaque page de votre site doit s'afficher correctement tant sur grands écrans (ordinateur portable ou de bureau) que sur petites écrans (tablettes et smartphone) c'est ce qu'on appelle le responsive design.
Pour certains grands sites il y a en fait deux URL : une correspondant aux terminaux fixes et une autre pour les mobiles.
Une solution plus simple à mettre en oeuvre consiste à proposer des règles de style différentes en fonction de la largeur en pixels de l'écran. C'est la technique des requêtes de média ou "media queries".
Dans le chapitre suivant vous trouverez une présentation rapide des media queries. Mais pour l'instant je vous communique seulement quelques astuces ...

Exemple de page 'adaptative'

Le code HTML :

Donc au niveau d'une page HTML rien ne distingue une page adaptative d'une page réservée aux grands écrans sauf une instruction dans la partie HEAD de la page : media name = "viewport" ...

La balise meta viewport ...

L'instruction meta viewport est fondamentale dans le cadre du Web mobile et doit être insérée dans la partie HEAD de chaque page !

Les écrans des mobiles sont beaucoup plus étroits que les écrans de PC (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent par défaut le site en "dézoomant" ce qui permet d'avoir un aperçu de l'ensemble de la page mais alors c'est tellement écrit petit que c'est illisible ! Cette zone d'affichage simulée est appelée le viewport.

Attention la valeur du viewport ne dépend pas du terminal mais du navigateur mobile installé sur ce terminal. Ainsi le viewport est compris entre 800 pixels (Android 3) et 980 (Android 4 et Safari).

Prenons un exemple concret. Votre iphone 6 a une largeur utile d'écran de 377 par 667 pixels ; le viewport possible est de 980 pixels grâce au navigateur safari mobile qui est installé.
Mais grâce à l'instruction meta name ="viewport" content= "width=device-width, user-scalable=yes" la largeur effective ne sera plus que 377 pixels ou (667 selon l'orientation).

Analyse de la partie BODY

Deux grandes divisions : NAV & ARTICLE qui sont descendants directs de BODY.

Les éléments a, img, p, h1 & h2 sont des enfants de NAV ou de ARTICLE
Notez l'emploi des classes pour les images.

La feuille de style

Notez la règle "reset" dans la feuille de style pour annuler des formatages par défaut : taille de texte, marge, soulignement, etc.
Il s'agit de la règle de style ayant le sélecteur *
Naturellement vous devez ensuite rédéfinir des marges et des taille de texte pour les titres en particulier.
Ici taille du texte de H1 est ici égal à 140% de la taille de référence (16px) = 16 * 140% = 22px et pour H2 ...
La hauteur de ligne dans H1 & H2 = 30px et comme le texte est toujours centré verticalement dans sa ligne, le titre sera parfaitement centrée verticalement dans sa boite !

C'est ce que vous devez retenir pour l'instant du responsive design : ne plus exprimer les largeurs des boites et images en pixels mais en pourcentages !
En effet un grand écran c'est parfois 1800 pixels de large alors qu'un smartphone c'est seulement 300 pixels (en orientation "portrait") donc pour prendre un seul exemple, une image de 500px de large serait affichée correctement sur un grand écran mais sur un écran d'ordiphone il va y avoir "dézoomage" de la page pour afficher l'image dans toute sa largeur donc le texte aura une taille minuscule et sera illisible !

Tests

Affichez la page à partir d'un smartphone, d'une tablette puis d'un ordinateur !

Si vous ne disposez que d'un PC cliquez sur l'icône "niveau inférieur" puis réduisez progressivement la largeur de la fenêtre pour simuler l'affichage sur un petit écran.

Page responsive avec requêtes de média

Nous allons aborder une solution de "responsive design" plus sophistiquée avec les "media queries" (ou requêtes de média).
La solution précédente n'est pas totalement satisfaisante. Ainsi la largeur de la page égale à celle de la fenêtre c'est bien sur un petit écran mais sur un écran de PC de bureau c'est pas très ergonomique pour le regard ; il faudrait plutôt une page se limitant à 1000 pixels de large avec ce terminal.

Grâce aux requêtes de média on peut faire ce genre de règlage dans la feuille de style.
En effet on peut tester la largeur de la fenêtre (du viewPort). Donc on peut parfaitement coder en CSS la règle suivante, à titre d'exemple :
Si largeur de la fenêtre >= 1000px alors largeur page = 1000px sinon largeur page = largeur fenêtre.

Le code correspondant

Reprenons le thème précédent.
Le code HTML est inchangé !

La feuille de style

Il y a aussi d'autres ajustements pour petits écrans.

	* {font-family : arial ;color : navy ; margin :0px ; padding :0px;
		text-decoration : none ; font-size : 16px ;}
	body {width : 800px; margin : auto; }
	nav, article{background : aqua ; margin-top : 20px; }
	h1,h2 {margin : 10px auto 10px auto; text-align : center; 
		background : gray ; color : white; line-height : 30px; }
	h1 {font-size : 140% ;}                                                    
	h2 {font-size : 120% ; }
	nav {width : 29% ; float : left ; height : 400px ; }
	article {width :70% ; float : right ; height : auto ;}
	nav a {display : block ; height : 30px ; line-height : 30px ; 
		background : white ; text-align : center; width : 80%; 
		margin : 10px auto 10px auto; }
	p {text-align : justify ; padding : 5px ; }
	
	img.mini {float : left ; width : 35%; margin : 1%;  }
	img.grand {display : block ; width: 70%; margin : 10px auto 10px auto; }
@media (max-width: 800px) 
{
		* {font-size : 14px; }
		body {width : 100% ; }                            
		nav, article {width : 100% ; height : auto ;}
}

Grande nouveauté : @media (max-width: 800px) . Il s'agit d'une 'media query'.

Tests à effectuer

Affichez la page à partir de votre PC puis réduisez la largeur de la fenêtre en cliquant sur l'icône "niveau inf"

Si vous testez avec votre tablette orientez celle-ci en "paysage" puis en "portrait" et vous aurez tantôt les boites NAV & ARTICLE de front OU l'une en dessous de l'autre.
Retour menu