Im Juni 2009 führte WIENFLUSS im Auftrag von WienTourismus den Relaunch der offiziellen Wiener Tourismuswebsite wien.info durch. In einer losen Artikelserie wollen wir ein wenig die Hintergründe und Erfahrungen aus diesem Projekt beleuchten.

Jeder der schon einmal eine große Website redaktionell betreut hat, weiß wie zeitraubend mancher Task allein durch das Handling der Menge an Informationen werden kann.

Survival of the fastest

Im Vorfeld haben wir gemeinsam mit den RedakteurInnen versucht die wesentlichsten Spaßbremsen bei der Betreuung der Website zu identifizieren:

• Wie erspare ich mir bei jeder Verlinkung ein Durchhanteln durch den gesamten Navigationsbaum.
• Wie finde ich rasch Bilder mit den richtigen Motiven im passenden Format.
• Zusammenstellen von Überblicksseiten, die aus einer Vielzahl von Teasern für Artikel bestehen und sich regelmäßig ändern.
• Geschwindigkeit des Redaktionssystems.

Beginnen wir gleich mit dem letzten Punkt. Hier liegt – insbesondere was die Geschwindigkeit beim Speichern betrifft – ganz offen gesagt noch eine Schwachstelle in deren Optimierung wir wohl noch etwas Hirnschmalz stecken müssen. Mehr zum Thema Performance – insbesondere was das Frontend betrifft – in der nächsten Folge der Reihe.

Der Linkdialog

Nicht in allen Fällen ist die gefühlte Performance vorrangig vom Server oder der Bandbreite abhängig. Es geht darum, für den User rasch Ergebnisse zu erhalten. Auch mit der schnellsten Anbindung und einem hochperformanten Server wird man für das Durchklicken durch einen Baum aus mehr als 500 Ordner und 5.500 Dokumenten in 12 Sprachen eine gefühlte Ewigkeit brauchen. Es brauchte also ein effizientes Werkzeug um Inhalte zu verlinken oder einzubinden.

Search-as-you-type war als Grundidee schnell zur Hand. Wesentliche weitere Überlegungen waren:

• Nach welchen Mustern suchen Redaktionsprofis, die jeden Winkel der Website wie ihre Westentasche kennen, und wie orientieren sich jene, die nur alle heiligen Zeiten mal das eine oder andere Dokument nachbearbeiten.
• Welche Informationen benötige ich, um zu entscheiden, ob das gefundene Dokument eingebunden werden soll / kann.

Wir geben’s auch gerne zu, die Lösung ist zumindest in Grundzügen von der Firefox’schen Adressleiste „Awesome Bar“ abgeschaut.

Der Screencast zeigt den von WIENFLUSS entwickelten Linkdialog Plone zur vereinfachten Verlinkung von umfangreichen Websites.

Sobald man einige Zeichen in das einzige Eingabefeld des Linkdialogs eintippt, wird damit begonnen passende Suchergebnisse per AJAX in eine Auswahlliste unter dem Eingabefeld zurückzuliefern. Gesucht wird im Seitentitel und im URL. Der URL ist deshalb wichtig, weil der Seitentitel ja nicht selten in einer Sprache ist, die man nicht versteht, manchmal auch gar nicht lesen kann und sich für eine solche Suche daher nicht immer eignet. Die URLs haben wir aus Gründen der Wartbarkeit ausschließlich in Deutsch und Englisch gehalten.

Beginnt die Eingabe mit einem „/“ (Slash) so wird angenommen, dass nach einem Pfad innerhalb der gewählten Sprache gesucht wird. Redaktionsprofis hanteln sich auf diese Weise blitzschnell durch den Dokumentenbaum und erhalten einen vollständigen Überblick über die gewünschten Ordner.

Ein beträchtlicher Anteil der Artikel sind nicht online oder als nicht aktuell (archiviert) gekennzeichnet. In den meisten Fällen will man solche Inhalte nicht einbinden. Ein kleines Icon bei jedem gefundenen Dokument informiert über dessen Online-Status. Diese Symbolik zieht sich übrigens durch das gesamte Backend und orientiert sich am Ampelschema.

Profis bevorzugen allzu häufig ein Arbeiten mit der Tastatur, weil das schneller ist als der ständige Wechsel zur Maus. Eine Tastaturbenutzbarkeit war für den Linkdialog also Pflicht. Der Dialog inklusive dem Autosuggest ist dementsprechen auch mit dem Keyboard alleine bedienbar.

Sekundäre Linktypen (externe Links, E-Mail, Downloads) stehen bei Bedarf in eigenen Reitern zur Verfügung. So kann das minimalistische und saubere Interface aufrecht erhalten bleiben.

Der Medienbrowser

Ähnlich war die Herangehensweise an den Bild- und Mediendialog. In einigen Fällen gibt es jedoch wesentliche Unterschiede.

Der Screencast zeigt die Benutzung des von WIENFLUSS entwickelten Mediabrowsers für Plone. Bilder und Downloads lassen sich auf diese Weise rasch und übersichtlich in Content einbetten.

Die entscheidenden Suchkriterien sind einerseits Schlagworte und andererseits das Seitenverhältnis von Breite zu Länge, woraus sich die möglichen Größen und Einsatzgebiete für das Bild ergeben.

Die Zuordnung der Bildtypen nach dem Seitenverhältnis erfolgt automatisch beim Upload. Bei der Suche steht eine Liste aller vordefinierten Typen zur Auswahl.
Die Beschlagwortung aller Bilder erfolgt auch beim Upload. Bereits hinterlegte Stichworte werden beim Eintippen vorgeschlagen – ähnlich dem Search-as-you-type. Auf diese Weise sollen unterschiedliche Schreibweisen verhindert werden (Schoenbrunn vs. Schönbrunn). Die Beschlagwortung erfolgt ausschließlich in Deutsch – ebenso wie das gesamte Bildhandling. Jedes Bild steht aber trotzdem automatisch in allen Sprachen zur Verfügung, die Redaktion muss sich natürlich um die korrekte Übersetzung und Einwartung der ALT-Texte kümmern. Die ALT-Texte wurden übrigens bewusst nicht als Beschlagwortungsfelder verwendet, da ein guter Alternativtext und ein internes Beschlagwortungssystem inhaltlich wenig gemein haben.

Für die Bildersuche haben die URLs übrigens keine Relevanz. Sie werden ohnehin aus den Schlagworten abgeleitet – auf diese Weise betreiben wir noch Suchmaschinenoptimierung ohne die Alternativtexte dafür zu missbrauchen.

Wesentlichstes Auswahlkriterium ist natürlich das Bild selbst, die Darstellung im Medienbrowser ist dementsprechend essenziell.

Einige Dialoge ermöglichen das Einwarten von Bildserien, z.B. für eine Bildergalerie. In diesem Fall gibt es innerhalb des Medienbrowser einen Spalte in der alle ausgewählten Bilder abgelegt werden. Beliebig viele Suchen und Auswahlprozesse sind möglich, ohne den Dialog zu schließen. Die Reihenfolge der gesammelten Bilder lässt sich per Drag and Drop nach Belieben sortieren.

Überblickseiten

Im deutschen gibt es etwa 50 Überblicksseiten, die eine Sammlung von Artikelteasern in unterschiedlicher Aufmachung darstellen. Auch wenn andere Sprachen z.T. weniger Überblicksseiten enthalten, so kommt man doch auf eine erkleckliche Anzahl. Wartungseffizienz ist also auch hier eine wichtige Anforderung.

Übersichtlichkeit ist ein zentraler Eckpfeiler. Auf der anderen Seite gibt’s natürlich viele Optionen und Einstellungen für eine Überblicksseite: verschiedene Layouts – jedes Inhaltselement kann mit Teaserlisten oder mit Richtext befüllt werden – kann Überschriften oder unterschiedliche Stile zugewiesen bekommen. Im Gegensatz zur Befüllung der Inhaltselemente ändern sich diese Einstellungen wahrscheinlich selten. Progressive Disclosure ist daher unser gewählter Lösungsweg: alles was selten verwendet wird blenden wir standardmäßig aus, bei Bedarf genügt ein Klick auf die Titelleiste der jeweiligen Box und die Optionsfelder sliden auf.

Das Kernstück sind die Teaserlisten selbst, also Listen von Anreißern beliebiger Artikel. Titel und Anreißertext werden direkt aus dem Artikel übernommen – hier wurde bewusst dieser pragmatische Ansatz verfolgt und auf die redaktionelle Wartbarkeit der Teasertexte verzichtet, um die redaktionelle Last gering zu halten. Redakteure sind damit gezwungen in den Artikeln bereits gute Titel und Anreißertexte zu verfassen.

Auch die Teaserbilder werden aus den Artikeln übernommen, sofern dort welche definiert wurden. Hier besteht jedoch die Möglichkeit, Bilder in der Überblicksseite zu überschreiben, oder wenn im Artikel noch keines definiert war, dieses gleich zuzuordenen. Ansonsten besteht die Gefahr, dass Bilder auf einer Überblicksseite, die ja häufig thematische Schwerpunkte einleitet, doppelt vorkommen oder nicht miteinander harmonieren.

Die Teaser innerhalb der Teaserliste lassen sich mit Drag and Drop einfach umsortieren. Linkdialog und Medienbrowser sind selbstverständlich auch integrierte Bestandteile des Redaktionsinterfaces für Überblickseiten.

Der Screencast zeigt die einfache Bearbeitung der der Inhalte auf Überblicksseiten mit Plone und der Erweiterung von WIENFLUSS.