Allgemein, Literatur, Webküche

Autorengespräch mit Peter Müller – „Little Boxes, Webseiten gestalten mit CSS“

Peter MüllerPeter Müller ist Autor des erfolgreichen Buches „Little Boxes, Webseiten gestalten mit CSS“ und steht im Verlauf dieses Artikels einigen Fragen zur Verfügung.

Wer ist und was macht der Autor? Welche Tipps und Ratschläge gibt er dem interessierten Leser? Das folgende Interview beleuchtet die Person hinter dem Buch und zeichnet, so hoffe ich, ein persönliches Bild vom Menschen Peter Müller.

Herzlich willkommen Peter. Vielen Dank für das Interview und die signierte Ausgabe deines Buches Little Boxes, Webseiten gestalten mit CSS, welches in naher Zukunft in einer neuen Auflage erscheint. Neue Auflage – das heißt, dass Buch ist erfolgreich?

Yep. Mitte Mai 2006 erschienen hat sich die Kunde seiner Existenz seitdem durch positive Rezensionen, Blogs und zufriedene Leser im Internet immer weiter verbreitet. Bei Amazon steht es seit Monaten oben in den Top 10 der CSS-Bestseller.
Im Herbst begannen einige Verlage Interesse an dem Buch zu signalisieren. Ich habe eine Zeit lang überlegt, ob ich das überhaupt machen sollte, habe mich dann aber aus den ver-schiedensten Gründen doch dazu entschieden. Ende Februar erscheint jetzt eine aktualisierte und erweiterte Ausgabe bei Markt & Technik. Mehr dazu weiter unten.

Vielleicht möchtest du dich den Lesern ein wenig vorstellen?

Geboren und aufgewachsen in der nordwestdeutschen Tiefebene (Oldenburg), wohne ich seit einigen Jahren in Groningen/NL. Meine Frau lebt und arbeitet hier, und Groningen ist eine tolle Stadt mit viel Flair.
Was manchmal zu Verwirrungen führt ist, dass ich in Deutschland unterrichte und veröffentliche, aber in Groningen lebe und schreibe. Wie Jens Grochtdreis letztens sagte „Zuerst dachte ich, der kann aber gut Deutsch, der Holländer“. Tja, das liegt daran, dass er gar kein Holländer ist. Oder höchstens ein halber.

Von Berufswegen bist du Dozent und Autor in Groningen/NL. Das Erstellen von Webseiten mit CSS scheint mehr als Leidenschaft zu sein. Wie bist du zum Layouten mit CSS gekommen und was machst du mit diesem Wissen?

Anfang der 90er half mir das Fido-Net bei den Recherchen zu meiner Magisterarbeit über „Star Trek and The American Dream“. 1994 habe ich in der Uni-Bibliothek das erste Mal das Web gesehen, und bin fast vom Hocker gefallen. Seitdem beschäftige ich mich mit Internet, Web und dem Bauen von Webseiten.
Ende der 90er habe ich wie jeder andere auch Webseiten mit Tabellen gebaut, aber schon seit 97/98 drauf gewartet, dass CSS erwachsen wird. Im zweiten Buch („Eigene Homepage optimieren“, Ende ’99) war bereits ein ganzes Kapitel zu CSS mit dem Fazit „CSS statt <font>, positionieren weiterhin mit Tabellen bis die Browser mehr CSS verstehen“.
Im Sommer 2003 habe ich die erste Site mit CSS-Layout gebaut (groningen-info.de), mit absoluter Positionierung. Ein Stochern im Halbdunkel war das damals, wenn ich heute daran zurück denke.

Mich interessiert, wie kommt man auf die Idee und was war der ausschlaggebende Punkt, um das Wissen in ein Buch zu packen?

  1. Ich schreibe gerne.
    Ich habe schon immer Skripte für den Unterricht erstellt und das Ende der 90er auch das erste Mal in ein Buch umgesetzt. „Eigene Homepage erstellen“, damals bei Data Becker, und gleich ein richtiger Bestseller.
  2. Punkt 2 ist, dass ich anscheinend gut erklären kann.
    Ich habe mehr oder weniger durch Zufall 1992 mal eine DOS-Einführung gegeben und bin so ans Unterrichten gekommen bin. Es war eine echte Überraschung, dass das Spaß macht und die Leute verstehen, was ich versuche zu erklären.
    Und dann liegt es nahe, das eine mit dem anderen zu verbinden.

Gerade Themen, die sich mit dem Internet beschäftigen sind sehr schnelllebig und ich stelle mir vor, dass es nicht leicht ist, ein Buch zu einem veränderlichen Thema, wie Layouten mit CSS, zu schreiben. Da muss man sicher schnell sein?

Mit der Schnelllebigkeit im Internet ist das auch so eine Sache. Die Details ändern sich, die Strukturen bleiben.
Einerseits habe ich nach drei Tagen Pause bei einem Blick in meinen Feedreader das Gefühl wochenlang weg gewesen zu sein. Andererseits habe ich 1995 mit Laura Lemays Klassiker HTML gelernt („HTML in 7 days“ oder so), und in dem Buch stehen viele Dinge, die auch heute noch gelten. Man müsste nur mal die Screenshots erneuern und den Text etwas entstauben.
Bei „Little Boxes, Webseiten gestalten mit CSS“ ist das hoffentlich ähnlich. Die „Trennung von Inhalt und Gestaltung“ zum Beispiel wird bleiben, „mehrspaltige Layouts“ hingegen werden in einigen Jahren sicherlich anders realisiert werden (hoffe ich jedenfalls …).

Das Buch kommt recht kompakt daher und enthält doch die wichtigsten Züge um mit CSS-Layouts zu arbeiten, zumindest ist das mein Eindruck und ich finde es sehr gelungen (Deswegen auch die Verlosung, wodurch ich dich kennen gelernt habe.). Wie schwierig ist es, den entsprechenden Inhalt zu wählen und worauf hast du besonders Wert gelegt?

Fachbücher werden viel zu oft von Fachleuten geschrieben, die zwar ihr Fach beherrschen aber weder schreiben noch vermitteln können. Es ist eine Sache, eine tolle Website zu bauen, aber eine andere, jemandem zu erklären, wie sowas geht.
Little Boxes“ ist aus den Seminaren der letzten Jahre gewachsen, in denen viele Teilnehmer immer wieder über die selben Steine gestolpert sind. Die Beispiele im Buch vermitteln Strukturwissen, und wenn jemand die Strukturen begriffen hat, kann er sich die Details selbst erarbeiten.
Umgekehrt ist Detailwissen ohne ordnende Strukturen drumherum wie ein Tausend-Teile-Puzzle, wo nur Schnee drauf ist. Woher soll man wissen, welches Teil wohin gehört?

Was ist die Idee hinter dem Buch und wen willst du vorrangig damit erreichen?

Ich bin oft nach einem guten Einsteigerbuch für CSS gefragt worden, und da es das meines Erachtens noch nicht gab, habe ich irgendwann beschlossen, das selbst zu schreiben.
Erreichen will ich damit eigentlich alle, die gerne Webseiten bauen (wollen). Das ist ein Grund mit für den Wechsel zu einem Verlag. Das Web ist ein phantastisches Medium und es hat einfach Besseres verdient als <font> und <table>.

Was sollte der geneigte Käufer für Vorkenntnisse haben?

So wie es im Vorwort namens readme.txt steht: „Die einzige wirkliche Voraussetzung ist Inte-resse am Web und Spaß am Lernen. Außerdem sollte man sich bei einer hexadezimalen Farbangabe wie #f3c600 nicht erschrecken.“
Aber ich habe auch schon gestandene Webdesigner erlebt, die durch die Lektüre von „Little Boxes“ regelrechte Erleuchtungen hatten und sich danach wünschten, das Buch schon vor Jahren gelesen zu haben.

Dein Buch ist schon seit einer Weile auf dem Markt und kommt im Februar/ März in einer neuen Auflage auf den Buchmarkt. Wird es viele Veränderungen geben?

Ja und nein. Der Charakter von „Little Boxes“ bleibt erhalten, auch wenn es wahrscheinlich gut hundert Seiten mehr haben wird. Ein Teil davon kommt durch das sehr gut lesbare (und viel schickere) Layout, und ein Teil durch neue Inhalte.
Die meisten inhaltlichen Ergänzungen drehen sich ums Layouten per CSS: „float und clear“ wird in einem eigenen Kapitel vorgestellt, und auch die mehrspaltigen Layouts werden viel ausführlicher behandelt.
War „Little Boxes“ in der ersten Ausgabe eine sehr gute CSS-Einführung mit ein bisschen Layout hinten dran, so ist der Abschnitt zum Layout jetzt genauso ausführlich (und ich denke auch genauso gut) wie der Rest.

Was verbindest du mit dem Verkauf, die Abgabe an einen Verlag, des Buches?

Ich habe mich lange gefragt, ob ich auf die Angebote der Verlage überhaupt eingehen soll. Das Buch kostet demnächst zwar fünf Euro mehr, aber ich selbst verdiene pro verkauftem Exemplar wesentlich weniger als bei der ersten Ausgabe. Und mit der Unterschrift habe ich die Rechte am Text abgegeben.
Letztendlich waren drei Gründe ausschlaggebend:

  • Die Präsenz im Buchhandel, die ohne Verlag einfach nicht gegeben ist.
  • Mit einem Verlag im Rücken kann „Little Boxes“ vielleicht auch außerhalb des deutschen Sprachraumes Verbreitung finden.
  • Ich kann mich in 2007 wieder mehr aufs Schreiben konzentrieren, und muss mich nicht mehr so viel mit dem ganzen Drumrum beschäftigen.
Standard
Webküche, WordPress

WP – Druckversion

Jeder, der sich ernsthaft mit der Gestaltung von Webseiten beschäftigt hat, weiß es: Die beim Print-Design geltenden Regeln und Arbeitsweisen lassen sich nicht ohne weiteres aufs Web übertragen. Andersrum klappt’s aber ebenfalls nicht: Die meisten Webseiten lassen sich nicht ohne weiteres auf Papier übertragen.

Viele Leute lesen allerdings insbesondere längere Texte aber lieber auf Papier. Bei Arbeiten für Schule & Uni ist es mitunter nötig, die verwendeten Internetquellen ausgedruckt beizufügen. Kurzum: es gibt viele Gründe Webseiten auszudrucken und auch viele Leute die ebendies tun.

Print-Stylesheets von Gerrit Kaiser

Um das ganze auch bei WordPress zu integrieren geht man folgendermaßen vor. Im ersten Schritt solltet ihr euch ein Stylesheet erstellen, mit dem das Layout festgelegt wird, genauso wie bei der Screen-Version. Dazu benötigt man in der Regel weniger Code, da man ja für die Druckversion viele Klassen und IDs weglassen kann. Für den Anfang nehmt ihr am besten das Stylesheet, welches ihr hier downloaden könnt. Die vielen kleinen Feinarbeiten könnt ihr dann im Nachhinein anpassen. Nach dem Download der Datei müsst ihr sie in eine .css -Datei umbenennen. Den Code, den ihr darin findet erkläre ich im folgenden etwas. Für mehr Information gibt es genügend Seiten im Netz, die sich ausgiebig und wesentlich qualifizierter mit dem Thema CSS beschäftigen.

Demo:

Um das ganze mal life zu sehen, müsst ihr nur diese Seite in der Druckvorschau ansehen. (im Browser: Datei –> Druckvorschau)

Anmerkung:

Der Artikel dient vorrangig Web-Anfängern. Echte CSS-Profis wissen mit Sicherheit mehr un detailreicher zu berichten. Trotzdem sind fast alle WordPress-Seiten in den Unweiten des Internets ohne Print-Stylesheet zu finden. Vielleicht kann ich hermit eine kleine Anregung geben, so dass sich der eine oder andere auch an die Integration eines Print-Stylesheets macht. Für die vielen Tutorials und Berichte, auf den unterschiedlichsten Websiten, wäre es jedenfalls hilfreich, wenn man beim Ausdrucken derartiger Texte schnell zu einem vernünftigen Ergebniss kommt.

Um unnötige IDs oder Klassen auszublenden erweitert ihr Sie mit diesem Code im Stylesheet:


display: none;

Zu den einzelnen Code-Schnipseln:

Im folgenden liste ich alle IDs auf, die ich nicht benötige und blende Sie aus.


#header, #respond, #footer, #commentform, #headerimg, a#tooCool, #searchform, #s,
 #submit, #sidebar, #wp-calendar {
	display: none;
}

Das gleiche machen wir mit xhtml-Befehlen, die an IDs angelegt sind. Außerdem sind da noch einige Klassen, die ich in der Print-Version ausblenden möchte.


#respond p, #comment p, #commentform p {
	display: none;
}

select, input, textarea, ckeckbox, img, dd {
	display: none;
}

.navigation, .postmetadata, .subscribe {
	display: none;
}
Unterschied mit/ohne Serifen
Serifen – Ja oder Nein

Im folgende legen wir die grundlegenden Eigenschaften für das Dokument fest, also im body. Hierbei sollte beachtet werden, dass für Printmedien in der Regel Schriften mit Serifen genutzt werden damit erhöht sich die Lesbarkeit für das menschliche Auge auf dem Papier. Bei der Farbgebung aller auszugebenden Elemente ist darauf zu achten, dass von vielen Nutzern der Schwarz-Weiß-Druck bevorzugt wird, also das ganze mal in Graustufen ansehen.


body {
  text-align: left;
  margin: 0;
  padding: 0;
  font: 12pt Garamond, Palatino, "Times New Roman", Times, serif;
  color: black;
  background: transparent;
}

Die Überschriften werden gesondert festgelegt. Bei Printmedien werden hier eigentlich serifenlose Schriften angewandt, mir gefiel allerdings eine serifenhaltige Schrift besser und deshalb also folgender Code.


h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: .75em 0 .5em 0;
  text-align: left;
  page-break-after: avoid;
}

Als nächstes rücke ich alle Absätze ein wenig ein, um es etwas übersichtlicher zu gestallten. Aber auch hier gilt, keine Grenzen an die Vielfalt.


p {
  margin: .5em;
}

Wer es besonders nah an das „genormte“ Printmedium heran bringen möchte, der setzt jede erste Zeile noch ein wenig nach innen. Allerdings hier aufgepasst, WP setzt bei den geschriebenen Beiträgen gerne einige unnötige Tags. Einfach mal ausprobieren.


p+p {
  margin-top: -1em;
  text-indent: 2em;
}

Kommen wir nun zu den Links, diese stellen am Bildschirm eine wichtige Grundlage dar und müssen also irgendwie an das Papier übergeben werden. Dafür hat CSS eine Lösung parat. Im ersten Abschnitt lege ich eine Farbe für die Links fest, damit sie beim Lesen trotzdem auffallen. Im folgenden hinterlege ich hinter jedem Link die Adresse in Klammern, damit kann jederzeit der Link nachvollzogen werden. Das ganze sieht dann so aus:

Linktest (Link zu: http ://bueltge.de)


a, a:visited, a:hover, a:visited:hover {
  color: darkolivegreen;
  background: transparent;
  text-decoration: none;
}

a[href]:after {
	content:" (Link zu: < "attr(href)">) ";
	color: lightgrey;
	background-color:inherit;
	font-style:italic;
	font-size: 9pt;
}

Das gleiche mache ich mit den Attributen title und acronym. Hier lassen sich sicher weitere Attribute ergänzen.


*[title]:after {
	content:" ("attr(title)")";
	color: lightgrey;
	background-color:inherit;
	font-style:italic;
	font-size: .7em;
} 

*[acronym]:after {
	content:" ("attr(acronym)")";
	color: lightgrey;
	background-color:inherit;
	font-style:italic;
	font-size: .7em;
}

Bei der Verwendung von Zitaten und deren Quellen nutze ich auf dieser Website eine farbige Formatierung, auf dem Papier ist dies ungünstig, deshalb habe ich folgenden Code eingefügt. Dabei werden alle Zitate zwischen zwei Anführungszeichen ausgegeben. Die müssen im Unicode angegeben werden, damit sie der deutschen Typographie entsprechen. Das ganze wird auf q– und blockquote-Elemente angewendet.


*[cite]:after {
	content:close-quote" (Quelle: "attr(cite)")";
	font-size: .7em;
} 

* {
	quotes: "\201E" "\201C" "\201A" "\2018";
} 

q:before, blockquote:before {
	content:open-quote;
} 

q:after, blockquote:after {
	content:close-quote;
}

blockquote, q, cite {
	padding-left: 2em;
}

Der letzte Abschnitt im Stylesheet dient der Formatierung von Code. Diese Art der Zuweisung kann natürlich auf jedes beliebige Element angewendet werden.


code {
	font: .8em 'Courier New', Courier, Fixed;
  color: gray;
	padding-left: 2em;
}

code a[href]:after {
	content:"";
}

Einbinden des Stylesheet

Damit das Print-Stylesheet mit WordPress genutzt werden kann, solltet ihr den kommenden Code in euren Header implementieren. Das könnt ihr natürlich über die Admin-Oberfläche eures WP machen (Themes –> Theme-Editor).


<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/print.css" 
type="text/css" media="print" />

Wenn ihr diesen Code einfügt, dann muss eure Datei „print.css“ natürlich im Theme-Ordner liegen, welches ihr verwendet – stylesheet_directory.

Download als txt-Datei
Download als txt-Datei: print.css.txt – 2KByte

Standard