Startseite » QR-Code für diese Seite

WordPress: Druckansicht optimieren

24 August 2010, 21.747x angezeigt, 3 Kommentare
Tags: , , , , , ,
Die Webseite in deiner Hand? Offline Web! :)

Die Webseite in deiner Hand? Offline Web! :)

Die Druckansicht von WordPress zu optimieren machen nicht viele Blogger. Dennoch gibt es viele Leute die sich Artikel ausdrucken um diese Offline weiterzugeben (Mein Papa druckt mir z.B. gelegentlich etwas aus dem Web aus). Deshalb macht es durch aus Sinn, eine Druckansicht für WordPress zu gestalten, damit der Ausdruck auch ordentlich aussieht.

Was ist zu beachten?

Bei einer Druckansicht gibt es gar nicht so viel zu beachten. Ohne irgendwelche Änderungen ist jede Webseite druckbar. Oft sieht dies aber auf dem Blatt nicht so aus, wie es sollte. Damit die technische Grundlage geschaffen wird, sollte folgendes beachtet werden.

Eigene CSS/Keine andere Seite
Viele CMS Systeme generieren eine spezielle Druckansicht(Kenne ich von vielen alten TYPO3 Seiten [type=99]). Dies ist in gleich mehreren Fällen falsch! Erstens muss der Besucher eine zusätzliche Seite laden, obwohl das was er Drucken möchte schon vor ihm auf dem Monitor zu sehen ist. Zudem können durch Fehlkonfigurationen die Druckseiten bei Google im Index landen. Oft ist mir schon der Fall vorgekommen, dass ich bei Google etwas gesucht habe und dann auf einer Druckansicht gelandet bin.

Damit man keine extra Seite generieren muss, hat CSS extra einen media-Attribute, womit man bestimmen kann, für welches Ausgabemedium die CSS gilt. Kopiert in eurer header.php des Themes einfach die CSS Zeile und ändert den Dateinamen auf “print.css” und den media-Typ auf auf “print” (Siehe Screenshot unten). Im Anschluss könnt ihr eure Print-CSS-Datei anlegen.

So sieht der Code aus...

So sieht der Code aus...

CSS bzw. der Druck allgemein hat jedoch auch seine Nachteile. Nicht alles funktioniert einwandfrei. So sind z.B. Hintergründe zwar im Druck möglich, aber in den Browsern standardmäßig deaktiviert. Arbeitet also nicht mit „Background-Image“!

Druckansicht gestalten!

Um die Druckansicht nun exakt an die Bedürfnisse der Zielgruppe anzupassen, muss jeder seine eignen Vorkehrungen treffen. Hier bei 360friends.de bin ich z.B. so vorgegangen:

Ich habe in die normalen CSS Datei eine „printOnly“-Klasse und in der print-CSS eine „noPrint“-Klasse angelegt. Beide Klassen enthalten
ein einfaches „display: none“. Dadurch kann ich wunderbar über das XHTML Markup einzelne Elemente explizit für den Druck einfügen oder aus dem Druck ausschließen.

Ich empfehle euch nun folgende Elemente nicht mit in den Druck aufzunehmen:

  • Menüs
  • Sidebar-Elemente (wie z.B. Archiv, Tag-Cloud, Blogroll)
  • Unwichtige Header und Footer Informationen (z.b. Social Icons)
  • Formulare

Der Rest sollte mit der print-CSS so aufbereitet, dass der Druck optisch gut aussieht. Es ist somit wichtig, dass die Schrift groß genug ist, der Kontrast hoch ist (also schwarz auf weiß!) und wenig Farben benutzt werden. Sind alle unwichtigen Elemente mit “noPrint” versehen, macht der Druck schon einen aufgeräumten Eindruck. Nicht ganz sicher war ich mir bei den Kommentaren der Posts. Ich habe diese aber schließlich mit in den Druck aufgenommen.

QR-Code auf dem Ausdruck

QR-Code auf dem Ausdruck

Perfektion

Wenn man sich Gedanken über den Druck macht, dann ist der Drucker der Weg vom Web auf das Papier. Wenn das Blatt mit dem Druck nun aber weitergegeben wird, ist der Weg zurück meistens schwer. Browser drucken zwar die URL in eine der Ecken, jedoch ist diese meistens lang und keiner will diese abtippen.

Deshalb habe ich mir überlegt, dass es einen Weg vom Druck zurück auf die Webseite geben muss. Das Resultat ist ein QR-Code, welcher bereits hier auf 360friends.de vorgestellt wurde. Der QR-Code wird beim normalen laden der Seite bereits mit geladen und bekommt einfach die Klasse “printOnly”. Der Code ist gut sichtbar ganz oben auf dem Druck untergebracht, sodass man schnell zurück zum Post kommt.

Resultat

Wie man die Druckansicht optimieren kann, schaut ihr euch am Besten an dieser Seite an. Ich habe großen Wert auf die Detail-Seiten gelegt und weniger auf die Listings. Also einfach mal in ein PDF drucken und schauen was man mit ein paar Zeilen CSS so machen kann.

Habt ihr noch weitere Ideen oder Beispiele? Was haltet Ihr von der QR-Code Idee?

Tim Lochmüller Autor
Name: Tim Lochmüller
Webseite: http://360friends.de
Posts: 272 Posts

3 Kommentare »

  • Philipp
    Philipp sagt:

    Du bist mein Held :-) NOT BAD
    Finde aber das der QR-CODE ein wenig zu groß ausfällt. Vielleicht auch auf jeder Druck-Seite?
    Gruß Philipp

  • Sebastian Pertsch
    Sebastian Pertsch sagt:

    Hallo Tim,

    danke für die Antwort, ich habe Dir hier http://blog.rockbaer.de/1598/wordpress-3-optimiertes-drucken-qr-code.html zurückgeschrieben :-)

    Schöne Grüße
    Sebastian

  • Sebastian Pertsch
    Sebastian Pertsch sagt:

    Hallo Tim, ich hab gerade einen dicken Serverumzug hinter mir… es hat sich das Design komplett geändert, aber vor allem sind die Seiten nun unter einer anderen Adresse erreichbar: Nur, falls jemand weitere Inspirationen zum Thema finden möchte: http://www.rockbär.de/1598/wordpress-3-optimiertes-drucken-qr-code.html Schöne Grüße und weiterhin viel Erfolg!

Hinterlasse einen Kommentar/Leserbrief!

Füge deinen Kommentar hinzu oder sende einen Trackback von deiner Webseite aus.
Du kannst zudem die Kommentare via RSS abonnieren .

Sei freundlich! Halt dich ans Thema! Kein Spam!

Mit dem Absenden bestätigst du, dass es sich um keinen Spam handelt.