Click here to view the embedded video.

Realsiert ist der Blog natürlich mit der No.1 Blogsoftware WordPress. Für mich galt: Back to Basics. Keine Startseite mit Schnick und Schnack, die zentralen Funktionen eines Blogs sollten im Vordergrund stehen: Die Artikel werden chronologisch gelistet, eine zentrale Sidebar liefert alle weiteren Infos wie Taxonomien oder die Blogroll.

Unter der Haube steckt aktuelleste Technik: Funktionen aus HTML5 und CSS3 werden bereits eingesetzt, spezielle Schriftarten werden browserübergreifend ersetzt. Auf Barrierfreiheit und Schnelligkeit wurde trotzdem nicht verzichtet: Die Startseite ist nur 100kb leicht und erreicht im Google Speedtest (81 von 100 Punkten) und bei YSlow (Grade B) sehr gute Werte; der Accessibility-Test des TotalValidators validiert bis zur höchsten Stufe AAA ohne Beanstandung.

Website besuchen

Die Inhalte sind klar strukturiert und voneinander abgegrenzt. Rezepte haben eine andere Taxonomie (z.B. Zutaten) als Restaurants (z.B. den Standort). Die Startseite sammelt als Landingpage alle Inhalte und betont den Magazin-Charakter.

Auf das Urteil der Besucher wird ebenfalls viel Wert gelegt. Nicht nut über Kommentare kann man Feedback geben, ein Bewertungssystem macht direktes (und anonymes) Feedback möglich. Mit nur einem Klick kann man zeigen, ob einem ein Rezept gefällt oder nicht. Die beliebtesten Artikel werden in der Seitenleiste ausgeben.

Optisch ist Topf & Löffel ein kleines Highlight geworden. Der Hintergrund erdet die Seite und betont einen natürlichen Charakter (die Soßen werden ohne Päckchen gemacht…). Das Logo fügt sich ein und ist quasi auf dem Hintergrund “aufgemalt”. Diverse 3D-Effekte im Content-Bereich machen die Seite plastischer.

Unter der Haube steckt natürlich aktuellste Technologie. HMTL5 und CSS3 kommen ebenso zum Einsatz wie die aktuelle WordPress-Version, in der sämtliche Funktionen ausgereizt werden.

Website besuchen

Die Ursache

Zu bestimmt 90% kann man die Ursache des Problems konkret benennen: Microsoft Word oder Microsoft Outlook (das ja gerne mal Word als Editor nutzt). Kopiert man nämlich Texte direkt aus Word, wird gleichzeitig ein Wust an Angaben mitkopiert, die der Redakteur erstmal gar nicht sieht. Diese Angaben sind nicht nur unnötig, sondern auch teilweise haarsträubend. Abstandsangaben in cm – auf einer Website! Dazu gesellt sich das Problem, dass Microsoft sich natürlich wenig an geltenden Standards orientiert. Aber auch das kopieren von Inhalten von anderen Websites kann die gleichen Ursachen hervorrufen. Nicht jede Website trennt strikt den Inhalt von der Gestaltung oder auch dort hat ein Redakteur versehentlich wunderbaren Microsoft-Code auf die Website geklatscht.

Hat mit HTML wenig zu tun und auf einer Website gar nichts zu suchen

Betroffen sind davon solche Inhalte, in denen ein Rich-Text-Editor verfügbar ist, der eine erweiterte Formatierung der Inhalte zulässt. Zwar ist dieser bereits so programmiert, dass er den gröbsten Unfug filtert – aber oft rutscht trotzdem etwas durch.

Der Rich-Text-Editor (kurz: RTE) in TYPO3

Lösungsansätze

Um das Problem zu Umgehen, gibt es mehrere Lösungsansätze. Die zwei gängisten beschreibe ich hier.

Umweg über den Editor

Viele Redakteure wählen den Weg über einen Editor, der keine Formatierungen zulässt. In Windows ist das der z.B. der mitgelieferte Editor, der in der Regel unter Start » Zubehör » Programme zu finden ist. Einmal den gesamten Text in den Editor kopieren, wieder alles markieren und kopieren – schon sind wir alle Formatierungen los. Dafür leider auch solche logischen Auszeichnungen wie Aufzählungen und Überschriften, die nun per Hand nachgetragen werden müssen.

Eigene Säuberungsfunktion des RTE

Der zweite Anatz nutzt eine bereits im TYPO3-RTE vorhandene Funktion zur Säuberung des Codes. Dazu wird der Text direkt aus Word, Outlook und Co. direkt in den RTE eingefügt. Danach muss die Option Formatierungen entfernen ausgewählt werden, in der Symbolleiste passenderweise durch einen Besen symbolisiert.

Der Besen markiert die Funktion "Formatierungen entfernen"

Im darauf erscheinden Pop-Up wählen wir HTML-Formatierungen (im Beispiel nicht markiert) und MS-Word-Formatierungen aus, sowie dass die Säuberung im gesamten Bereich durchgeführt werden soll.

Das PopUp-Fenster mit weiteren Informationen

In den meisten Fällen führt das zum gewünschten Ergebnis, wenn nicht hilft entweder nur der oben beschriebene Weg über den Editor oder eine Säuberung per Hand, wenn man den Editor auf den HTML-Modus umschaltet.

Erkennen ob ungewollte Formatierungen vorliegen

Aber wie erkennt man, ob die Säuberung erfolgreich war oder überhaupt eine nötig ist? Wenn man die gröbsten Schnitzer nicht sofort erkennt (rote Schrift in Comic Sans), hilft uns die Statuszeile von TYPO3 weiter. Hier wird angezeigt, in welchem HTML-Element wir uns gerade befinden. Das p steht dabei für Paragraph, also einen Absatz.

Die Statusleiste des TYPO3-RTE befindet sich am Ende des Editor-Feldes

Die im Beispiel angezeigte Klasse MsoNormal ist allerdings ein klares Indiz für Formatierungen aus dem Hause Mircrosoft. Auch Font-Tags haben im Editor nichts zu suchen und sollten entsprechend bereinigt werden.

Die Plattform selbst ist auf Basisfunktionalitäten beschränkt und stellt den Aktionscharakter in den Mittelpunkt. Da bei der Realisierung der Zeitfaktor (Minuten statt Tage!) eine enorm wichtige Rolle gespielt hat, habe ich für das Layout das Standard-Theme TwentyTen minimal angepasst.

Website besuchen

Der themenfokussierte Blog stellt Inhalte in den Vordergrund, deren Publikation sowohl zeitrelevant, als auch extrem benutzerfreundlich ermöglicht werden soll. Im Design wird deshalb auf den Einsatz von Teasergrafiken verzichtet, besondere Priorität liegt auf der Textgestaltung, spezielle Schriftarten werden dafür browserspezifisch eingebunden.

Eine automatische Funktion zur Erstellung der Teaser-Texte nimmt zusätzliche Arbeit ab. Infoboxen mit weiterführenden Informationen zum jeweiligen Autoren sind automatisch unter jedem Artikel eingebunden. Um den inhaltlichen Verlauf der Internet-Enquete-Kommission besser darzustellen, ordnet eine spezielle Landingpage die Artikel chronologisch.

Der Datenschutz der Besucher hat bei GrünDigital hohe Priorität. Deshalb wird auf kritische Tools wie Google Analytics oder Akismet verzichtet. Das Usertracking erfolgt mit der freien Analysesoftware Piwik, wobei die IP-Adressen der Besucher automatisch anonymisiert werden.

Website besuchen

Auffällig ist vor allem die neue optische Gestaltung – eindeutig Grün, modern und innovativ. Um den unterschiedlichen Besuchern den Zugang zu relevanten Inhalten so einfach wie möglich zu machen, geht die Website neue Wege in der Benutzerführung: Inhalte werden entsprechend priorisiert und über zwei verschiedene Hauptnavigationen unterschiedlich ausgegeben; nahezu jeder Inhalte ist mit einem Klick zu erreichen. Speziell die Aufbereitung der Inhalte wurde drastisch verändert. Pressemitteilungen treten deutlich in den Hintergrund, stattdessen werden Inhalte explizit redaktionell aufbereitet und oft zusätzlich multimedial aufbereitet.

Neben der obligatorischen Darstellung von Informationen erfüllt die Website zwei maßgebliche Aufgaben: Sie ist Portal- und Dialogplattform für Grüne Politik in NRW zugleich. Als zentrale Anlaufstelle aggregiert sie nicht nur Inhalte aus den sozialen Kanälen, die der Landesverband nutzt, sondern auch aktiver Wahlkämpfer und Mandatsträger. Diese Offenheit wird auch bei den Inhalten deutlich, sämtliche Artikel sind kommentierbar.

Der Grüne Online-Wahlkampf 2010

Eine grundlegende Einführung in den Online-Landtagswahlkampf 2010 habe ich als Gastbeitrag im Blog Homopoliticus veröffentlicht unter dem Titel Macht Mehr Möglich – Die GRÜNE Dauerkampagne im Netz.

In sämtlichen Medienberichten wurde der Grüne Internetwahlkampf gelobt und dabei ausschließlich als führend in NRW beschrieben. So schreiben die WDR-Wahlbeobachter:

Die Grünen haben die mit Abstand “zweinulligste”Homepage der fünf großen Parteien in NRW. Auf gruene-nrw.de finden die Nutzer zunächst mal die Standards gut umgesetzt. Das Wahlprogramm ist mit einem Klick erreichbar, es gibt Veranstaltungs-Termine und aktuelle Statements in einem Blog. Die Grünen fahren so ziemlich alles auf, was das Web 2.0 zu bieten hat. Wer das nicht mag, findet die Seite vielleicht etwas überladen.

Besonders außergewöhnlich: Die große NRW-Karte, auf der im Sekundentakt Meldungen von Kandidaten aufblitzen, die diese in letzter Zeit auf Twitter, Facebook und Co. veröffentlicht haben. Würde es diese Funktion nicht geben, wir wüssten nicht, dass Martin-Sebastian Abel (Platz 26 der Landesliste) Mittwochabend (07.04.10) noch mal weg war: “laufen und die Luft genießen”.

Für Menschen, die sich nur selten mit Politik beschäftigen, bieten die Grünen viele Erklärungen. Zum Beispiel wird Schritt für Schritt erläutert, wie Briefwahl beantragt wird. Das Wahlprogramm gibt es, insbesondere für Menschen mit Behinderung, in “leichter Sprache”. Außerdem werden in einem Glossar die “großen Worte” definiert, also Schlagworte, die Politiker gerne benutzen, ohne sie zu erklären. Wenn diese Erklärungen auch noch neutral, ohne Grünen-Standpunkt daherkämen, wäre das Angebot perfekt.

Website besuchen

Nach dem kompletten Relaunch erscheint die Website nicht nur im modernen Look, sie geht auch für eine Spitzenpolitikerin ungewohnte Wege: Im eigenen Blog gibt es unterschiedlichste Inhaltsformen fernab der parlamentarischen Politsprache, die regen Facebook-Aktivitäten von Sylvia werden automatisch aggregiert, aktuelle Artikel mit und über Sylvia werden eingebunden, YouTube-Videos automatisch eingebunden. Demokratisches Prunktstück ist aber sicherlich die Rubrik Ihre Frage an Sylvia Löhrmann. Besucher können hier ihre Frage an Sylvia stellen, die auf Wunsch auch auf der Website (anonymisiert) veröffentlicht wird.

Die Website wird auch nach dem Relaunch von mir weiterhin technisch betreut und auch gehostet. Im Landtagswahlkampf war ich zudem desöfteren beratend für die Onlineaktivitäten von Sylvia tätig.

Website besuchen

Website besuchen