Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. HTML5 et CSS3
  3. Le design web adaptatif
Extrait - HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition)
Extraits du livre
HTML5 et CSS3 Faites évoluer le design de vos sites web (4e édition) Revenir à la page d'achat du livre

Le design web adaptatif

L’état des lieux et l’objectif

Aujourd’hui, une entreprise qui veut avoir un site web « digne de ce nom » se doit de proposer un contenu qui puisse s’afficher correctement sur tous les médias actuels : sur un écran d’ordinateur (du 13" au 32" !), sur une tablette tactile et sur un smartphone.

La difficulté est bien sûr de proposer un contenu visible et lisible sur ces trois types d’écrans. L’objectif est d’offrir une expérience, une interface web, un design web qui s’adapte automatiquement aux différentes résolutions d’écran que pourront utiliser les visiteurs.

Le terme anglais pour désigner cette architecture web est le Responsive Web Design, que l’on peut traduire dans la langue de Molière par Design Web adaptatif. Vous trouverez aussi Design Web réactif.

Pour arriver à nos fins, nous allons utiliser trois techniques :

  • une grille fluide, pour permettre une réorganisation de la structure des pages adaptées à la résolution de l’écran.

  • des images flexibles, pour que leur taille s’adapte à celle de l’écran de diffusion.

  • des requêtes de médias qui vont nous permettre de connaître le média et les dimensions utilisées par le visiteur.

Les requêtes de média

1. L’objectif

Pour créer un design web adaptatif, il faut connaître la résolution de l’écran utilisé, pour proposer des styles qui soient adaptés à cette résolution. C’est l’objectif du module Media Queries qui est en Recommendation au 19 juin 2012 : https://www.w3.org/TR/css3-mediaqueries/

Avec des requêtes de média, vous allez créer des feuilles de style qui sont adaptées aux différentes tailles d’écran. La détection va se faire automatiquement et le navigateur va utiliser les styles adaptés.

2. Avec le HTML4 et les CSS 2.1

Avec le HTML4 et les CSS 2.1, nous pouvons utiliser une feuille de style particulière en fonction du média utilisé. Il suffit d’utiliser l’attribut media dans l’élément link.

Exemple :

<link rel="stylesheet" media="screen" href="stylesEcran.css" 
type="text/css" /> 
<link rel="stylesheet" media="print" 
href="stylesImpression.css" type="text/css" /> 

Nous pouvons utiliser :

  • screen : pour les écrans.

  • handheld : pour les périphériques mobiles ou de petite taille.

  • print : pour l’impression.

  • aural (CSS 2.0) / speech (CSS 2.1) : pour la synthèse vocale.

  • braille : pour les pages en braille.

  • embossed : pour les imprimantes en braille.

  • projection : pour l’utilisation de projecteurs.

  • tty : pour l’utilisation de terminaux.

  • tv : pour une diffusion sur téléviseur.

  • all : pour tous les types de médias.

Mais pour la diffusion sur smartphones, l’attribut...

La taille des écrans

1. La problématique actuelle

Actuellement, chaque type de smartphone et de tablette a ses propres caractéristiques techniques concernant la taille physique des écrans et la surface réellement disponible pour l’affichage d’un site dans un navigateur en version mobile.

Une deuxième problématique vient de ce qui est réellement affiché, en fonction des caractéristiques de l’écran. À la sortie de l’iPhone d’Apple en 2007, la taille de son écran est fixée à 320x480 pixels. Mais Mobile Safari affiche les sites avec une largeur de 980 pixels sur les 320 pixels de large de l’écran, ce qui implique une forte diminution de l’affichage du site.

images/chap16-001.png

2. La taille du viewport

Avec l’iPhone, Apple a introduit un nouvel attribut pour l’élément meta : viewport. Cet attribut va permettre de contrôler le ratio largeur du site (980 pixels) / largeur affichée (320 pixels) appliqué par Safari version mobile.

Si vous souhaitez que Safari pour iPhone affiche les sites avec une largeur de 320 pixels (et non plus avec 980 pixels), vous devez utiliser l’attribut viewport :

<meta name="viewport" content="width=320" /> 

Cet attribut est maintenant adopté par tous les constructeurs de smartphones et de tablettes. C’est devenu un standard de fait.

Prenons un exemple simple et concret pour comprendre l’utilisation de viewport. Voici une page simpliste qui n’affiche qu’une boîte...

Les grilles fluides

1. Les techniques

Les sites web qui ne se préoccup(ai)ent pas d’avoir un design adaptatif ont pour la plupart une architecture basée sur des dimensions fixes. Telle ou telle boîte <div> a dans ses propriétés CSS une largeur indiquée avec une valeur fixe : width: 730px. Ce qui fait que cette dimension reste fixe quelle que soit la taille de l’écran sur lequel le site est affiché. Donc, si le site est affiché sur un smartphone ou une tablette, les dimensions sont figées, sont fixées, et le site ne s’adapte pas du tout.

Pour un site en design adaptatif, il faut que les dimensions des conteneurs (<div>, <nav>, <header>...) soient indiquées en taille relative : en pourcentage.

La syntaxe sera alors de type :

header#intro { 
    ...
    width: 75%; 
    ...
} 

Cela veut dire que la largeur de l’élément <header> ayant l’identifiant #intro a comme largeur d’affichage 75 % de la largeur de son élément parent.

Cela implique pour vous, concepteur, de passer en revue tous les éléments de structure (<div>, <nav>, <header>...) qui ont des dimensions fixes et les passer en dimensions relatives en fonction d’une requête de média.

De plus, vous pouvez utiliser le mot-clé !important dans vos règles CSS modifiées pour qu’elles passent en priorité, devant toute autre règle déclarée de manière « classique », sans requête de média.

Il peut être aussi intéressant de fixer une largeur maximale pour les éléments de contenu (image, tableau...) avec la propriété max-width: 100%, afin qu’ils ne soient pas plus grands que leur parent.

Faites attention aux textes plus large que leurs contenants, utilisez la propriété word-wrap: break-word.

Enfin, n’utilisez que des tailles de caractères relatives, avec les unités em ou %.

2. Un exemple simple

Nous allons créer une boîte <div> conteneur (#conteneur) qui va contenir deux autres boîtes <div> (#gauche et #droite). Le conteneur a une taille flexible, qui est définie à 75 % de son élément parent...

Des images adaptatives

1. Le débordement des images

Les images peuvent aussi poser des problèmes de dimension par rapport à leur parent. Si l’image est plus large que son conteneur, son élément parent, elle déborde !

Voilà un exemple simple d’une boîte <div id="maBoite">, contenant du texte et une image.

<div id="maBoite"> 
    <p><img src="zebre.jpg" alt="Un zèbre" /><br />Delenit odio 
luptatum illum dignissim...</p> 
</div> 

Les styles sont simplistes :

body { 
    font: .8em Verdana, Arial, Helvetica, sans-serif; 
} 
#maBoite { 
    float: left; 
    width: 300px; 
    border: 1px solid #333; 
    padding: 5px; 
} 
p { 
    margin: 0; 
} 

Voilà l’affichage obtenu : la photo du zèbre déborde de la boîte, elle est plus large que son élément parent.

images/chap16-021.png

2. Imposer une largeur maximale

La solution pour éviter ce problème et celui de redimensionnements consécutifs aux requêtes de média est d’imposer une largeur maximale par rapport à l’élément conteneur, l’élément parent de l’image. Il faut tout simplement utiliser la propriété...

Créer du design adaptatif

1. Les deux stratégies

Vous avez un projet de site web et vous souhaitez que les utilisateurs puissent consulter votre contenu sur n’importe quel appareil : écrans d’ordinateur, tablettes ou smartphones.

Vous avez deux stratégies :

  • Vous créez des pages web spéciales pour chaque type d’appareil.

  • Vous faites du design web adaptatif.

Les adeptes de la première stratégie avancent que le contexte d’utilisation impose des pages web spécifiques. Ils nous indiquent qu’une personne qui consulte un site web sur un écran d’ordinateur a besoin d’avoir toutes les informations proposées, sans restriction, car le contexte d’utilisation, un écran d’ordinateur, permet d’afficher tout. Par contre, si un utilisateur consulte un site web sur un smartphone, le contexte d’utilisation ne lui permet pas d’afficher toutes les informations et le fait même que cette personne utilise un smartphone induit qu’elle n’a pas besoin de tout afficher. Il existe bien d’autres arguments pour ne pas adopter le design web adaptatif.

Les adeptes de la deuxième solution avancent que l’on ne peut pas savoir à l’avance, en fonction du contexte d’utilisation (ordinateur, tablette ou smartphone), ce que veulent afficher les visiteurs des sites web. Donc, nous ne pouvons pas « brider »...

Le site Food Sense

1. Les affichages

Ce site (http://foodsense.is/) utilise les requêtes de média et s’adapte pour un affichage optimisé selon l’appareil utilisé.

Voilà l’affichage sur écran d’ordinateur :

images/chap16-016.png

Voilà l’affichage sur un iPad :

images/chap16-017.png

Voilà l’affichage sur un iPhone :

images/chap16-018.png

2. La structure principale

Voici la structure principale du site développé en HTML5.

images/chap16-019.png

Voici les principaux styles utilisés.

Le conteneur général est une boîte <div id="wrap"> :

#wrap { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    background: #FFF; 
} 

L’en-tête est un <header>, qui contient un <h1> avec une image en arrière-plan :

header[role="masthead"] { 
    float: left; 
    width: 160px; 
    margin-bottom: 25px; 
} 
h1#branding { 
    display: block; 
    width: 120px; 
    height: 120px; 
    text-indent: -999em; 
    background: url(../img/food-sense.png) no-repeat 0 0; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
} 

Les liens de navigation sur la gauche sont placés dans un élément <nav> :

nav { 
    position: absolute; 
    top: 158px; 
    left: 0; 
    width: 160px; 
} 

Les éléments des réseaux sociaux sont placés dans un élément <aside>, dans des éléments <section> :

aside[role="social"] { 
    position: absolute; 
    top: 452px; 
    left: 0; 
    width: 160px; 
} 
aside[role="social"] section { 
    display: block; 
    margin-bottom: 32px; 
    padding-right: 20px; 
} 

La zone centrale est une boîte <div id="content"> :

#content { 
    position: relative; 
    float: right; ...