principe-layouts-thumb

Évolutions des principes de mise en page

Extrait du livre Web­grids, d’Anne-Sophie Fradier

Le règne des 960 px

Jusqu’à l’arrivée des sup­ports alter­na­tifs ces der­nières années, la page web était visible sur un seul type d’écran: celui de l’ordinateur, qu’il soit por­table ou de bureau. Dans ce contexte homo­gène, la réso­lu­tion de l’écran était une variable impor­tante, mais l’on pou­vait comp­ter sur une réso­lu­tion mini­male, sorte d’étalon mis à jour tous les trois à cinq ans. D’autre part, l’écran large ne sem­blait pas conçu pour pré­sen­ter une seule grande fenêtre mais plu­tôt pour en affi­cher plu­sieurs simultanément.

Ce contexte tech­no­lo­gique a favo­risé les desi­gns à lar­geur fixe, éga­le­ment pri­vi­lé­giés par les desi­gners parce qu’ils sem­blaient faci­li­ter le pro­ces­sus de concep­tion et leur don­ner plus de contrôle sur le pro­duit final. Cette réso­lu­tion mini­male d’écran a per­mis de déter­mi­ner une lar­geur opti­male pour les sites à design fixe. C’est ainsi qu’on en est venu à recom­man­der une lar­geur maxi­male de 960 px (comme en témoignent plus d’un fra­me­work), c’est-à-dire la lar­geur dis­po­nible sur un écran de 1024 x 768 px. On aurait pu, pen­dant un temps, son­ger à pas­ser à la taille supé­rieure, dans la mesure où la lar­geur des écrans était de plus en plus cou­ram­ment égale ou supé­rieure a 1280 px, mais l’arrivée des net­books puis de l’iPad a ren­forcé les rangs de la réso­lu­tion 1024 x 768 px, jus­ti­fiant que l’on reste en-dessous de 1000 px.

Fixer de manière abso­lue la lar­geur de la page en l’exprimant en nombre de pixels ne signi­fie pas que tous les élé­ments du design doivent subir le même trai­te­ment. Un design à lar­geur fixe se marie très bien avec des tailles de police et des dimen­sions ver­ti­cales expri­mées en tm, unité rela­tive à la taille de police par défaut du navi­ga­teur. L’utilisateur peut ainsi sans pro­blème modi­fier la taille de la police, quel que soit son navi­ga­teur, et les blocs dont la hau­teur est spé­ci­fiée en tm s’adapteront au volume du texte agrandi. Certes, agran­dir du texte dans un conte­nant fixe va avoir pour effet de réduire le nombre de carac­tères par ligne; ce n’est pas très esthé­tique mais il faut savoir que c’est beau­coup moins gênant que l’inverse pour la lecture.

Flui­dité et élas­ti­cité au ser­vice de l’utilisateur

Design fluide

Flui­dité et élas­ti­cit é au ser­vice de l’utilisateur

Si le design fixe pré­do­mine sur le web, le design fluide occupe une place non négli­geable: la Wiki­pé­dia et le site du W3C en sont des exemples incon­tour­nables. Dans un design fluide, les dimen­sions des blocs sont expri­mées en pour­cen­tage de la taille de la fenêtre du navi­ga­teur. Modi­fier la taille de son view­port entraîne une réponse immé­diate: le design s’agrandit ou rétré­cit. Le choix d’une telle approche pro­cède d’une inten­tion tout à fait louable: épou­ser réel­le­ment le sup­port en accep­tant que la page n’ait pas de dimen­sions abso­lues et en don­nant à l’utilisateur un contrôle sur l’affichage de la page. Para­doxa­le­ment, cette solu­tion est sus­cep­tible de géné­rer des pro­blèmes que seule une inter­ven­tion de l’utilisateur pourra résoudre, ce qui est contre-productif. Don­ner le contrôle à l’utilisateur, ce n’est pas lui deman­der d’assurer la main­te­nance. En effet, un design fluide ne doit pas igno­rer l’impact déci­sif qu’a la lar­geur d’un bloc de texte sur sa lisi­bi­lité. Nous revien­drons plus pré­ci­sé­ment sur ce point dans la sec­tion dédiée à la com­po­si­tion du texte cou­rant, mais vous vous êtes déjà rendu compte à quel point des lignes trop longues peuvent être dif­fi­ciles à lire. Si le desi­gner renonce à contrô­ler la lar­geur de jus­ti­fi­ca­tion, l’utilisateur qui ouvre un tel site dans une grande fenêtre se trou­vera face à des para­graphes bien trop larges pour être lisibles confor­ta­ble­ment. S’il en a l’idée, il va redi­men­sion­ner la fenêtre de son navi­ga­teur pour cor­ri­ger le problème- c’est déjà le signe d’une erreur de concep­tion; il est éga­le­ment fort pro­bable qu’il subisse, tout sim­ple­ment, cette mise en page incon­for­table et aban­donne avant la fin de l’article. A priori, il est facile d’éviter ce scé­na­rio: il suf­fit en effet de spé­ci­fier, à l’aide de max-width, la lar­geur maxi­male de la colonne de texte (tout comme on emploiera min-width pour indi­quer la lar­geur mini­male des blocs et évi­ter une catas­trophe en cas de fenêtre trop étroite). Pour­tant, si vous faites du design web depuis plus de six mois, vous savez qu’Internet Explo­rer 6 ne prend en charge que 0,27% des pro­prié­tés de css et que min-width et max-width n’en font pas par­tie. Et si vous êtes dans le métier depuis moins de six mois, alors vous savez que cette lacune a été cor­ri­gée sous Inter­net Explo­rer 7 mais que la ver­sion 8 du navi­ga­teur de Micro­soft a réin­tro­duit des bizar­re­ries qui, sans rendre impos­sible l’emploi de ces pro­prié­tés, peuvent pro­vo­quer quelques migraines. Ces dif­fi­cul­tés contri­buent sans doute à expli­quer le nombre de desi­gns fluides débri­dés que l’on ren­contre sur la toile.

Design élas­tique

Le design élas­tique ou flexible tra­duit éga­le­ment la volonté de se pla­cer du te de l’utilisateur mais il adopte une autre approche: il est conçu pour adap­ter à l’agrandissement du corps du texte. Il cherche donc à appor­ter e réponse élé­gante à une exi­gence fon­da­men­tale d’accessibilité.

L’intérêt d’un design flexible est qu’il anti­cipe la dégra­da­tion pos­sible du design pour la gérer de manière har­mo­nieuse. Assez sim­ple­ment, il s’agit de rendre la lar­geur des conte­nants pro­por­tion­nelle au corps du texte en défi­nis­sant leurs dimen­sions à l’aide de la même unité rela­tive: l’em. De cette façon, l’agrandissement du texte entraîne le redi­men­sion­ne­ment des blocs dans les mêmes pro­por­tions; le nombre de carac­tères par ligne reste le même et ce fac­teur de lisi­bi­lité essen­tiel est pré­servé. La grille sous-jacente sera donc entiè­re­ment mesu­rée en em. Pour plus de sim­pli­cité, rien nous empêche de créer la grille et la maquette dans une unité abso­lue en appuyant sur l’équivalence de base entre pixels et em; une simple conver­sion per­met­tra ensuite de spé­ci­fier les dimen­sions et les posi­tion­ne­ments en em.

Natu­rel­le­ment, ce prin­cipe peut s’avérer déli­cat à mettre en appli­ca­tion si le design emploie de nom­breuses images de fond qui ne seront pas for­cé­ment agran­dies avec le reste (cela dépend du type de zoom – page ou texte – exercé par le navi­ga­teur). Il s’agira alors de veiller à ce que le contenu reste lisible même si le design est dégradé. Il ne faut pas oublier non plus que CSS3 fait bas­cu­ler du côté du code — et donc de la flexi­bi­lité — un cer­tain nombre d’effets gra­phiques (dégra­dés, ombres por­tées, etc.) qui repo­saient jusque là sur des images rigides. Des blocs aux dimen­sions souples sont donc de plus en plus faciles à mettre en place.

fluid01

Une chose est sûre: bien géré, un design élas­tique agrandi fait mer­veille sur un grand écran béné­fi­ciant d’une réso­lu­tion fine. Par contre, il peut rapi­de­ment «débor­der» d’un petit écran si l’utilisateur a besoin d’un agran­dis­se­ment consé­quent pour lire confor­ta­ble­ment. Sur­tout, dans les navi­ga­teurs modernes, il prive l’utilisateur de la pos­si­bi­lité d’agrandir uni­que­ment le texte sans tou­cher au reste de la mise en page, alors qu’Internet Explo­rer 7 et 8 et Fire­fox offrent les deux options: zoom texte et zoom page. Assu­rer dès le départ une bonne lisi­bi­lité Sur­tout, que l’on fasse le choix d’un design fixe ou flexible, il serait peu­têtre bon de pro­duire dès le départ une mise en page lisible par la majo­rité. Je suis myope et il m’arrive sou­vent d’agrandir légè­re­ment la taille de police à l’écran: 2 pixels suf­fisent à faire la dif­fé­rence entre des pattes de mouche et le confort de lec­ture. Pour le texte cou­rant, 14 ou 16 pixels – plu­tôt que les 10 ou 12 pixels tra­di­tion­nels – assurent une lec­ture agréable à un grand : nombre d’utilisateurs; avec eux au moins, votre design sera intact. La mise en page sera en outre moins mal­me­née si un uti­li­sa­teur a besoin de carac­tères plus grands : pour atteindre une taille de police confor­table, le fac­teur d’agrandissement néces­saire sera moins impor­tant. Opter pour une taille géné­reuse dès le départ rend ainsi ser­vice à tous vos uti­li­sa­teurs. Il ne faut pas oublier non plus que la réso­lu­tion de nos écrans est bien plus fine qu’il y a quelques années. Très sim­ple­ment, un carac­tère de 12 pixels sur un écran CRT 15″ de 2002 est plus gros — donc plus lisible — que sur celui d’un net­book de 2010. Les pro­grès réa­li­sés en termes de réso­lu­tion ne doivent pas seule­ment per­mettre d’afficher plus, mais sur­tout d’afficher mieux.

Ces approches, conçues pour des écrans moyens à grands et faites pour réesis­ter à l’agrandissement, risquent néan­moins de mon­trer des limites dès que l’on quitte l’ordinateur: aujourd’hui un site doit res­ter lisible et uti­li­sable lorsqu’il est consulté depuis le petit écran haute réso­lu­tion d’un smart­phone ou dans l’orientation por­trait sur une tablette. Com­ment inté­grer cette nou­velle dimen­sion dans le déve­lop­pe­ment de la struc­ture de la mise en page ?

Nou­veaux sup­ports et design réactif

Les ter­mi­naux sont en effet bien plus divers aujourd’hui qu’il n’y a deux ou trois ans seule­ment. Par­don­nez· moi de vous impo­ser ce cli­ché, mais la part du web mobile connaît une crois­sance très rapide et les écrans se diver­si­fient encore plus. Il devient indis­pen­sable de tenir compte de ces nou­veaux for­mats dans la concep­tion d’un site, d’autant plus que les sup­ports mobiles avec écran tac­tile impliquent des usages dif­fé­rents de ceux que l’on a sur un ordi­na­teur avec un cla­vier traditionnel.

Pre­mière solu­tion: un design par terminal

L’arrivée des smart­phones, iPhone en tête, a entraîné l’apparition de \ver­sions mobiles de très nom­breux sites: non seule­ment le design de base du site sup­por­tait dif­fi­ci­le­ment d’être réduit sur un si petit écran, mais la nature même du sup­port impo­sait d’adopter une approche plus fonc­tion­nelle et dépouillée du design. Je pense par exemple à la ver­sion mobile du site liberation.fr, dans laquelle les articles les plus récents sont pré­sen­tés sous forme de liste: le titre, les pre­miers mots, une petite image éven­tuelle· ment. La page dédiée à l’article com­plet, elle, ne pré­sente que ce contenu.

fluid02

Les barres laté­rales et les myriades de liens vers d’autres par­ties du site dis­pa­raissent: le design mobile pri­vi­lé­gie une lec­ture ciblée et efficace.

C’est ainsi que l’on a vu se mul­ti­plier des « appli­ca­tions » en lieu et place des ver­sions mobiles: il s’agit sou­vent d’un abus de lan­gage, mais qui tra­duit la volonté de rema­nier en pro­fon­deur l’interface per­met­tant d’accéder aux conte­nus ct aux ser­vices d’un site. Par­ler d’application, c’est sou­li­gner que l’on donne plus de contrôle à l’utilisateur.

Le même phé­no­mène se repro­duit avec les tablettes, sur­tout dans le sec­teur de la presse en ligne: on déve­loppe des ver­sions entiè­re­ment nou­velles de cer­tains sites de manière à tenir compte de la navi­ga­tion par écran tac­tile et a pri­vi­lé­gier une orien­ta­tion «por­trait» de l’écran, par oppo­si­tion à orien­ta­tion« pay­sage» tra­di­tion­nelle des écrans d’ordinateurs.

Au delà de l’effet de mode qui accom­pagne l’émergence des smart­phones et des tablettes, et de l’opportunité qu’elle repré­sente pour les sites de faire à nou­veau par­ler d’eux, voire de moné­ti­ser leur contenu, c’est une approche très inté­res­sante parce qu’elle tient compte de la spé­ci­fi­cité du sup­port mobile et des usages qui en sont faits. Pour­tant, on est en droit de se deman­der si elle est vrai­ment per­ti­nente pour tous les sites, d’autant plus que le déve­lop­pe­ment d’une ver­sion smart­phone et d’une ver­sion tablette d’un site repré­sente des inves­tis­se­ments consé­quents. Dans le cas de sites pro­po­sant essen­tiel­le­ment du contenu (par oppo­si­tion à un ser­vice impli­quant une inter­ac­tion riche), il semble que quelques ajus­te­ments suf­fi­raient, dans la plu­part des cas, à adap­ter le design exis­tant aux nou­veaux supports.

Deuxième solu­tion: un design universel

Il ne s’agit pas sim­ple­ment d’utiliser une forme de design fluide mais bien de pro­duire une mise en page uni­ver­selle capable de s’adapter de façon intel­li­gente aux dif­fé­rents sup­ports: c’est pré­ci­sé­ment ce que cherche à faire le design réac­tif, ou res­pon­sive design, qui s’appuie sur une nou­veauté de css3, les requêtes de média, @media-queries pour les intimes .

Uti­li­ser les requêtes de média revient sim­ple­ment à faire de la mise en page condi­tion­nelle en fonc­tion de carac­té­ris­tiques du sup­port d’affichage telles que ses dimen­sions, son orien­ta­tion, sa réso­lu­tion et ses cou­leurs. On com­prend immé­dia­te­ment l’étendue des pos­si­bi­li­tés que cela peut offrir, sur les tout petits sup­ports comme les plus grands: adap­ter l’affichage du texte. modi­fier l’agencement des blocs sur la page, mas­quer ou affi­cher des élé­ments spé­ci­fiques, etc. je ne vais pas ren­trer dans le détail de l’implémentation des requêtes de média mais plu­tôt me pen­cher sur les uti­li­sa­tions les plus inté­res­santes que l’on peut en faire.

Faire varier la taille du texte d’un design fluide

Les desi­gns fluides, on l’a vu, peuvent pro­duire des blocs de texte trop larges pour être lisibles, sur­tout sur les grands écrans. En plus de définir

la lar­geur maxi­male du site, on peut employer les requêtes de media pour agran­dir le corps de texte de base au-delà d’une cer­taine lar­geur, ce qui est d’autant plus per­ti­nent que ce cas se pro­duit sur les grands écrans à la réso­lu­tion très fine, sur les­quels il vaut mieux affi­cher le texte en 16 pixels au mini­mum. Dans le même ordre d’idée, il peut éga­le­ment être béné­fique d’agrandir le texte sur les petits écrans à la réso­lu­tion encore plus élevée.

Réor­ga­ni­ser les blocs selon la lar­geur disponible

En dépit de la capa­cité des navi­ga­teurs mobiles à zoo­mer pré­ci­sé­ment sur la lar­geur d’un bloc de texte, les mises en page tra­di­tion­nelles sont peu maniables sur l’écran d’un smart­phone. D’autre part, les desi­gns fixes n’exploitent pas tout l’espace dis­po­nible sur un écran large. Une mise en page condi­tion­nelle peut adap­ter Je nombre de colonnes à la lar­geur du viewport.

Rendez-vous sur ces sites’ et amusez-vous à chan­ger la taille de votre navi­ga­teur pour bien com­prendre com­ment les @media que­ries viennent affi­ner ct modu­ler l’affichage d’un design fluide.

fluid3

Les requêtes de média ne s’emploient pas néces­sai­re­ment avec des desi­gns inté­gra­le­ment fluides. Sur le blog d’Alsa Créa­tions, vous l’avez peut·être remar­qué, le design est fixe lorsqu’il est affiche de façon conven­tion­nelle, c’est·à·dire dans une fenêtre d’au moins 8oo pixels de large; en-dessous, le design s’affiche sur une seule colonne fluide.

0