Du stretching pour vos sites

Par Patrick Griffiths

Il peut être difficile de passer d'une méthode de conception statique, calée au pixel près, à une approche plus élastique ou relative. Cependant, un design élastique bien implémenté peut constituer une option viable pour améliorer l'ergonomie et l'accessibilité de vos pages, sans en sacrifier le design.

Un pixel est un point de taille fixe sur un écran d'ordinateur, tandis qu'un em est un carré dont les dimensions dépendent de la taille de la police utilisée. Comme les taille de polices varient, l'em est une unité relative qui s'adapte aux réglages de taille effectués par l'utilisateur.

Il est peut-être plus facile d'adopter une approche statique (c'est-à-dire concevoir sa page web comme un imprimé), étant donné qu'il y a moins de choses à prendre en compte quand les dimensions sont figées. Cependant, user d'une méthode élastique permet d'exploiter à fond les possibilités des navigateurs web.

Vous voulez peut-être que votre site s'affiche d'une certaine manière, mais vos visiteurs peuvent l'entendre d'une autre oreille. Contraindre un visiteur en quoi que ce soit est néfaste pour l'ergonomie et peut donc nuire à la réussite de votre site web.

Pour comprendre comment fonctionne une interface élastique, il nous faut d'abord revoir notre point de vue sur un domaine qui a priori n'a rien à voir avec le sujet de cet article, à savoir les méthodes utilisées pour donner une taille à notre texte. Une fois que nous aurons trouvé une manière de créer une page web qui s'adapte selon le redimensionnement du texte, nous pourrons utiliser des techniques de mise en page qui font appel à ce principe.

Texte élastique

Le texte est le plus évident des candidats à l'élasticité. La possibilité de changer la taille de texte est une fonctionnalité suffisamment courante pour ne pas être ignorée.

L'accessibilité ne se limite pas seulement aux problèmes de cécité et aux lecteurs d'écrans. Il y a beaucoup de personnes qui ne sont pas aveugles, mais dont la vision est déficiente (une situation dans laquelle nous finirons tous par nous retrouver en vieillissant). Un des moyens les plus simples pour rendre un site plus accessible est de permettre aux utilisateurs de modifier la taille du texte. Négliger cette possibilité fait perdre le contrôle à l'utilisateur et peut l'empêcher de lire confortablement le contenu.

Si un designer utilise une unité comme le pixel pour définir la taille de la police, la majorité des utilisateurs ne pourront pas redimensionner le texte car Internet Explorer pour Windows n'augmente pas la taille du texte de la même manière que d'autres navigateurs : Mozilla ou Opéra sont capable de redimensionner un texte dont la taille est spécifiée en pixels, mais pas IE/Windows.

Le problème des ems

Les ems semblent être l'unité idéale lorsqu'il est question de taille de texte relative. La taille de texte par défaut dans un navigateur est généralement de 16 pixels, trop grand au goût de la plupart des designers. Pour utiliser les ems, ceux-ci fixent généralement la taille initiale à un peu moins de 1em.

Par exemple:

body {
   font-size: 0.8em;
}

h1 {
   font-size: 2em;
}

p {
   font-size: 1em;
} 

Ça pourrait être correct, mais il y a tout de même un problème. Si, dans Internet Explorer, vous mettez le réglage "Taille de texte" sur "Plus petite" ou "La plus petite", le texte est alors si petit qu'il en devient illisible. Comme Internet Explorer est très répandu et que le réglage "Plus petite" est souvent utilisé, le choix des ems ne paraît pas viable.

Jeffrey Zeldman a soutenu dans le passé que le pixel, bien que source de problèmes, est une meilleure unité que l'em pour spécifier une taille de texte. Il se basait sur les recherches approfondies d'Owen Briggs, qui a testé 264 méthodes différentes pour dimensionner un texte et a démontré que les unités relatives comme les ems ne marchent pas. Beaucoup de designers utilisent désormais le pixel pour définir la taille du texte, pas pour un contrôle absolu de leurs pages web, mais parce qu'il semble ne pas y avoir de réelle alternative.

On dirait que nous sommes bloqués avec soit un texte soit trop grand et désagréable, soit impossible à redimensionner. Mais lisez donc la suite.

La feuille de style alternative "Texte plus grand"

Plusieurs auteurs contournent le problème d'accessibilité dû aux pixels non redimensionnables en utilisant une feuille de style alternative, que l'on peut activer en cliquant sur un lien, et qui permet d'augmenter la taille du texte.

C'est une bonne méthode pour l'accessibilité, mais qui serait encore meilleure si elle était utilisée conjointement avec des tailles de texte relatives (comme sur le site Wired News). Vous ne devez pas attendre d'un utilisateur qu'il soit familier avec votre propre interface. Les utilisateurs sont logiquement plus familiers avec l'interface de leur navigateur, et s'ils veulent du texte plus grand il y a plus de chance qu'ils cherchent à le modifier via leur navigateur plutôt que via votre site. De plus, ils s'attendront certainement à ce que ce réglage persiste sur tous les sites qu'ils iront visiter, et on ne devrait pas attendre d'eux qu'ils le modifient à chaque nouveau site.

Les mots-clés CSS

Les mots-clés spécifiant la taille de texte (xx-small, medium, x-large, etc.) semblent être la solution. La taille de la police augmente si, dans IE, un utilisateur choisit "Plus grande" ou "La plus grande". Et s'il choisit "Plus petite" ou "La plus petite", elle diminuera... jusqu'à un certain point. C'est le principal avantage de ces mots-clés, outre leur caractère élastique : le texte n'aura jamais une taille inférieure à une certaine limite, il devrait donc être lisible quelle que soit la taille de texte sélectionnée par l'utilisateur.

Les mots-clés sont examinés plus en détail dans un article sur A List Apart, un site qui constitue peut-être la meilleure démonstration de cette méthode (avant le dernier redesign, ALA avait un style switcher avec une feuille de style taillant les polices en pixels, et une autre utilisant les mot-clés).

Démonstration par les pourcentages

Les ems fonctionnent parce qu'on peut facilement surmonter le problème du texte minuscule en fixant la taille de police initiale avec un pourcentage. On ne sait pas vraiment pourquoi ça marche, mais le fait est que ça marche. Lorsque cette solution est implémentée, les variations entre les différents réglages de taille de texte ne sont plus si énormes, et les designers peuvent fixer une taille de texte initiale assez petite qui sera encore lisible avec les réglages "Plus petite" et "La plus petite". Voici qui ramène les ems sur le devant de la scène (même un certain M. Briggs préfère désormais les ems).

Par exemple :

body {
   font-size: 80%;
}

h1 {
   font-size: 2em;
}

p {
   font-size: 1em;
}

L'avantage des ems est que, contrairement aux mots-clés, vous pouvez les utiliser pour définir toutes les dimensions de votre site, qui se redimensionnera ainsi proportionnellement à la taille du texte.

Mise en page élastique

Une mise en page entièrement élastique est certainement une chose moins évidente à appréhender par un designer que les tailles de texte relatives. Mais en fixant les dimensions de notre site avec des ems, c'est faisable.

Rendre un site élastique de manière à ce que ses dimensions changent lorsqu'un utilisateur décide de changer la taille du texte peut sembler inutile voire indésirable. Mais si vous avez du texte qui peut être agrandi et rétréci, la possibilité d'agrandir ou de rétrécir l'interface qui le contient prend tout son sens.

De plus, si un utilisateur choisit d'agrandir son texte, les marges autour de celui-ci s'élargiront en conséquence. De ce fait, les proportions générales telles que définies par le designer seront toujours les mêmes et le texte restera agréable à lire.

Cette méthode nous apporte un autre avantage : plus de retours à la ligne intempestifs. Si une colonne possède une largeur définie en pixels et que le texte contenu à l'intérieur est agrandi, cela peut casser toute votre mise en page. Ce problème n'apparaîtra pas si la largeur de la colonne est définie proportionnellement au texte (donc avec des ems).

Pour une application concrète de cette méthode, allez voir le design Elastic Lawn (pelouse élastique) sur le CSS Zen Garden et modifiez la taille du texte depuis votre navigateur pour constater le résultat.

C'est trop grand !

Après avoir défini la taille de police initiale à 100%, une dimension de 36ems devrait correspondre à 576 pixels (pour vous donner une idée, A List Apart a une largeur de 600 pixels) avec une taille de texte réglée sur "Moyenne" dans Internet Explorer. Ces 36ems passent à 768 pixels pour le réglage "Plus grande" (testé sur IE6/Win). Avec ce réglage, des dimensions supérieures donneront un résultat trop grand, qui ne pourra pas s'afficher entièrement sur un écran de 800 pixels de large.

Les CSS apportent une solution à ce problème via la propriété max-width, que l'on peut utiliser pour fixer la taille maximum d'un élément. Malheureusement (qui l'eût cru ?) Internet Explorer ne comprend pas cette propriété.

L'autre solution consiste à utiliser une mise en page fluide dans laquelle la largeur du contenu n'est pas précisée du tout, ce qui fait que le texte prendra toute la largeur de l'écran (c'est la solution adoptée sur HTML Dog). Certains contesteront en disant que cela rend le texte difficile à lire sur de grands écrans, mais c'est un avantage pour les petits affichages comme ceux des appareils mobiles.

Si vous optez pour une approche élastique, vous aurez peut-être toujours besoin des pixels pour les largeurs de bordures ou les images. C'est un problème potentiel quand on travaille sur des dimensions relatives. Mais finalement, qu'est-ce qui nous empêche d'appliquer la même recette aux images ?

Assouplir les images

Donner une taille relative à des images bitmap peut provoquer un désastre visuel. Mais on peut s'y prendre autrement, en maintenant la résolution de l'image elle-même mais en n'en affichant qu'une portion aux dimensions désirées.

C'est possible grâce à la technique consistant à remplacer un contenu (le plus souvent du texte) par une image de fond. Voici un exemple avec un élément de titre (mais d'autres techniques de remplacement sont parfaitement envisageables).


h1 {
   font-size: 1em;
   width: 10em;
   height: 100px;
   text-indent: -1234em;
   background-image: url(image.jpg);
} 

Ou alors (comme sur hebig.org et v-2.org) vous pouvez utiliser un élément img contenu dans un élément div auquel on applique les propriétés CSS suivants :

div {
   width: 10em;
   overflow: hidden;
} 

La plupart des techniques de mise en page élastiques décrites dans cet article sont visibles sur ma page de démonstration.


Translated with the permission of A List Apart and the author[s].

Fiche technique

À propos de l'auteur

Patrick Griffiths est un artisan du web basé à Londres qui possède un penchant pour la musique soul, l’évolution, et les promenades de son site de compagnie, HTML Dog. Selon son humeur, il peut préférer le surnom PTG.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Tous niveaux

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site