photo credit: Bull3t
Les agences de communication sont en pleine évolution depuis plusieurs années. Avec l’arrivée du Web, les agences « traditionnelles » ont dû se mettre à niveau pour rester compétitives et créatives sur un nouveau média. La plupart des agences ont bien réussi à passer le cap. Le seul problème, c’est que leur travail est souvent dénaturé par les contraintes du web, bien différentes des contraintes du print.
Voici quelques-unes des différences fondamentales entre le monde du web et le monde de l’imprimé.
Les couleurs
Print : CMJN
Web : RVB
Un imprimé traditionnel est généralement composé de 4 couleurs : Cyan, Magenta, Jaune et Noir. Sur internet, avec les écrans d’ordinateurs, toutes les couleurs sont formées à partir de 3 couleurs primaires : Rouge, Vert et Bleu. On peut donc clairement voir qu’il y a une différence à la base même de la formation des couleurs.
L’utilisation de logiciels professionnels comme Adobe inDesign, Illustrator ou Photoshop permet de gérer les couleurs des deux manières. Il faut donc bien faire attention au mode colorimétrique utilisé selon qu’on crée une maquette de site web ou une maquette pour un imprimé.
Si une maquette de site web est faite en CMJN, l’apparence dans le logiciel sera quasi identique. Par contre, une conversion en RVB sera obligatoire, ce qui peut impliquer des problèmes de rendu.
Les tailles et unités de mesure
Print : mm / cm
Web : pixels
Une page A4 imprimée se mesure en cm. C’est donc logique de mesurer avec la même unité dans un logiciel d’édition que dans le monde réel. Cependant, il faut savoir que tout logiciel informatique travaille avec des pixels. La notion de millimètre ou de centimètre sur un ordinateur est simplement un calcul de conversion. C’est ce qu’on appelle la résolution. Il s’agit d’un rapport entre un nombre de pixels et une unité réelle. En l’occurrence, le pouce. On parle donc de pixel par pouce (DPI).
La résolution standard d’un document imprimé est de 300 DPI. Mais sur le web, on a besoin de moins d’informations que pour l’imprimé. Et on est également limité (en tous cas historiquement) par la bande passante d’internet. On est donc dans une base un peu plus petite (72 DPI). C’est la raison pour laquelle il est illogique d’utiliser Illustrator ou inDesign pour créer une maquette web. Par contre, Photoshop est parfaitement adapté, étant donné qu’on y travaille en bitmap (pixels) et non en vectoriel (mm).
Attention aux images : chaque photo prise avec un appareil photo numérique devra être convertie dans le bon format (72 DPI) pour rendre l’image plus compatible et plus légère. (Concernant les images, il faut également faire attention aux couleurs: pour le web, on travaille en RVB comme expliqué ci-dessus)
Les polices de caractères
Print : Toutes les polices de caractères qui existent dans un format Mac ou PC (true type, open type, etc.)
Web : Uniquement des polices standards qu’on trouve sur Mac et PC d’origine (voir liste plus bas)
Pour un imprimé, la seule contrainte par rapport aux polices de caractère est que la police soit compatible avec le système de l’imprimeur (ce qui ne pose presque jamais de problème si la police est fournie). Par contre, sur le web, l’affichage du texte ne se fait pas sur l’ordinateur du créateur, mais sur l’ordinateur de chacun des internautes qui visite le site.
Imaginons maintenant un imprimé (par exemple, un catalogue) qui varie continuellement en fonction de l’endroit où vous vous trouvez: vous recevez le catalogue au bureau et vous pouvez le lire sans problème, car tout s’affiche parfaitement; vous le relisez le soir à la maison, et là, tous les textes sont plus fins, certains titres ne s’affichent plus avec la même graisse, et il y a quelques décalages entre certaines photos! Cet exemple relève de la science- fiction, car il est impossible de modifier un imprimé en fonction de l’endroit où on se trouve!
Et bien, sur le web, c’est le cas ! Chaque visiteur verra sa propre version de la page qu’il visite. Si on ne fait pas attention à la manière dont la page est affichée dans les différents systèmes courants, on risque d’avoir de grosses différences.
Tout ceci montre bien qu’en matière de police de caractère, si on utilise une police spéciale (par exemple, OCR A Std), tous les visiteurs qui n’ont pas cette police installée sur leur ordinateur verront une police de substitution. Dans le cas d’une police très spécifique, seuls les professionnels des arts graphiques verront la bonne police.
Pour éviter ce genre de problème, on utilise des polices standards pour afficher le texte. Il faut également prendre en compte qu’une police PC (par exemple, Times New Roman ou Trebuchet MS) n’existe pas sur Mac (et inversement). Il faut donc prévoir d’utiliser une police de substitution pour Mac (Times ou Helvetica) et définir une famille de police standard (sans-serif). C’est pour ça qu’on utilise des listes de polices (par exemple : Trebuchet MS, Helvetiva, Arial, Sans-Serif).
Voici différentes listes de polices standards :
Avec empattement :
Georgia / Times New Roman / Times
Sans empattement :
Arial / Helvetica
Verdana / Geneva
Trebuchet MS / Helvetica
A chasse fixe :
Courier New / Courier / monospace
Le web est très flexible, il faut donc laisser de la place au texte qui pourra évoluer légèrement en fonction de la police utilisée. Il vaut mieux prévoir des espaces flexibles plutôt que des espaces fixes pour le texte (principalement en hauteur). Et il ne sert à rien de travailler la micro-typographie dans Photoshop, car le rendu web sera de toutes façons différent.