Optimisez vos fichiers Photoshop

Une petite histoire pour comprendre :

Afin d’augmenter ses ventes, un de mes amis a demandé à Géraldine, une des meilleures infographistes de la ville, de lui dessiner un site Web qui soit le plus joli au monde.
Une fois le site Web dessiné, c’est un artisan du Web qui a repris les travaux de Géraldine.
Mais voilà qu’un an après la mise en ligne, le site n’est toujours pas visité et ne génère que peu d’argent. Un peu écœuré, mon ami me demande : "Mais pourquoi tout le monde fuit mon site d’e-commerce qui est très joli ? "

Je lui réponds : " Les sites Web les plus utilisés comme Google, Facebook, Amazon ou YouTube… ne te paraissent pas très jolis et pourtant, ils font partie des sites les plus visités. Les webdesigners n’ont pas dessiné un site Web pour qu’il soit joli, mais pour qu’il soit efficace. Comment ont-ils fait ? Tout simplement en respectant les processus métier. "

Du Web et non de la PAO :

Si je commence par préconiser des maquettes en résolution à 72dpi et non en 300dpi et qu’il faut éviter le mode CMJN vous allez me prendre pour un drôle d’oiseau, et pourtant, je reçois encore (et même de la part de grandes agences Web)  des fichiers Photoshop adaptés au Print et non au Web. Car la convention veut que le Web soit en 72dpi pour éviter que les fichiers soient trop lourds à charger.

Ce qui me parait important de signaler est que généralement, les graphistes issues du monde de la PAO ont tendances à créer des interfaces graphiques très lourdes à charger pour les navigateurs Web.

Faisons un test avec Google Speed ; Le site de la Fnac obtient la note C, alors qu’Amazon obtient la lettre A, oui, c’est une des raisons pour laquelle les internautes français préfèrent ce site d’e-commerce, parce qu’il est simple, rapide à utiliser et que son service est performant.

Notons que le moteur de recherche de Google pénalise les sites Web qui mettent trop de temps à s’afficher.

L’image sera découpée
en jpg ou en png transparent ?

Le Webdesigner doit anticiper le découpage de ses maquettes. Dans l’exemple ci-dessous, un calque transparent diffusant de l’information se superpose à l’image, ce calque sera découpé en utilisant un PNG transparent, oui, mais le graphisme à utiliser le mode « superposition » dans Photoshop ce qui est impossible à recréer en HTML/CSS.

Vérifier les contrastes :

Pour les Webdesigners, je recommande de créer un nuancier de couleurs et de vérifier pour chaque couleur, si le contraste entre le premier plan et le second est acceptable.
Il faut s’aider d’outils que l’on trouvera sur le Web comme le validateur de snook.ca.

Extension Firefox pour vérifier les contrastes de votre site Web.

Les gabarits :

Les pages Web d’un site doivent toujours avoir la même largeur de page et au pixel près. On recommande une largeur maximale de 980 pixels (voir 960px si l’on veut que la page s’affiche d’un seul tenant sur une tablette PC).

Utiliser des lignes de construction et s’y tenir est l’apanage des artistes graphiques confirmés.

Nous éviterons de créer des pages qui se redimensionnent automatiquement en largeur, puisque sur les écrans larges, cela va créer des paragraphes trop pénibles à lire et des espaces vides.

1 pixel de trop
et toute la page Web est décalée !

Lorsque l’on définit une colonne à 210 pixels de largeur, toutes les images, y compris les ombrés ne peuvent dépasser 210 pixels, si un bloc dépasse d’1 pixel la largeur d’une colonne, alors c’est toute la mise en page qui sera décalée.

Ci dessous, une astuce permet de créer des blocs au pixel près sous Photoshop, non seulement votre interface sera plus jolie, mais vous rendrez un fier service à votre intégrateur Web.

Typos :

Il est possible d’adapter presque toutes les typos pour le WEB, mais il faudra les fournir à votre intégrateur WEB. Il faut donc s’acquitter des droits de diffusion avant de les utiliser. Faisons attention à ne pas trop en mettre car les polices de caractères sont longues à charger sur un site Web ; En cuisine, si vous présentez à vos invités une assiette avec 60 ingrédients, ils risquent de faire la tête, c’est pareil pour une interface Web, ni trop, ni peu, mais juste ce qu’il faut.

Faisons attention aux typos ! Pensons bien que Photoshop est un logiciel d’imagerie, les typos et leurs tailles n’auront pas le même aspect en code HTML. Généralement, un groupe de mots prendra toujours moins de place sur un fichier Photoshop qu’en code HTML.

Prenons aussi note que si certaines typos non-Web s’affichent correctement sous Photoshop, cela ne sera peut-être pas le cas sur une page Web, il faut toujours tester les typos avant de les utiliser, surtout pour des tailles de typos inférieur à 14px.

A noter aussi que les tailles de typo en décimal n’existent pas en HTML/CSS, la taille des typos est toujours un nombre entier

Interactivité :

On oublie trop souvent que les menus et autres éléments de navigation ont au moins 2 états : État naturel et état au survol. On peut signifier à l’intégrateur WEB où sont les éléments interactifs en utilisant une image de pointer de souris ou marquer les calques du .psd d’une couleur reconnaissable.

Les tableaux :

Que ce soit en XHTML ou en HTML5, on utilise toujours les tableaux pour les données. Il est très difficile de personnaliser les tableaux en feuille de style, il vaut mieux faire au plus simple. Évitons les bordures en dégradé par exemple, ce genre d’effets n’est pas forcément plus joli qu’un tableau simple et clair.

Les formulaires :

Certains éléments de formulaire (boutons d’un select, d’un scroll pour une zone de texte…) ne sont pratiquement pas personnalisables. On peut évidemment utiliser du JavaScript pour personnaliser ces éléments, mais c’est prendre de très gros risque en matière d’accessibilité et de compatibilité.

Il faut veiller à ce que les champs de formulaire soient de même hauteur que le curseur d’une souris, c’est plus agréable pour l’Internaute.

Enfin, si vous regroupez dans des blocs des éléments de même nature, ils seront placés dans des fieldsets, le bouton Envoyer ne pourra pas se trouver dans le même bloc.

Extensibilité des blocs :

Pour être conformes avec l’accessibilité, il est recommandé que tous les blocs de contenu texte doivent être redimensionnables en hauteur (dans le cas où on augmente la taille des polices).

Par contre, il n’est pas utile de créer des blocs qui soient redimensionnables en largeur, puisque de toute façon, nous sommes bloqués par la largeur de page qui doit être fixe.

Conclusion :

Il est fortement conseillé de montrer les maquettes créées sous Photoshop à votre intégrateur WEB afin d’en faire l’analyse. En effet votre intégrateur connait tous les aspects du référencement et de l’accessibilité, il pourra donc vous conseiller.