10 Tipps für bessere Druckvorlagen
Druck-Stylesheets sind etwas in Vergessenheit geraten, und dennoch bleiben sie wichtig. Viele Menschen drucken Artikel aus, die sie auf Reisen oder ohne Zugang zum Internet lesen können.
Druckvorlagen haben eindeutige Vorteile . Zum Beispiel ermüdet das Lesen auf Papier weniger die Augen als das Lesen auf dem Bildschirm.
Außerdem ist es einfacher, die folgenden Tutorials zu verwenden, wenn Sie einen neben sich haben und der Code-Editor auf dem Bildschirm geöffnet ist. Auf diese Weise müssen Sie nicht jedes Mal das Fenster wechseln, um nach etwas Ausschau zu halten.
In diesem Artikel werden 10 einfache Tipps aufgeführt, mit denen Sie bessere Druckvorlagen erstellen können .
Falls Sie vergessen haben, hier ein Stylesheet zu erstellen:
Das media="print" Attribut stellt sicher, dass Benutzer keine der in der Datei print.css definierten Stile sehen .
Beachten Sie jedoch Folgendes: Wenn Ihr Haupt-Stylesheet kein Medienattribut enthält, übernimmt das Druck-Stylesheet seinen Stil. Um sie zu trennen, legen Sie Ihr Haupt-Stylesheet wie folgt fest:
Hier sind 10 Tipps, um mit dem Druck-Stylesheet anzufangen.
1. Entfernen Sie die Navigation
Was ist der Hauptunterschied zwischen Papier und Computer? Papier ist statisch, während ein Computer interaktiv ist. Und um diese Interaktion zu erleichtern, haben Websites eine Navigation, die auf dem Papier nutzlos wird.
Verstecken Sie die Navigation und andere Teile Ihrer Website, die auf dem Papier sinnlos werden, z. B. Seitenleisten, die mit anderen Posts verlinkt sind. Der Code dafür ist sehr einfach: einfach die Elemente einstellen display zu none .
2. Vergrößern Sie den Inhaltsbereich
Wenn die Navigation und die Seitenleiste entfernt sind, ist unser Inhalt nun auf der Seite verteilt. Dadurch sieht das Druck-Stylesheet eher wie ein gewöhnliches Dokument statt einer Papierversion der Website aus.
Alles, was wir tun müssen, um den Inhalt zu erweitern, ist das Zurücksetzen des Floats, das Entfernen von Rändern und das Festlegen der Breite auf 100%.
[css] #content {Breite: 100%; Rand: 0; Gleitkommazahl: keine;} [/ css]3. Setzen Sie die Hintergrundfarben zurück
Die meisten Browser ignorieren bereits Hintergrundeigenschaften, um Tinte zu sparen. Aber um sicherzustellen, dass der gesamte Hintergrund weiß ist, können wir den Körper auf weiß setzen und dann jedem untergeordneten Element auf der Seite einen weißen Hintergrund geben.
[css] body {Hintergrund: weiß;} # Inhalt {Hintergrund: transparent;} [/ css]4. Setzen Sie Textfarben zurück
Durch das Zurücksetzen des Hintergrunds tritt ein weiteres Problem auf. Was ist, wenn Sie am Ende Ihrer Beiträge ein dunkelgraues Feld "Autoreninformationen" haben, mit dem Text in hellgrau oder weiß? Wenn der Hintergrund jetzt auf weiß eingestellt ist, wird diese Information unsichtbar.
Um dies zu beheben, ändern Sie jeden hellen Text in etwas dunkleres: schwarz oder vorzugsweise dunkelgrau.
[css] #author {farbe: # 111;} [/ css]
Nehmen Sam Brown 's Blog oben. Könntest du dir vorstellen, wie das aussehen würde, wenn er die Farben des Textes nicht zurücksetzen würde? In der Tat nicht lesbar.
5. Zeigen Sie das Ziel von Links an
Da Papier kein interaktives Medium ist, können Leser natürlich keine Links anklicken, um mehr Informationen zu sammeln.
Sagen Sie, jemand liest einen Ausdruck über ein schickes neues Produkt. Wenn Sie plötzlich "Klicken Sie hier für weitere Informationen" anklicken, wäre das für sie eher irritierend, nicht wahr? Dies kann einfach durch Hinzufügen des Linkziels nach dem Linktext selbst behoben werden. So erhalten Sie etwa Folgendes: "Klicken Sie hier, um weitere Informationen zu erhalten (http://oreismore.com/information)."
Für CSS 2-fähige Browser kann dies mit einfachem CSS getan werden. Hier ist der Code:
[css] a: link: nach {content: "(" attr (href) ")";} [/ css]Sie können Dinge mit einer kleineren Schriftgröße, Kursivschrift oder was auch immer aufpeppen.
6. Machen Sie Links Stand von normalem Text
Leser müssen in der Lage sein, Links von normalem Text zu unterscheiden. Hier gelten grundlegende Usability-Regeln: Blau und Unterstreichung wird bevorzugt, aber ich füge auch gerne Fettungen hinzu.
Denken Sie daran, dass Dokumente oft in Schwarzweiß gedruckt werden. Verlassen Sie sich nicht nur auf den Farbunterschied. Hier ist der Code für sinnvolle gedruckte Links:
[css] a: link {font-weight: fett; text-decoration: unterstreichen; farbe: # 06c;} [/ css]# 0066cc ist eine frische blaue Farbe und sieht in Graustufen wie # 999999 aus. Links sehen dann gut aus, entweder in Farbe oder in Schwarz-Weiß. Sie werden sich auch von normalem Text abheben.
7. Was ist mit Schriftgröße?
Im Druck sind 12 Punkte der Standard. Aber wie übersetzen wir das in CSS? Manche sagen, dass das Einstellen der Schriftgröße auf 12 Punkte (pt) gut genug ist. Andere empfehlen, es auf 100% einzustellen. Wieder andere sagen, dass Sie in Ihrem Druck-Stylesheet überhaupt keine Schriftgröße deklarieren dürfen, da dies die Präferenzen des Benutzers außer Kraft setzen würde.
Persönlich gehe ich die meiste Zeit mit einer Schriftgröße von 12 Punkten:
[css] p {Schriftgröße: 12pt;} [/ css]8. Was ist mit Schriften?
Die meisten Menschen bevorzugen Serif-Schriften, weil sie weniger ermüdend für die Augen sind, sie führen den Leser besser durch den Text und so weiter. Einstellen der font-family zu serif in Ihrem Druck-Stylesheet ist wahrscheinlich eine gute Idee, obwohl einige Leser überrascht sein können zu finden, dass die Schriftart in ihrem Ausdruck nicht das gleiche wie das auf Ihrer Website ist.
Hier ist der Code für einen guten Druck-Font-Stack:
[css] body {Schriftfamilie: Georgia, 'Times New Roman', serif;} [/ css]
Einer der Vorteile der @ font-face-Eigenschaft von CSS 3 ist, dass Ihre speziellen Schriftarten auch gedruckt werden können, sodass Ausdrucke Ihrer Website viel ähnlicher sind!
9. Mein Blog hat viele Kommentare. Was soll ich machen?
Nun, das ist wirklich deine Entscheidung. Auf der einen Seite, denken Sie an alle Bäume, die Sie sparen würden, indem Sie einfach hinzufügen #comments { display: none; } zu Ihrem Druck-Stylesheet. Andererseits sind Kommentare in einigen Blogs von großem Wert und enthalten eine gute Diskussion.
Indem Sie die Kommentare auf ihre eigene Seite verschieben, geben Sie den Benutzern die Wahl, ob sie sie drucken möchten. CSS hat eine Eigenschaft, die das sehr einfach macht:
[css] #comments {page-break-before: immer;} [/ css]Zum Beispiel, wenn Ihr Artikel zweieinhalb Seiten lang ist, würden die Kommentare von Seite 4 bis etwa 6 laufen. Benutzer könnten in der Lage sein zu wählen, welche Seiten gedruckt werden sollen, ohne irgendwelche Informationen zu verlieren.
10. Zeigen Sie eine Nur-Druck-Nachricht an
" Danke, dass Sie diesen Artikel gedruckt haben! Bitte vergiss nicht, zu neuen Artikeln auf mysite.com zurückzukehren. "Warum nicht eine freundliche Nachricht wie diese im Ausdruck anzeigen? Oder bitten Sie die Leser, das Papier zu recyceln, mit dem sie die Umwelt schonen.
So würde das aussehen:
Vielen Dank für das Drucken dieses Artikels. Bitte vergiss nicht, zu neuen Artikeln auf mysite.com zurückzukehren.
[css] #printMsg {display: block;} [/ css] Sie könnten auch ein bisschen Styling hinzufügen, etwa eine 1-Pixel-Grenze. Vergiss nicht hinzuzufügen #printMsg { display: none; } zu Ihrem normalen Stylesheet, um die Besucher nicht zu verwirren.
Vitrine
Hier sind einige Beispiele von bekannten Webseiten, die über das Druck-Stylesheet nachgedacht (oder vergessen) haben. Fühle dich frei, inspiriert zu werden.
Sieht gut aus:
Hier sind einige Websites, die mit ihren Druckvorlagen eine gute Arbeit leisten:
24 Wege : Die Website für diesen "Adventskalender für Web-Geeks" hat ein schickes Design, aber ich habe mich gefragt, wie es im Druck aussehen würde. Das Ergebnis ist wirklich nett. Das glatte CSS 3 Zeug wurde entfernt. Das Layout ist sauber und trotzdem glatt. Das große Branding wurde entfernt und durch ein einfaches rechtsbündiges "24 Ways" neben dem Titel der Post ersetzt.
ThinkVitamin : Carsonifieds Blog ist ein gutes Beispiel dafür, wie man Stylesheets druckt. Keine echten Schwachstellen, außer dass das Ziel der URL nicht angezeigt wird.
CSS-Tricks : Chris Coyier von CSS-Tricks.com hat mit seinem Druck-Stylesheet gute Arbeit geleistet. Er hat alle Unordnung beseitigt und Kommentare auf eine neue Seite verschoben, so dass Benutzer wählen können, sie nicht zu drucken.
Könnte etwas Arbeit gebrauchen
Hier sind einige Websites, die bereits großartig sind, aber deren Druck-Stylesheets ein bisschen Glanz gebrauchen könnten. Nichts für ungut in diesem Abschnitt.
Webdesign Hauptbuch : Webdesign Ledger scheint seine Druckvorlage nicht beachtet zu haben. Wenn Sie auf "Drucken" klicken, erhalten Sie drei Seiten mit Anzeigen und zugehörigen Links.
Die Designkabine : Brian Hoff scheint auch seine Druckvorlage vergessen zu haben. Wenn Sie einen Artikel ausdrucken, erhalten Sie auch das Kommentarformular.
Flickr : In der Lage zu sein, Fotos auszudrucken, um sie Freunden zu zeigen, wäre nett. Flickr hätte alles außer dem Bild selbst und den Copyright-Informationen in den Ausdrucken entfernen können. Aber alles erscheint in unformiertem HTML.
Ressourcen
- Praktische Tipps zum Erstellen eines gedruckten CSS-Stylesheets von Line25
- Stylesheet drucken: Das definitive Handbuch
- CSS Design: Zum Drucken
- CSS-Tricks bekommt endlich ein Druck-Stylesheet
Geschrieben exklusiv für WDD von Pieter Beulque. Er ist ein Student und Web-Entwickler , lebt in Belgien. Sie können ihm folgen Twitter auch.