Habitudes quotidiennes

Je me souviens, il y a quelques années, nous, les utilisateurs, rencontrions souvent des caractères de petite taille (11 px en moyenne) sur de nombreux sites web ; ce choix de taille découlant pour l’essentiel d’un manque de place : les contraintes liées à l’obligation de faire rentrer le plus de choses possible sur un écran, dans un mode résolument « moins défilant » qu’aujourd’hui ; tout ceci, nonobstant le fait que la plupart des designers ont une très bonne vision, du fait de leur formation, injustement augmentée par leur utilisation de moniteurs haut de gamme.

Ces dix dernières années, toutefois, grâce aux tablettes et aux interfaces tactiles, une tendance différente s’est généralement imposée : des éléments à cliquer pour occuper les doigts, une bande passante plus élevée autorisant des images plus nettes, de plus grande taille.

Les designers tendent dorénavant à préférer la taille 16 pixels par défaut. Et, comme vous l’aurez sûrement deviné, c’est une bonne chose. Il s’agit de la taille de police par défaut des navigateurs de bureau depuis des temps immémoriaux, et constitue une règle simple de feuille de style pour la taille de police des développeurs : 100 % et le tour est joué. En parallèle, certains titres sont devenus immenses : zeldman.com par exemple, arbore des titres qui sont quatre fois plus grands que la taille par défaut (4em, ce qui revient à 72 pixels), et un corps de texte à 24 pixels.

C’est un peu trop, à mon goût et pour ma capacité de lecture, mais ça, c’est une autre histoire. Vous pouvez en savoir davantage à ce sujet en lisant son article d’introduction sur le nouveau design.

Navigation

Nous venons juste de dire que nous profitons à présent de plateformes d’affichage de qualité supérieure et plus variée. En outre, nous avons développé de nouvelles habitudes, à savoir qu’il nous arrive de commencer une lecture sur notre ordinateur portable, puis de nous envoyer un rappel et de la terminer sur notre téléphone mobile dans les transports.

Si un site est conçu de manière suffisamment adaptative (voir plus bas pour une définition du Responsive Web Design), la plupart du temps, nous ne sommes pas conscients de l’impact du contexte lorsque celui-ci évolue. Cependant, il semble que nos habitudes diffèrent d’un appareil à l’autre et nous nous attendons néanmoins à vivre la même expérience : à savoir, ma lecture sur mon ordinateur portable était confortable ; j’attends maintenant le même confort sur mon mobile. Et inversement.

Mais, pour ces différents contextes, l’espace disponible sur les écrans diffère considérablement, de même que la luminosité du fait de l’environnement ; pour faire court, disons que plus il y a d’éclairage ambiant, moins on arrive à lire sur son écran. Voilà un challenge de taille pour le design : accordons-nous une attention suffisante aux divers contextes dans lesquels un seul et même contenu va être consulté ?

Le Responsive Web Design à la rescousse

Le Responsive Web Design (RWD) ou conception de site web adaptatifs a été défini comme une façon de réorganiser les contenus sur une page en fonction de l’espace disponible sur l’écran – par exemple, modifier la mise en page et la ramener de trois à deux colonnes sur un écran plus petit, voire à une seule colonne sur un navigateur mobile, selon les « points d’arrêt » (points où le design peut créer une rupture de sorte pour en tenir compte en ajustant le design au-dessus ou en dessous d’un seuil).

Au plan conceptuel, c’est extraordinairement simple (d’où son génie et son adoption sans réserve) : préciser simplement des ensembles de règles pour les contextes différents et le tour est joué.

Ce que l’on néglige souvent à propos de le RWD, c’est que, comme ce ne sont que des feuilles de style en cascade (CSS), vous pouvez modifier tout ce qui paraît approprié à partir de n’importe quel point d’arrêt.

Cas d’espèce, comme nous l’avons vu plus haut : les caractères de grande taille et la diminution des contrastes (bien qu’accessibles sur ordinateurs portable/de bureau). Aimerions-nous pouvoir les adapter pour des écrans de plus petite taille ? Le RWD nous permet tout simplement de le faire, en ajoutant des règles à nos CSS pour diminuer les polices de grande taille et les ramener à des tailles plus raisonnables, et spécifier un véritable noir sur blanc pour texte.

Nous pouvons même ajouter des règles plus simples pour les polices de caractère et remplacer les polices enrichies (polices importées à partir d’un fichier de polices disponible en ligne) par des polices antérieures, de base.

Références en matière de polices de caractère pour Orange

Le moment est venu de vous rappeler la directive chez Orange. Si vous consultez le Digital guideline Browsing, vous remarquerez, à la page 26, que vous devez soit utiliser les polices enrichies pour Helvetica Neue ou avoir recours aux polices natives, à savoir Arial (navigation), San Francisco (iOS), Roboto (Android), Segoe (Windows).

Vous trouverez également un diagramme exposant la taille de police à utiliser en fonction du type d’élément (titre, sous-titre, corps du texte, etc.) ; voir ci-après :

Âmes sensibles s'abstenir : un exemple de code

Voici un exemple simplifié extrait du CSS que j’utilise sur mon site web personnel :

/* Default declaration for body on smaller screens
Colour is pure black on white
*/
body {
font-family:Arial,Helvetica,sans-serif;
color:#000;
background:#fff
}
 
/* If the screen is wider than 30em
… which is roughly 30*16 = 480 pixels
let's switch to a smoother drak grey */
@media screen and (min-width: 30em) {
body {
color:#333
}
}
 
/* Default declarations for h1 and h2 on smaller screens
… respectively level 1 and level 2 headings
*/
h1,h2 {
font-family:Georgia, Times, serif;
font-weight:bold
}
/* Sizes for our headings are careful not to be too big
1.5em = 24 pixels
1.2em = 19.2 pixels (roughly 19 pixels, yes I could have done better and rounded to 20, lazy me)
*/
h1 {
font-size:1.5em
}
h2 {
font-size:1.2em
}
 
/* Bigger screen:
Heading 1 is bumped up to 2em = 36 pixels
and heading 2 to 1.5em = 24 pixels
Both feature a new font family (a web font called Aleo)
but still rely on “Georgia, Times, serif” as a fallback
just in case the web font could not be loaded
*/
@media screen and (min-width: 30em) {
h1 {
font-family:'aleo', Georgia, Times, serif;
font-size:2em
}
h2 {
font-family:'aleo', Georgia, Times, serif;
font-size:1.5em
}
}
 

AComme vous le voyez, en joignant l’acte à la parole et en passant d’affichages plus petits à de plus grands, nous passons du noir au gris foncé, de polices en clair sans empattement à une police enrichie pour certaines parties de texte sélectionnées et de polices de tailles raisonnables à de plus grandes tailles dès lors que l’espace à l’écran est suffisant.

Sur un écran plus petit, nous employons du Georgia, Times, une combinaison d’empattements.

Sur un écran plus grand, nous intégrons la police enrichie si le navigateur nous y autorise. Vous pouvez observer ici que la police Aleo a remplacé le groupe de polices par défaut que nous avions ci-dessus. De même, la police est légèrement plus grande.

En résumé

Nous avons vu qu’il est possible de profiter du Responsive Web Design non seulement pour adapter la mise en page, mais également le contraste, la taille de typographie, voire par l’intégration de polices en fonction de l’espace à l’écran à disposition. Alors, pourquoi ne pas utiliser l’une pour enrichir l’autre ?

Oh, et Jeffrey Zeldman s’adonne également à ce genre de cascade, au cas où vous vous poseriez la question…