Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt – das Drucklayout

Kunden wollen den Inhalt ausdrucken und den lesbar. Biete dies mit einer print.css. Auch ausgedruckt noch eine gute Figur machen und dem Inhalt den meisten Platz einräumen.

Drucken und PC sind siamesische Zwillinge. So lernt jeder PC Neuling relativ rasch, dass sich oben Links beim Browser unter dem Wort “Datei” die Druckmöglichkeit versteckt, wenn er das Druckersymbol nicht findet.

Mittlerweile löst es bei vielen Menschen Verwirrung aus, wenn diese Funktion woanders zu finden ist. Wieso auch immer, dies hat sich als (Web)Standard etabliert.

Standards erleichtern uns die Bedienung vieler Geräte deren Hintergrundtechnik wir nicht verstehen, die wir jedoch benutzen wollen und können.

Webstandards sind da nicht anders.

Mit einer print.css kann man das Drucklayout gestalten. Viele Menschen wollen Artikel ausdrucken und dann offline nachlesen.

Oftmals wird dies jedoch zur unendlichen Papierflut, weil man vergaß ein Drucklayout für die eigene Homepage anzugeben. Unabhängig davon weiß jeder aus eigener leidvollen Erfahrung Druckerpatronen sind irr teuer.

Man mag nichts anders als einen Artikel und auf einmal rattert der Drucker 14 Seiten buntest raus. Navigation, Formularfelder etc. kommen gleich mit.

Oder die Homepage hat einen schwarzen Hintergrund mit weißer Schrift. Da ist eine Tintenpatrone schneller leer als man schauen kann… :(

Drucklayout print.css
 Screenshot des Drucklayouts von WebDesign in de .print.css

Oder Frames- ja es gibt sie noch und dann dort den Inhalt ausdrucken – dies ist die hohe Kunst schlechthin. Portale oder Blogs mit zwei Sidebars – wozu all diese Links ausdrucken?

Wozu Adsense, Banner etc mitdrucken lassen …

Ein Drucklayout anzubieten ist für mich somit einfach ein Akt der Höflichkeit. :zwinker: Webstandard sowieso und außerdem verschwindet dann ganz automatisch wieder eine “Barriere” – also auch ein “Muss” des barrierenfreien WebDesigns.

Wieso heißt die Drucklayout Datei “Print.css”

Einfach damit man als WebDesigner, Webmaster den Durchblick bei all den verschiedenen CSS Dateien nicht verliert. ;)

Man kann sie auch drucklayout.css oder hastenichtgesehen.css nennen, wobei letzteres kaum Widererkennungswert hat…

Wie wirkt diese Print.css

Links oben ist bei 99,999999% aller Browser die Angabe: Datei==>Drucken. [File=>print] Oder der Browser bietet bereits ein Druckersymbol an. Und genau diesen Ausdruck gestaltet eine print.css.

Wie verlinkt man eine Print.css korrekt im HTML Header.

	<link rel="stylesheet"
   type="text/css"
   media="print"
   href="../print.css" />

1. Schriftfarbe, Hintergrundfarbe, Schriftgröße definieren und alle Hintergrundbilder verbieten:

Schriftgröße gibt man für den Druck mit pt angegeben wird. “pt” ist die Angabe aus dem Druck und hat nur dort etwas verloren.;)

Das !important sagt:unbedingt musst Du das tun.

body{
       font:11pt/120% Arial, serif;
       background-color: white !important;
       background-image: none !important;
       color:black;}

2. Floats müssen aufgelöst werden in einer print.css

Die Angabe “float” bewirkt beim Ausdruck ein “Ineinanderfließen” diverser Elemente. Niemand mag, dass das Bild über den Text ausgedruckt wird. D.h. alle Angaben in der normalen style.css durchgehen und überall wo ein “float” vorkommt zusammenfassen und dann verbieten:

z.B.:

dl, 
dt, 
dd {
      float:none !important;}

Wenn jemand etwas ausdrucken mag, dann deswegen, weil ihm der Inhalt interessiert.

Daraus folgt muss alles weggeben, was nicht zum Inhalt gehört.

Display:none

wird der große Freund beim Erstellen einer Print.css.

3. Alles was man nicht ausdrucken mag bei der Anzeige verbieten:

z.B. hier auf WebDesign in de ist dies derzeit (Frühjahr 2007 )

div.footerinnen small,
div.footerinnen img,
.invisible,
.postmeta,
.navigate,
.navigate01,
div.navinnen ul,
.postinnen .sidebar,
.commentline,
.ohne,
#commentform,
.aehnliche,
.top{
             display:none;}

4. Die Links – die Verweise speziell gestalten:

Ein bisschen Farbe darf es schon sein.

a:link,
   a:visited {
         color: #7A1E19;
         background:white;
          text-decoration:none;}

4.a Oft hat man ja Bilder, die als Link genutzt werden:

 
img,
img a:link,
img a:visited{
            border-bottom:1px solid #C30099;
            margin-right:12px;}

4.b. Bei Links kann man auch die URL anzeigen lassen, auch wenn dies nicht jeder Browser kann:

Bei mir sind dies die Links, die in der CSS class “content” zu finden sind. Anpassen nicht vergessen und bitte auch die eigne Domain angeben.

.content a:link:after,
	.content a:visited:after {
   	content: " ("attr(href)")";
   	font-size: 90%;}
 
.content a[href^="/"]:after {
   content: "(http://www.webdesign-in.de" attr(href)")"; }

5. Abkürzungen anzeigen lassen.

Oft ist es sinnvoll die benutzten Abkürzungen auch bei der Print.css anzuzeigen.

 
acronym[title]:after, 
  abbr[title]:after {
            content: ' (' attr(title) ')';}

6. Code speziell gestalten .

Ich habe hier die ganzen Codebeispiele speziell gestaltet. Damit diese Codebeispiele auch im Drucklayout gut aussehen nutze ich diese Angaben:

Eine spezielle Schriftart. Das overflow auto löse ich mit overflow visible wieder auf. Die Höhe soll sich automatisch ergeben. Da ich eine andere Farbe hier anzeigen lasse, gebe ich extra nochmals die Farbe und die Hintergrundfarbe für den Ausdruck an. Sicher ist sicher ;)

pre,
code {
    font:10pt /2em  "Courier New",Courier, monospace;
    color: black;
    background:white;
    margin-left:2px;
   padding:1em;
    border-left: 1px solid #930;
   overflow:visible!important; 
   white-space:normal;
    width:90%;
    height:auto;}

7. Gustostückchen und spezielles nicht vergessen:

Dies ist von Layout zu Layout unterschiedlich.

h1,h2,h3,h4,h5,h6{font-size:13pt;line-height:110%;margin:0;padding:0;}
div.content,
div.contenth {margin-left:0.8em;padding-top:1em;}
h3.comments{font-weight:normal;font-size:11pt;}
body img.wp-smiley {border:none;}

Damit man auch weiß woher man sich was ausgedruckt hat und ich dies nicht dem Zufall überlassen mag, ob jemand die Kopf und Fußzeile des Standarddrucklayouts beibehalten hat. Habe ich im Footer hier den Namen der Domain stehen und den lasse ich auch ausdrucken.

Man könnte natürlich auch ein einfaches, kleines Logo nur für den Ausdruck machen.

Das ganze wirkt recht viel und lang, doch die print.css von WebDesign-in.de sieht derzeit so aus:Es ist eine Textdatei wie alle CSS Dateien:Print.css.

Zusammenfassung der wichtigen Punkte für ein Drucklayout einer print.css.

Was muss die print.css alles angeben, damit der Ausdruck gut lesbar ist.

  • Das Hintergrundbild und das Logo ist unnötig. Besser ist ein weißer Hintergrund eine schwarze Schriftfarbe.
  • Die versteckten Anweisungen sind unnötig.
  • Ebenso die Navigation.
  • Die Anweisung “float” muss aufgehoben werden, damit keine Inhalte überlappen.
  • Überschriften und Links im Text benötigen eine andere Farbe.
  • Links im Text mag man sichtbar machen, damit der Kunde weiß wo er weiteren guten Inhalt findet. (Dies funktioniert nicht, wenn der Kunde den Internet Explorer nutzt, aber diese Anweisung stört den Browser auch nicht.)
  • Die Kommentarfelder sind unnötig.
  • Die Angabe wo was wann abgespeichert wurde und die Hinweise auf die Kommentarfunktion sind unnötig.
  • Die Breite des Inhaltes muss vergrößert werden, um die volle Breite einer A4 Seite auszunutzen. Oder zumindest nicht unnötig verkleinern.
  • Die Schriftgröße muss für Printmedien angegeben werden also in “pt”.

Andere zum Thema:Print.css und Datei drucken:

  1. Alistapart.com . Ein noch immer gültiger Artikel aus dem Jahr 2002!
  2. Intensivstation
  3. Und natürlich SELFHTML: Print.css

Übesetzungen

Ganz herzlichen Dank an Bohdan Zograf, der diesen Artikel in Belorussian übersetzte. Designcontest.

Artikelhistorie:

Erstfassung:09.10.05
geändert am 14.04.2011 Übersetzung hinzugefügt.

mts


Basis Know-how CSS
InternetmarketingInternetmarketing Buchempfehlung

Top

13Kommentare zu : Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt – das Drucklayout

10 Kommentare
  1. Max
    1

    Hallo,

    hab lang nicht mehr hier gelesen.

    ich sehe du hast ein neues design. es sieht sehr schön aus und freundlicher als das alte.

    Aber:
    “6. Ihr Produkt in den Mittelpunkt stellen.”
    Sollte man nicht den Kunden in den Mittelpunk stellen? Web 2.0 mäßig?

    gruß Max

  2. 2

    Herrje, das auch noch:
    Da hat man endlich eine Site runtergebogen, der Kunde ist zufrieden und zahlt brav – und dann noch an die print.css denken…? ;-)
    Naja, wirklich viel Aufwand ist es nicht und sollte eigentlich Standard sein. Danke für die wirklich guten Tipps zu diesem etwas unterbelichteten Thema.

  3. Autor mts von WebDesign-in.de mts
    3

    Hi Max

    wenn jemand was ausdruckt, weil er das lesen mag, weils ihm wichtig ist, daher ist es doch mehr als sinnvoll, dann das Produkt in den Mittelpunkt zu stellen und keineswegs die Navi;)

    chio
    yepp
    “wir” WebDesigner tun doch sogar alles, um die Seiten der Kunden richtig zu verlinken :zwinker:

    lg

  4. 4

    Ich bin froh das unser CMS dieses für uns übernimmt :)
    Wenn ich überlege, ich müsste das in den einzelnen Beiträgen einfügen.
    Eins muss ich hier aber noch los werden, gedruckte Sachen lesen sich auf jeden Fall besser als am Monitor.
    Mateusz 100onlinedruckereien

  5. Autor mts von WebDesign-in.de mts
    5

    Mateusz
    ich mache das auch nicht für jeden einzelnen Artikel versuch es einmal hier ;)

    das ist eine Datei die für die ganze Website arbeitet

    lg

  6. agy
    6

    Danke für diesen Artikel, genau das hab ich gesucht, weil ich das für mich umsetzen wollte!

  7. 7

    Wow, vielen Dank für die gute Zusammenfassung. Sehr übersichtlich.
    Ich frage mich, ob auch ältere Browser beim Drucken von selbst auf die CSS-Datei zurückgreifen.

  8. 8

    Vielen Dank für die Mühe! Habs gut gebrauchen können. Übrigens, sehr schönes Screendesign…bist Du die Dame mit dem Hut?
    Gruß
    Artur

  9. Autor mts von WebDesign-in.de mts
    9

    na aber ganz sicher doch Artur ;)

  10. 10

    Richtig schöner Artikel, danke für die gute Erklärung. Top Seite. :)

3 Trackbacks
  1. Ilona`s Tagebuch, [ 09.03.06 um 18:36 ] Drucken Drauf gebracht hat mich gestern meine Mum, die sich beschwerte, dass man meine Tagebucheinträge nicht vernünftig ausdrucken könne. Daran ...
  2. WordPress als CMS nützlich für Vereine - WordPress Theme WP Contact Manager - in deutsch, [ 25.02.08 um 18:56 ] [...] ganz einfach ausdrucken indem man beim verwendeten Browser auf Datei ==>Drucken geht. Ein eigenes Druckstyle ist dafür von mir ...
  3. Seiten drucken: div-Bereiche EINschlie, [ 11.04.10 um 15:12 ] [...] [...]
  4. Tweets
WebDesign Angebot

mein Angebot

Ich biete benutzerfreundliches, barrierefreies WebDesign und InternetMarketing, denn was nützt die schönste Homepage, wenn sie keiner findet. Schalk und Support ist inclusive.
Kontakten Sie mich einfach » E-Mail

InternetMarketing Angebot

Mieten Sie meine Kreativität

Ich habe jede Menge Idee und Können, wie man auch ihren Shop, ihre Homepage und ihr Business im Internet bekannt macht.
Kontakten Sie mich einfach » E-Mail

WebDesign Preise

Preise by mts

Professionelles WebDesign ist eine Investition. Billig und günstig sind andere ..ich bin gut und bezahlbar.
Kontakten Sie mich einfach » E-Mail


Achtung: Sie haben JavaScripts und/oder CSS deaktiviert. Sie können diese Inhalte nutzen, einiges an Funktionen steht jedoch nicht zur Verfügung.

Zu den Inhalten springen

« zurück

vor »

  • WebDesign Icon

    WebDesign

    WebDesign ist mehr als Grafik- und Printdesign. WebDesign und Website Marketing sind Geschwister. Rund um WebDesign.
  • WebDesign Tutorials Icon

    WebDesign Tutorial

    Kein WebDesigner fällt vom Himmel. Mal ein Online Shop, mal Community, mal Web 2.0 social Media oder Wiki. Erfahrungen uvm.
  • CSS Icon

    CSS

    Ich habe zig CSS Beispiele, Erkenntnisse irgendwo auf der Festplatte meines PCs und Gehirns. Ich gebe diese gern weiter :-).
  • InternetMarkering Icon

    InternetMarketing

    Wie verkauft man im WWW unter Ausnutzung der SUMAs, der Social Media Dienste. Internet Marketing Praxis uvm..
    und Website Promotion
  • SEO Icon

    SEO

    SEO ist weder Geheimwissen noch 0815 Tätigkeit, - schlicht notwendig für den Erfolg im WWW. Meine Erfahrung mit SEO.
  • Internet Recht Icon

    Internet Recht

    Was tun bei Abmahnungen. Rechtsfallen sind u.a. free Download, Fotos, Marken, Forum, Kommentare. Wo gibt es Hilfe.
  • Schokolade Icon

    ..und außerdem ...

    mein Blog | mein Netzwerk | barrierefreies WebDesign | Usability im WebDesign | Net-Lexikon | WordPress Themes

©  2004 - 2012Professional Webdesign barrierefrei auf WebDesign-in.de, ImpressumImpressum Lizenz||Top