CSS & Webdesign » Design & Graphisme

Tutoriel grille verticale en CSS par Smashing Magazine

Bruno Bichet — Thu, 01 Mar 2012 07:42:28 +0000

95% des sites web sont faits de typographie ! Cette assertion d’Oliver Reichenstein dans l’article Web Design is 95% Typography semble toujours d’actualité. Dans la plupart des cas, les visiteurs se rendent sur un site pour lire. C’est une excellente raison pour prendre soin de la typographie dans le web design. Dans l’article Technical Web Typography: Guidelines and Techniques, Smashing Magazine détaille la mise en place d’une grille verticale en utilisant les règles immuables d’une bonne typographie, qu’il s’agisse de créer un carton d’invitation pour un anniversaire ou un faire-part de décès.

L’article est en anglais, mais les nombreux exemples de codes CSS et les illustrations le rendront accessible à tous sous réserve d’avoir de bonnes bases en CSS.

Après un bref rappel sur le reset CSS, le programme continue avec :

Choisir une police de caractère — Utilisez html { font-family: sans-serif; }pour afficher la polices sans serif par défaut du système : Helvetica sur Mac et Arial sur PC. Attention toutefois aux changements des préférences par l’utilisateur.
Choisir une taille de police de caractère — 16 pixels sont l’idéal, mais si vous tenez à 12 pixels, utilisez html { font-size: 0.75em; /* 16 * 0.75 = 12 */ } soit 75% de la taille par défaut du navigateur.
Utiliser une grille — Il existe de nombreux systèmes de grilles dont voici une liste de près de 40 frameworks CSS. Lire aussi Blueprint vs 960 Grid System et The Blue «940» Grid Simpler.
Nombre de caractère par ligne — Le nombre optimal de caractères par ligne est compris entre 45 et 75 signes (espaces comprises). Plus la ligne est longue, plus l’interlignage (line-height) doit être important pour garantir au lecteur un bon confort de lecture. La phrase suivante contient exactement 66 signes :
```
Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan.
```
Rythme vertical : la ligne de base — Déterminez l’interlignage global (votre nombre magique) — 1,5 fois la taille de votre texte, par exemple — et basez toutes vos mesures là-dessus. N’oubliez pas de décaler votre grille en background au départ si besoin avec html { background: url(grid.png) center -6px repeat-y #fff; } si votre texte n’est pas parfaitement aligné sur la ligne de base de votre grille.
Echelle de valeur — Il faut penser aux sauts de ligne avant et après les titres et les paragraphes, s’occuper de la taille des différents niveaux de titres h1 — h6 et déterminer l’interlignage de chaque élément selon sa taille avec la formule (magic number) ÷ (font size) = (line height).

La suite de l’article donne des conseils pour gérer les signes de ponctuation et les images dans le contexte d’une grille :

Pour la route, une video de Tim Brown : More Perfect Typography :

Tim Brown – More Perfect Typography from Build on Vimeo.

→ Plus de ressources typographiques dans Le petit journal permanent de la TypOgrApHiE !

Articles sur le même sujet

Photoshop CS6 et Adobe Creative Cloud

Bruno Bichet — Sun, 19 Feb 2012 19:55:38 +0000

La version CS5 de Photoshop a déjà presque deux ans et dans quelques mois, Adobe sortira la version CS6 de sa Creative Suite avec une surprise de taille : la possibilité de louer à l’année près de 20 logiciels (Photoshop, Illustrator, etc.) à installer sur le poste de travail et des services en ligne (Typekit, Cloud Storage, etc.). Voici un rapide aperçu des nouveautés de Photoshop CS6 et de Adobe Creative Cloud.

Remplacement de contenu

Le remplacement de contenu sera certainement une des nouveautés-phare de la prochaine version de Photoshop. Une fois votre sujet sélectionné, vous pouvez le déplacer dans l’image et Photoshop s’occupe de faire le ménage derrière vous en remplaçant votre sujet par l’environnement qui aurait du se trouver là. Une sorte de Content-Aware mélangé avec l’outil pièce, du grand art ! Via Wisibility.

Autres nouveautés ou améliorations de CS6 :

Interface sombre pour une meilleure immersion dans l’image et une intégration plus poussée avec Lightroom,
Nouveaux contrôles dans Camera Raw,
Outil Fluidité amélioré avec notamment la possibilité d’augmenter la taille de la brosse et de travailler directement dans l’image,
Edition des tracés vectoriels comme dans Illustrator,
Enregistrement des fichiers volumineux en tâche de fond pour continuer à travailler sur un autre fichier.

→ Plus d’informations sur la chaine Youtude de Photoshop.

Adobe Creative Cloud

Adobe Creative Cloud : 5 services, 19 applications, 2 communautés et plus à venir

Creative Cloud — Dans quelques mois, Adobe proposera la Creative Suite à la location à l’année pour la modique somme de 49,99 dollars par mois. Pour ce prix, nous disposerons d’une myriade de logiciels à télécharger sur notre poste de travail, dont les célèbres Photoshop®, InDesign®, Illustrator®, Dreamweaver® et de nombreux autre outils comme Adobe Typekit pour accéder à des milliers de polices de caractère. C’est presque indécent de la part d’Adobe de nous proposer tous ces logiciels : il n’y a toujours pas plus de 24 heures dans une journée !

Cette initiative est très intéressante. Les créatifs pourront goûter aux joies de la suite d’Adobe sans être obligé de s’endetter sur 20 ans ou de risquer 20 ans de prison pour utilisation de logiciels contrefaits ! Pour le prix d’une journée et des poussières de facturation, la Creative Suite est dans la poche pour toute une année et ça fait bien plaisir :-)

Articles sur le même sujet

Quelques propositions de logo pour Worth1000

Bruno Bichet — Sat, 21 Jan 2012 19:30:22 +0000

Voici quelques propositions de logo que j’ai soumis fin 2005 — début 2006 dans le cadre des concours organisés par le site Worth1000. Ce site rassemble des communautés où des artistes du monde entier participent tous les jours à des compétitions créatives. Les trois propositions concernaient l’association Smoke Free Union, l’université ARC-U et la société Complete Vision Care.

Smoke Free Union

Smoke Free Union est une association dont l’objectif est de sensibiliser le public sur les dangers du tabagisme passif et de développer les lieux non-fumeurs pour protéger les jeunes, les femmes enceintes en particulier, et les gens, en général.

Le logo apparaitra sur tout types d’imprimés : annonces presse, poster, affiches, site web de l’organisation, etc.

Proposition de logo pour Smoke Free Union

Brief complet

Toutes les propositions

Aresty Research Center for Undergraduates (ARC-U)

Création d’un logo pour l’Université ARC-U (Aresty Research Center for Undergraduates) située dans le New Jersey. Le logo apparaitra sur le site web et les documents promotionnels.

Proposition de logo pour Aresty Research Center for Undergraduates

Brief complet

Toutes les propositions

Complete Vision Care

Création d’un logo pour Complete Vision Care. Cette société spécialisée dans l’optométrie depuis 1984 à Coralville, dans l’Iowa, propose à ses clients des soins médicaux grâce à l’utilisation des dernières technologies disponibles dans la correction de la vision en proposant des lunettes ou des lentilles de contact.

Le logo sera reproduit sur des cartes de visite, le site web, les en-têtes de lettre et les documents marketing de la société.

Proposition de logo pour Complete Vision Care

Brief complet

Toutes les propositions

Worth1000 ?

Si vous voulez en savoir un peu plus sur Worth1000, n’hésitez pas à lire le court article Worth1000 – le paradis pour Photoshop ? que j’avais écrit peu après le lancement de ce blog.

Articles sur le même sujet

Ebauche de logo pour illustrer le concept de code source libre

Bruno Bichet — Fri, 05 Aug 2011 13:40:20 +0000

Au détour d’un tweet qui parlait de Logiciel Libre, j’ai laissé mon crayon dessiner librement sur mon carnet. En rentrant, j’ai dégainé Illustrator pour fixer mes idées. Ce travail de recherche créatif est un projet personnel devenu collectif par la force des choses, puisque j’ai tenu compte des suggestions et des critiques des membres de Google+ et de Twitter où chaque version du projet a été largement discutée. Je précise d’emblée que je ne suis pas un expert ès licences libres, ce qui fait que j’ai pu faire — à l’insu de mon plein gré — des rapprochements visuels allant à l’encontre de la philosophie du mouvement Open Source ou du Logiciel Libre (1).

Version 2 & 1

Le libre prend son envol (les oiseaux)
Le libre, ça pousse (jeu sur les verticales)
Le libre est nourricier, retour à la nature (l’arbre, les oiseaux, les couleurs)

Version 3

Plus viril,
Moins « écolo »,
Moins « bio »,
Plus « futuriste » (si si),
Axé sur le partage et la redistribution.

Possibilité de réduire le logo au L de LIBRE avec l’étoile !

Version 5 & 4

J’ai troqué l’expression « Logiciel Libre » par une traduction française d’Open source proposée par +Laurent Gloaguen (une traduction littérale aurait donné Code source ouvert) qui a l’avantage de conserver le terme « libre » pour faire une sorte de synthèse entre les deux mouvements.

J’en ai profité aussi pour ajouter une référence au copyleft avec le symbole du copyright inversé. Le logo peut ainsi se lire également comme une ode aux sources libres.

Enfin, la baseline reste fidèle à l’esprit du Logiciel Libre.

Version finale (ou presque)

Le fil directeur de cette version 0.8 est de supprimer le superflu et de garder l’essentiel pour avoir un logo plus ramassé, plus compact et plus lisible.

Par rapport à l’ancienne version :

Suppression du mot code, inutile, puisque finalement l’idée est de partager des sources, qu’il s’agisse de code ou de .psd .ai, etc.
Suppression de la barre de progression : trop présente par rapport à sa signification.

Google+ comme facilitateur d’expérimentations logotypiennes

Je tiens à remercier tous les Plussiens et les Plussiennes qui ont apporté leur contribution sous forme de critiques, d’encouragements et de suggestions sur Google+ :

Version 0.8 : http://plus.tl/3q
Version 0.7 : http://plus.tl/3j
Version 0.6 : http://plus.tl/3i
Version 0.5 : http://plus.tl/3g
Version 0.4 : http://plus.tl/38
Version 0.3 : http://plus.tl/31
Version 0.2 : http://plus.tl/2T
Version 0.1 : http://plus.tl/2Q

La richesse des échanges prouve que, loin d’être inutile ou redondant, Google+ s’avère un excellent medium pour les créatifs de tout poil qui voudraient présenter leur travaux finis ou en cours d’élaboration.

plus.tl/bruno

(1) Bon ok, j’avoue que la version Soviet était faite exprès pour réveiller les consciences :o)

Articles sur le même sujet

Useful Shortcuts — Symboles accessibles via la touche Alt de votre clavier

Bruno Bichet — Sun, 31 Jul 2011 15:11:30 +0000

Ah ! les symboles… Que celui ou celle qui n’a jamais galéré pour retrouver ce satané symbole caché dans les circonvolutions de son clavier me jette la première touche ! Useful Shortcuts est un site dont l’objectif est de répertorier et de classer la quasi-totalité des symboles accessibles via la touche Alt de votre clavier. Notez qu’il est également possible d’utiliser les symboles directement par copié-collé depuis les pages de Useful Shortcuts.

Ces symboles sont classés par thèmes :

Lettres avec accent – Caractères avec accent grave, accent aiguë, accent circonflexe, tilde, tréma, etc.
Messagerie instantanée — Coeur, émoticônes, symboles garçon et fille),
Mathématiques — Fractions, inégalités, carré, cube, pi, infini,
Décoration — Puces, flèches,
Monnaie — Livre anglaise, euro, dollar, cent, yen, pesetta,
Dessin – Coins, angles, remplissage,
Symboles grec — Alpha, beta, gamma, delta, etc.,
Typographie — Ligatures, tirets,
Droit d’auteur & propriété intellectuelle — Copyright, trademark, registered,
Flèches – Flèches et carrés d’épaisseur différente,
Programmation — Accolades, parenthèses diverses, pipes,
Ponctuation — Point d’interrogation, point d’exclamation, parenthèses, édition, guillemets, abréviation.

Et tout un tas d’autres symboles dont l’énumération serait aussi longue que fastidieuse ;-)

Articles sur le même sujet

Quelques notes sur les éléments graphiques du webdesign

Bruno Bichet — Tue, 24 May 2011 16:59:12 +0000

Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire.

La question du «pourquoi tel élément plutôt qu’un autre ?», rejoint un peu la question posée par Leibniz : «pourquoi y a-t-il quelque chose plutôt que rien dans l’univers ?». A laquelle je ne peux m’empêcher d’ajouter mon grain de sel sous forme de question subsidiaire : «pourquoi tel élément de «design» plutôt qu’un autre ?»

Direction artistique & Web design

Le Directeur artistique détermine le fond du message ; le graphiste s’occupe de la (mise en) forme. Le DA met sa connaissance des codes artistiques des temps passés, présents et futurs pour proposer un univers graphique sans se soucier des contraintes techniques. Quant au graphiste, il rend en quelque sorte «utilisable» le travail du DA en fonction du support et des techniques dont il dispose.

Chacun d’eux porte son attention sur une partie différente des bonnes pratiques liées à son métier. Le DA s’assure que les codes graphiques qu’il a retenus sont adaptés à la marque et à son public. Le graphiste veille à ce que la mise en oeuvre des choix graphiques respecte à son tour les attentes de la marque et du public.

En pratique, le DA évitera généralement de proposer des couleurs vives pour un site web vendant des articles funéraires et que le graphiste s’abstiendra de placer le logo et le champs de recherche en bas de la page. Si ces cas extrêmes sont généralement évités, il n’en reste pas moins qu’il n’est pas toujours évident de choisir entre des coins arrondis ou des angles droits, des dégradés ou des aplats de couleurs, du Stars and Stripes ou du Sex and Sun !

Finalement, la question que je me pose est la suivante : «quand et pourquoi se décide-t-on pour un coin arrondi ou pour un coin carré ?». Cette question est valable pour tout élément ayant un impact sur l’apparence d’une page web. Pour éviter de faire ces choix parfois cornéliens sur un coup de poker, voici quelques éléments de réflexion que j’ai rassemblé ici parce que vous le valez bien :-)

En-tête, bannière et pied de page

Header

Les en-têtes de blogs plus ou moins délirants ont eu leur heure de gloire, mais ont fini par lasser. Ils sont souvent composés d’une image bariolée occupant la largeur du site ou d’une image centrée dans le background débordant largement de la largeur du contenu. On peut voir la première technique dans le thème par défaut de WordPress 3. La deuxième a été popularisée par des sites comme celui de Matt Mullenweg ou Web Designer Wall.

Un bon gros header

Footer

Les pieds de page sont souvent les laissés pour compte du webdesign. Toutefois, la mode des Big Footer leur a redonné une certaine importance, même si au départ, il s’agit surtout d’améliorer le maillage interne en mettant un paquet de liens. Pour faire passer la pilule, les plus créatifs ont utilisé cette zone, peu sexy en général, pour en faire quasiment la vitrine de leur site web. Voici quelques conseils pour optimiser votre Fat Footer (explications en français).

Exemple de big footer simple et graphique à la fois

Big Footer de Soh Tanaka

Colonnes et barres latérales

Il est assez rare de rencontrer un blog ou un site web composé d’une seule colonne. Tout au plus trouve-t-on des thèmes WordPress affichant l’article seul sans les barres latérales. Jusqu’en 2003 environ, les sites web étaient souvent composés d’une zone de contenu entourée de deux barres latérales. Dans celle de droite, on trouvait généralement le champs de recherche et les liens annexes, tandis que la colonne de gauche accueillait la publicités, des listes de liens extérieurs (blogroll), etc.

Les frameworks CSS permettent de créer une système de colonne pour votre site web

The Grid Simpler : une grille simple et souple

Aujourd’hui, la tendance est clairement à une composition en deux colonnes : le contenu à gauche et la barre latérale à droite. Lorsqu’on a besoin d’une deuxième sidebar, elle est souvent située à côté de la première, avec la même largeur, mais pas forcément. L’idée maitresse est de créer une asymétrie graphique. Par ailleurs, la friction monétaire étant ce qu’elle est, cette organisation permet de mettre en avant le contenu pour les moteurs de recherche qui digèrent le code HTML de haut en bas et de gauche à droite (c’est peut-être différent pour les langues qui se lisent de droite à gauche).

Contours et angles

Arrondir les angles ou pas ?

Le modèle de boite du W3C reposant sur des angles droits, l’utilisation des coins arrondis a permis à une époque de sortir du lot. De fait, ils sont utilisés depuis longtemps malgré de nombreux obstacles techniques. L’arrivée de CSS3 et de border-radius, qui rendent accessibles les coins arrondis au plus grand nombre, remettront peut-être les angles droits ou irréguliers à l’honneur.

Cela dit, l’origine de l’engouement pour les bords arrondis est à chercher du côté symbolique. L’arrondi est une forme organique qui donne une impression de proximité affective. Il a un pouvoir immersif qui s’adresse au cerveau droit et joue sur l’émotionnel. A l’opposé, le coin carré s’adresse plutôt à la raison, à l’intellect.

L’arrivé de border-image avec CSS3 devrait élargir les possibilités créatives, en se rapprochant de ce que l’on trouve dans Illustrator, par exemple.

Rubans (ribbons)

Ils ont pratiquement toujours existés et le web ne cesse d’inventer de nouvelles formes dont le but est d’ancrer le ruban dans la page tout en le faisant ressortir. Force est de constater que les derniers rubans à la mode en provenance du monde anglo-saxon (oui, le jour où les graphistes francophones cesseront de se croire le nombril du monde…) réussissent ce tour de force.

Ombres portées

Elles ont toujours fait partie du paysage graphique autant en PAO et sont apparues sur le web dès que cela a été possible. D’abord en utilisant des cellules de tableau, puis avec des balises div imbriquées et enfin, depuis peu, avec les propriétés CSS3 box-shadows et text-shadows.

Bords déchirés

On voit relativement peu de contours déchirés ou de bords irréguliers, malgré leur fort potentiel graphique.

backgrounds

Fond blanc

Associé à du texte (presque) noir, le fond blanc présente le meilleur rapport de contraste que l’oeil puisse trouver. Il s’agit généralement de la couleur de fond de page par défaut des agents utilisateurs depuis plusieurs années. C’est une valeur sûre qui ne devrait être modifiée qu’après mûre réflexion ;-)

Aplat de couleur

L’utilisation des aplats de couleur permet de faire ressortir une partie du texte tout en lui conférant une certaine puissance. Si en peinture, l’obtention d’un à-plat digne de ce nom n’est pas une sinécure, il n’en va pas de même pour la PAO ou le web où il suffit de saisir une valeur pour obtenir en beau «noir au blanc». Les sites web des années 2000 faisaient un large usage des aplats, tandis qu’aujourd’hui leur emploi est réservé à des petites portions de texte, comme des titres ou des encarts. Il peuvent être utilisés pour signaler les hors-textes en lieu et place des guillemets géants qui commencent à lasser un peu (mais c’est joli quand même).

Dégradés

Si les aplats de couleur sont roboratifs, les dégradés se digèrent plus facilement. Toutefois, ils restent peu utilisés sur le web à part dans les backgrounds en haut de page pour ancrer l’en-tête du site dans la fenêtre du navigateur. Ils devraient trouver une seconde jeunesse grâce à la nouvelle propriété gradient apparut avec CSS3. Attention à l’overdose : ces effets sont à utiliser avec parcimonie.

Zébrures (Stripes)

Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude).

Tartan

Le tartan est une autre manière de remplir un fond sans agresser l’oeil. Peu employé, il pourrait reprendre du poil de la bête. Voici un générateur de tartan au cas où vous voudriez prendre de l’avance.

Images

les visuels «Full Background» sont généralement à éviter, mais si votre produit ou votre thématique nécessite une immersion du visiteur dans votre univers, foncez ! L’essentiel est de garder un oeil sur la lisibilité d’ensemble. C’est certainement très subjectif, mais je trouve que les sites utilisant des images généreuses sur un fond noir avec du texte clair s’en sortent mieux que ceux qui utilisent des grandes images sur un fond blanc avec du texte noir ^^

Background « bruité »

Ces backgrounds utilisant généralement la fonction Filtre > ajout de bruit de Photoshop remplacent avantageusement les dégradés lorsqu’il s’agit de donner un peut de matière et de profondeur à la page. Avec l’option bruit gaussien, les raccords entre plusieurs fond bruités sont un jeu d’enfant.

Fonds artistiques

Parmi les fonds plus ou moins artistiques — qui sont de plus en plus utilisés –, j’aime beaucoup celui de All For Design qui parvient à conserver un bon niveau de lisibilité malgré le faible contraste entre la couleur du fond et le texte.

C’est tout pour le moment

Cet article devrait trouver une suite avec quelques notes sur l’utilisation des textes, des illustrations, des palettes de couleurs, etc. N’hésitez pas à partager vos impressions ou à fournir toute information complémentaire susceptible de faire avancer le «schmilblick» :-)

Articles sur le même sujet

Un « Logothic » pour WordPress Basics

Bruno Bichet — Mon, 23 May 2011 14:22:21 +0000

Une dizaine de jour après le lancement du thème Basics pour WordPress, j’ai fais quelques recherches d’ambiance pour un logo et je me suis arrêté sur le style Gothic, assez peu employé dans l’univers de WordPress. Ce logo repose sur deux éléments bien distincts qui s’opposent l’un à l’autre (ce qui les rend donc complémentaires) : la lettre «W» dans le coeur plein de courbes de WordPress je thème et le mot «basics» tout en angles et agressivité. For Those About To Rock, Fire!

Un logo Gothic Back in Black avec Fette Fraktur (taille réelle : 240x72)

Fette Fraktur

La typographie est laissée aux bons soins de la fonte Fette Fraktur qui ne manque pas de caractère et que vous pouvez retrouver chez Linotype. Personnellement, j’ai toujours rêvé d’utiliser dans un projet une typographie qui casse trois pattes à un canard : avec Fraktur, ça c’est fait ;)

Back in Black

Pour les couleurs : du noir, du noir et encore du noir, pour : 1) coller à l’univers Gothic (Hark Rock, AC/DC, etc.) ; 2) s’adapter à la sobriété de l’habillage de Basics que j’ai mis en place sur WordPress & Webdesign ; et 3) rendre hommage à Bon Scott, le premier chanteur d’AC/DC.

(We Salute You)

Articles sur le même sujet

L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Bruno Bichet — Tue, 26 Apr 2011 11:53:45 +0000

Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement.

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de 80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

Intégration HTML & CSS des maquettes Photoshop au pixel près

Bruno Bichet — Fri, 22 Apr 2011 14:36:42 +0000

Je reviens rapidement sur la question du rendu identique des maquettes quelque soit le navigateur. Je pense que tout le monde est d’accord pour reconnaitre que les standards ont encore une marge de progression et que les spécifications CSS3 et HTML5 prendront du temps avant d’être validées et implémentées correctement dans au moins deux navigateurs. En attendant, il faut bien faire avec l’existant. Est-ce à dire qu’il faut faire son deuil du rendu unique dans tous les navigateurs ?

Avec CSS3…

Pas forcément. En ce qui concerne CSS3, il faut s’en tenir aux conseils donnés dans CSS3 pour les web designers par Dan Cederholm :

Utiliser CSS3 «ici et maintenant» à condition de s’en tenir aux éléments de présentation ou d’interactivité en ciblant la couche d’expérience non critique (interaction, récompense visuelle, réactivité et mouvement) sans toucher à l’identité visuelle, l’utilisabilité, l’accessibilité ou la mise en page.

… ou à l’ancienne ?

Pour tout le reste, il faut se débrouiller avec des images de fond, en limitant les dégâts au maximum : marquage HTML réduit au minimum, utilisation de sprites pour les images, tenter de se passer de Javascript pour des effets visuels, éviter les hacks, etc. J’irais plus loin en conseillant d’éviter même les balises sémantiques HTML5 en raison de leur accessibilité perfectible.

Bref, dans ces conditions — si le temps et l’argent le permettent — rien ne s’oppose à ce que la maquette du graphiste soit rendue au pixel près. C’est même souhaitable. L’intégrateur pourra prévoir des fallbacks pour l’affichage sur les tablettes tactiles comme l’iPad, les téléphones tels que l’iPhones ou Android. Ou alors, c’est le graphiste qui pourra dessiner comme bon lui semble la version iPhone, etc. s’il veut garder le contrôle.

C’est quoi un intégrateur web ?

Comme le dit STPo (@stpo) suite à l’article de Julien sur le rendu Pixel Perfect et les standards du web :

Le boulot d’un inté, c’est de placer intelligemment le curseur entre respect de la DA, performances, accessibilité, maintenabilité, etc. afin d’obtenir le meilleur produit final possible. Le graphisme n’est QU’UN de ces paramètres : parfois c’est le plus important, et on négligera les autres davantage. Et parfois, non.

Soyons agiles

S’il faut faire le deuil de quelque chose — que ça soit à cause de bugs ou de contraintes techniques indépassables — ce n’est pas sur cette question du rendu parfait, puisqu’il est accessible dès maintenant. Il faut faire le deuil de la méthode de travail unique. Il faut adapter ses méthodes et être agile. Et ce n’est pas facile.

Nous sommes tous à la recherche de trucs et d’astuces réutilisables. On n’aime pas réinventer la roue toutes les semaines. On préférerait que les clients comprennent nos contraintes (en même temps, si votre boss ne vous comprend pas, il n’y a pas grand chose à attendre du client qui n’y est pour rien…).

Intégrateurs web, prenez des risques !

Il faut comprendre le projet sur lequel on travaille et force est de constater que certaines organisations ne favorisent pas la prise de risque de la part de l’intégrateur web qui est rarement consulté en amont. Pourtant, avec un bref brief, l’intégrateur pourrait prendre de l’assurance et éviter de se prendre la tête pour aboutir systématiquement à un rendu parfait lorsque les projets ne le nécessitent pas.

Articles sur le même sujet

Logo pour les Libres Ballons du Bastberg

Bruno Bichet — Fri, 22 Apr 2011 09:44:44 +0000

Il y a environ un an, j’ai eu l’occasion de réfléchir avec Luc Muller (développeur Web spécialiste TYPO3) sur la création d’un logo pour l’association alsacienne Libres Ballons du Bastberg. Ces passionnés de montgolfière proposent aux membres de l’association des vols d’initiation, des formations au pilotage et des animations publiques. Et comme l’accessibilité ne concerne pas uniquement le web, l’association LLB-67 réfléchit à la mise en place de montgolfières accessibles aux personnes en situation de handicap en Alsace. Egalement accessible aux touristes de passage, logeant dans un hôtel ou un gîte en Alsace.

C’est dans le cadre de ce projet que j’ai eu le plaisir de proposer un logo pour permettre à l’association de le présenter aux différentes institutions susceptibles d’apporter leur soutien.

A ma connaissance, c’est la première fois que je réalise un logo qui s’envoie en l’air, imprimé sur une montgolfière ;-)