HTML & CSS : page adaptative

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 adaptative ; on parle aussi de "responsive design".

Page adaptative : 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 :

... <meta name="viewport" content= "width=device-width, user-scalable=yes" > ... </head> <body> <nav> <a href ="#" >page 1 </a> <a href ="#" >page 2 </a> <a href ="#" >page 3</a> <a href ="#" >page 4 </a> </nav> <article> <h1>Titre principal de la page</h1> <h2>Titre de niveau 2 </h2> <img src ="../images/coucher_soleil.jpg" class ="grand" > <img src ="../images/bikini2.jpg" class ="mini"> <p>Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, ... <p>Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ... <p>Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis ... <h2>Titre de niveau 2</h2> <img src ="../images/bikini3.jpg" class ="mini" > <p>Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si ... </article> ...

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 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. Votre iphone5 a une largeur utile d'écran de 320 par 568 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" ... la largeur effective ne sera plus que 320 pixels ou (568 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

* {font-size : 14px; font-family : arial; text-decoration : none; } body {width : 100% ;} nav, article {width : 100%;} h1,h2 {margin : 10px auto 10px auto; text-align : center; background : gray ; color : white; height : 30px ; line-height : 30px; } h1 {font-size : 1.4em ;} h2 {font-size : 1.2em ; } p { text-align : justifiy ; padding : 5px ; } img.mini {float : left ; margin-right : 1% ; width : 14%; } img.grand {display : block ; width : 60% ; margin : 10px auto 10px auto ; } nav a {display : inline-block ; width : 20% ; margin : 10px 1% 10px 1% ; height : 30px ; line-height : 30px ; background : lightgrey ; text-align : center; }

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 400px de large serait affichée correctement sur un grand écran mais serait rognée sur un écran de smartphone.
Affichez la page à partir d'un smartphone, d'une tablette puis d'un ordinateur !

Si vous affichez la page à partir d'un grand écran 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.

Il est évident que l'adaptativité à tous types d'écrans serait bien meilleure avec les requêtes de média. Ainsi une taille de caractères de 14 pixels c'est un peu juste sur un grand écran mais c'est beaucoup pour un petit. Quant aux images "mini" elles sont vraiment très petites sur un smartphone.
Par ailleurs sur un grand écran c'est plus joli qu'il y ait des marges gauche et droite afin que la page ne soit pas trop large.

Page adaptative : requête de média

Avec les requêtes de média (ou media queries) on peut coder en CSS, par exemple, l'algorithme suivant :

Si largeur écran > à 900px alors taille des caractères de 16px et largeur page de 900px
sinon
taille de 12px et largeur page = 100% de celle de l'écran

Le code avec les media queries

Le code HTML

Il est identique à celui de l'exemple précédent.

La feuille de style

Elle devient plus complexe. Mais pour ne la saisir qu'une fois elle peut être externalisée (création d'un fichier .css) avec un lien vers le fichier .css au niveau de chaque page.

@media screen { * {font-family : arial ;color : navy ; margin :0px ; padding :0px;text-decoration : none ; } nav, article{background : aqua ; margin-top : 20px; } h1,h2 {margin : 10px auto 10px auto; text-align : center; background : gray ; color : white; } h1 {font-size : 1.4em ;} h2 {font-size : 1.2em ; } nav a {height : 30px ; line-height : 30px ; background : white ; text-align : center; } a:hover {font-size : 1.2em ; color : red ; } p { width : 100% ;text-align : justifiy ; padding : 5px ; } img.mini {float : left ; } img.grand {display : block ;} } @media screen and (min-width: 900px) { * { font-size : 14px ; } body {width : 900px ; margin: 20px auto 20px auto ; } nav {width : 29% ; float : left ; height : 400px ; } article {width :70% ; float : right ; height : auto ;} nav a {display : block ; margin : 20px; } img.mini {margin-right : 1% ; width : 14%; } img.grand {width : 60% ; margin : 10px auto 10px auto ; } } @media screen and (max-width: 899px) { * {font-size : 10px; } body {width : 100% ; } nav, article {width : 100% ; float: left ; } nav {min-height : 100px ; } article {height : auto ; } nav a {display : inline-block ; width : 30% ; margin : 10px 1% 10px 1% ; } img.mini {margin-right : 2% ; width : 30%; } img.grand {width : 90% ; margin : 10px auto 10px auto ; } }

Selon la largeur de l'écran les images "grand" auront une largeur de 90% ou de 60% de celle du conteneur. Et les images "mini" auront une largeur de 30% ou de 14% de celle du conteneur.
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 la largeur est sous 900 la mise en page change !
Retour menu