Les idées des directeurs artistiques, webdesigners, graphistes, et autres artisans de l’image ont des implications directes sur le temps de code HTML d’une maquette.
Il existe des « DOs and DON’Ts », qui permettent de gagner du temps lors du passage en intégration. Des règles implicites qui n’existent pas formellement, chaque développeur ayant tendance à pester dans son coin ce qui n’est pas très constructif…
Ce concentré d’astuces issu d’expériences avec des dizaines de graphistes vise à remplir un objectif commun : optimiser la rentabilité des projets web.
INDEX
Les bases
– Livrer un fichier PSD (Adobe Photoshop)
_ Il ne s’agit pas de lancer une guerre Fireworks vs. Photoshop, mais compte tenu du fait que Photoshop est le plus populaire chez les webdesigners, les autres logiciels ne sont pas abordés ici.
Mise à jour du 15/03/13 : règles à observer pour Illustrator en fin de document.
Livrer en plus un JPG de contrôle SVP
_ Si plusieurs états (rollovers, menu déployé, etc) livrer 1 JPG par état de la page
– Résolution : 72 DPI
_ Pour l’instant on ne se préoccupe pas des écrans Retina (haute résolution) mais je travaille à la rédaction d’un article spécifique
– Mode : couleurs RVB
_ surtout pas de CMJN ! C’est exclusivement pour le print.
– Background : transparent
_ Quoi de plus agaçant que devoir isoler un élément et réaliser qu’il est indissociable de son fond coloré…
– Pixels carrés
_ What else?
Utilisez un service comme Dropbox ou Wetransfer pour envoyer vos fichiers.
La grande bataille des profils colorimétriques
Problème récurrent, les couleurs apparaissent plus claires à l’export que dans la maquette. Voici ce que l’on souhaite éviter :
Design : David Polonia @ Blondie for Moët & Chandon
Un profil colorimétrique est un fichier qui définit la façon dont les couleurs sont représentées, tout au long de la chaîne de production, d’un appareil à l’autre.
Il est important de comprendre qu’une couleur (définie par son code hexadécimal, ses valeurs RVB / TSL, etc) peut être identique informatiquement mais affichée différemment selon que la chaîne de profils a été respectée ou non pendant la manipulation de la maquette.
C’est le cas sur le comparatif ci-dessus, à la pipette les codes hexadécimaux sont identiques en haut et en bas, mais la représentation des couleurs est différente.
En l’occurrence, pour le web le standard de l’industrie est le profil sRGB IEC61966-2.1
Pour régler le bon profil colorimétrique, aller dans Édition > Couleur :
Choisir Web / Internet (s’assurer que l’espace de travail RVB est bien sRGB IEC61966-2.1, ce qui doit être le cas par défaut) :
Pour afficher les couleurs en accord avec ce profil, vous devez effectuer d’autres manipulations. D’abord, choisir le format d’épreuve correspondant, à savoir sRGB, dans Affichage > Format d’épreuve. Ensuite, évidemment, activer le format d’épreuve :
Si le même poste est utilisé pour le print et le web, il convient de penser à modifier le profil et le format d’épreuve selon la destination de votre travail.
Manipulations facultatives :
Régler votre système d’exploitation pour qu’il envoie à votre écran le bon profil. Sur Mac, ça se passe dans l’onglet Moniteur des Préférences Système :
Pourquoi c’est facultatif ?
Parce que le profil n’a d’intérêt que dans la continuité de la transmission d’un fichier d’un poste à l’autre. La façon dont vous souhaitez afficher les couleurs ne regarde que vous : « les goûts et les couleurs… »
Ainsi, si vous avez un écran étalonné avec une sonde, vous pouvez garder le profil correspondant en affichage, tant que vous attribuez bien le profil sRGB IEC61966-2.1 à votre fichier destiné au web.
Exemple : la même maquette, avec le même profil, photographiée avec le même appareil photo sur le même écran dans les mêmes conditions de lumière. Seule différence : le profil du système d’exploitation (ce dernier rend les couleurs un peu fades) :
Utiliser le pré-calibrage de votre écran pour assurer la correspondance sur toute la chaîne. Comme pour le profil de l’OS, le profil de l’écran est purement facultatif. Beaucoup d’écrans ne disposent même pas de ce réglage (notamment les laptops).
Les écrans Eizo et le haut-de-gamme Dell, par exemple, ont les pré-réglages d’usine :
Et après… au quotidien (note aux développeurs)
Dear fellow web developer, lors que tu recevras un fichier enregistré avec un autre profil, n’oublie pas d’appliquer une conversion. Il est en effet préférable de convertir vers le profil générique, plutôt que de supprimer toute concordance ou pire encore : convertir vers un profil non-standard.
Organisation des calques
– Toujours livrer les calques (pas de fichier aplati !)
– Les ranger, au moins par écran
– Si possible les nommer…
– Le top du top : un code couleur par fonction dans la maquette
Un bon exemple valant mieux qu’un long discours, si on vous donnait le choix, où vous sentiriez-vous le plus à l’aise ???
Ça :
VERSUS ça :
Les textes
– Ne jamais aplatir (pixelliser) le texte, à moins bien sûr qu’il s’agisse d’un logo, ou d’une retouche d’image par exemple. Les textes doivent rester éditables.
– Éviter de modifier l’approche
_ Pourquoi ? L’unité du tracking est 1/1000 em, une unité de mesure relative à la taille de la typo utilisée. Une valeur de tracking 1000 dans Photoshop vaut « 1em » en CSS. Pour définir le tracking dans la feuille de style on applique donc la formule letter-spacing = x/1000. Par exemple, pour un tracking de -20 :
.font letter-spacing:-.02em;
Problème : plusieurs navigateurs, dont ceux basés sur WebKit (Chrome et Safari) ne prennent pas en compte leletter-spacingen-dessous de 0.06em et 1px (positif ou negatif). J’ignore pourquoi un navigateur si moderne foire ce rendu, mais c’est ainsi. Voici un exemple de l’interprétation d’une même valeur selon les navigateurs, et les conséquences sur le calage du texte :
Design : Rodolphe Siméon at Pelham Editorial Consulting for GAYA
Cependant sur des textes de taille importante (16px et plus) le tracking tend à fonctionner de façon homogène sur tous les navigateurs (à peu près).
– Ne pas modifier l’échelle horizontale ni verticale.
Pourquoi ? Les déformations de polices ne sont tout simplement pas réalisables en CSS.
– Toujours définir une taille de texte entière (non-décimale), de préférence en pixels.
Pourquoi ? C’est simple, le pixel est la plus petite unité affichable. Par définition on ne peut donc pas fractionner un pixel. Si vous mettez des demis, tiers, quarts, … de pixels, le navigateur va arrondir à l’entier le plus proche à l’affichage, et le texte n’aura pas la même dimension qu’en maquette.
– Si possible, définissez l’interlignage.
Pourquoi ? En laissant l’interlignage réglé sur Automatique (par défaut), vous laissez le champ libre à chaque navigateur de faire le rendu de son choix. Hors, les interlignes n’étant pas harmonisées de l’un à l’autre (parfois même d’une version à l’autre d’un même navigateur), vos interlignages seront différents de la maquette.
Les polices de caractères (fontes)
– Limitez-vous de préférence aux polices système « safe » : Arial, Verdana, Georgia, Times, Courier. Vérifiez que vous utilisez bien la police système et non pas une police commerciale supplémentaire portant le même nom qu’une police système. Ces polices sont les seuls à s’afficher de façon homogène sur toutes les plate-formes, et sont étudiées spécifiquement pour une lisibilité optimale à l’écran.
– Il est admis d’utiliser d’autres polices : Tahoma, Geneva, Trebuchet MS, Comic Sans MS (beurk), Impact. Attention, Helvetica n’est PAS une police « safe ».
– Google met à disposition une collection impressionnante de polices de qualité, gratuites, facile à installer pour le graphiste et facile à exploiter pour le développeur : Google Web Fonts. Vous pouvez même utiliser ces polices pour vos textes courants !
– Avec l’avènement du support de la directive CSS @font-face, pratiquement toutes les polices peuvent être utilisées sur un site internet (sans texte-image, qui est largement passé de mode). Cependant veillez à observer ce qui suit :
-* Vous devez impérativement livrer au développeur les polices sous format True Type (fichier .ttf) ou Open Type (fichier .otf).
-* Les polices sans extension sont généralement des Post Script Type 1 : NEIN !
-* Les polices .afm sont destinées à Adobe Font Manager avec des fichiers Post Script : NEIN !
-* Les polices .lst sont des pointeurs pour Font Manager : NEIN !
-* La plupart des polices sont protégées contre l’importation en @font-face. De façon générale, vérifiez toujours que vous avez les droits d’utilisation (licences) de vos polices pour le web ! D’illustres font designers ont travaillé dur pour créer des polices parfaites, ne volez pas leur travail.
-* Considérez l’utilisation de services comme Adobe TypeKit et LinoType Web pour l’utilisation des grosses polices commerciales. Mais prévenez vos clients de l’incidence financière de l’utilisation de tels services !
Listez vos polices
Il parait qu’il existe des scripts permettant d’obtenir la liste des polices présentes / manquantes dans un document par rapport au poste sur lequel il est ouvert.
Si vous en savez plus, je suis preneur.
Quoi de plus rageant en effet, que le laconique message « Polices manquantes », sans détail ?
Soignez la casse pour ne pas vous faire casser
Voici maintenant une demande que n’importe quel gamin pourrait comprendre. C’est une erreur très fréquente, quels que soient l’origine, les habitudes, l’âge, le sexe, etc… du graphiste.
Vous ne savez pas taper du texte.
VOUs taPeZ comMe Ça, c’EST Peut-êTre JolI mais c’EsT Pas PRATIQuE !
Merci de saisir convenablement vos textes.
À la limite, si vous êtes allergiques aux touches Caps Lock et Maj, ne les utilisez JAMAIS (sauf en début de phrase comme il se doit) et prenez sytématiquement l’outil « Tout en capitales ». Mais pitié arrêtez le mixed case, il n’y a rien de plus irritant et chronophage que de devoir repasser derrière vous parce que vous faites mal le boulot.
L’alignement vertical
Il y a fort longtemps, lorsqu’on fabriquait des pages à base de tableaux imbriqués, aligner des éléments verticalement était d’une simplicité déconcertante.
Plus tard, l’apparition des feuilles de styles a marginalisé l’utilisation des tableaux : lourds, bordéliques, inadaptés, détournés, non-sémantiques, « sales »… il n’est pas question de revenir en arrière.
Les éléments n’étant plus liés entre eux, il devient –par définition– beaucoup plus difficile de les aligner verticalement. Une simple recherche sur « css vertical align » génère des millions de résultats… questions rarement résolues.
Certes il s’agit d’une régression mais ma foi pour l’instant… c’est comme ça !
Évitez les alignements verticaux, particulièrement les éléments de différentes natures : texte / texte, texte / image, texte multiligne / texte, etc…
Dans de nombreux cas c’est tout simplement impossible.
On peut s’en sortir plus ou moins avec des sauts de lignes, ou du javascript, bref il ne s’agit pas toujours de solutions propres et viables en terme de contenu administrable.
Petite dérogation quand les éléments à aligner tiennent sur UNE SEULE LIGNE :
Voir l’exemple CSS sur Alsacréations
Utilisez des masques pour créer des formes
La plupart du temps les arrondis et autres formes sont reproduits en CSS, ou doivent être déclinés sous forme de masque pour que le contenu du site soit administrable.
Il convient donc de ne pas modifier directement les éléments (exemple ci-dessous : une image aux coins arrondis), mais d’appliquer un masque sur l’élément, de sorte que l’effet puisse être reproduit.
Ne convertissez pas vos fichiers .AI, importez-les !
Illustrator est un logiciel vectoriel.
Les images du sont bitmap (formes) ou générées (bordures, etc).
Les 2 ne sont pas faits pour s’entendre.
Voilà ce qui se passe lorsqu’on convertit un fichier Illustrator en bitmap pour Photoshop :
Design : Jacques Farine @ Accroche-com’ for Barclays
– On perd en définition
– Toutes les formes sont déformées : les traits de 1px font subitement 2px avec une sorte de moirée, les textes sont pixellisés, etc
– Les noms des calques ne sont pas conservés
– Les groupes de calques perdent leurs « niveaux »
– Les tailles de texte prennent des valeurs exotiques, par exemple « 17,81px » (ne jamais couper les pixels, voir plus haut)
– Le texte comporte des césures (seul Illustrator créé des césures, pas Photoshop ni Fireworks. Or, les césures en HTML n’existent pas, donc l’alignement ne sera pas conforme)
– Bref, l’intégrateur HTML perd du temps.
À coup sûr, le rendu dans un navigateur sera bien différent de la maquette.
Si vous devez utiliser Illustrator pour créer des objets, ne convertissez pas votre fichier .ai en fichier .psd (ou ouverture du fichier .ai dans Photoshop) ! Créez un fichier PSD à part, et importez (un simple copier/coller peut suffire) votre élément vectoriel à l’intérieur.
De la sorte, vous assurez une conversion à la volée de meilleure qualité.
Si vous passez par le menu d’export, voici une copie d’écran en anglais des réglages appropriés :
Les blocs dont la hauteur est définie par du texte
Sachant qu’on ne maitrise pas bien :
– l’affichage des polices (plus ou moins grandes selon l’OS)
– l’interlignage (anarchie totale)
– la taille du texte dans le navigateur
– le rendu des éventuelles options (tracking, kerning)
… faire des colonnes de hauteur identique (hauteur définie par du contenu texte) n’a aucune chance de s’afficher correctement, sauf peut-être sur le navigateur fétiche du développeur.
Une solution consiste à « faire des conteneurs de hauteur fixes et limiter le nombre de caractères qu’on met dedans » (je cite un designer). Bien que fonctionnelle cette solution n’est pas la panacée :
– On ne sait pas à l’avance quelle hauteur prendra le texte (les blocs risquent d’être trop petits, surtout lorsque le contenu est administrable : dans la plupart des CMS, on ne peut pas limiter le nombre de caractères contenus dans un champ).
– Si utilisation de réglages spéciaux (tracking, interlignages, polices custom) c’est un peu aléatoire.
– Si l’utilisateur zoom, la taille du texte va changer mais pas nécessairement celle du bloc (une partie du texte ne sera plus visible)
Bref, ce genre d’alignement est possible, mais hasardeux. En tout cas c’est clairement un facteur de complication, donc de coût de fabrication plus élevé. L’idéal reste des hauteurs flottantes, définies par le contenu des blocs.
Et pour ceux qui préfèrent Adobe Illustrator en web design ?
Observez ces règles afin d’éviter un massacre de votre création lors de l’intégration HTML :
- Travailler à 100 %
- Couleurs RVB (choisir le profil Web lors de la création du document)
- Cocher « Aligner sur la grille de pixels » lors de la création d’un nouveau document, ainsi que dans le panneau Transformation (les éléments alignés sur des fractions de pixels seront flous sinon, cf. cet article)
- Pour les bordures utiliser les Contours intérieur et extérieur mais pas centré, pour la même raison
- Dans les Préférences, définir toutes les Unités en pixels
- Désactiver la Césure dans les paragraphes de texte
- Inclure les images dans le document (au lieu de les lier)
