Die Ursachen hierfür sind nicht selten Anforderungen nach dem Motto „Die Startseite muss die Wurst sein“ oder „Den Nutzer packen und reinholen“. Verlustängste und unscharfe Zielvorgaben tun ihr übriges.

Unter Dauerbeschuss stehende, dadurch überforderte und genervte Besucher wenden sich ab und verlassen die Webseite. Sofern es Alternativen gibt oder der Markt nicht rein von Preisen diktiert wird.

Selten sieht man Geschäfte bzw. Läden, deren gesamtes Angebot draußen vor der Tür oder im Schaufenster ausgebreitet ist. Wo ist also das Problem bei Webseiten? Wo kann man ansetzen?

Zunächst muss man Verlustängste abbauen. Keiner verpasst etwas wesentliches, nur weil nicht gelich alles auf der Startseite erscheint. Es hilft ungemein, wenn man sich mal Gedanken über die Ziele und Aufgaben einer Webseite macht. Wenn man sich auf die wichtigsten Inhalte und Botschaften konzentriert. Voraussetzung hierfür: Kenne/definiere Deine Zielgruppe(n) und Ziele.

Die Startseiten bzw. Homepages sind nicht immer die wichtigsten Seiten und verlieren zudem weiter an Bedeutung: The Decline of the Homepage. Ich denke aber, dass Homepages meistens – für den Einstieg – doch noch die wichtigsten Seiten darstellen.

Das Bauchladensyndrom gilt es zu behandeln, in dem man Prioritäten setzt (Kampf um die besten Plätze) und die Herausforderungen gestalterisch löst (Essential Tips for designing an effective Homepage).

Eine Homepage ist irgendwie auch eine virtuelle Ladentheke.

• Was bietet ihr konkret an?
• Wie könnt ihr mir konkret helfen?
• Wie funktioniert das?

So funktioniert das schon mal nicht:

Was ist frei? Das es toll ist hab’ ich mir schon irgendwie gedacht. Und dass es mich reicht macht sowieso ;-)

In einem Artikel bei den Webkrauts habe ich mich mal ausführlicher mit dem Thema beschäftigt: Sprich mit mir – Gelungene Onlinekommunikation. Auch Nicolai Schwarz, der berüchtigte Textformer, nahm sich kürzlich der Sache an: Mit den richtigen Wörtern mehr verkaufen.

Anmerkung: Da ich nicht auf öffentliches Dissen stehe und man auch nie alle Hintegründe kennt, verzichte ich hier wieder auf die Angabe einer Quelle.

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“.

So einfach kann es eigentlich nicht sein. Zumindest, wenn man sich die Problem- und Fragestellungen in zahlreichen Foren etc. ansieht. Oft offenbare diese eben ein mangelndes Verständnis der Grundlagen. Gerade im Bezug auf CSS.

In zwei Artikeln wurde u.a. auch darauf eingegangen.

Weak constructs are most often due to the fact that people do not know what block formatting contexts are and what they do.Everything you Know about Clearfix is Wrong

Often when designers try to explain a particular feature of CSS to each other, they get a few things wrong.8 Common CSS Mistakes and How to Fix Them

In einem Bewerbergespräch hatte ich mal das Vergnügen mit einem Erwachsenen. Zwei Fragen haben ausgereicht aufzuzeigen, wie einfach HTML & CSS sind – nicht ;-)

Da muss man durch: Grundregeln und Spezifikationen

Grundlagenartikel, die mir selbst geholfen haben, habe ich vor ein paar Jahren mal übersetzt: Block vs. Inline und Vererbung und Kaskaden. Es werden zentrale Grundkonzepte von CSS beschrieben. Mit diesem Grundlagenwissen lässt sich so manchem CSS-Problem vorbeugen.

Als Dauerbrenner immer zu empfehlen, ist die Einführung von Michael Jendryschik: Einführung in XHTML, CSS und Webdesign.

Es kann auch nicht schaden, sich mal durch die kompletten Spezifikationen zu wühlen. Zumindest bei Verständnisproblemen mal darauf zurückzugreifen. Also ran an die Specs: (X)HTML & CSS (W3C).

Zugegeben machen Spezifikationen und Grundregeln nicht alle Kinder froh. Wer aber fleißig ist, wird als Erwachsener mehr Spaß haben.

[...] (Website) schließlich kam aus Deutschland und bestand aus eng gesetzten Zeilen, die auf zwölf Seiten ein Phänomen behandelten, [...] Der Text wies einen bemerkenswerten Mangel an Absätzen auf und war eindeutig für Leute geschrieben, deren Vorstellung von Ekstase eine mit Formeln vollgekritzelte Schiefertafel war.

Hat der Autor, speziell bei deutschen Angeboten, etwa entsprechende Erfahrungen gemacht? Wir werden es nie erfahren. Aber trotzdem noch einmal der Hinweis auf zwei Artikel, hier aus dem Webzeugkoffer: Typografie ist das halbe Webdesign und Mehr Lesbarkeit im Web – Einfach.

Zwei Artikel, die ich gerade gelesen habe, beschäftigen sich mit dem Wandel.

Zunächst muss man sich natürlich fragen, ob es so was wie Corporate Websites noch gibt, bzw. ob diese noch zeitgemäß sind: Die Corporate Website ist tot,es lebe… U.a. findet sich dort diese These:

Die Corporate Website ist zentraler Ankerpunkt für alle Webaktivitäten eines Unternehmens

Das muss auch in der Kommunikation mit den verschiedenen Stakeholdern berücksichtigt werden. Hier bieten sich bspw. die Social Media Newsrooms als zeitgemäße Wege in der Onlinekommunikation an.

Der Artikel 5 Wege die Corporate Website mit Social Technologies weiterzuentwickeln beschäftigt sich mit Ansätzen zur Dialogorientierung und Reduktion der Komplexität.

Corporate Websites sind keine Silos mehr, in der wir alle unsere Daten und Features reinstopfen, um dann alle Interessenten einzeln ins Silo zu lassen, um sich die Sache mal anzusehen.

Brutal mag da etwas übertrieben sein, aber die Statements lassen erahnen, wie umfangreich und komplex das Management einer Website sein kann. Vielleicht habt auch Ihr schon in überraschte Gesichter geblickt, wenn es um Wartungskosten, Aufwände für frischen Content etc. ging. Oder Ihr seid daran verzeifelt, dass in großen Gremien, stundenlang über verschiedene Grüntöne diskutiert wurde.

Der o.g. Artikel listet 28 Punkte und Zitate. Von initialer Bedeutung sind meiner Meinung nach die Punkte:

• Direction bzw. Ownership
• Bunfights (interessanter Begriff) bzw. zu viele Stakeholder
• Speed Kills bzw. Go-Live in Rekordzeit

Gerade Direction und Ownership gilt es zu Beginn und für den späteren Betrieb eindeutig zu klären. Um erstens konsistent sein zu können und zweitens vorwärts zu kommen. Gerade an diesem Punkt scheitern viele Angebote, gerade dann, wenn es um Corporate Websites geht. Das endet oft darin, dass die Besucher einer Website förmlich erschlagen werden. Weil jede Abteilung meint, prominent auf der Startseite vertreten sein zu müssen.

Speed Kills beschreibt den Umstand, dass (leider) oft die Qualität der Inhalte und Usability/Barrierefreiheit, einem schnellen Go-Live geopfert werden.

Obwohl. Vielleicht ist das Managen einer Website doch brutal ;-)

Aber lest selbst: 28 reasons why website management is brutal.

Vor knapp einem Jahr habe ich mal etwas zum Redesign der BBC-Website geschrieben: Webdesign & GUI-Konzepte der Zukunft – Beispiel BBC.

Kürzlich erschienen im BBC-Blog ein Artikel, der die Hintergründe auf dem Weg zum neuen und vereinheitlichten Look der Webseite beleuchtet: A new global visual language for the BBC’s digital services.

However due to the organic way in which the website evolved and the old structure of the business, with dozens of small design teams working independently of each other, the site had a fairly schizophrenic nature once you delved into its depths.

Es begann damit, dass man die einzelnen Seiten einfach mal ausgedruckt und an die Wand gepinnt hat. Aus eigener Erfahrung kann ich diese Methode sehr empfehlen. Sehr schnell offenbaren sich die größten Problemfelder, v.a. in Bezug auf die Konsistenz des GUI und der Elemente, die es pflastern. Ein Ansatz, den ich auch mal in Re-Design Retrospektive beschrieben habe.

Neben dem Wall of Shame Ansatz (Ausdrucken der Seiten), liefert der Artikel weitere sehr interessante Einblicke in den Analyse-, Konzeptions und Designprozess einer großen Nachrichtenwebseite.

Es mag auch bei BBC noch nicht alles perfekt sein. Aber vieles passt. Und es ist v.a. auch interessant zu sehen, wie in solchen Großprojekten gearbeitet und gedacht wird, welche Ziele, Grundsätze und Methoden hinter dem Endergebnis stecken. Es zeigt auch, dass ein solch umfangreiches Angebot nur dann konsistent sein kann, wenn ein Styleguide das Oberflächen- und Informationsdesign in geregelten Bahnen lenkt.

Der Ansatz der BBC ist für mich persönlich das, was ich mir von einem Nachrichtenportal vorstelle. Nur so voll wie nötig und im Endeffekt nicht so extrem überladen, wie man es von den meisten Angeboten im Web kennt. Darüber hinaus habe ich als Nutzer dann die Möglichkeit, die Sache an meine eigenen Bedürfnisse und Vorlieben anzupassen.

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