Ein Re-Design. Hintergründe dazu im Happy Cog Studio.

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.

Über die Anforderungen an moderne Corporate Websites: 5 Wege die Corporate Website mit Social Technologies weiterzuentwickeln.

Das Problem mit den WirHabenDochKeineZeitUndKeinBudget-Gespenstern: The User Centered Design Conundrum.

Gedanken zum Thema Wireframes: The Future of Wireframes.

Tabellen haben auch ihre Daseinsberechtigung. Ein paar Tipps und Anschauungsbeispiele: Ultimate guide to table UI patterns.

Print stirbt, Digital rockt. Verwirrung. Über verschiedene Arten von Content und damit umzugehen: Books in the Age of the iPad.

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.

Im professionellen Kontext ist kein Vorbeikommen daran, den eigenen Beitrag zum Gesamtwohl des Unternehmens unter Beweis zu stellen – und der hat in aller Regel einen Bezug zum schnöden Mammon.Social Media Kennzahlen: CP(r)R und CPI

Der zitierte Artikel liefert weitere Ansatzpunkte für alle jene, die Zahlen liefern müssen.

Vor einiger Zeit habe ich mich – weil auch ich musste – in einer Serie von drei Artikeln mit dem Thema beschäftigt:

• Kennzahlen für Blogs? Suche nach KPI und ROI.
• Was kommt rum beim Bloggen und Microbloggen?
• Corporate Blogs: Außer Spesen nichts gewesen? Oder doch?

Das Blog von Cobus Bester ist das, was ich mir unter gelungenem minimalistischen Blogdesign vorstelle. Dazu kommt ein sehr interessantes Navigationskonzept. Die blauen Indikatoren an den Seiten sind ein weiteres Highlight. Leider sind Navigation und Indikatoren bei deaktiviertem Javascript ohne Funktion.

In letzter Zeit wurde die Diskussion zum Thema Designer und Code neu entfacht. Dazu und zu anderen Themen die Links in diesem Bithalter.

Manuela fragt: Müssen Designer HTML schreiben können?

Und weiter geht’s:

• Web designers who can’t code
• On Designers writing HTML
• 5 Good Reasons Why Designers Should Code

Und sonst gab’s natürlich auch wieder interessanten Lesestoff:

Gerrit erläutert: Warum ich Pixel für CSS-Schriftgrade verwende und findet im IE6 auch den Hauptschuldigen für fixe Größenangaben. Der arme Browser. Und dabei sollten wir ihm doch helfen: SaveIE6.

Zwei aktuelle Beispiele geben interessante Einblicke in den Design- und Konzeptionsprozess von Websites. The Anatomy of Web Design (MIX Online) und A new global visual language for the BBC’s digital services (BBC).

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.

Dazu kam es aber trotzdem ;-) Die Diskussion ist – wenn teils auch etwas Pingpong artig geführt – nicht ganz uninteressant. Und offenbart zwischen den Zeilen weitere interessante Aspekte. So z.B. auch den des Einflusses von Redakteuren auf die Barrierefreiheit.

Wenn man aber 10 Redakteure hat, die HTML Code eingeben, wie sie gerade lustig sind, hilft weder das W3C noch ein Validator… ;-)

Stimmt bedingt, wie auch ein folgender Kommentar anmerkt.

Hier könnte einer der zahlreichen zertifizierten Entwickler in Ihrem Haus sicher weiterhelfen und den RTE ordentlich konfigurieren. Das kann schlechten Redakteurscode signifikant mindern.

Stimmt. Aber auch so lassen sich Fehler nie ganz ausschließen. Ein noch so gezielt konfigurierter Editor verhindert nicht alle Fehler. So war es auch bei uns im Fall einer großen Webseite, wo trotz zusätzlicher Schulungen und Guidelines für Redakteure, immer wieder mal Fehler auftraten. Aber auch das ist ganz normal.

Das Zauberwort heißt Qualitätssicherung. Auch eine fertige und zum Startzeitpunkt fehlerfreie Webseite, muss in regelmäßigen Abständen geprüft werden. Nur so lässt sich Qualität halten.

Eine Website ist eben nie fertig. Die Einhaltung von guten Standards und Prozessen ist auch und v.a. im Betrieb essentiell für die Qualität und den Fortbestand einer Webseite.

Also – unabhängig vom Thema Barrierefreiheit – ist es schlicht und ergreifend so: Es gibt keine automatische Hohmpäidsch (Artikel hier im Webzeugkoffer).

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

Druck Deine Diplomarbeit. Solides Handwerk aus .de und ein schönes Seitchen.

• IE6 mitschleppen, links liegen lassen? Nicht immer ganz einfach zu beantworten: Abgestufter Browsersupport – Was kommt nach dem IE6?
• Wo wir schon dabei sind: What Does “Support” Mean?
• Ist CSS3 bereit für die Prime-Time? We’re Ready for CSS3, but are we Ready for CSS3? Sind es die Kunden und Nutzer? Die Browser noch nicht.
• Öfters mal in den Nutzer, Kunden, Suchenden versetzen: You are not your user
• Common Misconceptions about Web Designers
• UX Case Study: Designing a user-focused web app

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?