Der Showcase zeigt eindrucksvoll, was möglich sein wird. Dabei sieht das Ganze wie gewohnt auch noch sehr ansprechend aus. Sofern man die Seite mit Safari besucht… Denn nur dann, kann man sehen, was möglich sein wird. Oder man trickst ein bisschen.

Ein wenig kann ich dieses „Ausperren“ sogar verstehen.

Es handelt sich um eine Demo, die zeigen soll, was HTML5, CSS3 und Javascript zukünftig und im Zusammenspiel mit Safari so alles können. Man will vermeiden, dass die Demoseiten auseinanderfallen, besucht man sie mit einem Browser, der noch nicht ganz so weit ist. Webdesigner und -entwickler sollten in der Lage sein, sich den Safari zu installieren. Eigentlich sollten sie ihn eh schon drauf haben ;-)

Aber es geht um Webstandards. Offene Standards.

Offene Standards

Die Sache hat einen faden Beigeschmack. Es ist eine Demo, die Implementierungen von noch nicht fertigen Standards demonstriert. Und als solche – Demo oder Testseite – sollte sie auch dargestellt und präsentiert werden. Hier entsteht allerdings der Eindruck, HTML5 und CSS3 seien fertig und Safari der einzige Browser, der damit bereits umgehen kann.

Standards aren’t add-ons to the web. They are the web. And you can start using them today.

HTML5 und CSS3 sind noch nicht fertig. Gut, sie werden es auch nie sein. Wie zuvor HTML4, CSS 2 etc.  Es ist aber noch etwas früh, solange man den meisten Nutzern die schöne neue Webdesign-Welt nur mit Hilfe von Kniffen und Fallbacks bieten kann. Die meisten Anwendungsfälle haben in der Wildnis mehr oder weniger noch experimentellen Charakter.

Außerdem: Wer für offene Standards einsteht und diese propagiert, sollte diese auch so behandeln. So z.B. haben proprietäre bzw. Browser spezifische CSS-Präfixe nichts im Code zu suchen. Gerade dann, wenn es dafür bereits allgemeine, durch einen (noch unfertigen) Standard definierten Eigenschaften gibt: -webkit-border-radius -> border-radius.

Der Browserkrieg, der keiner mehr ist

Ich schätze Apple’s Engagement für Webstandards. Ein großes Unternehmen kann oft mehr und schneller bewegen, als der Einzelne. Natürlich aber geschieht das nicht ganz ohne Hintergedanken. Browser gibt es, so den Safari auch, für lau. Aber drumherum steckt die Kohle, die man möglichst schnell fördern möchte. Auch und v.a. die Konkurrenz von Microsoft sieht das auch so. Denen aber kann man im konkreten Fall zu Gute halten, dass sie ihre Demos offen halten.

So offenbart auch die HTML5-Flash-Diskussion ein Eigeninteresse des Browserherstellers. Es geht nicht nur darum, das Web durch die Verwendung offener Standards weiter zu öffnen. Löst HTML5-Video Flash ab, könnte man so einen indirekten Konkurrenten aus der eigenen System- und Software-Landschaft verbannen.

Anmerkung: Mir geht’s nicht um Kernobst-Bashing. Ich selbst nutze zwei Geräte aus dem Hause A. Bin sehr zufrieden, ein überzeugter, aber eben auch neutraler, mitunter kritischer Nutzer/Kunde und Webdesigner.

Eine für meinen Geschmack sehr ansehnliche Webseite – in HTML5. Das hätte man aber auch noch mit dem alten HTML hinbekommen ;-)

Mal wieder Zeit für eine Runde kommentierter Links zum nachdenken und dazulernen.

Wenn neu, viel Buzz. Peter Kröner bringt etwas Licht ins glitzernde Dunkel: Was ist HTML5 und was nicht? Und was hätte der Kaiser dazu gesagt?

Auch wem HTML zu einfach ist, der sollte sich trotzdem bewusst werden: Vorne kommt schnöde Hüpertextmarkablängwidsch raus:

Man muss es leider immer wieder wiederholen. Auch Menschen mit visuellen Einschränkungen, ja sogar Blinde, benutzen das Internet: Wie Blinde Websites erkunden. Dazu gab’s vor einiger Zeit auch mal einen Film:

Wer Ratespiele veranstaltet oder vage Vermutungen anstellt, der hat fast schon verloren. Usability Testing: Don’t Guess, Test.

Schöne neue Webfonts-Welt. Aber nicht ganz ohne Nebenwirkungen: Dealing With the Dreaded ‘Flash of Unstyled Text’

Auf die Dauer sparen gemeinsame Spielregeln Zeit und steigern die Qualität. Ein gutes Beispiel für Coding-Standards aus der Praxis: Code Standards

Man kann das ganze heute schon realisieren. Wenn auch nur mit Extra-Klimmzügen, will man es crossbrowser-mäßig heute schon einsetzen.

Webdesigntrends sind Frühjahr für Frühjahr ein beliebtes Thema. Nie waren wir hipper als dieses Jahr und verkürzen uns so die Wartezeit bis zum noch besseren kommenden Jahr.

So war u.a. der Spaltensatz in CSS3 Thema im Artikel Web Design Trends for 2010.

Now, with increased screen resolutions and the advent of grid layouts, more designers are adapting this method to the web to make websites easier to use and to fit in more content.

In den meisten Fällen war es bisher aber so, dass mir die Sache das Lesen enorm erschwert hat. Grund hierfür ist der unreflexierte Einsatz. Effekthascherei wird auch mit CSS3 fehl am Platz sein. Lesbarkeit ist ein wichtiges Gut. Auch in modernen Zeiten und eigentlich mindestens schon so lange es Print (-design) gibt ;-)

Droht der Spaltensatz zur neuen Mikroskopschrift zu werden?

Using several columns allows you to fit more content in the same space.

Es setzt unter einigen vielleicht eine Ernüchterung ein. Euphorisch losgerannt, wird/wurde der ein oder andere jäh gebremst.

Es gibt zwar schon das ein oder andere interessante Beispiel, ja sogar reale, in die Praxis umgesetzte Ansätze. So z.B. bei Youtube. Das war’s dann aber auch schon. So lange noch in großem Stil Fallbacks eingebaut werden müssen, rechnet sich der Aufwand eben nicht. Außerdem gibts es bereits die ersten Nebenkriegsschauplätze. So könnte Flash beispielsweise zur Spaßbremse werden: Die Angst vor dem Flash-Ersatz.

D.h. wir werden noch eine ganze Zeit mit dem schnöden alten Internet zu tun haben. Man kann aber dankbar sein, dass manch Einer die Zeit für Experimente mitbringt oder (finanzkräftige) Unternehmen, mit entsprechenden Forschungsressourcen Pionierarbeit leisten. So kann zumindest der Druck auf Browserhersteller und Standards-Stricker hoch gehalten werden. Nach dem Motto: „Da ist eigentlich schon was, das auch noch ganz gut funktioniert und Verbesserungen verspricht“.

Ich beantworte daher die Frage eines Lesers hier im Blog.

Was ist der Vorteil von CSS3 – Welche Browser unterstützen das zur Zeit?

Vorteile von CSS3

Gegenüber was? Wir sprechen eher über Neuerungen und Weiterentwicklungen, die uns zum einen das Leben als Webdesigner erleichtern, aber v.a. auch neue Möglichkeiten eröffnen. Im Prinzip stehen die Vorteile im Vordergrund (gibt es Nachteile?), die sich aus erweiterten Gestaltungsmöglichkeiten (Bsp. @font-face, Spaltensatz etc.) und Möglichkeiten hin zu effizienterem Code (Bsp. border-radius) zusammensetzen.

Browserunterstützung

Diese Frage kann man sich am besten durch übersichtliche Checklisten beantworten lassen. So z.B. Web Designers’ Browser Support Checklist oder etwas gezielter bei When can I use…

Man kann sich auch fragen What Does “Support” Mean?

Es kommt v.a noch darauf an

Wie oben erwähnt spricht, trotz der noch nicht vollzogenen Etablierung von CSS3, nichts gegen einen Einsatz bereits heute verfügbarer Techniken. Ob man heute schon CSS3 Eigenschaften verwendet, hängt von den eigenen Anforderungen und Ansprüchen sowie konkreten Kundenanforderungen ab. Auch hier muss wieder das Beispiel der abgerundeten Ecken (border-radius) herhalten.

Möchte ich runde Ecken haben, schreibe ich eine Zeile mehr Code und zack wird alles abgerundet. Das spart im Vergleich zu bisher viele Zeilen Code und Schneidearbeiten in Photoshop. Aber natürlich muss man heute noch Abstriche machen. Bei vielen Webseiten ist es so, dass die meisten Besucher nichts davon sehen werden. Auch hier ist der Browsersupport noch nicht flächendecken vorhanden. Man hat dann im Wesentlichen zwei Möglichkeiten:

Verzicht auf das Feature bzw. Stilelement: Ich lasse es ganz bleiben. Durch den Verzicht bekommen dann alle Besucher das Gleiche zu sehen. Aber muss das sein? Ich denke nein.

Der Vergleich zu Fernsehgeräten ist nicht von ganz weit hergeholt.

Some viewers still have black-and-white televisions. Broadcasting only in black-andwhite—the “lowest common denominator” approach—ensures a shared experience but benefits no one. Excluding the black-and-white television owners—the “you must be this tall to ride” approach—provides no benefit either.

Verzichtet die Unterhaltungselektronikindustrie auf Dolby-Surround oder digitales Fernsehen, nur weil es noch alte Geräte gibt, die damit nichts anfangen können. Nein. Natürlich nicht, aber eben ohne den Zuschauern etwas Wesentliches vorzuenthalten. Originäres Bild und Ton sind trotzdem für alle verfügbar.

Progressive Enhancement: Warum also nicht neue Techniken heute schon nutzen, wenn sie zur Verfügung stehen? Hier setzt das Prinzip des Progressive Enhancement an. Um das zu verdeutlichen, wieder zurück zum einfachen Beispiel der abgerundeten Ecken.

Als Webdesigner entscheidet man sich dafür, die Ecken von Boxen abgerundet darzustellen. Also schreibt man eine zusätzliche Zeile CSS-Code. Browser, die das bereits heute unterstützen, rendern entsprechend Boxen mit abgerundeten Ecken. Andere, die es noch nicht unterstützen, ignorieren die Anweisung und stellen das Ganze eckig dar. Das tut niemandem weh. Keiner verpasst was, außer vielleicht einen fancy Effekt bzw. Stilelement.

Aber: Nun könnte es sein, dass ich allen meinen Besuchern Boxen mit abgerundeten Ecken präsentieren möchte.Oder ein Kunde besteht ganz einfach darauf, weil er dem Prinzip des Progressive Enhancement nicht folgen möchte.

Tja dann gibt es auch Mittel und Wege. Mehr Schmerzen natürlich auch. Es sind dann ein paar mehr Zeilen Code und Bildbearbeitung notwendig. Oder man versucht das Ganze mit Hilfe von Javascript zu realisieren. Wobei sich mit JS auch keine 100% Abdeckung erreichen lässt (manche Nutzer haben JS deaktiviert). Aber runde Ecken sind zugegeben ein relativ kleines Problem. Im Falle vom Spaltensatz sprechen wir z.B. dann von noch weitreichenderen Fragestellungen und Workarounds.

Ähnlich verhält es sich auch mit anderen neuen Möglichkeiten in Richtung CSS3. Im Endeffekt muss man sich selbst entscheiden, wieviel einem der größere Aufwand wert ist, oder aber auch, die Anforderungen der Kunden beantworten diese Frage von ganz alleine.

Weitere Links zum Thema

• Progressive Enhancement: Die Zeit ist gekommen
• We’re Ready for CSS3, but are we Ready for CSS3?
• CSS3 + Progressive Enhancement = Smart Design
• CSS3 – Vor dem Endspurt? (eigene Einschätzung im Webzeugkoffer)

Man kann aber nach wie vor noch nicht daran glauben, in naher Zukunft schon problemlos die neuen Techniken anwenden zu können. Schon vor drei Jahren und länger war CSS3 ein konkretes Thema. Wie dieser bereits über drei Jahre alte Artikel stellvertretend zeigt: CSS3 – Alles wird gut?

Allerdings sind wir von der Einführung vermutlich noch weit entfernt und auch dann ist noch ein gutes Stück zu gehen bis die breite Anwendung sinnvoll möglich wird. Vielleicht sehe ich den kommenden Weg aber auch einfach zu pessimistisch. In diesem Punkt würde ich mich jedenfalls gerne irren.Dirk Jesse im Webkrauts-Artikel

Ein paar Artikel haben sich kürzlich näher mit den Besonderheiten im Bezug auf iPhone und iPad befasst.

• Webseiten für das iPad
• Webdesign fürs iPad
• Warum das iPhone nicht das Maß aller Dinge im Mobile Web ist
• The iPhone obsession

Interessante Gedanken zum Thema. Aber trotzdem sollte man sich nicht zu sehr auf ein Gerät fokussieren.

Kein Webdesign für das iPhone.

Hat jemand gute Quellen zum Thema Webdesign für den iPod?

Liechteneckers Relaunch hat mir gut gefallen. V.a. Farben, Kontraste und Illustrationen.

Der erste Bithalter 2010 und gleich vier mal ‘Schland am Start.

• Individuelle Layouts für unterschiedliche Artikel haben ihren Reiz. Das Agenturblog teilt seine Gedanken zum neuen Blogdesign-Ansatz in einem Artikel: Die ganz große Bühne
• Über den Umgang mit dem Validator: Der Quellcode gehört nur zur Aufgabe, nicht zur Lösung
• Nicht nur die Vorlieben von Suchmaschinen sollten Grund für kurze Ladezeiten sein. Ein paar Gedanken dazu und Tool-Tipps bei ux-zentrisch: Über Umwege zu schnellen Websites
• Auch wenn CSS3 noch ein Weilchen braucht, gibt es keinen Grund für Stillstand. Grundgedanke Progressive Enhancement: Die Zeit ist gekommen
• Der neue King heißt Context. The C Word: How context can inform our design process

HTML is an unbroken line stretching back almost two decades, and version numbers are a vestige of an older development model for standards that never really matched reality very well anyway. HTML5 is so last week. Let’s talk about what’s next.What’s Next in HTML, episode 1

Zu begrüßen wäre es auf jeden Fall, wenn man die Versionierung los wird. Am besten auch die für’s Web. Kein Web 2.0 mehr. Einfach Web. Dauerwurst.

Dazu andere

HTML-Zukunft: Nach 5 kommt 6 und What Comes After HTML5? Just HTML.

Die Webkrauts veröffentlichen zum fünften Mal ihren Adventskalender. Im Mittelpunkt stehen wieder Tipps und Tricks im Sinne von Webstandards und mehr Qualität im Web. Jeden Tag öffnet sich ein Türchen in Form eines Artikels.

Jede Menge Webkrauts füllen den Kalender mit Themen über Barrierefreiheit, Print-CSS, Bildbearbeitung oder Projektmanagement. Außerdem stellen wir einige kleinere Tools vor.

Beim Begriff Webstandards denken die meisten natürlich an (X)HTML und CSS. Daneben existieren weitere Standards, die vom W3C (World Wide Web Consortium) entwickelt und empfohlen werden.

Recherchiert man zum Thema, wird man feststellen, dass die wilden Zeiten bereits hinter uns liegen. Zeiten, in denen Prediger viel Energie dafür aufwenden mussten, für das Thema selbst mobil zu machen. Mittlerweile hat sich das geändert. Webstandards sind den meisten Webdesignern und in den meisten Agenturen bereits ein Begriff. Die Mission ist allerdings nicht beendet. Sie kann es auch nicht sein, weil alles im Fluss bleibt – v.a. im Web.

Webdesign mit Webstandards

Webdesign mit Webstandards bedeutet mehr, als die korrekte Anwendung von Standards für Auszeichnungssprachen wie (X)HTML oder Formatierungssprachen wie CSS – „valides HTML“. Die regelkonforme Anwendung der Webstandards ist aber sehr wohl das Fundament von Webdesign mit Webstandards. Hier gilt es weiter anzusetzen.

Webstandards sind Regeln, auf die sich die wichtigsten handelnden Unternehmen im Web als Basis der Interpretation von Webseiten geeinigt haben. Webstandards sind Regeln, an die sich Webautoren halten sollten. Im allgemeinen Sprachgebrauch fokussieren sich diese Standards auf (X)HTML, CSS, das DOM und JavaScript. Implizit wird mit dem Begriff »Webstandards« aber auch die sinnvolle Anwendung der Regeln gemeint.Aus der Einführung in XHTML, CSS und Webdesign, Version 4.0.1

Webstandards in der Praxis

Das tragen einer blauen Mütze ist nur eine Möglichkeit. Man könnte die Mütze, der Jahreszeit angepasst, auch jeden Tag tragen. Diese Aktion kann allerdings nur als Initialzündung oder als Mahnung an die dunklen Zeiten der Browserkriege betrachtet werden.

Webstandards sind der kritische Erfolgsfaktor für Qualität im Webdesign. Die sinnvolle Verwendung und Einhaltung geltender Standards sowie deren Weiterentwicklung ist ein permanenter (Lern-) Prozess.

Für mehr Qualität im Web

Die wichtigste Institution zu Webstandards im deutschsprachigen Raum sind die Webkrauts. Sie tragen durch ihre Veröffentlichungen entscheidend zur Aufklärung bei. Auch hier hat sich eine folgerichtige Entwicklung vollzogen, die seit einiger Zeit auch im Slogan zum Ausdruck gebracht wird. Von »Webstandards für ein besseres Web« zu »Für mehr Qualität im Web«. Weniger über Webstandards reden, mehr Webstandards praktizieren.

Die zahlreichen Artikel der Webkrauts machen auf Probleme aufmerksam und zeigen Beispiele für gelungenes Handwerk im Sinne der Webstandards. Aktionen wie der Adventskalender liefern – mittlerweile zum fünften Mal – geballtes Webstandards-Wissen und Best-Practice.

Das Netztwerk der Webkrauts ist außerdem eine gute Anlaufstelle für relevante Informationen zum Thema Webstandards. Eine Übersicht der Webkrauts-Blogs findet sich im KrautCosmos.

Webstandards heute und in Zukunft

HTML5 und CSS3 sind die beiden neuen Standards , die (relativ) kurz vor ihrer Vollendung stehen. Sie versprechen weitere Verbesserungen und Vielfalt für die Arbeit von Webdesignern.

Aktuell sind es noch die alten Richtlinien zu HTML 4.01 oder XHTML 1.0 sowie CSS 2.1, die gültig sind. Das sind die Webstandards, die es einzuhalten und sinnvoll zu verwenden gilt. Trotzdem ist es langsam an der Zeit, sich parallel mit den kommenden Webstandards zu beschäftigen.

Was sich aber wiederholt abzeichnet sind Probleme bei der Umsetzung bzw. der flächendeckenden Implementierung in aktuelle Browser. Viele rechnen mit einer praxisrelevanten Implementierung nicht vor 2011. Wenn es auch nicht so extrem werden dürfte, wie in Zeiten der Browserkriege.

Gerade die Webstandards-Bewegung hat in der Vergangenheit zum Friedensprozess beigetragen. Sie muss auch weiter aktiv bleiben, um den nötigen Druck auf die Browserhersteller aufrecht zu erhalten. Dazu gehören auch Aktionen wie der Blue Beanie Day. Im Sinne einer schnelleren und flexibleren Weiterentwicklung, der beiden nach wie vor zentralen Sprachen des Web.

Überblick zum Blue Beanie Day 2009

Robert Lender berichtet aktuell über den BBD09 und hält Interessierte in seinem Blog auf dem Laufenden.