Le design web adaptatif

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 :

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

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.

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...

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...

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.

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é...

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 :

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 »...

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 :

Voilà l’affichage sur un iPad :

Voilà l’affichage sur un iPhone :

2. La structure principale

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

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; ...