Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Tutoriel : la responsivité

Définition.

Une interface responsive (ou en français une interface adaptative) s'adapte à la taille de l'écran, tout en restant confortable à utiliser. A l'heure actuelle, étant donné le nombre d'internautes équipés de téléphone, il est absolument indispensable de concevoir des sites internet capables d'être consultés à partir de n'importe quel terminal, PC de bureau ou téléphone mobile, et cela avec un confort d'utilisation comparable.

Le viewport.

Les terminaux mobiles ont la capacité de simuler un écran plus grand que leur écran réel. Une page de 1200 pixels de large sera consultable sur un téléphone mais on en verra qu'une partie. Il faudra faire défiler le contenu horizontalement pour lire les lignes complètes. Ce n'est pas pratique.

Une autre possibilité est de réduire l'échelle d'affichage jusqu'à ce que la page complète tienne sur l'écran du téléphone. Mais les caractères risquent alors d'être trop petits, difficiles à lire, voire illisibles. L'internaute sera obligé de zoomer pour lire correctement la page. Là aussi ce n'est pas pratique.

Cette faculté des terminaux portables de traiter des écrans plus grands que ce qu'ils peuvent afficher était nécessaire à l'époque où les sites internet n'étaient pas adaptés : c'était la solution pour pouvoir surfer sur internet avec un téléphone.

Maintenant que tous les sites web ont une ergonomie à peu près responsive, ce fonctionnement est gênant car le navigateur croit qu'il a un écran confortable à disposition et construit sa mise en page comme il le ferait sur un écran de bureau. Il faut donc figer l'écran virtuel du terminal portable à la taille de son écran physique, afin que le navigateur construise la mise en page en fonction de la taille réelle de l'écran. C'est le rôle de la déclaration viewport que vous devez placer dans TOUTES vos pages HTML, dans la section head.

Il ne s'agit pas d'une syntaxe CSS mais bien d'une balise HTML, dont voici la syntaxe la plus courante. On définit ici que la largeur de l'écran virtuel doit être identique à celle du device, donc de l'écran physique, et que le zoom doit être de 1 (l'internaute pouvant cependant zoomer ou dézoomer s'il le souhaite).

meta name="viewport" content="width=device-width, initial-scale=1.0" /

Pour voir l'importance de la déclaration viewport, vous pouvez charger les pages suivantes sur un terminal mobile. Attention ! Sur un écran de bureau, la déclaration viewport n'a aucun effet.

Charger sur un terminal mobile la page sans déclaration viewport.

Le navigateur tente d'afficher toute la page en entier, ce qui l'oblige à réduire considérablement l'échelle. Du coup, même le titre est difficile à lire et il est pourtant écrit en caractères de 24 points.

Charger la même page AVEC déclaration viewport.

La page s'affiche à l'échelle 1 : la lecture est possible. Le titre et le texte reviennent à la ligne et vous les voyez en entier sans qu'il soit nécessaire de faire défiler la page (c'est déjà mieux). Mais vous devez quand même faire défiler l'écran horizontalement pour voir la totalité des barres colorées. C'est parce que cette page n'est pas adaptative (responsive).

Charger la page adaptative.

La page s'affiche à l'échelle 1 : la lecture est confortable sans zoomer et sans faire défiler l'écran horizontalement. De plus les barres colorées sont visibles dans leur totalité.

Les unités relatives.

L'étape suivante pour rendre vos pages adaptatives est de définir les dimensions en unités relatives. Reportez-vous aux unités de dimensions en CSS pour une liste complète de ces unités.

Pour les marges, dimensions des éléments, etc. l'unité la plus couramment utilisée est le pourcentage. Ainsi toutes vos dimensions sont proportionnelles à celles de l'écran.

Il faut cependant fixer des limites : si un élément devient trop petit lorsqu'il est affiché sur un terminal mobile, son contenu n'aura plus assez de place. De même, sur un écran de bureau, il faut éviter que les éléments ne grandissent démesurément. Quatre propriétés nous permettent de fixer ces limites : min-width, max-width, min-height et max-height. Contrairement aux autres dimensions, ces valeurs seront définies en unités absolues (en pixels par exemple).

La largeur du cadre ci-dessous est proportionnelle à celle de son parent (le cadre avec une bordure bleue) dans certaines limites. Modifiez la largeur du cadre bleu et observez l'évolution du cadre intérieur #demo1.

Cliquez pour afficher les CSS de ce cadre
Largeur du cadre parent (bleu) :
Largeur de ce cadre :

Les éléments flexibles et les grilles.

Les flex-box et les grids, ces nouvelles propriétés, introduites en CSS3, rendent la conception adaptative bien plus facile.
Nous vous invitons à lire les tutoriels sur les flex-box et sur les gilles.

Les media-queries.

Il est certain que les pourcentages ne résolvent pas tout. Par exemple, lorsque tous les éléments ont atteint leur largeur minimale définie par min-width, ils ne peuvent plus se réduire. Il faut alors les disposer autrement : mettre les uns en dessous des autres les éléments qui sont côte à côte, ne plus afficher les éléments non indispensables, etc.

Les media-queries sont là pour ça. Il s'agit en fait d'une extension de la directive @media qui existe depuis longtemps dans la syntaxe CSS mais initialement cette directive ne servait qu'à associer des styles à un périphérique particulier : écran, imprimante, etc. Les media-queries permettent maintenant, tout en restant sur un terminal du type écran, de filtrer les styles en fonction de la taille de cette écran.

Voici à quoi ressemble une feuille de styles utilisant les media-queries :

@media screen and (min-width:720px) { /* Règles CSS pour un écran de 720 pixels ou plus */ } @media screen and (orientation:landscape) { /* Règles CSS pour une tablette ou un smartphone tenu horizontalement */ } @media print and (max-width:21cm) { /* Règles CSS pour une une impression sur une largeur de 21cm maximum */ } @media not print { /* Règles CSS pour tous les périphériques sauf les imprimantes */ }

Nous vous invitons à consulter la page sur @media pour une description complète de cette directive.

La conception "mobile first".

Ce terme désigne la méthode de conception qui consiste à définir en premier les pages pour les terminaux mobiles à petit écran (smartphones), dans un deuxième temps, les mises en page pages pour tablettes, et enfin la mise en page pour écrans de bureau.

En conclusion.

La conception d'un interface adaptatif passe par les étapes suivantes :

  • Concevoir sa mise en page en prenant en compte les contraints d'un écran de smartphone.
  • Mettre en place des directive viewport dans l'en-tête de toutes les pages.
  • Définir toutes les dimensions horizontales (largeurs, marges droite et gauche...) en unités relatives, comme le pourcentage.
  • Mettre en place des limites minimale et éventuellement maximale.
  • Définir une directive media-query en disposant les éléments au mieux pour un écran plus grand comme celui d'une tablette.
  • Définir une autre directive media-query pour disposer les éléments pour un écran de bureau.

En principe, gérer trois gammes de terminaux est suffisant : smartphone, tablette et écran de bureau,mais vous pouvez créer davantage de media-queries si c'est nécessaire.