Das Drucken von Stylesheets kann sehr schmerzhaft sein, wenn Sie nicht wissen, was Sie tun. Bevor Sie sich einem nähern, müssen Sie unbedingt gründliche Nachforschungen anstellen.
Heute helfen wir Ihnen weiter, indem wir zunächst die konzeptionellen Überlegungen diskutieren, die Sie beim Erstellen eines Druck-Stylesheets beachten müssen. Dann tauchen wir in den Code der bekannten HTML5-Boilerplate ein, um einige moderne Lösungen zur Behebung der Probleme zu sehen, die beim Drucken aus dem Internet auftreten.
Wo Web Design auf Druck trifft
Web und Print sind zwei grundsätzlich verschiedene Bestien. Sie sind so unterschiedlich, dass Sie oft Designer finden, die Vollzeit in einem oder dem anderen Medium arbeiten, und das fast ohne Crossover. Infolgedessen wissen Druckdesigner oft nur sehr wenig über Webdesign und Webdesigner nur wenig über Printdesign.
Interessanterweise fordern die meisten Experten jedoch, dass sich jedes Webprojekt, das Sie erstellen, ein wenig überschneidet. Wir reden natürlich über Print Stylesheets, die zu einer Art bizarrer Welt führen, in der CSS für Print verwendet wird! Es ist ein verrücktes Szenario, aber es wird trotzdem erwartet, dass Sie es planen.
Auch wenn Sie sich mit CSS ziemlich gut auskennen, können Sie mit Print-Stylesheets einige Curveballs werfen. Es gibt ein paar skurrile Tricks, die Sie zusätzlich zu konzeptioneller Planung umsetzen müssen.
Sehen wir uns an, wie Sie diesen Prozess starten können, indem Sie einige wichtige Fragen stellen.
Print vs. Web: Was sind die grundlegenden Unterschiede?
Dies ist eine wichtige Frage, die Sie sich beim Erstellen eines Druck-Stylesheets stellen müssen. Schließlich konvertieren Sie ein Design von einem Medium in ein anderes, sodass es sich lohnt, darüber nachzudenken, wie sie sich unterscheiden.
Sie konvertieren ein Design von einem Medium in ein anderes, so dass es sich lohnt, darüber nachzudenken, wie sie sich unterscheiden.Denken wir über die offensichtlichen Bereiche nach. Zunächst einmal ist eine Seite eine sehr begrenzte Leinwand. Websites stellen einen ziemlich unendlichen Bereich dar, der in jede Richtung beliebig verschoben werden kann. Physische Seiten werden jedoch bei 8,5 "x 11" festgehalten, wobei der Druckbereich noch geringer ist.
Dies hat erhebliche Auswirkungen. Dies bedeutet, dass langwierige Inhalte Tonnen von Papier verbrauchen. Dies führt dazu, dass wir darüber nachdenken, wo wir einschränken können. Wenn wir beispielsweise Artikel mit Hunderten von Kommentaren drucken, sollten wir diese möglicherweise deaktivieren. Es gibt auch eine offensichtliche Änderung, die an der Breite unseres Inhalts vorgenommen werden muss. Sowohl die Kopie als auch die Bilder müssen entsprechend dimensioniert werden.
Interaktion
Ein weiterer wesentlicher Unterschied zwischen Print und Web ist die Interaktionsfähigkeit. Das Web ist ein äußerst interaktives dynamisches Medium, während der Druck statisch ist. was auf dem Papier steht, steckt da!
Dies bedeutet, dass Sie alle interaktiven Elemente auf der Seite überdenken müssen. Navigationsmenüs sind zum Beispiel in der Regel eines der ersten Schritte. Eine gedruckte Seite hat keinen Nutzen für sie und sie können wirklich viel Platz beanspruchen, wenn sie in einfache ungeordnete Listen umgewandelt werden.
Sie benötigen eine gute Möglichkeit, all diese Inline-Links zu verwenden und dem Leser zu zeigen, wohin er führt.Sie müssen auch überlegen, was mit Bild-Schiebereglern und ähnlichem passieren wird. Wenn auf Ihrer Seite oben eine Diashow mit zehn Bildern angezeigt wird, kann dies nicht gut auf Papier übertragen werden.
Die grundlegendste Interaktionsebene im Web ist ein Link. Auch dies wird problematisch. Auf Ihrem Computer können Sie einfach auf einen Link klicken, um zu sehen, wohin er führt. Auf dem Papier geht diese Funktionalität verloren. Sie benötigen also eine gute Möglichkeit, all diese Inline-Links zu verwenden und dem Leser zu zeigen, wohin er führt.
Wer druckt diese Seite und warum?
Die zweite wichtige Frage, die gestellt werden muss, bezieht sich darauf, warum die Seite überhaupt gedruckt wird. Ein guter Designer will nicht nur die Dinge gut aussehen lassen, das Design muss den Anwendernutzen maximieren.
? Ein guter Designer will nicht nur die Dinge gut aussehen lassen, das Design muss den Anwendernutzen maximieren.?Dies bedeutet natürlich, dass Sie genau das berücksichtigen müssen, was der typische Benutzer will. Dies wird keine universelle Antwort sein. Jeder Projekttyp hat eine eindeutige Verwendung für die gedruckte Seite.
Zum Beispiel möchten Google Maps-Nutzer so gut wie alles, was von der Seite zum Drucken entfernt wird: Anzeigen, die große interaktive Karte, die Google-Suchleiste. All dies und mehr muss für eine saubere Liste lesbarer Wegbeschreibungen ausgegeben werden.
Diese Ziele unterscheiden sich offensichtlich von jemandem, der einen Design-Blog-Post ausgibt, um ihn bei einem Meeting als Diskussionspunkt zu verbreiten. Hier liegt der Schwerpunkt auf der Präsentation von viel Text und nicht sehr wenig.
Beispiel lernen: HTML5 Boilerplate
Wenn Sie mit CSS-Typen arbeiten, an die Sie noch nie zuvor herangegangen sind, ist eine der besten Möglichkeiten des Lernens, einfach umzuschauen und zu sehen, was andere tun.
Der erste Ort, den ich normalerweise in solchen Fällen beginne, ist Paul Irishs HTML5 Boilterplate. Dieses Projekt ist eine solide Zusammenarbeit mit führenden Branchenexperten. Es ist keineswegs unfehlbar, aber es ist immer noch ein großartiges Beispiel, von dem man lernen kann.
Wenn wir die Boilerplate herunterladen und die CSS-Datei aufbrechen, finden wir die Druckstile ganz unten:
Dieser ziemlich kleine Code-Block hat viel zu bieten, was bedeutet, dass es viel zu lernen gibt. Lass uns eintauchen und sehen, was wir finden können.
Print Media Query
Das allererste, was Sie beachten sollten, ist die Verwendung einer Medienabfrage, um die Druckstile festzulegen. Dies teilt dem Browser mit, dass alle in diesem Block enthaltenen Stile nur unter bestimmten Umständen angewendet werden sollen, in diesem Fall ein Benutzer, der die Seite druckt (dies wird dazu beitragen, die alte Technik "Klicken für druckerfreundliche Version" zu beenden).
Universal Selector und Blanket Styles
Das nächste, was mir auffällt, ist, dass der Universalselektor (*) sofort ausgezogen wird, um einige Änderungen an der Formatvorlage der Seite vorzunehmen.
Das Ergebnis hier ist eine drastische Vereinfachung der visuellen Stile auf der Seite. Alle Hintergrundbilder oder -farben werden deaktiviert, die Textfarbe wird schwarz, Textschatten werden deaktiviert usw. All dies verbessert die Lesbarkeit und spart Tinte.
Druckbare Links
Erinnern wir uns, dass wir oben gesagt haben, dass etwas gegen gedruckte Links getan werden müsste? Es stellt sich heraus, dass Sie diese Aufgabe mit reinem CSS erledigen können, eine beeindruckende Leistung! Der gute alte Eric Meyer hat diesen Weg bereits 2002 auf A List Aparts CSS Design: Going to Print gemacht.
Nachdem Sie zunächst auf alle Links auf der Seite eine Unterstreichung angewendet haben, um sie hervorzuheben (einige ändern sich auch leicht in der Farbe), wird ein Code-Snippet angewendet, der den Link tatsächlich nach dem Text ausgibt:
Das Ergebnis ist, dass ein typischer Link in einen Link (http://goo.gl/CWGL4) geändert wird. Wie Sie sehen, ist dies perfekt für einen Ausdruck. Als Randbemerkung unterstützen nicht alle Browser das obengenannte CSS, aber diejenigen, die nicht einwandfrei drucken werden, werden nur ohne den Text in Klammern angezeigt.
Beachten Sie, dass Boilerplate noch einen Schritt weitergeht, indem Sie diese Aktion für Bilder und JavaScript mit Links deaktivieren.
Seitenumbrüche optimieren
Sie werden eine Menge Code für den Umgang mit Seitenumbrüchen feststellen: Seitenumbruch: vermeiden; und p, h2, h3 {Waisenkinder: 3; Witwen: 3; } sind beide darauf ausgerichtet, den Seitenfluss zu verbessern. Ersteres verbietet, wenn möglich, einen Seitenumbruch direkt nach Kopfzeilen und Absätzen, letzteres sorgt dafür, dass auf einer Seite nicht weniger als drei Zeilen verwaist oder verwitwet werden können.
Was sind Waisen und Witwen? Wenn Sie die erste Zeile eines Absatzes allein am Ende einer Seite gestrandet haben, ist dies eine Waise. Ebenso kann die letzte Zeile eines Absatzes von selbst auf die nächste Seite übertragen werden, dies ist eine Witwe. Der obige Code stellt sicher, dass nach Möglichkeit mindestens drei Textzeilen angezeigt werden.
Bildgröße
Wenn Sie die maximale Bildbreite auf 100% einstellen, wird sichergestellt, dass Sie keine seltsamen Blutungen haben. Sie haben wahrscheinlich als Benutzer schon einmal darauf gestoßen: Sie drucken eine Webseite und erhalten mehrere Seiten, die nur teilweise Bilder enthalten, die von der Hauptseite abgeschnitten wurden. Dies ist mit der oben stehenden einzelnen Codezeile leicht zu verhindern!
Seitenränder
Die Art und Weise, wie die HTML5-Boilerplate Seitenränder definiert, ist sehr interessant. Die meisten älteren Artikel über Druck-Stylesheets enthalten sehr unterschiedliche Methoden. In der Tat wusste ich nicht einmal über diese Methode, bis ich diesen Artikel schrieb.
Es stellt sich heraus, dass Sie @page verwenden können, um einfach einen Rand um die gesamte Seite herum anzuwenden. Der obige Code wendet einen Rand von 0,5 cm (Zentimeter ist CSS? Oh mein!) Auf alle Seiten einheitlich an.
Wenn Sie kompliziert werden möchten, können Sie dies ändern, um die Einstellungen für jede andere Seite anzupassen. Mit dem folgenden Code werden die Ränder der linken Seite (1, 3, 5 usw.) und der rechten Seite (2, 4, 6 usw.) unabhängig voneinander festgelegt.
Es ist eine einfache und elegante Lösung, die überraschenderweise CSS2 ist.
Lesen Sie weiter
Da es sich bei HTML5 Boilerplate um eine generische Vorlage handelt, enthält sie nicht viele der Codeausschnitte, die typisch für sehr spezifische Arten von Websites wie Blogs sind. Durchsuchen Sie vor dem Angriff auf Ihr eigenes Stylesheet-Projekt einige der folgenden Artikel, um sicherzustellen, dass Sie auf dem neuesten Stand sind.
- 10 Tipps für bessere Druckformatvorlagen aus dem Web Designer Depot
- So erstellen Sie aus Aliso the Geek ein großartiges Druck-Stylesheet
- Druckvorlagen: Die Grundlagen (für keine Ausreden) von Jens Meiert
- Print Stylesheet - das definitive Handbuch von Webcredible
Fazit
Druck-Stylesheets stellen eine völlig andere Art dar, über CSS nachzudenken und diese zu verwenden. Sie sind nicht immer die intuitivsten Aufgaben, erwarten Sie also nicht intuitiv die richtigen Antworten. Stellen Sie sicher, dass Sie Ihre Hausaufgaben machen und ausgiebig testen.
Haben Sie Tricks oder Best Practices für Print Stylesheets? Lass es uns in den Kommentaren wissen!