Drucken von Webseiten Technikwürze 47

Herzlich willkommen zur Technikwirt zu eurem Design und Webstandards Podcast in Ausgabe siebenundvierzig. Heute ist Montag, der zwanzigster Elfte zweitausendundsechs. Heute geht es im ganz Speziellen um CSS, und zwar um drucken von Webseiten. Stand der Dinge, Probleme, Lösungen und Ausblick. Ich trage vor einen, Artikel von Björn Seibert, den er verfasst hat auf seinem Blog bsmarkup.de und ich habe Björn auch noch im Interview.

In dieser Ausgabe geht es unter anderem um drucken von Webseiten, Stand der Technik, Probleme, Lösungen und Ausblick. Der Artikel ist von Björn Seibert und den begrüße ich jetzt am Skype Interviewtelefon. Grüß dich, Björn.

Hallo David, hallo liebe Hörer. Nach ein paar technischen Schwierigkeiten, die ich hier bei der Aufnahme hatte, hoffe ich mal, dass wir das Ganze jetzt hinkriegen.

Deinen Artikel werden wir jetzt gleich noch mal hören. Noch mal kurz: Worum geht es in dem Artikel? Fass das noch mal kurz zusammen. Es geht darum, dass ich mich, auf der Arbeit mit dem Thema drucken von Websites näher beschäftigt habe, da wir dort einige, na ja, kleinere Probleme mit dem Ausdruck von komplexeren Sachen haben und, hab mir dann bei dieser Gelegenheit mal einen Überblick verschafft, wo wir derzeit stehen, welche Möglichkeiten bestehen, Inhalte im Web auszudrucken. Super.

Dann würde ich sagen, hören wir erst mal rein und, nach dem Beitrag, kommen wir beide dann noch mal. XHTML und CSS. Drucken von Webseiten, Stand der Technik, Probleme, Lösungen und Ausblick. In vielen Fällen wollen die User ihre besuchten Webseiten ausdrucken, doch das erweist sich mitunter als schwierig. Als Webdesigner kann man mit CSS gestalterisch eingreifen und die Druckausgabe optimieren. Doch das wird bisher leider allzu oft noch sehr stiefmütterlich behandelt.

In den letzten zwei, drei Jahren hat sich daher nur wenig geändert. Schnell stößt man hierbei nämlich an gewisse Grenzen, sobald es sich um mehr als den einfachen Ausdruck handelt. Warum auch im Web gedruckt wird? Das Drucken von Webinhalten erfolgt aus zwei verschiedenen Motivationen heraus. Ausdruck ganzer Webseiten, zum Beispiel Screenshot, Ausdruck konkreter Inhalte, zum Beispiel Fahrpläne, Ergebnislisten oder Textpassagen. Was soll nicht gedruckt werden?

Nicht gedruckt werden sollen Navigationsmenüs, Werbebanner und Ähnliches. Grafiken, die mit den Inhalten in Wort und Schrift in Verbindung stehen, sprich Informationen transportieren, werden mitgedruckt, sofern man dies nicht mit CSS unterbindet. Die Praxis. Es gibt zwar in den meisten Content-Management-Systemen integrierte PDF-Lösungen zur Bereitstellung von Funktionen zum Ausdruck an der Webseite, doch nicht immer werden CMS eingesetzt. Zudem haben PDF-Dokumente auch Nachteile.

Eine schnelle und elegante Methode ist die direkte Ansprache des Druckers über ein für ihn aufbereitetes CSS Stylesheet. Im Blogbeitrag von technikwirtse.de könnt ihr ein Beispiel von A List Apart sehen, auf das Wesentliche reduziert und dennoch ansprechend aufbereitet. Sekundäre Inhalte, Werbebanner und Navigation wurden ausgeblendet. CSS genügt. Probleme und Lösungen.

Allgemein hat man als Webdesigner vor allem mit der fehlenden Unterstützung essentieller CSS-Eigenschaften für den Druck zu kämpfen. Gerade der Internet Explorer, auch in der Version sieben verhindert spezielle Optimierungen vom Webinhalten für den Druck. So lässt sich in diesem Browser und damit für einen Großteil der Besucher das Pseudoelement After nicht benutzen. Mit seiner Hilfe kann man hinter einem Element Inhalte ausgeben, zum Beispiel die URL hinter den Links.

Das macht durchaus Sinn, denn Links lassen sich auf einem bedruckten Papier nun mal schlecht anklicken. Will man die IE-Browser in dieser Form unterstützen, muss man die Adresse zusätzlich angeben oder sie eben ganz weglassen. Problem eins: Verwirrte User. Viele User erwarten als Ausdruck eine exakte Kopie der Webseite auf dem Bildschirm. Fehlen bestimmte Elemente im Druck, könnte dies unter Umständen zu Irritationen führen.

Könnten die User aber auch nicht positiv überrascht sein und sich freuen, dass man sich die Mühe gemacht hat, das Druckbild für sie zu optimieren, damit diese Druckertinte sparen können? Schwer zu sagen. Manche meinen sogar, man würde die Benutzer in diesem Falle bevormunden. Wer das Druckbild optimieren möchte, hat mehrere Möglichkeiten. Man könnte das Logo der Firma beispielsweise mit ausgeben, um den Besuchern eindeutig anzuzeigen, von welcher Seite sie den Druck angefertigt haben.

Auch hilfreich sind Hinweistexte am Seitenanfang. Druckversion von, im Web HTTP Link Punkt HTML. Diese Elemente kann man im HTML Quelltext einbinden und mit CSS für die Ausgabe am Bildschirm verstecken. Dass die Benutzer ein genaues Abbild der Webseite beim Druck erwarten, hängt mit der Erwartung bei der Tastenkombination Strg und P unter Windows und Apfel P beim Mac zusammen. Diesen Usern kann man aber mit einem Link, Druckversion des Artikels, behilflich sein.

So kann man explizit auf eine druckoptimierte Ausgabe des Artikels verweisen. Der Besucher wird dann mit hoher Wahrscheinlichkeit nicht mehr die exakte Ausgabe der Webseite erwarten. Problem zwei: Hintergründe und Farben. Hintergründe und Farben werden von den Druckern zunächst ignoriert. Das ist auch so vorgesehen, um Ressourcen in Form von Tinte und Toner zu sparen. Die User können das in den Einstellungen aber auch ändern. Doch dies ist nur den wenigsten tatsächlich bekannt.

Wer mag, kann die User auf der Webseite ja entsprechend über Einstellungsmöglichkeiten informieren. Im Prinzip muss man sich mit den fehlenden Hintergründen und Farben arrangieren. Da aber vordergründig Informationen in Textform gedruckt werden sollen, sollte auch dies eigentlich gar kein Problem darstellen. Ist denn PDF eine Alternative? Der Druck von Webinhalten über generierte PDF-Dokumente bietet sich vor allem beim Druck von längeren Dokumenten und Dokumentationen an.

PDF-Dokumente sind vom Dateivolumen her aber unter Umständen groß, was zu längeren Ladezeiten beim Benutzer und erhöhtem Traffic beim Betreiber führen kann. Auch bei den Softwarelösungen PDF Creator und Boom, die beide PDF erzeugen, spielt CSS eine Rolle in der Darstellung. Die genannten Probleme bestehen also auch hier weiterhin. Über alternative Lösungen sollte man sich daher unabhängig vom Ausgabeformat Gedanken machen. Ansehen sollte man sie sich auf jeden Fall.

Das Fazit: Man sollte die User mit in die Überlegung zum besseren Druck von Webinhalten einbeziehen und ihnen nicht kommentarlos stark abgewandelte Ausdrucke vorsetzen. Dazu genügt meist schon ein kleiner Hinweis. Sollte ein Benutzer ausdrücklich den Wunsch haben, die ganze Seite im Original-Layout auszudrucken, könnte man ihn optional auf die Programme wie zum Beispiel URL to BMP für Windows oder die beim Mac integrierte Druckfunktion Apfel, Shift und drei verweisen.

Vielen Besuchern dürfte es aber nur recht sein, wenn man ihre Druckpatronen schont, indem man ihnen möglichst übersichtliche und gut lesbare Dokumente anbietet. Das war der Artikel von dem Webdesigner Björn Seibert, veröffentlicht auf beasmarkup.de. Diesen Text könnt ihr auch nachlesen auf dem Blog von Technikwürze.de. Dort findet ihr auch Links zu Artikeln zum Thema Druck mit CSS, Referenzen und Tutorials und die PDF-Lösung PDF Creator und Boom. Interview. So Björn, das war dein Artikel.

Du hast auf der Arbeit natürlich sehr viel in dieser Richtung experimentiert. Auf was für Probleme bist du da dabei gestoßen? Ja, die größten Probleme bestehen eben darin, dass standardmäßig die Hintergründe und Farben nicht ohne Weiteres gedruckt werden. Und da haben wir unter anderem auch lang hin her überlegt, wie wir das lösen. Ja. Und sind eben zu der Entscheidung gekommen, dass wir diese relativ einfachen Druckversionen anbieten- Ja.

-weil, wir das bei der Zielgruppe, die diese Webapplikation später nutzen soll, den Nutzern einfach nicht, zumuten können- Ja. -dass sie wissen, wie man ein Druckbild im Querformat einstellt oder dass man überhaupt Hintergrundgrafiken und Farben zulässt zum Drucken. Ja.

Also war der Fokus, einerseits beim Kunden damals, dass der gesagt haben könnte: „Ich möchte die Webseite so drucken, wie ich sie am Bildschirm sehe.", und ihr habt euch dagegen entschieden, sodass ihr gesagt: „Nein, wir machen jetzt eine optimierte Version", oder war es von vornherein eigentlich das Ziel, eine optimierte Druckversion zu erstellen?

Nee, das war von vornherein das Ziel, weil diese Webanwendung, die hat so den klassischen Aufbau Header, 'ne rechte, auf der rechten Seite eine Sidebar. Ja. Oben die Navigation. Gut, diese Inhalte will man ja nicht drucken. Richtig, genau. Die stören, sind unrelevant für den Inhalt. Ja. Und klar, also wir haben ganz normal diese Bereiche ausgeblendet, haben uns auf den Content konzentriert und den eben für einen Ausdruck optimiert. Wobei wir hatten da auch ganz schwierige Fälle. Ja.

Da gibt es ein etwas komplexeres Formular, das auch in der realen Welt genutzt wird. Das ist der sogenannte Mutterpass für Schwangere. Das wird vielleicht einigen ein Begriff sein. Und wir mussten unter anderem versuchen, dieses Ding überhaupt mal in HTML und CSS zu übertragen und, am Ausdruck sitzen wir jetzt auch noch.

Da werden wir wahrscheinlich- Das heißt, die erste Schwierigkeit war es dann, das ins Web zu bringen und die zweite Schwierigkeit ist, das denn druckkompatibel zu machen, nenn ich es jetzt mal. Genau, weil dieses Ding, das ist in der Druckversion so angelegt, dass man es ausklappen kann. Ja. So, und, wir haben das Problem, wir müssen versuchen, das irgendwie auf eine DIN-A4-Seite zu bringen oder relativ elegant noch auf zwei Seiten. Ja.

Weil man den, die Mütter müssen das praktisch als ein Dokument ausdrucken können. Ah, verstehe. Mhm. Und da wird jetzt- So ähnlich wie beim Finanzamt, dass ich da meine zwei Brieflein kriege und füll da irgendwas aus. Also das war auch das Ziel, dass alles möglichst kompakt und übersichtlich dann ist im Ausdruck, ne? Mhm.

Wobei in dem speziellen Fall, da wird jetzt auch von der, es gibt noch eine Entwicklungsabteilung, da prüfen wir derzeit Lösungen mit, die Daten, die sowieso als XHTML irgendwo vorliegen. Als komplettes Paket, dass wir da mit XSLT arbeiten. Ja. Weil wir sehen im Moment bei CSS, wir versuchen's im Moment umzusetzen, aber es wird sehr schwierig. Das heißt, wäre diese Umsetzung dieses Mutterpasses möglich mit reinem HTML und dem, Stylesheet über CSS, für den Print?

Würde das ausreichen oder reicht das eben nicht aus und du sagst: "Nein, wir müssen über XSLT gehen"? Nee, es würde im Prinzip ausreichen. Das ist natürlich, ganz oft muss man dann natürlich vorher mal mit Produktmanagern sprechen, was die dazu meinen. Und, im Besonderen muss man natürlich versuchen, die Leute auch davon zu überzeugen, dass eben so ein gedruckter Mutterpass, den es schon seit Jahrzehnten wahrscheinlich gibt- Ja.

-in dieser Form eben, na ja, nicht mehr ganz zeitgemäß ist und schon gar nicht, zum Gebrauch im Internet. Ja. Vielleicht gehen wir auch ganz alternative Weg mit dem Dokument, aber das werden wir jetzt in den nächsten Wochen sehen. Für PDF habt ihr euch, nicht entschieden, sondern eben für die XSLT-Methode? Also die Daten, die liegen in XML vor, ja. Die kommen von irgendeinem Server. Ja.

Und, werden so praktisch kommen sie in die Webanwendung rein und wir stellen sie ganz normal HTML CSS-mäßig dar in dem Rahmen. Wobei, wenn's in die Tiefen von XML geht, XSLT, da hab ich mich noch nicht so sehr damit beschäftigt. Da haben wir auch Leute, ja, mit denen ich das mache. Also ich kann das bei denen quasi bestellen. Genau, was aber problemlos möglich ist, ist sag mal für deine privaten Webseiten, die richtest du dann schon so ein, dass du 'n Print-Style in CSS einstellst, ne?

Ja, auf jeden Fall. Also da hab ich mich auch bemüht bei meiner Seite oder beim Webdev-Bits, dass da die Druckausgabe einzelner Artikel, zum einen gut lesbar ist, aufs Wesentliche, reduziert ist. Ja, und ich denk, die sehen auch ganz gut aus. Gibt es 'n Print-Style Sheet bei deiner Privatwebseite BSMarkup.de? Ja, das gibt's auch, wobei das an einigen Stellen... Also ich sag, meine Artikelansicht ist jetzt richtig gut für mein Dafürhalten.

Wobei, wenn ich jetzt die normalen Contentseiten nehme, gehen einige Informationen verloren dadurch, dass ich die Sidebar ausblende. Ja. Wobei das sehe ich als weniger kritisch. Wichtig war, war mir vor allem die Artikel, dass man die gut ausdrucken kann, wer das braucht, ja. Ich denke auch. Also bei den letzten Kunden, wo wir 'n Print-Style Sheet da installiert haben, haben wir eigentlich auch die Sidebar ausgeblendet, weil's eigentlich nur Sekundärinformationen sind. Mhm.

Und ich eigentlich davon ausgehe, dass der Benutzer dann eben die Hauptinhalte ausdrucken will. Das heißt natürlich auch für uns, dass wir sämtlichen Grafik-Schnickschnack ausblenden und die Navigation. Also da habt ihr natürlich jetzt auch grade Wert gelegt, ne? Ja, auf jeden Fall. Gut, ich denke, das war 'n sehr spezielles Thema, ein sehr interessantes Thema. Björn, du warst das letzte Mal übrigens, ich hab nachgeschaut, in Technikwürze dreizehn im Interview.

Jetzt haben wir Technikwürze, was ist sie, siebenundvierzig, achtundvierzig? Siebenundvierzig, denke ich, haben wir. Ja. Dann wollen wir hoffen, dass das nächste Mal noch nicht so lange dauert. Nee, bestimmt nicht. Also ich hatt ja jetzt speziell im Sommer das Ende von der Diplomarbeit. Ja. Hab Ende August abgegeben, sofort in der Firma übernommen und- Das ist doch klasse. Ins Eiswasser geworfen. Und dann kam gleich der, der Umzug noch dazu, ja. Ja.

Aber das hat sich jetzt alles mal langsam gelegt. Ich find auch wieder mehr Zeit, was mir vielleicht auch auf den Webdev bezieht. Da kommen jetzt wieder 'n paar Sachen. Super. Ich find endlich mal wieder Zeit für die Sachen, ja. Ich habe auch länger keinen längeren Artikel mehr geschrieben. Da hab ich mal gesehen, ich glaub, das war irgendwann im Sommer. Na, dafür geht da jetzt der Artikel online. Der Artikel, den könnt ihr übrigens noch mal auf der Webseite von Björn nachlesen.

Das ist BSMarkup.de. Danke, Björn, dass du dabei warst. Danke auch. Hintergründe. 2007 kommen neue Telemediengesetze. Im Jahr 2007 werden in Deutschland neue Internetgesetze in Kraft treten, die besonders für Blogger und Podcaster deutlich mehr Vorschriften bringen werden. Inhaltlich wurden die meisten Bestimmungen aus den alten Gesetzen Teledienstgesetz und Mediendienstestaatsvertrag übernommen. Der Regelungsrahmen jedoch ändert sich.

Auch Internetseiten, die bisher über das lockere Teledienstgesetz geregelt wurden, gelten nun als Telemedien und müssen daher mehr Vorschriften erfüllen. Vor allem Blogger und Podcaster sind von den neuen Gesetzen betroffen. Mit den neuen Telemediengesetzen gilt dann beispielsweise die allgemeine Impressumspflicht. Eine Ausnahme besteht nur für Angebote, die ausschließlich persönlichen oder familiären Zwecken dienen. Neu ist ebenfalls eine Art Pressekodex für alle redaktionell tätigen Angebote.

Der besagt, dass wohl auch ein Nachrichtenblog die Nachrichten vor der Veröffentlichung auf Inhalt, Herkunft und Wahrheit überprüfen soll. Auch die Platzierung von Werbung wird im neuen Telemediengesetz geregelt. Werbung muss als solche gekennzeichnet werden. Die wohl wichtigste Änderung betrifft jedoch den Datenschutz. Anbieter von Telemedien können mit dem neuen Recht gezwungen werden, die Daten ihrer Nutzer herauszugeben.

Die genaue Regelung wird derzeit noch vom Bundestag und Bundesrat diskutiert. Ohne große Änderungen werden die bisherigen Entwürfe der Telemediengesetze wohl in Kraft treten. Wie effektiv sie sein werden, wird sich zeigen. Doch bereits jetzt wird Kritik laut, die neuen Gesetze wären keine Verbesserung der bisherigen Lage, sondern nur unverständlich und zu weit von der Realität im Netz entfernt. Linktipps.

Michael Jendrischek befasst sich mit Mikroformaten und veröffentlicht auf seinem neuen Blog Mikroformate.de eine S5-Präsentation. Eine umfangreiche Linkliste zu Cheat Sheets, meist einseitigen Übersichten zu bestimmten Bereichen, bietet Dieter Meier in seiner Content-Schmiede. Das Digital Web Magazine beleuchtet anhand des Redesigns der New York Times Website die Arbeit eines Webentwicklerteams, das zwischen Best Practice und den Beschränkungen im echten Arbeitsalltag entscheiden muss.

Das Valencia Community College in Orlando, Florida, hat im September eine kleine, aber interessante Umfrage zur mobilen Web gestartet und nun die Ergebnisse im eigenen Blog veröffentlicht. Tipps. Seltene und unbekannte CSS-Eigenschaften. In diesem Teil meiner Serie "Seltene und unbekannte CSS-Eigenschaften" werde ich euch einige neue Eigenschaften von CSS drei vorstellen. Diesmal dabei String Set und Crop. String Set belegt eine Variable mit Werten, die später weiterverarbeitet werden können.

Ein Beispiel für die Verwendung gibt es in der aktuellen Mitschrift. Das Beispiel zeigt, wie man den Inhalt eines Elements in einer CSS-Variable speichert. Für die Ausgabe bietet sich Content an. Dazu gibt es in der Mitschrift auch ein Beispiel. Kommen wir nun zu Crop. Crop bestimmt den angezeigten Ausschnitt eines Bildelements. Eine Möglichkeit, den Ausschnitt eines Bildes zu bestimmen, ist mit dem Wert Rectangle.

In den Klammern von Rectangle finden sich die Offset-Angaben des gewünschten Ausschnittes. Hierzu gibt es wieder ein Anwendungsbeispiel in der aktuellen Mitschrift. Die Offset-Angaben werden wie bei der Shorthand-Methode im Uhrzeigersinn beginnend von oben hingeschrieben. Die Vorschau. Intrigiert, integriert, intrigiert. Ihr wisst es. Ich habe Probleme mit dem Wort integriert. Ich habe nämlich immer in den letzten Technikwürze-Podcast gesagt, intrigiert.

Und dieses Wort, das hatte ich jetzt in dieser Folge auch. Ich weiß gar nicht mehr, ob ich es richtig oder falsch gemacht habe. Zumindest habe ich mich bemüht. Also falsch ist intrigiert, richtig ist integriert. Irgendwann schaffe ich es noch mal. Das war Technikwürze siebenundvierzig. Für die nächste Folge habe ich mir was ganz Besonderes überlegt, denn ich habe wieder Peter Müller, den Buchautor, eingeladen.

In Technikwürze achtundvierzig geht es unter anderem um das neue Chip-Sonderheft, die perfekte Webseite. Das gab es letztes Jahr auch schon mal und das wird es dieses Jahr auch wieder geben. Chip Sonderheft, mit einer Besonderheit. Peter Müller hat wieder, hervorragende Artikel geschrieben, aber auch ich habe Artikel geschrieben, und zwar über das Podcasting, vier Stück an der Zahl. Darüber werden wir reden, wenn das Ding erschienen ist.

Dann werden wir reden über die bekannten Diagramme von Jesse James Garrett, The Elements of the User Experience und die neuen Säulen eines erfel, erfolgreichen, Webteams. Genau, Webteams. Ja, Peter Müller weiß da mehr. Das schauen wir uns also an. Für euch gibt es jetzt noch aus dem Podsave Music Network und der Jingle kommt gleich, Nadir mit Distorted Soul 2.0, also 2.0. Wir sind ja auch im Web 2.0. Musik präsentiert von Podsave Music Network. Ich sage danke fürs Zuhören. Bis zum nächsten Mal.

Ich hoffe, ihr schaltet wieder ein und denkt dran, nächste Woche kommt der Technikwürze-Podcast nicht um null Uhr, sondern es kommt, der wird am Spätabend erst erscheinen, denn ich werde ihn nicht vorproduzieren, sondern mit Peter Müller den Podcast dann irgendwann nachmittags, Frühabend aufnehmen und dann erst online stellen. Also wartet ein bisschen drauf. Wenn nicht, schaut mal Dienstag vorbei und lädt euch dann die Folge runter. Und danke für eure Treue. Bis nächste Woche Montag.

And I see the tears night and day. When she's down on her knees to pray. She say, "Father, Father, it's for the kids. And everything I did. Please, Lord, don't you come down too hard on me." No turning back, he's too far gone. Too many mouths are hungry. So he looks back wondering. And I hear the voices everywhere I go. Now everybody in the land must be trying to find my old man. Walking down the street, every soul I meet.

Every soul I meet wants to know about, uh, they gotta know my daddy's cane, my daddy's cane. You know we're walking down the street, every soul I meet. Every soul I meet wants to know about, come on, my daddy's cane, my daddy's cane. Come on, now. No turning back, he's too far gone. Too many mouths are hungry. So he looks back wondering. And I hear those voices everywhere I go. Everybody in the land must be trying to find my old man.

Walking down the street, every soul that I meet wants to know about my daddy's cane, my daddy's cane. Oh, no, no, no, no, no, no, no. You know we're walking down the street, every soul I meet. Every soul I meet wants to know about, uh, they gotta know my daddy's cane, my daddy's cane. They gotta know, they gotta know we're walking down the street, every soul I meet. Everybody wants to know about, know all about my daddy's cane, my daddy's cane.

You know we're walking down the street, every soul I meet. Every soul I meet, they gotta know. My daddy's cane, my daddy's cane. Said walking down the street, every soul I meet. Every soul I meet, they've got to know about my daddy's cane, my daddy's cane.