Informations­architektur und Benutzer­freund­lich­keit

Webdesign: Mehr als nur schön

Vor der Gestaltung einer Website, deren Pro­gram­mierung und der Erstel­lung seiner Medien­inhalte steht die Kon­zep­tion, bei der Ziel­set­zung und die dafür vor­ge­sehenen Lösungs­an­sätze klar defi­niert und in einem Lasten­heft fest­ge­halten werden. Erst voraus­schauende Planung und gutes Projekt­manage­ment garan­tieren einen schnel­len und sau­beren Auf­bau effek­tiver Online-Kommu­ni­kation, bei mini­mier­tem in­halt­lichem und tech­nischem Pflege­auf­wand und flexi­bler Er­weite­rungs­fähig­keit.

Unter Web­design sollte nicht nur die Ge­stal­tung des visu­ellen Erschei­nungs­bildes einer Web­site ver­stan­den werden, sondern auch Design im Sinne der Ent­wick­lung einer für das Ziel­pub­likum opti­mier­ten Informa­tions­architektur und Benutzer­freund­lich­keit. Das Wesen des Inter­nets als non-lineares Medium sollte genutzt werden, um dem Nutzer eines Online-Angebots Inhalte in Form eines Dialogs anzubieten.

Mithilfe eines Content-Manage­ment-Systems (CMS), einer Software, die Web­seiten dynamisch aus ein­zelnen Eleme­nten zu­sammen­baut (parsing) und das eine gra­fische Benutzer­ober­fläche (back-end) besitzt, können Inhalte auch ohne HTML- oder Pro­grammier­kennt­nisse ge­pflegt werden. Ob der Ein­satz eines CMS für ein Projekt sinnvoll ist und welches der unzähligen Systeme das passende ist, gilt es anhand der Vor- und Nach­teilen jedes dieser abzuwägen.

Un­ab­hängig ob man sich für eine sta­tische oder für eine auf einem CMS basie­rende Web­site ent­scheidet: Wichtig ist die klare Tren­nung von Inhalt (Texte und Bilder), Design (Ge­stal­tung und Glie­derung) und Funktio­nali­tät (CMS-Software, Formulare, visuelle Effekte etc.). Nur sie er­lauben opti­male Such­maschinen­opti­mie­rung (SEO), ein­fache Er­wei­terung und Sicher­heit dank be­quemer Aktua­lisie­rung.

Automatisierte Pro­zesse und indivi­duali­sierte Ein­gabe­masken soll­ten Benutzer­freund­lich­keit auch für die gewähr­leisten, die die Web­site und deren Inhalte pflegen sollen.

Die auf Basis der Konzeption realisierte Website Bevor mit der Programmierung und dem Aufbau einer Website begonnen wird, müssen Ziele, Inhalt, Struktur und das dafür optimale Layout konzipiert werden, die so genannte Informationsarchitektur.

Responsive Webdesign

Optimierte Websites für alle Ausgabe­geräte – egal ob für Desktop, Laptop, Tablet oder Smartphone

Unter Responsive Webdesign versteht man den Aufbau von Websites, die sich den Eigen­schaften unter­schied­licher Aus­gabe­geräte anpassen. In erster Linie geht es hierbei um die opti­mierte Dar­stel­lung der Inhalte ent­sprechend der je­wei­ligen Bild­schirm­auf­lösung, aber auch der gerin­geren Band­breite des Inter­net­zugangs mobiler An­wender wird Rechnung getragen. Dadurch kann der Nutzer­komfort immens gesteigert werden.

Das Responsive Design verbindet dabei Konzepte des liquiden, mobilen und adaptiven Web­designs. Das bereits seit den Anfängen des Inter­nets genutzte liquide Web­design ver­zichtet auf feste Größen der einzelnen Ele­mente und setzt sie statt­dessen pro­zentual ins Ver­hält­nis. Die Nutz­bar­keit stößt hier bei großen und sehr kleinen Auf­lösun­gen an ihre Grenzen. Vom mobilen Web­design, optimiert für Handys und Smart­phones, unter­scheidet sich das Res­pon­sive Design darin, dass weder ein sepa­rates Gestal­tungs­muster (temp­late) noch eine zu­sätz­liche Version der Website ver­wendet werden. Adaptives Web­design bietet eine feste Anzahl grund­sätz­lich starrer Layout-Vari­anten für be­stimmte Gruppen von Geräten an.

Die Website, auf der sie sich be­finden, nutzt für große Auf­lösungen von Desktop-Computern drei adaptive An­pas­sungs­schritte, um ein Sprin­gen der Inhalte beim ver­klei­nern des Browser­fensters zu vermeiden. Das Ge­stal­tungs­raster ist voll­ständig dyna­misch aufgebaut, damit es nach Unter­schreiten einer be­stim­mten Auf­lösung in ein liquides Design über­gehen kann. Die große An­zahl unter­schied­licher Auf­lösungen von Net­books und Tablets würde weitere adaptive Stufen hier nicht sinnvoll machen. Für Geräte mit noch gerin­gerer Auf­lösung wie Smart­phones ordnen sich die Inhalts­elemente seman­tisch kor­rekt neu an. Dies gewähr­leistet opti­male Les­bar­keit und ver­hindert zu klein dar­ge­stellte Bilder.

Responsive Webdesign: benjaminhemer.com

Layout und Steuerungselemente der Website benjaminhemer.com passen sich dem jeweilgen Ausgabegerät optimal an.


Zudem ändert sich die Darstellung der Steuer­ungs­elemente hin zu öffen- und schließ­baren Menüs. Diese funktio­nieren ohne zusätz­liche Skripte rein auf Basis von HTML und CSS, wie auch die gesamte Seite bei nutzer­seitig aus­geschal­teten Skripten voll funk­tions­fähig bleibt.

Um vor allem bei mobiler Nutzung die Band­breite zu schonen, sind die meisten grafischen Elemente als Gestal­tungs­angaben definiert (CSS) und Bilder werden bei mobiler Nutzung vorab auf dem Server auto­mati­siert bearbeitet, zwischen­gespei­chert und in opti­mierter Größe ausgegeben.

Ein besonderer Dank für die auf seiner Website vor­ge­stellte Faust­formel für dynamische Gestal­tungs­raster gilt Shay Howe.

Ordnungs­systeme und Infor­mations­archi­tektur

Benutzer­freund­lich­keit und SEO durch Glie­de­rung und Inde­xie­rung

Die meisten Websites lassen sich gut mithilfe einer einfachen hierar­chischen Struktur gliedern. Wird die Inhalts­menge wie bei Online-Shops sehr umfang­reich, müssen zusätzliche Hilfs­mittel ein­gesetzt werden um dem Benutzer eine über­sicht­liche und einladende Website anbieten zu können, auf der er sich zurecht­findet.

Die Website von Southern Cross nutzt hierfür zum einen als Ein­stiegs­hilfe eine poly­hierar­chische Menü­struktur, bestehend aus zwei Haupt­menü-Bäumen, einem Meta-Menü und einer Sitemap im Fuß­bereich. Das duale Haupt­menü gliedert sich in die Themen­gruppen Reise­ziele und Urlaubs­art Aktivi­täten, deren Menü­punkte zu Über­sichts­seiten führen, die themen­spezi­fische Teaser der Reise­angebote präsen­tieren. Die einzelnen Angebote werden per Ver­schlag­wortung den jeweiligen Über­sichts­seiten zugeordnet, wobei jedes einzelne Schlag­wort unabhängig der Haupt­struktur auto­matisch eine eigene Übersicht generiert.

Um die Absprungrate gering zu halten, werden auf den Angebots­seiten weitere Reisen vor­ge­stellt. Die Auswahl erfolgt auf Basis der Anzahl über­ein­stimmender Schlag­wörter. Bei Online-Shops mit sehr großem Produkt­sortiment werden hierfür statis­tische Nutzer­daten verwendet. Positiver Neben­effekt ist dabei eine auto­mati­sierte Erhöhung der Keyword-Dichte und damit einer Ver­bes­serung der SEO.

Startseite der Website von Southern Cross Tours & Expeditions

Startseite und die über eine poly­hierar­chische Menü­struktur ange­bote­ne Über­sichts­seiten helfen einen Über­blick über das Angebot zu gewinnen.
Kleines Bild: Für jedes definierte Schlagwort generiert das CMS auto­matisch eine spezifische Übersichts­seite.

Automatisch generierte Übersichtsseite zu einem bestimmte Schlagwort
Detailseite der Website von Southern Cross Tours & Expeditions

Auf den Detail­seiten werden mithilfe der Schlag­wörter passende alter­native Reise­angebote angezeigt um die Absprung­rate zu veringern und die SEO zu verbessern.

15 Websites, 11 Länder, 6 Geschäftsfelder – ein System

Komplexe Online-Kommu­nika­tion pflegeleicht und flexibel

Für einen Erneuer­bare-Energien-Dienstleister wurde ein Website-Sys­tem ent­wickelt, das so dyna­misch war, wie die Branche, aus der das Unter­nehmen kam. Neu­ge­grün­dete Aus­lands­gesell­schaften, neue Geschäfts­felder und Pro­duk­te mussten schnell in die Online-Kommuni­kation integriert, auf aktuelle Ent­wick­lungen um­gehend rea­giert werden.

Um Synergien wie gemeinsame Daten­banken nutzen (z. B. Refe­renzen, Kenn­zahlen, Media­thek) und die Unter­nehmens­kommuni­kation besser steuern zu können, waren alle Online-Angebote Teil eines zentralen Systems auf Basis des Content-Management-Systems (CMS) Typo3. Dieses garan­tiert ein Höchst­maß an Ge­stal­tungs­spiel­raum, um die Web­sites der ein­zelnen Tochter­unter­nehmen indi­vi­duell auf Ziel­gruppe, Markt­situa­tion und Ver­triebs­stra­tegie aus­zu­richten – im Corporate Design und unter Berück­sich­ti­gung möglicher Marken­transfers.

Kernstück des Konzepts ist die sechs­spaltige Glie­derung mit drei Haupt­ebenen (großer Teaser mit Quick-Links, unter­ge­ordnete Teaser-Gruppe und drei­glied­riger Text­inhalts­bereich). Großen Wert wurde auf Be­nutzer­freund­lich­keit gelegt. So ist jede ein­zelne Web­seite über das auf­klapp­bare Haupt­menü (drop­down menu) und die Sitemap im Fuß­bereich mit nur einem Klick zu er­reichen. Die Inhalts­menge der Seiten ist wohl­dosiert. Weiter­führende Inhalte sind referen­ziert und werden über­sicht­lich ange­boten, was die Ab­sprung­rate reduziert und die Such­maschinen­optimierung (SEO) er­leich­tert. Um die hohe Qualität der Inhalte zu garan­tieren, wurden mit­hilfe eines Benutzer­rechte­systems Ver­antwor­tungs­bereiche defi­niert. Be­nutzer­ober­flächen und Eingabe­masken wurden an die Bedürf­nisse der jeweiligen Redakteure angepasst, z. B. Pressebereich und Per­sonalwesen)

Das System umfasste am Ende 11 zum Teil mehr­sprachige Web­sites des Mutter­unter­nehmens und seiner Aus­lands­gesell­schaften, die Website der Handels­sparte, zwei B2C-Websites für das Privat­kunden­geschäft in Deut­schland und der Schweiz sowie die Website der Elektro­mobilitäts­sparte. Ins­gesamt bestand die Website aus weit mehr als 2.000 einzelnen Web­seiten. Umgesetzt wurde die Website von Der Punkt.

 
Screenshot Website Startseite 0-Ebene

Startseite (0-Ebene): Diverse Teaser unter­schied­licher Blickhierarchiestufen und das Boilerplate bieten eine Inhaltsübersicht

Screenshot Website erste Ebene

Erste Ebene: Hauptteaser und ausführliche Beschreibung geben einen Überblick über die Themen der Sektion

Screenshot Website zweite Ebene

Zweite Ebene: Fokus auf den Textbereich; im linken Bereich werden weiterführende Informationen angeboten

Website-Template für Kommunal­politiker der CDU

Professionelle Online-Kommu­ni­kation zum kleinen Preis

Online über eine eigene Website zu kommu­ni­zie­ren ist heute auch ohne Kennt­nisse von Pro­gram­mie­rung oder Aus­zeich­nungs­sprachen (HTML / CSS) so ein­fach wie noch nie. Content-Manage­ment-Systeme (CMS) er­lauben es über eine gra­fische Be­nutzer­ober­fläche (GUI) In­halte zu be­ar­bei­ten, ähnlich wie man es bei Text­ver­arbei­tungs­pro­grammen wie Word gewohnt ist.

Das Aussehen eines mithilfe eines CMS ge­ne­rier­ten Inter­net­auf­tritts wird dabei durch das Template defi­niert. Diese Format­vor­lage für Web­sites legt Farben, Formen, Schrift, Größen und Posi­tio­nie­rungs­optionen ein­zel­ner Ele­mente fest. Korrekt auf­gebaut, ist das Template un­ab­hängig von Funktio­nalität und Inhalt der Website, wodurch die Soft­ware per Knopf­druck auf dem tech­nisch neusten Stand gehalten werden kann. In seinem seman­tisch sauberen, bar­riere­armen und stan­dard­kon­formen Auf­bau, in seiner Flexi­bili­tät der Dar­stel­lung der Kern­funk­tionen des CMS und in seiner Er­weite­rungs­fähig­keit zeigt sich die Qualität eines Templates.

Um engagierten Kommunal­poli­ti­kern einen pro­fessio­nellen und kosten­gün­stigen Inter­net­auf­tritt zu er­mög­lichen, wurde ein indi­vidu­ell an­pass­bares, voll­ständig respon­sives (für mobile Geräte opti­mier­tes) Template im aktuellen Corporate Design der CDU erstellt. Durch die Viel­zahl der Nutzer, kann das Template trotz auf­wen­digen Auf­baus zu nie­drigen Lizenz­kosten ange­boten werden.

Als CMS wird Joomla 3.3 genutzt, weil es sich durch eine beson­ders ein­fache und für Mobil­geräte opti­mierte Be­nutzer­ober­fläche und einem großem Funk­tions­umfang aus­zeichnet. Zu den Stan­dard­funk­tionen gehören unter anderem Blog-Über­sichten, Kate­gori­sie­rung, Refe­renz­ierung von Mel­dungen, Ver­schlag­wortung, RSS-Feeds, Video­präsen­tation, Kontakt­formulare, Ein­bindung von sozialen Medien, Such­funktion, Banner, Login-Bereich u. v. m. Er­weitert wurde das Paket um einen werbe­wirk­samen Slide­show-Teaser mit Video-Ein­bindung und um einen Bild­be­arbei­tungs­mecha­nismus, der die ein­ge­stell­ten Bilder bei der Ausgabe der Website auto­matisch („on the fly”) ver­kleinert und zwischen­speichert (cache). Das ver­ringert den Arbeits­auf­wand bei der Pflege und er­höht die Be­nutzer­freund­lich­keit durch schnelle Lade­zeiten.

Screenshot der Website des CDU-Politikers Christian Mildenberger

Oben: Die Website des CDU-Politikers Christian Mildenberger
Unten: Die Demo-Website mit alter­nativer Posi­tio­nie­rung des Teasers und Vor­stel­lung weiterer Standard­funktionen

Screenshot der Demo-Website des Templates für CDU-Kommunalpolitiker
Screenshot der Demo-Website des Templates für CDU-Kommunalpolitiker