UPDATE 2.11.15- Schönheitswettbewerbe für Webseiten sind seltener geworden. Anlässlich der T3CON15 in Amsterdam hatte die TYPO3-Organisation einen Award ausgelobt. Nun sind die finalen Preisträger bekannt. Die als preiswürdig befundenen Sites können uns helfen, einen guten Blick dafür zu entwickeln, was man unter einer gut designten Website heute versteht. Sehen wir uns also an, was man von den Gewinnerseiten lernen kann.
In zehn Kategorien wurden Preise vergeben. Sicher soll der Award zeigen, was mit Typo3 designerisch und präsentationsmäßig – also technisch – möglich ist und was nach Meinung einer Jury zur Spitze der Entwicklungen gehört. Doch wie die Seiten sich dem User gegenüber präsentieren, kann man auch CMS-unabhängig betrachten.
Die Gewinner
- In der Kategorie NGO, also Nichtregierungsorganisationen, hat der Bund Naturschutz in Bayern gewonnen (http://www.bund-naturschutz.de/).
- Als beste „mobile“Site wurde die Aktion „Deutschland hilft“ (http://www.aktion-deutschland-hilft.de/) prämiert.
- Unter „E-Commerce“ hat Hapag LLoyd gewonnen, mit einer Seite über Kreuzfahrten (http://www.hl-kreuzfahrten.de/)
- Unter „Fincance“ konnte sich die Globalance Bank durchsetzen (https://www.globalance-bank.com/)
- In der Kategorie „Government/Politics“ gibt es zwei Preisträger, da die Punkteanzahl gleich war. Gewonnen haben die Seite der Landesregierung Rheinland-Pfalz und der Auftritt der Gemeinde Zeist in den Niederlanden (https://www.zeist.nl/).
- Als beste „Tourismus“-Seite fiel die Wahl auf Holiday Home (http://www.holiday-home.de/)
- Im Bereich „Sport“ gewann der Auftritt von Hannover96 (https://www.hannover96.de/)
- Der Gewinner in der Abzeilung „Education/Science“ ist die Website der Technischen Universität Eindhoven (https://www.tue.nl/)
Auf der Awardseite ist auch eine Kategorie „Education / Science“ benannt. Offensichtlich wurde aber kein Preis vergeben. (Update: dies war in vielen Veröffentlichungen nicht mitgeteilt worden.)
Was ist state of the art?
Solche Awards, auch wenn sie sich nur auf eine Basistechnologie beziehen – wie hier eben TYPO3 -, können Webseitenbetreibern wertvolle Hinweise geben, was state of the art ist. Wer heute vor der Aufgabe steht, eine neue Site zu designen, muss berücksichtigen, welche Designelemente und Prinzipien aktuelle Seiten einsetzen. Was haben also die „Gewinnerseiten“ gemeinsam?
- Ganz offensichtlich ist folgende Struktur quasi Standard (nicht revolutionär neu, eher als etabliert zu bezeichnen und eine gute Bestätigung für bisherige Entwicklungen):
- Das Logo steht oben links, Navigation und Subnavigation befinden sich auf gleicher oder ähnlicher Höhe
- Eventuell gesellt sich eine Suchbox dazu.
- Darunter finden wir ein großes, eindrucksvolles Bild.
- Im Bild, genauer gesagt, über das Bild können Texte (eher Überschriften) und Buttons platziert werden. Der wichtigste Call-to-Action findet sich oft schon hier.
- Der folgende Bereich unter dem Headerbild ist oft in drei Spalten aufgeteilt.
- Die Seite wird abgeschlossen durch einen Footerbereich, der meist in Spalten organisiert ist, ist aber optisch nicht unterteilt. Zu finden sind hier Servicelinks. Hier werden auch Trust Elemente (z.B. Qualitätszertifikate) platziert. Auch Social Media Präsenzen sind hierüber zugänglich.
- Responsivität ist Pflicht. Die komplette Breite des Screens wird ausgenutzt. Das Browserfenster präsentiert sich als organische Einheit. Das Headerbild zieht sich über die komplette Breite.
- In den meisten Fällen wird die Navigation horizontal angeordnet (oben).
- Interaktionsorientierte Effekte (etwa bei Mouseover) sind häufig zu finden.
- Selbstablaufende Mini-Animationen unterstützen den Eindruck der Interaktivität der Seite.
- Der Hintergrund der Seite ist zumeist weiß. Header und Footer „packen“ den Contentbereich ein. Man muss etwa dreimal scrollen, um an das Ende der Seite zu gelangen.
- Transparenzeffekte geben dem Design eine gewisse Leichtigkeit.
- Navigationselemente und Promoboxen werden ebenfalls animiert.
- Es wird ein festgelegtes Farbset verwendet und eine „Grundfarbe“ angelegt, der sich auch die Bilder unterordnen. Die Farben sind durchaus kontrastreich und kräftig (Farbe/Gegenfarbe-Konzept).
Inwieweit ist dies TYPO3-typisch?
Dieser Aufbau ist in diesem CMS angelegt, sozusagen tief in der DNA von TYPO3 verankert. Natürlich lassen sich aber auch andere Darstellungsstrukturen denken. Umgekehrt kann man nicht nur mit TYPO3 diese Anatomie für eine Webseite abbilden. Das geht auch mit Joomla!, Drupal oder Contao. Selbst mit WordPress, das als Blogsystem angelegt ist, lassen sich Frontseiten erstellen, die eher diesem Aufbau gehorchen.
Dennoch kann man davon ausgehen, dass TYPO3 vor allem im Agenturumfeld eingesetzt wird. Der Selfmade-Webmaster ist mit TYPO3 schnell überfordert. Das hat den Effekt, dass Profis und die besten Webdesigner oft mit TYPO3 arbeiten. Kunden, die auf dieses CMS setzen, stellen ein entsprechend hohes Entwicklungsbudget zur Verfügung, so dass Seiten entstehen, die aktuellen Anforderungen nicht nur genügen, sondern auch neue Möglichkeiten ausloten, um sich von Konkurrenten zu unterscheiden. Trotzdem sind die bereit gestellten Mittel nicht unbegrenzt. Daher werden entsprechende Projekte einen ausgewogenen Ansatz zwischen technischer Machbarkeit und ökonomischer Sinnhaftigkeit prädestinieren. Neu erstellte TYPO3-Seiten sind oft Anschauungsmaterial für best practises im Webdesign.