Web 2.0 – Der Film

Dieser Film entstand zu großen Teilen auf dem BarCampBerlin2 und in separaten Interview-Sessions. Viele liebe Kollegen und Freunde sieht man wieder – eine gute Dokumentation. Nun hat man, will man jemanden über die deutsche Web 2.0-„Szene“ aufklären, endlich einmal einen handfesten Link.

The 2008 Gmail Appeal

Die Macher des Email Standards Project (ESP) riefen in Ihrem Blogbeitrag „Getting Some Gmail Attention“ dazu auf, Grimassen zu schneiden, diese fotografisch festzuhalten und die entstandenen Bilder in die Flickr-Gruppe „Project Gmail Grimace“ einzubringen. Aus diesen Bildern wurde nun ein Video geschnitten – eine feine Sache, und eine sehr innovative Form des Protests obendrein. Bleibt nun nur noch zu hoffen, dass Google uns erhört!

Auf meinem letzten Streifzug durch das Web auf der Suche nach Entwicklern, die sich verzweifelt bemühen, HTML-E-Mails und Webstandards zusammen zu bringen, bin ich über ein paar interessante Projekte und Beiträge zu diesem Thema gestolpert. Da gibt es z.B. das Email Standards Project, das am 27. November 2007 das Licht der Welt erblickte. Es bietet ein Forum für all jene, die den Glauben an die Heirat von Webstandards und HTML-E-Mails noch nicht verloren haben. Unter anderem findet sich auf den Seiten des ESP ein Acid-Test, mit dessen Hilfe die Rendering Engine von E-Mail-Programmen auf Schwachstellen in der Darstellung untersucht werden kann – auch die eigenen Testresultate sind auf der Seite des ESP veröffentlicht.

Weiterführende Links

• Email Standards Project
• A List Apart: CSS and Email, Kissing in a Tree, by Mark Wyner
• E-mail is not a platform for design, by Jeffrey Zeldman
• Eight points for better e-mail relationships, by Jeffrey Zeldman
• 456 BEREA ST: Help improve support for Web Standards in HTML email, by Roger Johansson
• 456 BEREA ST: CSS support in email clients, by Roger Johansson
• 456 BEREA ST: Microsoft makes accessible and standards compliant HTML email impossible, by Roger Johansson
• Campaign Monitor: Why we need standards support in HTML email, by David Greiner
• Campaign Monitor: Email Design Guidelines for 2006, by David Greiner
• Campaign Monitor: Zeldman says ‘HTML mail still sucks’, by Mathew Patterson
• Campaign Monitor: Microsoft takes email design back 5 years, by David Greiner
• Campaign Monitor: The truth behind the Outlook 2007 change and what you can do about it, by David Greiner
• Campaign Monitor: A Guide to CSS Support in Email, by David Greiner
• Campaign Monitor: A Guide to CSS Support in Email: 2007 Edition, by David Greiner
• What Really Happened with HTML and CSS in Outlook 2007, by Molly Holzschlag
• Web Standards in Email Clients, by George Ornbo
• sitepoint: Microsoft Breaks HTML Email Rendering in Outlook 2007, by Kevin Yank

Seit Jahren verfolge ich den Adventskalender der Webkrauts, dieses Jahr durfte ich zum ersten Mal dabei sein. Vom 1. bis 24. Dezember, wie das bei Adventskalendern so üblich ist, bieten die Webkrauts interessierten Webworkern knackig kurze Artikel rund um das Thema Webstandards.

Links zum Thema:

• Offizielle Pressemitteilung
• Offizielle Ankündigung der Webkrauts
• Jens Grochtdreis‘ Ankündigung

Nachdem Achim Schaffrinna in seinem Designtagebuch den Relaunch der Postbank aus der Sicht des Corporate Designs beleuchtet hat, habe ich heute im Namen der Webkrauts die technische Umsetzung des Frontends unter die Lupe genommen. Zu lesen gibt es das Ganze im Artikel „Postbank mit neuem Gesicht im Web“.

Ein kleiner Nachtrag: Elmar Baumann hat in seinem Kommentar korrekt angemerkt, dass Validome das Postbank-Markup als invalide bezeichnet. Das tut der Validator, weil im Markup Inline-JavaScript verwendet wird und die dort verwendete Skriptsprache deklariert werden müsste – entweder in einem meta-Element, oder aber im HTTP-Header. Recht hat der Validator schon …

„Ich gehe sogar so weit zu behaupten: Floatende div-Bereiche sind um keinen Haarbreit besser oder semantischer oder barrierefreier als rahmenlose Tabellen.“

In diesem Satz wimmelt es von Missverständnissen!

1. Ein div-Element ist semantisch absolut bedeutungslos.
2. Ein table-Element ist dazu da, um tabellarische Daten zu formatieren. Dazu meint das W3C folgendes: Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. […] To minimize these problems, authors should use style sheets to control layout rather than tables.
3. Unabhängig von der Tatsache, dass der table-Element eine semantische Bedeutung im Markup besitzt, bringt die Tabelle, wenn sie zur Formatierung einer Webseite herangezogen wird, Struktur- und Präsentationsebene zusammen und verletzt damit die Grundregeln moderner, standardkonformer Webentwicklung, nämlich die Trennung von
   • Structure (Struktur)
   • Content (Inhalt)
   • Presentation (Präsentation)
   • Behaviour (Verhalten)
4. Webstandards und Barrierefreiheit gehen zwar Hand in Hand, aber sind nicht inhärent miteinander verbunden. Eine standardkonforme Seite wird nicht zwangsläufig durch die Standardkonformität barrierefrei, aber eine barrierefreie Webseite muss immer standardkonform sein.
5. Wen kümmert es, ob Tabellen Rahmen besitzen, wenn es um Standardkonformität und Barrierefreiheit geht?

Stefan Münz weiter:

„Denn ebensowenig wie Tabellen für Seitenlayouts gedacht sind, ist die Funktionalität, eine Box links oder rechts von anderem Inhalt umfließen zu lassen oder auch mehrere Boxen auf diese Weise horizontal aneinanderzureihen, für ganze Seitenlayouts gedacht, sondern eher für Aufgaben wie die Platzierung einer Grafik oder eines Kastens mit Zusatzinformation im Fließtext.“

… und wenn mein Layout nun aus horizontal aneinandergereihten Boxen besteht? Welches nicht semantische Element sollte ich sonst zur Strukturierung der Inhalte einsetzen, wenn nicht das div-Element?

Sicher, das Floating von div-Elementen wird dazu benutzt, ganze Layoutanordnungen zu bestimmen, und richtig komfortabel und nativ löst es erst das CSS Grid Positioning Module. Aber im Unterschied zum Tabellenlayout, das Elemente auf der Strukturebene missbraucht, um die Präsentation zu beeinflussen, werden bei Float-Layouts Struktur und Präsentation streng separiert.

Fazit: Natürlich ist die Verwendung von Float-Layouts und die strenge Trennung von Struktur, Inhalt, Präsentation und Verhalten der Semantik wesentlich zuträglicher – und außerdem Voraussetzung für Barrierefreiheit.

Nach der anfänglich positiven Überraschung über den Relaunch von eBay, ausgelöst durch ein netteres Layout und eine aufgeräumte Startseite, kam die Ernüchterung durch die nach wie vor miese Qualität von Markup und CSS. Der Validator des W3C zeigt zwar 51 Fehler weniger an, als vor dem Relaunch, aber noch immer sind es 263 … und es sind nicht nur zu vernachlässigende (abgesehen von der Tatsache, dass es keinen Grund dafür gibt, ein Dokument invalide auszuliefern), sondern durchaus auch strukturelle. Schade …

Ach ja, da stach mir doch noch ein typografischer Fehler ins Auge, der eigentlich auf einer Startseite mit derartiger Reichweite nicht vorkommen sollte: „gibt’s“ wird zwar mit Apostroph geschrieben, aber halt mit Apostroph, und nicht mit Akut (accent aigu). Auch das hat etwas mit Qualität und Glaubwürdigkeit zu tun.

„Hallo Stefan, bald ist es soweit! eBay zeigt sich von seiner besten Seite: neu, optimiert und vor allem einfacher. Für noch mehr Spaß auf eBay!“ – Da bin ich ja mal gespannt. eBay? Einfacher? Bisher habe ich mich geweigert, bei eBay etwas zu verkaufen, da das Interface es schafft, sogar Barrieren vor gewöhnlichen Benutzern aufzubauen.

Immerhin kündigt eBay nun einen Relaunch für Anfang September 2007 an, in einem HTML-Newsletter, der durch fehlende Bilder auffällt, die wie immer durch die Mail-Applikation unterdrückt werden – dabei gibt es keine Notwendigkeit für die Nutzung von HTML und Bildern im Newsletter.

Ganz groß in puncto Usability: Das Suchen-Formular im Newsletter, was ohne Probleme zu realisieren gewesen wäre. Es ist aber nur ein Bild, das ein Such-Feld zeigt und auf die eBay-Seiten verlinkt. So etwas verärgert den User und zeigt nebenbei: eBay hat schon wieder (oder immer noch) nichts dazugelernt.

Groß angekündigt wird auch die neue Hauptnavigation, die – hätte ich es tatsächlich anders erwartet? – in Form einer Tabelle geschrieben ist.

Noch Fragen? Achso, natürlich: funktionert die Navigation durch die JavaScript–Dropdown-Menüs auch bei deaktiviertem JavaScript, sprich: gibt es dafür ein Fallback? Natürlich nicht. Weder das Kategorien-Dropdown, noch die Dropdowns der Hauptnavigation sind zugänglich.

Versucht man, die eBay-Startseite in der momentanen, bereits leicht aktualisierten Version zu validieren, so erhält man folgendes Ergebnis:

Result: Failed validation, 314 Errors

Sehr gespannt bin ich auf den vollständigen Relaunch, die Qualität des Quellcodes, die Zugänglichkeit und nicht zuletzt natürlich auch die Usability.

Einen weiteren Blick auf den eBay-Relaunch kann man aus einem anderen Winkel bei Exciting Commerce werfen.