Webstandards

Jens Meiert und nun auch offiziell Google empfehlen ja aus Performancegründen die Nutzung der HTML5-DTD. Man spart dadurch ein paar Zeichen. Es gibt aber auch ernstzunehmende Debatten, ob man HTML5 schon nutzen kann und wenn ja, wie.

Bruce Lawson schreibt in Sitepoint ganz klar: “Yes, You Can Use HTML 5 Today!“. Molly Holzschlag hat sich angeschaut, welche Bestandteile von HTML man denn heute schon in welchem Browser nutzen oder nicht nutzen kann. Die leider ungefärbte Tabelle (die es auch als gefärbtes PNG gibt), hat Eric Eggert freundlicherweise eingefärbt. So erfaßt man die Aussage der Tabelle einfacher.

Neben Peter Kröners deutschsprachiger Einführung in HTML5 und seiner Betrachtung von Canvas gibt es auch eine lohnende englischsprachige Einführung in HTML5. Bei Letzter merkt man übrigens, warum es klasse sein kann, eine Internetseite auszudrucken. Ich finde Seite sehr schwer lesbar. Die Kontraste sind schlecht und die blauen Links glühen richtig auf dem schwarzen Hintergrund.

Eine Anlaufstelle für Fragen rund um HTML5 scheint sich bei HTML5Doctor zu bilden. Ich bin gespannt, ob die ähnlich nützlich werden, die CSS3.info. Und wer schonmal ein paar Praxisbeispiele sucht, dem kann bei HTML5Demos geholfen werden.

Sehenswert sind auch die beiden Präsentationen über Canvas von Martin Kliehm, die es bei Slideshare gibt.

Die hier präsentierten Links sind nur ein Ausschnitt. Ich sammele auch in Zukunft bei delicious empfehlenswerte Links zu HTML5.

Microsoft hat vor Kurzem eine PR-Seite publiziert, die den IE8 gegenüber den modernen Browsern als überlegen darstellen soll. Angesichts der vielen Nadelstiche seitens Mozilla, Opera und Safari finde ich das verständlich, nichtsdestotrotz ist das Ergebnis peinlich und falsch.

Brad Colbow hat das Thema in einem kleinen Comic augenzwinkernd verarbeitet. Webmonkey hingegen hat die einzelnen Behauptungen kommentiert. Sehr lesenswert! Ebenso bemerkenswert ist das kommentierte Vergleichschart, das jemand zu Flickr hochgeladen hat und das bei Webmonkey ebenfalls abgebildet und verlinkt ist.

E-Mail ist für mich unersätzliches Kommunikationsmittel. Da ich sehr viele Mails auf vielen Kanälen bekomme, ist mir ein leistungsfähiges und bedienungsfreundliches E-Mail-Programm sehr wichtig. Seit dessen ersten mühsamen Schritten nutze ich privat Thunderbird. Beruflich muss ich Outlook nutzen und weiss in diesem Zusammenhang dessen Funktionsumfang durchaus zu schätzen.

Meine anfängliche Begeisterung für Thunderbird ist mittlerweile erloschen. Zuviele kleine Details haben mich immer wieder gestört. Aber ich habe kein besseres Programm gefunden. Nachdem bei den Erweiterungen auch nie viel Bewegung war, vergaß ich diese Möglichkeit, das Programm zu verbessern. Gestern stieß ich durch Zufall auf eine für mich sehr praktische Erweiterung: QuickFolders. Diese Erweiterung ermöglicht es mir, beliebige Ordner als Reiter abzulegen. Ich kann so auf Unterordner schneller zugreifen, als bisher.

Viel interessanter finde ich allerdings, welche Neuerungen in der Version 3 auf mich zukommen. Webkraut Thomas Schwecherl schreibt darüber ausführlich und zeigt ein paar Screenshots. Ich bin schon sehr gespannt auf die endgültige Version.

Die Twitterkampagne gegen die Verwendung von Word in Outlook 2010 hat zumindest einen Erfolg gehabt: Microsoft hat sie mitbekommen und die Bedenken wahrgenommen. Allerdings wurden die Bedenken wohl nicht verstanden. Die Antwort von Microsoft ist enttäuschend, war aber kaum anders zu erwarten. Ich freue mich allerdings über die riesige Kommentarzahl. Fast ausnahmslos prügeln die Kommentatoren auf Microsoft ein. Danke, Leute. Man kann es Microsoft nicht oft genug sagen, daß das Web ein offener Raum ist, der nicht von einer Firma eingenommen wird. Es mag bei Microsoft gute Leute geben, die in diese Richtung denken. Ja, man hat sogar eine eigene Kampagne diesbezüglich ins Leben gerufen. Doch ich kann dieser Kampagne wenig Positives abgewinnen, wenn ich solche dummen Argumente wie die vom Outlook-Team lesen muss. Ich bin mittlerweile nicht mehr überzeugt davon, daß Microsoft ein offenes Web anstrebe und als selbstverständlich ansehe, wie mir immer wieder versichert wird.

“Formulare sind kein Datenbank-Prozess. Sie sind der Anfang eines Gesprächs.”

Diese schlaue These steht am Beginn der Präsentation “Mitmachbarrieren im Web 2.0” von Timo Wirth. Timo ist “Teamleiter Frontend” bei Aperto und hat einen informativen und klugen Vortrag zu Formularen gehalten. Ich bin erst heute dazu gekommen, die Präsentation durchzuschauen. Sie ist sehr empfehlenswert. Es fehlt nur noch eine Tonaufzeichnung des Vortrags.

Mein Kollege Martin Recke hat einen sehr klugen und schön formulierten Artikel im SinnerSchrader-Blog “Fischmarkt” über den derzeitigen Zustand der Desbatte über das Internet geschrieben. “Wir stehen vor einer Konterrevolution” ist absolut lesenswert.

Danke, Martin!

Ich habe mich schon diverse Male darüber aufgeregt, daß Microsoft offenbar glaubt, das Internet sei nur Teil des eigenen Produktportfolios und nicht ein eigenständiges Medium. Das IE-Team scheint dahingehend ein paar Lernprozesse durchgemacht zu haben, das MS-Marketing eher nicht.

Besonders schlimm wird es aber offenbar im Bereich Office, dort speziell bei Outlook. HTML-E-Mails sind ja schon ein Unding an sich. Bei Nicht-Profis (also den allermeisten Nutzern) erfreuen sie sich hingegen großer Beliebtheit. Wer allerdings schonmal versucht hat, einen optisch ansprechenden HTML-Newsletter zu erstellen, der in allen beliebigen Clients gleich gut dargestellt wird, der wird mir beipflichten, daß es weniges gibt, das schlimmer wäre.

Outlook ist nicht der einzige Problemfall in diesem Bereich. Notes ist eigentlich noch schlimmer, aber auch webbasierte Dienste sind problematisch. Es ist deshalb sehr verdienstvoll, daß der Dienstleister Campaigmonitor seine Erkenntnisse über die Unzulänglichkeiten der einzelnen Mailclients veröffentlicht. Er rief dazu eigens die Initiative “Email Standards Project” ins Leben.

Schon bei der Veröffentlichung von Outlook 2007 schrie Campaignmonitor Alarm. Angesichts der ersten Betaversion von Outlook 2010 tun sie dies wieder und haben eine neue Kampagnenseite eingerichtet. Denn Miicrosoft korrigiert seinen Entschluss von Outlook 2007 leider nicht, Word als Schreib- und Renderingengine für Outlook zu nutzen. Microsoft begründet diese fatale Entscheidung damit, daß die Kunden dann das gleiche sähen,w as sie auch malen würden in einer Mail. Vorausgesetzt – das wird in denm Statement unterschlagen – daß das Gegenüber auch Outlook hat.

Da ist er wieder, der falsche Gedanke! Mails sind kein Produkt von Microsoft. Microsoft erstellt hingegen ein Produkt, um das allgemeine Medium E-Mail, das auf allgemeinen Standards beruht, zu nutzen. Microsoft ignoriert dabei komplett, daß das neue Outlook 2007 noch nicht einmal 7% Marktanteil hat. Allerdings haben alle MS-Produkte zusammen schon einen großen Marktanteil. Sie haben vor allem einen großen Marktanteil in Firmen. Firmen, die Newsletter in Auftrag geben und ihn natürlich auch gerne so sehen möchten, wie er gedacht war. Zudem kann man annehmen, daß viele Firmen aus wirtschaftlichen Gründen eine Officeversion überspringen werden und Outlook 2010 einen größeren Marktanteil bekommen wird.

Microsoft in seiner Gesamtheit scheint sich gegen die Tatsache zu stemmen, daß das Web ein offenes Medium ist und man selber nur ein Marktteilnehmer unter vielen. Das Internet kann nur gut funktionieren, wenn sich alle an die allgemeinen Regeln halten. Schlechte Entscheidungen wie die von Microsoft fallen im Endeffekt auf die Konsumenten und Dienstleister zurück. All diejenigen, die Newsletter anbieten, werden nun mit noch mehr unnötigen Hürden zu kämpfen haben. Die Dienstleister sollten im Umkehrschluss ihre Schmerzen an die Kunden weitergeben, vor allem an die großen Kunden. Erst diese haben die richtigen Kontakte zu Microsoft. Die Kampagne fixoutlook.org ist gut und gut gemeint. Sie wird aber wahrscheinlich nicht viel ausrichten. Microsoft ist erst dann beeindruckt, wenn ihre großen Kunden auf sie zukommen und ihnen sagen, daß es eine ziemlich bescheuerte Idee ist, Word als Renderingengine zu nutzen. Ich hoffe, es kommt dazu.

Anfang diesen Jahres erblickte das “Webstandards-Magazin” das Licht der Welt. Ein mutiger Schritt der dahinter stehenden Agentur, angesichts des sich sonst abzeichnenden Zeitschriftensterbens.

Zwar war ich in der ersten Ausgabe mit einem Artikel vertreten, hatte aber beruflich und privat bedingt viel zu wenig Zeit, regelmäßig zu bloggen. Leider verpaßte ich es deshalb auch, die neue Zeitschrift gebührend anzukündigen. Die zweite Ausgabe soll deshalb nicht unerwähnt bleiben.

Diese Woche (26.6.) erscheint im Bahnhofsbuchhandel die zweite Ausgabe und auch diese verspricht wieder eine interessante Lektüre zu werden. Die Spannbreite ist auch diesmal wieder groß. Sie reicht von einem Artikel von Manuela Hoffmann, über die Entstehung des Webkrauts-Logos bis zur “Zukunft von Flash” von Christian Pfeil. David Maciejewski schreibt über “Webentwicklung und Browserstests am Mac”, Simon Dittlmann hingegen widmet sich der Microsoft Formate “XAML und MXML”. Virales Design, 5-Sekunden Tests für Websites, jQuery, Design Patterns sowie die Google-Maps API sind weitere interessante Themen.

Ich habe den Eindruck, die zweite Ausgabe wird inhaltlich tiefer gehen. Das finde ich klasse. Die thematische Bandbreite des Magazins ist groß. Manche Autoren sind mir (und Euch?) durch die Webkrauts bekannt. Einige Autoren sagen mir persönlich aber auch gar nichts. Ich bin sehr gespannt.

Und wer sich die Wartezeit ein wenig verkürzen möchte, der kann sich bis zum 26. Juni ja noch die erste Ausgabe kaufen. Auch die lohnt sich.

Für Gerrit van Aaken grenzt es fast an eine Beleidigung, als Kreativer bezeichnet zu werden, angesichts der immer wieder hochgejuchzten “kreativen Websites”. Ich kann ihn da voll und ganz verstehen und danke Gerrit für einen famosen Artikel. Zwei Zitate des in Gänze sehr lesenswerten Artikels finde ich bemerkenswert, geben sie doch das wieder, was ich schon seit Jahren öffentlich und intern “predige”. Doch diesmal sagt es kein Entwickler, sondern ein Designer.

Die Website ist nicht für den Betreiber des Angebotes gemacht. Und auch nicht für die ausführende Agentur. Der User muss letztlich die Website bedienen. Und ich schreibe ganz bewusst “bedienen”, nicht “erkunden”, “spielen” oder “erleben”. Und damit nähern wir uns dem Kern des großen Missverständnisses, das streng genommen schon seit Erfindung der Multimedia-CD-ROM existiert:

Der Anbieter will den User emotional beeindrucken. Der User aber scheißt auf emotionale Beeindruckung – er will schnell und einfach informiert werden.

So dogmatisch es klingen mag: Eine aufwändige äußere Form ist wertlos, wenn die dahinter liegenden Inhalte belanglos sind. Wenn die Inhalte hingegen hochinteressant sind, lenkt die äußere Form nur unnötig ab. Gute Inhalte brauchen keinen Affenzirkus zur Untermalung, sondern sind ihrer selbst Willen begehrt. Und wollen dann weiterverbreitet werden!

Danke, Gerrit. Du sprichst mir aus der Seele. Und es ist schön, diese Worte von einem Designer zu lesen, nicht von einem Entwickler. Ich kann also noch Hoffnung haben.

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.

Auf dem UXCamp vor ein paar Wochen habe ich das erste Mal von einem kostenlosen Dienst namens Doodle gehört. Das Schweizer Startup bietet eine einfache Möglichkeit, sehr schnell Terminabsprachen und kleine Umfragen zu erstellen. Jemand von Doodle sprach damals über User Testing und die Kunst, auch mal Features wegzulassen oder zu killen.

Nun bin ich heute das erste Mal in der Situation gewesen, Doodle sogar zweimal zu nutzen. Ich habe zwei kleine Umfragen für einen kleinen Personenkreis erstellt. Anstatt auf E-Mails zu warten und diese auszuwerten um zu wissen, welche Entscheidungen jeder meiner Freunde traf, gebe ich ihnen so die Möglichkeit, dies mittels eines Formulars zu tun. Ich habe dann die Entscheidungen ganz transparent vor mir. Das ist klasse.

Mir gefällt Doodle auf Anhieb. Die Optik ist zwar leider wenig schmeichelnd, aber darauf kam es mir nicht an. Ich wollte problemlos und schnell zu meinem Ergebnis kommen. Das habe ich geschafft. Ohne einen Registrierungszwang konnte ich eine Umfrage erstellen, bekam einen Link, den ich weitergeben konnte und einen Link zu einem kleinen Adminbereich. Beides kam schnell per E-Mail.

Am Ende kann ich sogar die Ergebnisse als Excel-Datei oder PDf exportieren. Ich bin begeistert. Das Tool ist klasse und durchdacht.

Auf dem letzten Webmontag in Frankfurt habe ich meinen Webinale-Vortrag (damals zusammen mit Tomas Caspers) in Kurzform wiedergegeben. Ich habe dafür die Folien zusammengestrichen und überarbeitet. Im Gegensatz zur Webinale habe ich nun auch ein paar Stichworte hinzugefügt, die den Inhalt meiner Einlassungen kurz wiedergeben.

Wer mich mit dieser Präsentation live sehen möchte, hat die Gelegenheit auf dem kommenden Webmontag am 6 Juli in Mannheim.

Gute Seiten, Schlechte Seiten – Webmontag Edition

Ich habe vor ewigen Jahrhunderten Politikwissenschaften studiert. Mein Schwerpunkt waren damals Wahl- und Einstellungs-, sowie Parteienforschung. Naturgemäß habe ich deshalb eine etwas andere Einstellung zu Umfragen und sehe diese auch andere, als dies ein fachlich unbeleckter Mitmensch hat.

Deshalb hat es mich sehr gefreut, daß die alte Tante ZEIT über die tendenziöse Umfrage zum Thema “Netzsperren gegen Kinderpornografie” schrieb und die Ergebnisse ins rechte Licht setzte. Kern der Kritik ist, daß die Frage falsch – aus Sicht der Auftraggeber natürlich richtig – gestellt wurde. Diesen “Fehler” lernt man im Studium schon im ersten Semester.

Eine besonders lächerliche Form der falschen Fragestellung habe ich heute bei Welt.de gesehen. Am Ende eines Artikels über T-Online – der mir sehr nach redaktionell getarnter Werbung aussah – war eine Umfrage platziert. Auf die Frage ‘”Wie gehen Sie ins Internet” gab es als Letztes die Option “gar nicht”. 4% stimmten im Internet dieser Option zu. Da war nicht nur derjenige komisch drauf, der die Antworten formulierte, sondern auch die bewußten 4% der Teilnehmer.

Eric Eggert plädiert dafür, als Webentwickler dem Kunden gegenüber ehrlich zu sein und auch mal “NEIN” zu sagen, wenn man nicht hinter der Umsetzung einer Webseite steht. Man solle Aufträge ablhenen oder beenden, wenn man nicht hinter ihnen stünde. Der Beitrag ist lesens- und bedenkenswert. Übrigens sind auch die Kommentare lesenswert. Ich sehe es wie manche Kommentatoren, daß Erics Einschätzung eher für Selbständige gilt, als für Angestellte in Agenturen.

Eric hat recht, daß man als Selbständiger einen gewissen Mut aufbringen muss, einen Auftrag auch mal abzulehnen. Aber es wird nicht nur dem eigenen Seelenfrieden, sondern auch dem eigenen Profil gut tun. Es macht ein gutes Bild nach aussen, wenn man in seiner Referenzliste qualitativ gute Projekte vorzeigen kann und nicht nach aussen zeigt, daß man prinzipiell jedes Projekt macht. Im Grunde sollte eine konsequente Haltung auch die dazu passenden Projekte nach sich ziehen.

Anbei habe ich alphabetisch die Links aufgelistet, die Tomas Caspers und ich für unseren Vortrag auf der Webinale genutzt haben. Ich habe die Links in eine alphabetische Reihenfolge gebracht. Manche Seiten erfordern harte Nerven

• Bahn.de
• BMW Mini
• Bundesinnenministerium
• Bundesliga.de
• Burgenlandfeuerwehr
• CDU Hessen
• (inoffizielles) CSSZengarden-Layout von Bruce Lawson
• Einfach für alle
• European e-Inclusion Champions
• Finanzamt Pirmasens – Zweibrücken
• Golfclub Lüderich
• Hannoversche Allgemeine Zeitung
• Hotel Favorite in Mainz
• International Cross-Disciplinary Conference on Web Accessibility
• TUI-Hotels.at

Ich blogge schon seit sechseinhalb Jahren. Ich begann damit, weil ich endlich eine Möglichkeit sah, regelmäßig in meinem Lieblingsmedium zu publizieren. Ich schrieb schon immer gerne. Ganz am Anfang wollte ich viel über Politik und Kleinkunst schreiben, nach ein paar wenigen Wochen schälte sich aber ein anderer Verwendungszweck heraus: ich nutzte das Blog als Notizblock für gefundene Links. So konnte ich sie mir zentral merken und mußte nicht dauernd Rundmails an Kollegen und Freunde schreiben.

Über die Jahre habe ich viele Links verbreitet, meist kurz kommentiert und so für meine Leser und mich eingeordnet. Hin und wieder habe ich auch tiefere Artikel geschrieben, habe mich aber nie nur auf wissensvermittelnde Artikel konzentriert.

In den letzten Monaten ist es hier stiller geworden. Dafür gibt es viele Gründe. Zum einen hatte ich viel Stress und Arbeitsbelastung an der Arbeit. Das hat meine freie Zeit fürs Schreiben stark eingeschränkt, hat aber vor allem meine Recherchemöglichkeiten stark beschnitten. Aber schon viel früher wandelte sich für mich der Fokus von meinem Blog weg. Zeitfresser waren immer wieder Artikel für Printpublikationen, Vorträge und Bücher, die ich als Fachlektor beteut habe. Zudem habe ich durch den intensiven Gebrauch von delicious und Twitter mein Interesse an der kommentierenden Verbreitung von Links verloren.

Schon seit etwa zwei Jahren schiebe ich ein vernünftiges Redesign meines Blogs vor mir her. Mittlerweile ist dies wichtiger denn je, denn immer mehr sehe ich darin die Chance, meine überall verstreuten Informationen endlich sinnvoll und übersichtlich zusammenzuführen. Vor Jahren nahm ich mir das aktuelle Blogdesign, das ich bei Robert Basic entdeckte, weil es mir gefiel. Mittlerweile kann ich es nicht mehr sehen, schreckt mich das Design auch ein wenig von der Arbeit an meiner Seite ab. Ich hoffe, daß ich in den nächsten Wochen mit einem neuen, durchdachten Auftritt reüssieren kann und dann auch die vielen anderen Kommunikationskanäle, die ich mittlerweile gerne nutze, sinnvoll in dieses Blog integriert sein werden. Dann benötige ich “nur noch” ein paar schlüssige Ideen für interessante Artikel. Wünsche werden jederzeit entgegengenommen. Ich hoffe, ich komme bald mit meinen Formularbetrachtungen weiter. Mit Formularen habe ich mich nun monatelang herumgeschlagen, die muss ich unbedingt thematisieren.

• Suchmaschine für Icons
• Using a CSS-Framework – eine interessante Präsentation, die erst begründet, warum CSS-Frameworks gut sind und dann die Nutzung von Blueprint im Detail zeigt. Ich kann mich einfach mit Blueprint gedanklich nicht anfreunden.
• Mathias Schäfer (a.k.a. moilily) möchte Markup-Qualitätsstandards forcieren
• Jens Meiert hat seinem Webinale-Vortrag eine schriftliche Form gegeben: Professionelle Webentwicklung und Wartbarkeit
• eklige IE8-Bugs mit Demo-Möglichkeiten für andere Browser
• Kompatibilitätsliste des IE8 – ich bin erstaunt, welche Seiten hier verzeichnet sind, auf daß sie im IE7-Modus angezeigt werden sollen
• Web form design guidelines: an eyetracking study – eine umfangreiche Eyetracking-Studie gibt Antworten über gutes Formulardesign
• einfaches Tutorial zum Toggeln mit jQuery
• UI Pattern Factory – zum Stöbern an einem verregneten Wochenende

Auf der Webinale 2009 hielt ich mit Tomas Caspers zusammen einen Vortrag mit dem Titel “Gute Seiten, schlechte Seiten”. Wir identifizierten darin immer wieder gesehene Fehler auf Webseiten, die 2009 nicht mehr vorkommen sollten. Wir lobten aber auch ein paar gute Umsetzungen, die es glücklicherweise auch gibt. Da Tomas und ich frei vortragen und Textwüsten auf Folien nicht mögen, bestechen die folgenden Folien mit der weitestgehenden Abwesenheit von Text. Für manche Screenshots sollte in den Fullscreenmodus geschaltet werden.

Ich hoffe, ich finde in den nächsten Wochen Zeit, die Inhalte unseres Vortrages textlich in eine Serie zu fassen. Ich denke, es lohnt sich. Bis dahin aber sind die meisten Screenshots selbsterklärend. Ausser vielleicht die Vorstellung: ich hatte auf dem ersten Kölner Barcamp Tomas und mich als “Aldorf und Stadler der deutschen Webstandards-Bewegung” betitelt. Das hat ihm so gut gefallen, daß er es unbedingt in der Präsi dabei haben wollte. Hoffentlich bekommen wir jetzt keinen rechtlichen Ärger

Dank der vielen Eindrücke von der Webinale vergaß ich schlicht zu erwähnen, daß ich im Rahmen der Webinale interviewt wurde. Das Interview könnt ihr im Blog von Sian-Ru Lai nachlesen.

In Berlin fand am 23. und 24. Mai das UXCamp statt, ein auf User Experience fokussiertes Barcamp.

Ich reiste erst am Samstag an, verpaßte so schon zwei Sessions. Ich brauchte bis vor Ort etwa sechs Stunden (!) von Mainz aus. Denn die Veranstaltung war nicht einfach im Osten der Hauptstadt sondern mit Adlershof im tiefen Südosten.

Das Barcamp war perfekt organisiert. Es fehlte an nichts. Das WLAN war immer da, es gab den ganzen Tag über leckeren und trotzdem starken Kaffee von Sonntagmorgen. Dazu gab es immer Wasser (in handlichen kleinen Fläschchen!) und den leckeren Walther-Saft, den man auf so ziemlich jedem Barcamp trinken kann.

Die Sessionplanung wurde immer recht schnell ins Wiki (Sa, So) übertragen und Änderungen wurden flugs per Twitter kommuniziert.

Die von mir besuchten Sessions schwankten zwischen professionellem Dilletantismus und richtig guten Sessions. Oft habe ich mich im nachhinein geärgert, nicht eine andere Session besucht zu haben, von deren Titel ich mir nichts versprach. Ich bekam dann aber über Twitter mit, daß es sich um eine interessante Session handelte.

Dieses Risiko hat man immer auf Kongressen und Barcamps. Bei Barcamps kosten die schlechten Sessions allerdings nichts. Das ist deren großer Vorteil. Im Gegensatz zu vielen normalen Barcamp-Sessions entwickelten sich hier oft recht schnell Diskussionen und Dialoge. Dies ist in meinen Augen der eigentliche Reiz eines Barcamps. Man kommt mit anderen Profis ins Gespräch und kann so seine eigenen Auffassungen hinterfragen (wenn man dazu in der Lage ist) und neue Aspekte kennenlernen. Sehr schön brachten dies Robert Basic und Florian Bailey auf den Punkt, die die versammelten UX-Profis mit der Behauptung “good design sucks” provozierten. Anhand der Beispiele Amazon, ebay und Craigslist konnte zumindest gezeigt werden, daß nicht nur perfektes, schönes Design erfolgreich ist. Die beiden provozierten eine interessante Diskussion, an der ich mich gerne beteiligte.

Dieses Themen-Barcamp war klasse. Es war perfekt organisiert und die Konzentration auf ein Thema führte auch dazu, daß sich die Inhalte endlich mal vom sonst leider sehr üblichen Volkshochschulniveau wegbewegten. Sehr schön fand ich die Diskussionsfreudigkeit der Teilnehmer. Ich freue mich schon auf eine Neuauflage, dann aber hoffentlich näher an die Zivilisation.