Faites votre site web imprimable avec CSS, Bloq Creative
responsive design est pas seulement sur la taille de l'écran; cela signifie aussi l'adaptation aux différents médias - y compris l'impression. Adrian Roselli partage certaines techniques.
De nombreux éons il y a, dans le temps oublié depuis longtemps des mises en page Web basée sur les tables, les développeurs Web ont eu accès à une fonctionnalité de feuilles de style en cascade (CSS) qui ont permis aux auteurs de spécifier un type de support. Ce type de média dit le navigateur quand appliquer des styles à la page - que ce soit pour l'écran, ordinateur de poche ou même impression.
mises en page à base de tables-aujourd'hui ont été presque remplacés par des constructions à base div et, pour ceux qui utilisent les spécifications HTML5, d'autres éléments structurels et sémantiques. L'un des principaux avantages de cette approche est que le CSS est généralement utilisé pour définir la mise en page des pages Web, ce qui permet une plus grande latitude pour refusion et reformatage pages déjà codées avec seulement des changements CSS.
Cette flexibilité a également conduit à la montée du Responsive Web Design (RWD), ce qui le rend plus facile pour une page Web pour adapter aux différentes tailles d'écran à base de CSS en utilisant la logique conditionnelle. Au cours des trois dernières années, nous avons vu le développement des cadres, des modèles, des tutoriels - et parodies - que signifient les développeurs de presque tous les niveaux de compétences sont en mesure de créer des pages qui peuvent s'adapter à peu près toute taille de l'écran un développeur veut soutenir. Le contenu peut refusion; la navigation peut régler; les éléments peuvent se déplacer en taille et en position; tweaks typographie elle-même - et ainsi de suite.
Cette méthode de construction est parfait pour permettre à un développeur de soutenir la page imprimée avec peu d'effort supplémentaire. Sauf pour une raison quelconque vous ne voyez pas beaucoup de ces ressources, y compris ou même compte tenu de la page imprimée.
Espérons que ce tutoriel vous donnera assez de confort que vous faire des styles d'impression vous pourrez les ajouter à tout projet sans faire exploser votre budget.
Étape 01. Mise en route
Face à cela, il y a d'autres éléments que la plupart des utilisateurs d'impression auront ni besoin ni envie de voir:
Et enfin il y a des choses qui, si l'utilisateur ou je veux qu'ils soient imprimés, ne sera probablement pas ou pas:
Étape 02. Faire une maison pour les styles d'impression
La première chose à faire est de configurer votre CSS pour tenir et appeler les styles d'impression. Si vous avez fait tout codage RWD, cela devrait vous être familier:
Vous n'êtes pas limité à cette approche. Vous pouvez toujours appeler votre feuille de style d'impression à partir d'un dans le document
:La même page imprimée de Firefox directement au format PDF. Vous pouvez voir que certains aspects ont disparu et la mise en page a été simplifiée
Étape 03. L'application des styles
Mon logo est un texte, et alors qu'il n'est pas noir sur blanc, je vais le changer au texte noir de sorte qu'un utilisateur avec une imprimante couleur ne doit pas traiter avec du rouge sur du papier blanc. Cette adresse mon objectif de marque.
#footer font-size: 6pt; / * Faire le petit texte * /
color: # 000;
>
affichage #SearchForm: none;
>
#footer flotteur img: droit; / * Défini ailleurs, inclus pour l'exhaustivité * /
>
Mon cinquième but d'afficher l'URL complète des liens dépend du contexte. Je l'habitude d'inclure l'adresse après chaque lien; Cependant, des problèmes peuvent surgir en raison de certaines adresses de liaison étant incroyablement long - beaucoup trop longtemps pour un utilisateur de les retaper facilement.
La boîte de dialogue d'aperçu avant impression dans Chrome. Comme avec tous les aperçus d'impression, il vous offre une idée rapide de ce qu'il faut attendre
Si je choisis d'afficher les liens hypertexte, il est important que je me souviens de limiter au contenu (donc mon pied de page et d'ariane ne pas tirer les URL après chaque élément) et peut-être exclure des images.
Maintenant, je peux marcher à travers et cacher les éléments que je ne veux pas imprimer. Contrairement à des éléments cachant des petits écrans, ce qui est une excellente idée en RWD, nous pouvons cacher des éléments en impression, car la page a déjà téléchargé dans son intégralité et les éléments que vous cachez doit ajouter aucune valeur à la page imprimée.
Dans cet exemple, je vais supprimer la navigation, la recherche, les icônes de médias sociaux et tout ce qui n'a pas de sens sur le papier.
#nav, #FlyOutNav, #SubNav. NoPrint, p.CodeAlert, #SMLinks, affichage #SearchForm: none;
>
Ces styles accomplir un certain nombre de choses de base:
Assurez-vous de tester à différentes tailles de papier, bien que le paysage est le plus facile à voir. Cela peut mettre en évidence rapidement les problèmes de mise à l'échelle
Étape 04. D'autres tweaks
À ce stade, vous devez commencer à considérer ce que les autres styles que vous avez mis en place pour tenir compte des mises en page à différentes tailles d'écran. Un bon exemple est le recours à la mise à l'échelle des tailles d'image en fonction de la taille de la fenêtre.
Pensez aux éléments de votre mise en page qui ne font même pas sur le papier. Par exemple, avez-vous Flash, intégré YouTube ou widgets interactifs en jeu?
Étape 05. Test
Une fois que vous avez tous vos styles en place, test. Il existe deux techniques que j'utilise qui ne me ont pas besoin d'imprimer la page. Tout d'abord je me penche sur les caractéristiques de l'aperçu avant impression du navigateur - un moyen rapide de voir comment sont interprétés vos styles. En second lieu, quand je veux voir comment une page est traitée imprimer au format PDF puis l'examiner.
Aucune de ces reproduit l'expérience de tenir un morceau de papier entre vos mains (et vous réaliser besoin de faire évoluer votre texte différemment, ou vos images sont trop gros), mais ils vous permettent de faire la plus grande partie de vos tests sans frais pour vous ou les arbres.
Cet article a paru dans le numéro 231 du magazine .net - best-seller mondial magazine pour les concepteurs et les développeurs Web.