Der Deutsche Multimedia Award - eine Codekritik
In Berlin ist zum vierzehnten Mal der Deutsche Multimedia Award vergeben worden. In einem offiziellen Statement sprachen die Veranstalter davon, daß die Bewertungskriterien verschärft wurden. Deshalb wurden nicht in allen Kategorien Preise vergeben und auch nur vier goldene Preise.
Ein so bedeutender Award und verschärfte Bewertungskriterien erregen natürlich mein Interesse. Also schauen wir doch als Erstes auf die Bewertungskriterien und diejenigen, die sie anwenden. Die angesprochenen Kriterien sind "Konzept und Strategie", "Innovation", "Design", "Benutzeransprache und Usability" sowie der "Gesamteindruck". Die bewertenden Jororen sind durch die Bank weg Kreative, meist "Geschäftsführer Kreation". Ein Blick auf den Code warf von den Juroren sicherlich niemand und ein Gedanke an Performance, oder einfach solides Entwicklerhandwerk war sicherlich auch außerhalb der Bewertung.
Wir haben es demnach mit einer Jury mit beschränkter Sichtweise zu tun. Die Preisträger sind also auf Grund einer netten Optik oder einer guten Nutzerführung zur Ehre gekommen, nicht weil sie solides Handwerk, eine pfiffige technische Lösung oder eine performante Anwendung repräsentieren würden.
Ich möchte den Blick der Juroren mit meiner eigenen, beschränkten Sichtweise ergänzen. Ich werfe nur kurz einen Blick unter die Haube und bewerte die handwerkliche Qualität der Webseite.
Silber bei "Corporate Websites"
Relaunch Wiedemann Werkstaetten (Wiedemann Werkstätten, KMS TEAM GmbH)
Die Seite ist eine reine Flash-Seite. Immerhin befindet sich auf der Startseite ein kleiner Ersatztext für diejenigen, die kein Flash besitzen. Das bringt ihnen zwar auch keine weiteren Infos, aber immerhin wurde diese Lösung benutzt. Mir stellt sich allerdings die Frage, warum Typo3 genutzt wurde, um eine reine Flash-Seite umzusetzen. Dafür genügen ein kleiner Editor und ein FTP-Programm. Sollten einige Texte geändert werden, kann man dafür eine einfache Verwaltungsoberfläche für ein XML bauen.
Immerhin ist die schlichte Seite mit dem Ersatztext und dem Flash valide. Problematisch ist, daß die Seite kein zugängliches Impressum hat. Das Impressum existiert nur im Flash-Film. Es müßte aber auch in der HTML-Struktur stehen.
Bronze bei "Corporate Websites"
Relaunch von BauNetz (BauNetz Online-Dienst GmbH & Co. KG, Projektbuero Henkel.Hiedl)
Die Seite kommt als XHTML1 strict daher, leider mit dem Meta-Tag, der den IE8 in den IE7-Modus stürzt. Vielleicht überschnitt sich die Erstellung der Site mit dem Beta-Stadium des IE8 und man ging vor der endgültigen Version live. Oder man hatte nicht mehr genügend Budget für Tests. Ich hoffe jedenfalls, daß dieser Tag in der nahen Zukunft verschwindet und eventuelle Unebenheiten im IE8 behoben werden. Wir Entwickler sollten Microsoft dazu motivieren, immer neue Versionen vorzulegen und nicht auf alte Versionen zurückfallen.
Leider wird der Code dem strikten Anspruch nicht gerecht. Auch wenn es nur acht Fehler sind, es sind leider typische Fehler. Zum einen gibt es in einem strict-Dokument kein "target"-Attribut mehr. Der Kunde mag nachträglich wollen, daß sich der Link in einem neuen Fenster öffnet. Dann muss man entweder die DTD ändern oder Javascript nutzen. Es gibt auch keine Präsentations-Attribute wie "border" mehr. Und immer wieder gern genommen ist auch ein nicht-maskiertes "&"-Zeichen. Ich persönlich ärgere mich dabei allerdings immer über den Validator, nicht über den Fehler.
Schade finde ich, daß extra für zwei Striche ein paar leere Container in den Code eingefügt wurden. Es ist mir klar, daß dies nur geschah, um sie auf der gleichen Höhe zu haben. Da die darüber stehenden visuellen Spalten glücklicherweise nicht in einer Tabelle sind, können sie unterschiedlich lang wachsen. Das ist ein altes Problem, das man sinnvoll mit Javascript lösen kann. Ich finde, das sollte man auch. Die Javascriptversion würde dafür sorgen, daß die beiden nebeneinander liegenden Container gleich lang sind und dann mit einem breiten Strich abschließen. Die javascriptfreie Version hätte die Striche nicht. Das wär auch kein Problem.
Über Geschmack kann man schwerlich streiten, deshalb sagt es nicht viel wenn ich meine, daß das Layot suboptimal ist. Es erinnert mich an so manche Designerzeitschrift. Hauptsache, wir haben ein tierisch großes Bild im Hintergrund. In diesem Falle ist es über 1900 Pixel breit und wiegt fast ein halbes Megabyte. Weniger wäre hier sehr viel mehr. Die Seite würde spürbar schneller werden, könnte man auf dieses Monsterbild im Hintergrund verzichten.
Die Idee des semantischen Codes ist an den Entwicklern leider größtenteils vorbeigegangen. Eine sinnvolle Struktur fehlt, stattdessen werden großzügig DIV-Container, IDs und Klassen verteilt. Nicht besonders schön finde ich auch diesen Codeausschnitt:
<p><span class="bold"><br /></span></p><br /><p>
Überschriften werden in folgendes Codekonstrukt gesteckt:
<span class="headline_hauptseite"> Lost in Translation </span>
Dazu kann ich leider nur sagen: Setzen! Sechs!
Glücklicherweise haben die Entwickler auf den Artikelseiten partiell die Semantik wieder entdeckt. Es werden Überschriften und Absätze verteilt - leider nicht überall.
Gold bei Microsites
Entdecke Deine Traumküche von Z bis A (Ikea Deutschland GmbH, Grimm Gallun Holtappels GmbH & Co. KG)
Okay, wieder eine Flash-Seite. Ich denke, das muss so sein. Kreative lieben Flash. Deshalb gibt es in der PAGE im Zusammenhang mit dem Internet auch fast nur Flash-Themen. Aber warum muss mich diese Seite auch noch mit einem Popup begrüßen? Gut, daß mein Browser dieses Popup unterdrückt. Haben die Kunden immernoch nicht gelernt, daß automatische Popups nerven und meist unterdrückt werden? Vielleicht nicht, wenn sie von ihrer IT noch zum IE6 genötigt werden. Die Agenturen sollten es ihnen sagen.
Ich weiss also nicht, was dieses Popup von mir wollte. Es kann aber auch nicht wichtig sein, denn Wichtiges sollte nicht in ein Popup, sondern in das Hauptfenster.
Nach einem Klick auf das große Bild der Bühne weiss ich allerings, daß das Popup doch wichtig war, denn in ihm sollte sich die prämierte Applikation öffnen: eine tolle IKEA-Welt mit interaktiven Filmen, lauter Musik und lauten Geräuschen. Schade, daß man diese Anwendung nicht in die eigentliche Seite integriert hat. Da hätte man sicherlich auch schöne Interaktion zwischen dem Film und dem Katalog herstellen können.
Die Microsite füllt den gesamten Bildschirm und kommt rein konzeptionell auch alternativlos. Es lohnt sich nicht, hier den Code der Seite anzuschauen. Allerdings stellt sich mir bei dieser witzigen und gut gemachten Seite die Frage, warum die Grafiker (oder der Kunde?) unbedingt Bedienelemente verstecken wollten. Anders als verstecken kann ich es nicht nennen, wenn man auf einem schwarzen Hintergrund Links in dunkelgrau und kleiner Schrift platziert. So findet man schwer den Knopf zum Ausschalten des Tons oder für das Abo des Newsletters. Und warum nur den Ton ausmachen, warum nicht einfach leiser?
Aber für meine Betrachtungen ist diese Seite ohne Relevanz, sozusagen außer Konkurrenz.
Silber bei Microsites
Golf 6 (Volkswagen AG, DDB Germany, Hamburg)
Bei dieser Seite habe ich Probleme, höflich zu bleiben. Eine erste höfliche Frage an die Entwickler: "Was machen Sie beruflich?"
Die Seite besticht durch kleine Schrift. Sie wird als HTML 4.01 ausgeliefert, besitzt aber Elemente in XHTML-Schreibweise. Es handelt sich darüber hinaus um ein Tabellendesign. Wir haben desweitern eine Menge Inline-Styles und Inline-Javascript, vor allem aber Eventhandler im HTML. Die Erkenntnisse der letzten vier Jahre sind möglicherweise an den Entwicklern vorbeigegangen. Oder aber am CMS, das eventuell antik ist und guten Code nicht zuläßt. Oder, und das will ich ehrlich gesagt hoffen, die Basis dieser Seite ist so viele Jahre alt, daß dieser Code damals "state of the art" war.
Aber auch wenn das CMS schlecht wäre, müßte man nicht auf ein Mindestmaß an Semantik verzichten. Es ist ja schon toll, daß sich in den Tabellenzellen für die Überschriften auch Überschriftenelemente befinden. Der Fließtext hätte hingegen auch Absätze bekommen dürfen.
Diese Seite ist für mich in keiner Hinsicht preiswürdig. Es ist traurig, daß sich Weltfirmen mit solchen Seiten noch repräsentieren lassen. Eine Weltfirma, die Wert auf die Qualität ihrer Produkte legt und damit wirbt, sollte auch im Internet Wert auf die Qualität der Darstellung legen. Wenn Agentur oder CMS das nicht liefern können, ist es Zeit für einen Austausch.
Ich frage mich auch noch immer, welches Detail die Jury zu dieser Platzierung bewogen hat. War es der miese Code? War es die zu kleine Schrift? Oder war es der Film im Kopf der Seite? Flashfilme sind mittlerweile nichts Besonderes mehr, daß man eine Auszeichnung vergeben sollte.
Silber bei Microsites
Rainbow Clinics (canvasco GmbH, Plan.net/Serviceplan)
Es handelt sich hierbei wieder um eine Flashseite. Die Entwickler haben sich leider nicht die Mühe gemacht, einen alternativen Inhalt für Surfer ohne Flash-Plugin zu erstellen, auch kein Impressum. Also gebe ich mir auch keine Mühe für eine weitere Betrachtung.
Bronze bei Microsites
"Collection Villeret 1858" (Montblanc International GmbH, Elephant Seven Hamburg GmbH)
Wieder eine Flash-Seite. Auch sie glänzt mit teilweise schlecht lesbarer Schrift. Kann es sein, daß man ein Schulterklopfen von "Kreativ Direktoren" bekommt, wenn man eine Flashseite erstellt und dabei dafür sorgt, daß man Text darin schlecht lesen kann? Text lenkt ja nur von den Bildern ab.
Die Entwickler haben sich Mühe gegeben, auch alternative Inhalte zur Verfügung zu stellen. Das ist löblich. Es gibt auch einen Link zu einem Impressum.
Bronze bei Microsites
Mercedes-Benz Viano: Der beste Platz für Helden. (Mercedes-Benz Vans, Syzygy AG)
Welch Wunder, wieder eine Flash-Seite. Diesmal wird eine etwa vier bis fünf Jahre alte Idee recycelt: man navigiert auf einem Planeten. Die Programmierung scheint aber ziemlich tricky und fehleranfällig zu sein. Einen ersten Test nahm ich in Google Chrome vor. Jeder Link führte zum wiederholten Laden der gesamten Applikation, ich kam nie weiter. Erst im Firefox sah ich, daß diese Seite tatsächlich funktionierte.
Und obwohl es sich dabei nur um Flash handelt, hätte die Agentur für die paar Zeilen Code ruhig auch validen Code nehmen können. Dazu gehört an den Anfang schonmal eine DTD. Schade, daß man das im Jahr 2009 noch betonen muss.
Bronze bei E-Commerce
F_BOX Picture Shooter (Mackevision Medien Design GmbH, Mackevision Medien Design GmbH)
Die wohl eigentlich gemeinte Applikation ist mal wieder eine Flash-Applikation. Und mal wieder öffnet sie sich in einem neuen Fenster. Die aufrufende Seite ist ein Traum an Semantikfreiheit. Die Entwickler dachten möglicherweise, daß moderne Webentwicklung nur auf DIVs baue, deshalb könne man ganz leicht auf Absätze oder Überschriften verzichten. Ersatztexte für grafische Überschriften sind genauso unbekannt wie die Tatsache, daß man nicht jedem Element eine Klasse oder ID geben muss. Alle 44 Validierungsfehler beziehen sich auf nicht maskierte "&"-Zeichen. Das zeigt die Beschränkung des Validators. Gegen die Abwesenheit jeglicher Semantik ist die fehlende Maskierung eines Sonderzeichens in meinen Augen nebensächlich.
Das schlechte Gesamtbild der beim Multimedia-Award nicht zur Debatte stehenden Seite rundet die kontrastarme und recht kleine Schrift ab.
Gold bei Interactive Campaigns
Studieren in Fernost (Kultusministerium des Landes Sachsen-Anhalt, Aperto AG)
Da es sich bei der anderen Goldprämierung offenbar nur um einen Youtube-Film handelt schaue ich mir die andere Goldprämierung an. Die ausführende Agentur Aperto hat einen sehr guten Ruf und brilliert immer wieder mit barrierefreien Auftritten. Entweder waren an dieser Realisierung unerfahrene Praktikanten beteiligt oder der Entwickler hatte noch nie ein Wordpress-Blog aufgesetzt. Wie anders ist es erklärlich, daß der größte Teil des HEAD-Bereichs außerhalb der dafür zuständigen Tags sitzt? Ein simpler Fehler in der Nutzung von Templates führt so zu Validierungsfehlern. Aus Entwicklersicht kann sowas nicht goldwürdig sein.
Ansonsten besticht die Seite durch eine Anhäufung von Filmchen und überrascht mit fast unlesbarem Text als Bildunterschrift. Das wird besonders deutlich unter dem Bild der Großkopferten vom 29. Mai. Daß auch so etwas bei der Jury als preiswürdig durchging könnte man so deuten, daß für Grafiker unlesbarer Text nichts Schlimmes ist. Ich hoffe, ich täusche mich da.
Ansonsten ist diese Seite ein normales Blog mit vielen eingebundenen Filmchen, die das Scrollen ein wenig behäbig machen. Die Optik ist knallig und erinnert ein wenig an die PAGE (welch Wunder) oder "Create or die". Auf den ersten Blick erschließen sich mir weder Preiswürdigkeit noch der Gold-Status. Naja, ich bin ja auch nur Entwickler.
Ein kleiner Performancetest offenbarte das Problem dieser Seite: die zweite Übersichtsseite gab der Profiler in Firebug mit 2 MB an. Dank 16er-DSL wurde sie bei mir in 7 Sekunden geladen. Da es aber offenbar Verbindungsprobleme zu Sevendload gab, hing sie im noch nicht fertig geladenen Zustand noch mehrere Minuten in meinem Browser. Dann gab ich auf.
Um mal etwas Positives zu erwähnen möchte ich darauf hinweisen, daß diese Seite zu keinerlei Kritik bezüglich Semantik Anlass gibt. Das ist aber auch ehrlich gesagt nicht schwer, handelt es sich doch um ein inhaltlich sehr arm strukturiertes Blog. Zudem helfen auch die vielen Basistemplates für Wordpress dabei, eine simple Semantik zu realisieren.
Silber in Interactive Campaigns
Jeden Tag ein neues Abenteuer (Lego GmbH, Plan.net/Serciveplan)
Unter der angegebenen URL fand ich leider nur einen langen Pressetext. Der konnte mit der Auszeichnung nicht gemeint sein. So kam ich dazu, den Code der Legoseite zu lesen. Dieser paßt eindeutig auf den Titel der Kampagne, denn er ist abenteuerlich. Keine DTD, Tabellendesign und Verzicht auf die minimalste Semantik sind schon hart. Das kann man nicht mit einem CMS entschuldigen, da gehören richtige Frontendentwickler mit Ahnung von ihrem Beruf hin, um diese Seite aufzumöbeln.
Bronze in Interactive Campaigns
Playing the City (Schirn Kunsthalle Frankfurt, Neue Digitale/Razorfish GmbH)
Auch diese Aktion ist leider nicht mehr live zu sehen. Ich hoffe, es handelt sich dabei wirklich um ein sehenswertes Special, nicht diese langweiligen und schlecht lesbaren Texte der normalen Seite. Auch hier läßt der Code wieder schaudern: unsemantisch und Tabellendesign. Immerhin hatte der Entwickler schonmal vom h1-Element gelesen. Trotzdem ist weiss auf hellgrau ein denkbar schlechte Farbkombination. Der Text wird durch die durchgehende Großschreibweise auch nicht besser lesbar. Aber all das stand ja glücklicherweise nicht zur Diskussion bei der Preisvergabe.
Fazit
Webseiten zu erstellen ist Handwerk, keine Kunst. Und zu diesem Handwerk gehört mehr als eine interessante oder schicke Optik. Dazu gehört ein durchdachter Code unter der Haube. Zumindest sollte dieser Code aber den Regeln des Handwerks (vulgo Webstandards) entsprechen. Auch in Sachen Performance sollte man nachdenken und zu guter Letzt ist es fahrlässig, nicht die unterschiedlichen Zugangsmöglichkeiten zu einer Webseite in Betracht zu ziehen. Auch wenn man es nur mit reinen Flash-Seiten zu tun hat, sollte man doch testen, ob sie in allen Browern funktionieren. Es ist mir unbegfreiflich, daß eine Flashseite in Chrome nicht funktioniert, in Firefox hingegen schon.
Der Deutsche Multimedia Award ist ein oberflächlicher Award, denn er schielt nur nach der Oberfläche. Wir benötigen einen Award, der das ganze Bild betrachten möchte. Der BIENE-Award geht in diese Richtung, ist durch den Fokus auf Barrierefreiheit aber auch wieder thematisch eingeschränkt.
Alles in allem finde ich die Leistung der beteiligten Agenturen erschreckend schlecht. Die Fehlbedienung eines simplen Wordpress-Templates durch Aperto ist dabei noch harmlos. Richtig schlimm finde ich die Abwesenheit semantischen, durchdachten Codes bei den ausgezeichneten Seiten. Wir haben 2009, nicht 1999. Aber offenbar nicht überall. Schade.