{"id":2111,"date":"2003-12-29T14:07:06","date_gmt":"2003-12-29T14:07:06","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=2111"},"modified":"2003-12-29T14:07:06","modified_gmt":"2003-12-29T14:07:06","slug":"37-design-fluide-ou-rigide","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/37-design-fluide-ou-rigide\/","title":{"rendered":"Design fluide ou rigide?"},"content":{"rendered":"

Simplebits<\/a> et Stopdesign<\/a> ont lanc\u00e9 le d\u00e9bat en fixant la largeur de leur site respectif. L’argument avanc\u00e9 est la lisibilit\u00e9 du texte sur des \u00e9cran disposant d’une r\u00e9solution \u00e9lev\u00e9e. <\/p>\n

<\/p>\n

Le d\u00e9bat<\/h3>\n

Tout est parti d’un constat: Internet Explorer (qui est le navigateur le plus r\u00e9pandu) ne supporte pas la propri\u00e9t\u00e9 CSS max-width<\/code>. Cette propri\u00e9t\u00e9 permet de limiter la largeur d’une ligne sur des \u00e9crans \u00e0 r\u00e9solution \u00e9l\u00e9v\u00e9e et \u00e9viter ainsi d’avoir des lignes de textes trop longue qui sont difficiles \u00e0 lire. La solution choisie par les deux sites pr\u00e9cit\u00e9s est de fixer cette longueur \u00e0 une taille fixe, quelle que soit la r\u00e9solution. <\/p>\n

Beaucoup ont pris cette d\u00e9cision comme un retour en arri\u00e8re, un r\u00e9gression vers des design fig\u00e9s imitant la mise en page papier: le risque d’un retour \u00e0 la mise en page \u00e0 l’aide de tableaux planerait-il au dessus du Web? Contrairement au Tao du design Web<\/a>, l’auteur reprend un peu plus le contr\u00f4le de l’affichage sur le poste du client. Il est vrai que r\u00e9aliser un design fluide qui conserve sa coh\u00e9rence \u00e0 des hautes r\u00e9solutions n’est pas simple. Mais ce genre de consid\u00e9rations techniques ne devraient pas pour autant \u00eatre limitative. <\/p>\n

Une alternative?<\/h3>\n

L’id\u00e9al serait d’avoir une page qui puisse s’agrandir de mani\u00e8re proportionnelle, un peu comme le fait Op\u00e9ra avec sa fonction Zoom. Le design conserve se coh\u00e9rence m\u00eame lorsqu’il s’agrandit (et je rappelle qu’un design en flash n’est pas une solution \ud83d\ude1b<\/span> ). Pour arriver \u00e0 ce r\u00e9sultat, l’utilisation de l’unit\u00e9 em<\/code> ou ex<\/code> peut \u00eatre une piste. D\u00e9finir la taille des bloc \u00e0 l’aide d’une unit\u00e9 relative \u00e0 la taille du texte fonctionne plut\u00f4t bien. <\/p>\n

Et pour mes images alors?<\/h4>\n

Le probl\u00e8me vient alors des images: agrandies, elle pr\u00e9sentent des irr\u00e9gularit\u00e9s qui les rendent peu esth\u00e9tiques. On pourrait alors se tourner vers des graphiques vectoriels comme SVG<\/a> ou utiliser une des solutions propos\u00e9es par Clagnut pour les bitmaps<\/a>. <\/p>\n

Bon on fait quoi finalement?<\/h3>\n

Ce que vous voulez! L’auteur d’un site est ma\u00eetre chez lui, il fait donc ce qui lui plait. Mais il ne faut pas oublier que les sites Web sont faits pour partager de l’information et que c’est le visiteur qui devrait avoir le mot de la fin. Pour ma part, je teste une feuille de style proportionelle<\/a> et ce concept me plait bien: la taille est ajustable \u00e0 souhait et le nombre de mots par ligne est constant. <\/p>\n","protected":false},"excerpt":{"rendered":"

Simplebits<\/a> et Stopdesign<\/a> ont lanc\u00e9 le d\u00e9bat en fixant la largeur de leur site respectif. L’argument avanc\u00e9 est la lisibilit\u00e9 du texte sur des \u00e9cran disposant d’une r\u00e9solution \u00e9lev\u00e9e. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2111"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2111"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2111\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}