Die Schwerpunkthemen sind heute mobiles Web und Informationsarchitektur.

Mobiles Webdesign

Das mobile Web aus Usabilitysicht: Braucht man spezielle Lösungen für mobile Besucher, wo gibt es Schwierigkeiten und was sind Ansatzpunkte für Verbesserungen?

Lohnt der Aufwand, Websites für mobile Zugriffe anzupassen? Mobile Web Design: Is it Worth It? Es kommt darauf an.

Außerdem eine Präsentation zum Thema, die sich mit der, v.a. durch das iPhone bedingten, Geräte- und Applikationsfixierung beschäftigt: Lessons in Design and Strategy for Your Mobile Experience.

Informationsarchitektur und Organisation

Eine Einführung ins Cardsorting: Mit einem Card Sorting zur nutzerfreundlichen Informationsarchitektur. Wer’s noch nicht getan hat, sollte es unbedingt mal ausprobieren.

Im Bestreben, Websites übersichtlich zu gestalten, sollte man nicht voreilig streichen: Visual Hierarchy is the Art of Managing, Not Eliminating.

Die Homepage als Bauchladen hat ausgedient: The decline of the homepage.

Vermischtes

Ausblick auf neue Layouttechniken mit CSS3: The CSS 3 Flexible Box Model.

Wenig ist einfach. Denkste: Simplicity isn’t that simple.

Einführung in Grids: Grid-Based Web Design, Simplified.

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.

Weil’s heute ins Tagesprogramm passt. Eine der besseren Friseur-Webseiten ist die von Rolf & Bernd. Die Preise sind auch Geschmacksache.

Thomas Scholz fasst nochmal zusammen, warum man im Web den Blocksatz vermeiden sollte.

Die Diskussion ist zwar schon etwas ein alter Hut. Aber da die Berufsbilder nach wie vor unscharf sind, verweise ich auch auf diesen Beitrag mit Tiefgang: Sollten (Web-)Designer HTML und CSS können?

Übersicht zu Schätzmethoden im (Web-) Projektmanagement: Spiel mit den Wahrscheinlichkeiten

Everything you Know about Clearfix is Wrong: Vielleicht nicht wirklich alles. Wichtig auch der Hinweis darauf, dass ohne Basiswissen eben alles ein bisschen schwerer ist.

Weak constructs are most often due to the fact that people do not know what block formatting contexts are and what they do.

Hier wird präsentiert, was HTML5, CSS3 und JS APIs zusammen bieten: This presentation is an HTML5 website

HTML 5, oder: Die Angst vor dem Flash-Ersatz. Premium-Videos weiterhin nur in Flash?

Und noch ein Tool-Tipp: CSSDesk ist ein Online HTML&CSS-Editor mit Live-Preview.

Der Internet Exblöder Nr. 9 wirft seine Schatten voraus. Die Fachkreise drehen und diskutieren. So auch Peter: Der Internet Explorer 9 – Politik und HTML5.

Warum es auch ein Problem sein kann, zu gut auszusehen – oder auch nicht: Web Design: Sexy versus Conservative.

8 Common CSS Mistakes and How to Fix Them darüber, wie man die gängigen Probleme beim CSSen in den Griff bekommen kann. Und am Anfang stand das Wort bzw. die Dokumentation und das Studium der Regeln.

Interne Kunden sind oftmals sowas wie kleine externe Kunden. Und entsprechend schwer kann es sein, diesen was zu verkaufen. Userexperience (UX) steht da mit ganz weit oben. Tipps zur Verkaufsförderung: Selling UX to Small Business.

Das Leid mit den Editoren: The Tragic Comedy that is Rich Text Editing on the Web

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

Etwas buntes zum Start in die kalte Jahreszeit. Die Website der Agentur Flourish aus Florida.

Die Praxislinks mit dem Schwerpunkt Usability und Gestaltung.

• Gute Gestaltung von Software-Bedienoberflächen
• Eine Referenz zu HTML und CSS kann jetzt online gelesen werden: Little Boxes 1 online
• Es gibt keinen “Fold”: The myth of the page fold
• Nutzer und ihre Anforderungen besser verstehen: How to Understand Your Users with Personas
• Ob man’s glaubt oder nicht. Marketing und Design sind nicht ganz überflüssig: Branding and Marketing Essentials for Your Web App
• Ausführlicher Blick auf die Zukunft von HTML: An introduction to HTML5
• Search Engine Optimization Is Part of Good Web Design. Besser gesagt: Saubere Webentwicklung legt viele Grundlagen für bessere Auffindbarkeit

Aber lohnt sich der Aufwand überhaupt?

Es soll sie ja geben, die Internetausdrucker. Wobei dieser Begriff eher in einem anderen Zusammenhang benutzt wird ;-)

Aber im Ernst. Hin und wieder werden v.a. auch längere Artikel ausgedruckt. Der Frage, ob das auch schon mal einer meiner Leser getan hat, bin ich bisher noch nicht nachgegangen. Sollte sich jemand finden, kann er/sie sich dann per Kommentar zu diesem Beitrag melden. Dann werde ich das Thema u.U. noch weiter vertiefen.

Zur Auffrischung: Print-CSS leicht gemacht

Wie’s am einfachsten geht zeigt Jens Meiert: Druck-Stylesheets: Die absolute Grundlage

Außerdem noch drei weitere Quellen zum Thema – das vielleicht schon gar keines mehr ist?

• Grundlagen Druck-Stylesheets (Peter Rozek)
• Ruck zuck zum Druck (Manuel Bieh)
• Handy Tips for Creating a Print CSS Stylesheet

Dann noch einer von mir aus dem Jahr 2006: Drucken von Webseiten – State of the Art

Und ein wenig Inspiration gibt’s seit neustem unter printFancy.com.

Website der Schauspielerin Audrina Patridge. Das ist die aus der Burger-Werbung.

• Tutorial mal anders als Comic: Learning About Contrast in Design
• Wireframes sind gerade in: Using Wireframes to Streamline Your Development Process Bsp. 6 + 7 halte ich für weniger geeignet, da schon wieder zu detailliert. Kommt aber auch auf die Zielgruppe der Präsentation an.
• Mit SlickMap CSS lassen sich Sitemaps mit Hilfe einer Vorlage als Strukturbaum darstellen
• Neue Serie bei Sprungmarker: Mit Barrierefreiheit arbeiten (1): Überschriften
• TypeSelect – Javascript-based Selectable Typefaces
• Schöne neue Typowelt mit @font-face. Sehen was z.B. möglich ist: Nice Web Type

Mehr Links und Tipps täglich bei Twitter

Der Userexperience Designer Vitor Lourenco präsentiert auf seiner Website sein Portfolio. Die sehr minimalistische Aufmachung gefällt mir richtig gut. V.a. das Zusammenspiel von großer Typo und viel Whitespace. Abzüge gibt’s für den Code darunter.

• Grundlagen Druck-Stylesheets: Etwas älter, aber gerade im April aktualisiert und sehr ausführlich
• Gute Seiten, schlechte Seiten: 7 Qualitätskriterien zur Beurteilung von Webseiten – und Web-Designern
• Warum der Seitenzoom nicht das Ende für flexible Layouts bedeutet
• Techniken des WCAG 2 zu offen angelegt?: Offenheit ist gut, führt aber auch zu Uneindeutigkeit. Das wiederum macht das Testen nicht gerade einfacher.
• Architekturen, Wartbarkeitsfragen: Auch und vielleicht v.a. hier zeigt sich im späteren Betrieb die technische Qualität einer Website
• Maintainability Guide (Beta): Jens Meierts Einstieg zum Thema Wartbarkeit in der Webentwicklung
• The Battlefield of Design: Designers vs Clients: Es hilft ungemein, die Kunden in den Prozess mit einzubinden
• Effective Maintenance Pages: Examples and Best Practices: Gute Wartungsseiten sind ein wesentlicher Bestandteil der Kundenkommunikatioon. Was gerne vergessen wird.

Diesesmal sind fünf deutschsprachige Artikel dabei, was mich besonders freut. So darf das weitergehen.