Styleguide

Dieser Styleguide betrifft alle Texte auf webkrauts.de – insbesondere natürlich die Artikel. Er enthält allgemeine und spezielle Anweisungen, wie Artikel zu verfassen sind. Die Redaktion behält sich vor, Texte entsprechend anzupassen oder abzuweisen, wenn sie nicht mit der geforderten Aufmerksamkeit an den Styleguide angepasst sind.

Stand: 8. Dezember 2017

Perspektive der Artikel

Die meisten Artikel drehen sich um ein Webthema. Das wird sachlich erklärt und Lösungen angeboten. Dafür sind keine Formulierungen mit »ich« oder »wir« nötig; es ist schließlich kein persönliches Blog. Alle Sätze dieser Art lassen sich auch umschreiben, indem entweder der Leser mit »du« oder »ihr« angesprochen wird – oder aber allgemein von Webseite, Kunde, Webworker etc. die Rede ist.
Die Ich- oder Wir-Perspektive ist nur in zwei Fällen erlaubt: Entweder ihr beschreibt ein Beispiel aus eurer persönlichen Praxis (etwa: zu unserem eigenen Adventskalender) oder es ist eine Kolumne.

Allerdings haben wir seit Anfang 2017 auch ein Blog-Format, das derzeit aber kaum benutzt wird. Dort dürft ihr durchaus subjektiver schreiben. Aber das wäre dann abseits der Artikel-Reihen.

Veröffentlichung

Generell sehen wir es gerne, wenn die Artikel exklusiv auf webkrauts.de veröffentlicht werden. Ihr könnt natürlich aus eurem Blog darauf verlinken. Die ALA-Autoren schaffen es auch, ihre Sachen nur für ALA zu schreiben. Wenn ihr den Text jedoch auch in eurem eigenen Blog veröffentlichen möchtet, dürft ihr das selbstverständlich machen, es ist euer Text. In diesem Falle wäre es uns lieb, wenn ihr den Text in eurem Blog a) vier Wochen später veröffentlichen würdet, b) darauf hinweist, dass der Text auch bei webkrauts.de veröffentlicht wurde und c) die Kommentare in eurem Blog zu diesem Text abschaltet, damit gesammelt auf webkrauts.de kommentiert werden kann.

Nehmt das als Wünsche der Redaktion, um webkrauts.de zu stärken.

Formate

Ihr schreibt die Artikel in HTML5.
Der Titel wird als h2 ausgegeben. Zwischenüberschriften starten also mit h3.
Codebeispiele notiert ihr bitte 1:1 und umschließt es einfach mit einem [xxx], wobei ihr für xxx eben code, bash, css, html, javascript oder php einsetzt. Es gibt einen Filter, der das dann ordentlich setzt.
Als Anführungszeichen benutzt bitte »« und ›‹.
Ja, die Bilder. Ihr ladet die unter dem Artikel hoch. Dann verlinkt ihr die im Text über einen eigenen Shortcode, der für das richtige Format sorgt. Im Zweifel notiert im Text nur, welches Bild an diese Stelle soll. Und Nicolai baut die dann richtig in den Artikel ein. Denn der Shortcode war damals seine Idee.
Es gibt zwei Formate für Infoboxen:
- Ein div-Container mit der Klasse "infobox" wird beige hinterlegt und floatet rechts. Das sind eher nebensächliche Infos zum Artikel.
- Ein div-Container mit der Klasse "wissenbox" nimmt die ganze Breite ein und erscheint auf hellblauem Hintergrund. Das ist für grundsätzliche, wichtigere Hinweise gedacht. In der Regel beginnt der Text der Infobox dann auch mit "Hinweis:".

Zum Start

Der Leser beginnt zwar mit Dachzeile, Titel und Teaser. Das ist aber nicht der richtige Startpunkt, um einen Artikel zu schreiben. Kümmert euch zunächst um den Rest des Artikels, und textet den Start erst ganz am Ende. Wir nutzen seit dem Relaunch (2012) eine Kombination aus Dachzeile, Titel und Teaser:

Die Dachzeile ist eine kurze Zeile, die konkret aussagt, worum es geht. Ihr könnt euch dabei an Tags orientieren. Wobei die Dachzeile zwar nicht aus Tags besteht, aber solche Stichwörter beinhalten kann. Wir nutzen etwa: »Navigation im Responsive Design«, »Open Access«, »CSS3 Flexbox« oder »SEO vs. Usability«. Der Leser soll sofort einen Überblick bekommen, worum es grundsätzlich geht.

Wenn ihr die Richtung mit der Dachzeile abgesteckt habt, muss der Titel das Thema nicht mehr sachlich abdecken. Der Titel kann und soll somit frei sein, locker. »Wireframes und Protoyping im Interfacedesign« ist als Titel zum Beispiel recht sperrig. »Wenn’s mal wieder schnell gehen soll« ist dagegen lockerer. Das sagt kaum was aus, muss es aber auch nicht, denn das übernehmen ja Dachzeile und Teaser.

Der Teaser ist also wieder konkreter. Im Idealfall macht er den Artikel so interessant, dass der Leser nicht mehr umhin kommt, ihn auch zu lesen. Zumindest aber sorgt er für einen Einstieg in das Thema und beschreibt es umfassender als die Dachzeile. Wenn in der Dachzeile etwa von Typo3 die Rede ist, kann es im Artikel immer noch um Dutzende von Themen gehen. Hier sorgt also der Teaser für Klarheit. Zum Vergleich ein Beispiel-Teaser (aus dem ehemaligen Webstandards-Magazin):
»Es war kein Redaxo-Projekt wie jedes andere - nicht nur weil die eigene Tochter in Kürze auf besagte Schule gehen wird. Wenn man die Webseite einer Waldorf-Schule baut, muss man zu Kompromissen bereit sein, wie das nachfolgende Praxisbeispiel zeigt.«
In dem Fall haben wir daraus gemacht: »Ein Webprojekt für eine Schule bekommt gleich eine ganz andere Note, wenn es um eine Waldorf-Schule geht, an der 200 Lehrer ihre Beschlüsse gemeinsam fassen. Dieses Praxis-Beispiel zeigt Ihnen, wie wir das Projekt dennoch recht zügig mit dem CMS Redaxo umsetzen konnten.«

Wir haben hier den privaten Hinweis mit der Tochter rausgenommen und das Projekt durch die 200 Lehrer, die mitbestimmen, interessanter gemacht. Wesentliche Elemente wie Redaxo, Waldorf-Schule, Praxisbeispiel haben wir im Teaser gelassen.

Da nun ohnehin der Autor bei einem Artikel namentlich genannt wird, ist es nach dem Relaunch nicht mehr nötig, den Namen auch im Teaser unterzubringen.

Weitere sprachliche Hinweise und Tipps

Man sollte zum Beispiel

Eine Unsitte sind all die Sätze, in denen »man« etwas tut. So etwas lässt sich oft umformen, denn meist geht es nicht um einen ominösen »man«, sondern um eine konkrete Person oder Gruppe. Zum Beispiel: Webworker, Kunden, Besucher, Nutzer, Fortgeschrittene, Designer. Ein paar Beispiele: Statt »An diesem Beispiel kann man erkennen... « besser »An diesem Beispiel könnt ihr erkennen.« Und statt »In der Regel löst man dies über eine Fallback-Lösung« besser »Webworker haben dafür eine Fallback-Lösung parat«.

Sprecht den Leser möglichst direkt an, wahlweise also mit »du« oder »ihr«. Verzichtet auf Formulierungen wie »Der Anwender macht« oder »Der Webdesigner gestaltet« und verwendet stattdessen die direkte Ansprache, verbunden mit klaren Instruktionen: »Legt in Photoshop eine zusätzliche Ebene an und benennt diese mit einem sprechenden Begriff. Verwendet, wenn nötig, die Funktion zum Gruppieren einzelner Ebenen.« Gleiches gilt auch für »können, dürfen, müssen, macht«: In jedem Fall ist die direkte Ansprache hier die richtige Wahl!

In der Kürze liegt die Würze

Wenn ein Satz über zu viele Zeilen geht, ist er zweifelsohne zu lang. Hier gibt es immer die Möglichkeit, zwei oder drei kurze Sätze daraus zu machen, ohne den Inhalt zu verändern. Ein typisches schlechtes Beispiel: »Die im Meeting am Montag erarbeiteten ausführlichen Materiallisten und Meilensteine zum besprochenen Projekt bekommen Sie zusammen mit den übrigen Dokumenten nach Fertigstellung des Protokolls durch mich Ende der Woche per Post zugesendet.«

Binnenleerzeichen

Es geht um zusammengesetzte Wörter (Komposita), die im Deutschen mit einem Bindestrich geschrieben werden müssten. So heißt es im Englischen zwar »content management system«, im Deutschen aber »Content-Management-System«. Bevor es aber zu Wortungetümen wie »Projekt-übergreifende Synergie-Effekte« oder »Erweiterungstemplates« kommt, könnt ihr die Stelle besser umformulieren. In diesem Fall zumindest in »Synergie-Effekte über mehrere Projekte hinweg« und »mit Templates erweitern«. Statt »denn aus usabilitytechnischer Sicht« schreibt besser »sorgt für eine einfachere Bedienung«.

Nominalstil

Ein beliebtes Mittel in der Politik. Neue Gesetze und Berichte werden erst einmal mit einem Haufen Nomen vollgestopft, als ob Verben um jeden Preis vermieden werden müssten. So ziehen sich Politiker so schöne Titel wie »Entwurf eines Gesetzes zur Änderung des Gesetzes zur Errichtung eines Sondervermögens „Investitions- und Tilgungsfonds“« aus dem Hirn. In solchen Fällen ist es immer eine gute Idee, ein paar der Nomen durch Verben zu ersetzen. Nomen wirken sachlich, langweilig, Verben sind aktiver. Also in einem Bericht aus der Praxis etwa statt: »Die Umsetzung des Designs erfolgte in zwei Schritten« besser »Wir setzen das Design in zwei Schritten um«. Statt »Bei der Programmierung kümmern wir uns gleich um die Barrierefreiheit« besser: »wir programmieren hier gleich barrierefrei und...«

Aktive Verben

Bei der Gelegenheit: Verben sind nicht gleich Verben. Manchmal wird ein Text besser, wenn der Autor andere Verben nimmt. Dieser letzte Satz enthält die schwachen Verben »werden« und »nehmen«. Besser wäre: »Manchmal lässt sich aus einem Text noch mehr herausholen, wenn sich der Autor um stärkere Verben bemüht. « Ähnliches gilt freilich auch für Adjektive. Oder auch: Statt »Der frisch gepresste Saft ist für unsere Gäste ein Hochgenuss.« besser »Unsere Gäste genießen besonders unsere verschiedenen Saftsorten. Wir pressen alles frisch.«

Zwischenüberschriften

Dieser Part machen alle meist automatisch richtig: Lange Texte lassen sich leicht durch Zwischenüberschriften gliedern. Hier haben wir keine allgemeinen Regeln, die Zwischenüberschriften mögen sachlich oder frei sein. So wie es am besten zum Text passt. Sie sollten lediglich einheitlich erscheinen.