Le web sur le papier
Contexte
L’impression d’une page web est une problématique qui impose de faire un pont entre d’un coté un contenu parfaitement interactif répondant à un design souvent élaboré et de l’autre un support tout ce qu’il y a de plus non-interactif: le papier, ou l’ePad dans sa version 0.
Pour l’instant l’évolution technologique majeure qui ferait d’une feuille de papier un outil interactif permettant de consulter du contenu offline, n’est pas né. Peut-être une idée pour un projet, mais à mon avis il y a déjà du monde qui travaille dessus…
Quoi qu’il en soit cette innovation n’existe pas… Donc comment assurer que le contenu de son site web puisse-être imprimé sans fournir un contenu particulièrement dégueulasse, pour faire dans l’euphémisme.
Comment faire?
Ainsi, lorsque l’on crée un site web, il est essentiel dans certains cas de le penser aussi du point de vue de sa version papier… Qui vient un peu contredire l’idée d’un site fluide et interactif, dont l’architecture de l’information sont pensées de manière à faire en sorte que ses utilisateurs aient plaisir à naviguer dans le contenu de son site.
Selon la méthode de conception d’un site, les conditions pour permettre l’impression de ses pages différent: soit le site est construit à l’aide d’un CMS, soit il l’est à partir de rien (“from scratch” est l’expression anglophone consacrée).
CMS
Méthode CMS: il existe forcément (google est ton ami) un plugin (ou extension pour les non anglophones) qui permettra d’imprimer “joliment” les pages de son site. L’extension doit être mise en place sur le site, puis activée et éventuellement adaptée selon les besoins. Mais pour cela, d’un CMS à l’autre les paramètres peuvent complètement différer. Par exemple, pour un site sous wordpress (ou tout autre CMS), il existe des extensions.
Pour s’en convaincre, voir: http://wordpress.org/extend/
From scratch
Dans le cas de la création d’un site web depuis zéros, ou de la reprise d’un site existant entièrement construit à la main, il est nécessaire pour permettre des impressions optimales de mettre en place une feuille de style spécifique.
Cette feuille de style doit être appelée dans toutes les pages dont l’impression à du sens. On voit rarement des pages d’accueil imprimées… Toutefois il faut bien déterminer quel contenu doit être absolument mis en forme pour l’impression du reste.
Cette feuille de style doit être appelée dans les pages à l’aide de la ligne de code suivante:
<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”>
On trouve généralement dans les sites cette même ligne avec l’argument screen au lieu de print. Ces deux arguments doivent être présents tous les deux pour ne pas que la visualisation à l’écran de votre PC (smartphone, touchpad,…) ne soit celle de l’impression.
Autrement dit on doit définir un style pour les écrans, et un autre pour les impressions.
Best Practice de l’impression d’une page Web
Règles incontournables pour de belles impression de votre site:
Règle 1: Supprimer la navigation
L’interactivité d’un document papier étant très limitée, la navigation n’a pas de sens à etre présentée. Elle doit donc ne pas être présentées dans les impressions.
Règle 2: Elargir le contenu
Le corps de la page à imprimer a souvent une largeur fixe et inférieure à celle d’une page A4. Ainsi, la largeur du contenu doit être augmentée pour s’intégrer dans un format A4 sans perte d’espace. On imagine un texte large de 300 pixels imprimé tel quel, qui consommerait plus de feuilles qu’il ne le faudrait présenta le contenu de manière plus éclatée que si la largeur était optimisée à l’impression.
Règle 3: Mettre à zéro les couleurs de fonds
Imaginons une page de fond noir avec un texte blanc. Imprimer directement selon ce design serait assez criminel d’un point de vue consommation d’encre. Sans parler de l’apparence. Donc il faut initialiser la couleur du fond et la paramétrer sur “Blanc” (#fffff).
Règle 4: Mettre à zéro les couleurs de texte
De la même manière que le fond, la couleur du texte doit être réinitialisée. Il doit être paramétré à “Noir” (#000000) afin d’améliorer la lisibilité.
Règle 5: Présenter les URL de destination des liens
Toujours pour contrer la non interactivité totale du papier, les liens ne peuvent être cliqués. Ainsi, pour permettre au lecteur offline du site d’accéder aux pages liées aux articles imprimés, les liens doivent être explicitement présentées dans l’impression. Dès lors le lecteur pourra accéder aux ressource qu’il aura identifié dans sa lecture.
Règle 6: Faire ressortir les liens dans le texte
Les liens présents dans le texte imprimé doivent pouvoir être identifié par le lecteur. Pour ce faire, ils ne doivent pas hériter de la mise en forme du texte, mais doivent conserver la leur propre. de cette manière, les liens seront détectés par le lecteur, rendus accessibles a posteriori par la règle précédente.
Règle 7: La taille ça compte (de la police)
Il est nécessaire de plus de paramétrer la taille de la police pour l’impression. Pour cela les règles diffèrent, à savoir si les valeurs sont données en pourcentage ou absolument (en définissant une taille absolue à 12 points par exemple, qui est soit dit en passant la taille standard).
Règle 8: Quelles police?
En général, l’objectif est de ne as fatiguer le lecteur. Pour se faire, la police Serif fonctionne bien. Toutefois, il est possible que les lecteurs soient surpris d’un changement de police entre le web et l’impression. Donc il faut choisir avec attention la police d’impression.
Règle 9: Commentaires
Ne pas imprimer les commentaire d’un article en général. en revanche si ils contiennent des discussions qui sont censées intéresser les lecteurs, permettre leur impression tout en incorporant des “page break” afin de ne pas couper désagréablement les textes.
Règle 10: Message dédié à l’impression
Il est possible d’incorporer un message visible seulement à l’impression. cela peut être un message de remerciement adressé à l’utilisateur ayant imprimé les pages webs, ou un messages plus commercial, type teasing…
Conclusion
A l’aide de ces bonnes pratiques de l’impression de page web, vous permettrez à vos lecteurs offline de bénéficier d’impressions de qualité, leur apportant le même plaisir à lire votre contenu offline que online.
PC vs Mac
Souvent, les intervenants d’un même projet travaillent sur un système d’exploitation différent. Cette différence peut poser certains problèmes pour travailler à plusieurs sur un document. Pour ce qui est des documents textuels, les formats sont souvent portables d’un OS à l’autre. En revanche, pour les graphiques, tout n’est pas portable aisément.
Un cas concret est le design des écrans, ou des cinématiques faites sous le logiciel Visio de la suite Office. Les fichiers produits par cet outil sont au format .vsd. Illisible pour un mac.
Sous mac, le système d’exploitation souvent privilégié par les graphistes et autres responsables d’agence de com, un des outils les plus utilisé pour la gestion des différents graphiques est Omnigraffle.
La livraison d’un des derniers projets de DesignerFonctionnel imposait de fournir tous les fichiers à l’agence. Dont ceux qui ont été constitué sous Visio. Ceci pour leur permettre d’avoir la main sur toutes les données en entrées qui ont permis la réalisation du cahier des charges.
Les fichiers Visio posant un problème, il a été trouvé une solution, pour ne pas tout refaire (presque deux cents écrans et cinématiques) sous un autre outil.
La solution, très simple au final se résume comme suit:
- Considérer que le fichier est ouvert dans Visio (le faire si ce n’est pas le cas!);
- Cliquer sur “Fichier“;
- Puis sur “Enregistrer sous…”
- Dès lors, une boite de dialogue s’affiche à l’écran pour sélectionner l’endroit où enregistrer le fichier et son nom;
- Sous le nom du fichier, dérouler la liste qui présente l’ensemble des formats d’enregistrement disponibles;
- Sélectionner le format .vdx;
- Enregistrer le fichier sous ce format,
- c’est fini.
Ce format est générique car généré à l’aide de XML et peut être ouvert sous Mac pour être modifié, à l’aide de Omnigraffle.
Remarque importante:
Dans Visio, chaque onglet possède une page quadrillée, sur laquelle il est possible de créer l’ensemble des graphismes voulus. Cette page quadrillé défini une zone de tavail. Dans Visio, il est possible de travailler sur un espace beaucoup plus large que cette feuille. Or sous Omnigraffle, tout ce qui est en dehors de la feuille quadrillée est grisé, donc difficile à travailler. Donc sous Visio, pour permettre un export optimal, il faut se restreindre à créer ses graphiques dans l’espace donné par la feuille.
Les balises title et meta
La balise « title »
Cette balise est placée après la balise “head”. Cette balise doit être valorisée pour chaque page d’un site.
Sur chacune de ces pages, cette balise doit être différente. Autrement dit, chaque page doit avoir un titre différent.
Cette balise ne doit pas comporter plus de cent caractères.
Exemple
<Title>Designer Fonctionnel, conception et planning stratégique</Title>
Les balises meta name
Author
Description
Elle précise l’auteur de la page, tout en étant facultative. Plusieurs peuvent être renseignés. Pour ce faire, il faut les séparer par des virgules.
Exemple
<meta name=”Author” content=”Designer Fonctionnel, Planeur Stratégique”>
Category
Description
Elle permet d’associer un ou plusieurs catégories à une page. C’est utile pour le référencement dans les annuaires.
Plusieurs valeurs sont possibles, il faut les séparer par une virgule.
Exemple
<meta name=”Category” content=”Gestion de projet, création de sites web, Systèmes d’informations”>
Copyright
Description
Zone non-obligatoire pour poser un copyright sur son site. Plusieurs copyrights possible, si on les sépare par une virgule.
Exemple
<meta name=”copyright” content=”Designer Fonctionnel”>
Description
Description
Cette zone est très utile. Chaque page doit avoir une description propre et indépendante. On peut y aisir entre cent et mille caractères.
Cette balise est utilisée par les moteurs de recherches pour présenter la description du site dans la liste de résultats, ou dans les annuaires. Il faut donc écrire une véritable description de chaque page pour permettre une indexation optimale.
Exemple
<meta name=”description” content=”Le design fonctionnel est un outil d’optimisation des coûts de production d’applications n-tiers ou de sites internet. “>
Generator
Description
Cette balise permet de spécifier le lou les logiciels utilisés pour créer la page. Cette zone est complètement inutile.
Exemple
<meta name=”generator” content=”notepad”>
Keywords
Description
Balise extrêmement utile pour l’indexation par les moteurs de recherches. Il ne faut ni être redondant ni verbeux, mais précis et varié.
Exemple
<meta name=”keywords” content=”analyse fonctionnelle, spécification, site web, création, design, luxe”>
Robots
Description
Balise permettant de gérer l’accès aux pages du site par les robots. Ne pas mettre cette balise permet à tous les moteurs de recherche d’indexer les pages, ou écrire la balise comme dans l’exemple. Pour les différentes options de cette balise, demander à Google.
Exemple
<meta name=”Robots” content=”all”>
Une balise meta « http-equiv »
Refresh
Description
Cette balise permet deux choses:
Soit de rafraichir la page en cours au bout de n secondes, soit de la rediriger vers une autre au bout de ce même temps.
Exemple
<meta http-equiv=”refresh” content=”10; url=http://www.designerfonctionnel.com/lesite/”>
Conclusion et remarque
Pour répondre et obéir aux bonnes pratiques de la conception web toutes les balises sont à considérer pour un référencement optimal du site. Il est vrai que les dernières mises à jours de Google laissent à penser que la valorisation de la balise “keywords” est maintenant inutile. Selon les bonnes pratiques de Designer fonctionnel, la valorisation de ces mots clé doit pouvoir être opérée, sauf si le cout global est trop élevé, ou n’a pas de sens dans le projet. néanmoins, l’ensemble de ces balises doit être considéré lors de la création d’interfaces publiques.
