In einem sehr umfangreichen Artikel auf SmashingMagazine.com gibt es lange Liste an Tipps und Tricks für Css Entwickler.

Ich kann jedem Web Designer einen Blick darauf empfehlen, vor allen Dingen auf die Hinweise zur Strukturierung und Erstellung von Css-Dateien.

Zwar teile ich nicht alle Ideen, jedoch denke ich, dass es zum Arbeitsprozess eines jeden Html/Css-Web Designers gehören sollte, sich grundlegende Fragen zur Strukturierung der eigenen Css-Dateien zu machen.

Sei es, um die Arbeit damit für Kollegen zu erleichtern; sei es, um noch in 2 Monaten zu wissen, wofür bestimmte Definitionen stehen; sei es, um schneller und effizienter zu arbeiten.

Ich habe einen ausführlichen Beitrag zu meinen Überlegungen zu diesem Thema in der Schublade; er sollte bald fertig sein :)

[So lange könnt ihr euch bei smashingmagazine.com inspirieren lassen]

In einer Umfrage auf css-tricks.com hat sich jQuery mit 52% als beliebteste Javascript-Bibliothek herauskristalisiert. 

Die gut 1500 teilnehmenden Web Entwicklern/Designer hatten die Auswahl zwischen einer grossen Zahl der bekannten Frameworks.

Auch ich bin von jQuery's Flexibilität und umfangreichen Plug-Ins sehr begeistert.

Daher habe ich auch ein einfaches, kleines Galerie-Modul in unserem letzten Projekt ximag.de verbaut.

[Hier findet Ihr die kompletten Ergebnisse der Umfrage]

Am Freitag vergangener Woche ist ein kleineres unserer Projekte online gegangen: Die Präsenz des Comic-Magazins XIMAG.

Die Zielsetzung 

Wesentlicher Fokus des Kunden Vindlicht Verlag lag auf einem starken und einprägsamen visuellen Eindruck.

Darüber hinaus haben wir bei speak-friend natürlich auf eine möglichst intuitive und einfache Bedienung und Struktur der Seite geachtet.

Der Prozess

Die derzeitige Version ist der erste wesentliche Schritt in einem iterativen Prozess.

So werden wir in zwei weiteren Phasen noch zusätzliche Features und Module einbauen, um den positiven Eindruck der Comic-Fans auf der Seite noch zu verstärken. Und sie durch interaktive Features stärker an die Seite zu binden.

Viel Spass mit Ximag.de und schaut euch auf alle Fälle den Künstler-Galerie-Teil an. Da gibt es ein paar hochkarätige Gemälde zu sehen.

Schon lange habe ich mir vorgenommen, über die Fachbücher, die ich lese, eine kleine Rezension zu verfassen.
Der Stapel an Büchern wächst, und um ihn endlich schrumpfen zu lassen beginne ich mit der ersten Rezension aus dieser Reihe.

Web Bloopers von Jeff Johnson

60 Common Web Design Mistakes and How to Avoid Them

Das schon 2003 erschienene Buch befasst sich mit üblichen Fehlern im Web Design und Lösungen, diese Fehler zu vermeiden.

Viele der Blooper (Fehler), die der Autor aufzählt, sind heute schon nicht mehr wirklich aktuell oder deren Vermeidung Standard geworden.
Daher ist das Buch nur zum Teil zu empehlen; jedoch für den Web Design Einsteiger durchaus lesenswert.

Gliederung und Inhalt 

"Web Bloopers" ist in drei Hauptteile gegliedert:

    * Fehler im Content und der Funktionalität
    * Fehler im User Interface
    * Fehler in der Präsentation der Web Seite

Jeder der 60 Fehler wird zunächst umfassend und mit Beispielen vorgestellt und analysiert. In einem zweiten Schritt werden mögliche Lösungen zur Vermeidung aufgezeigt.

Ein wirklicher Pluspunkt des Buches ist die umfangreiche Bebilderung der Beispiele und deren Erläuterung.

Heute noch aktuelle Blooper:

Um einen besseren Eindruck des Buches zu haben werde ich nun einige Bespiele aus dem Buch auflisten:

1. Nicht benötigte Information erfragen

Ein gutes Beispiel für einen Web Design Blooper ist das erfragen von unnötiger Information.

So fragt sich der Nutzer oft, wozu er sein Geburtstdatum eingeben muss, um sich für einen Online-Versand zu registrieren. Oder warum er das Bundesland eingeben muss, wenn er doch schon die Postleitzahl mitgeteilt hat.

Vermeidung:

• So wenig Daten erfragen, wie möglich
• Nur Daten erfragen, die für den momentanen Prozess nötig sind
• Keine Informationen erfragen, die der Nutzer nicht haben wird
• Aus den Informationen, die man erhält, andere ableiten, wenn möglich

2. Eingabe über ein Textfeld - Fehlermeldung

Ein weiterer häufig auftretender Fehler im Web Design ist die Eingabe von auf bestimmten Datenformaten so wie Datum, Geschlecht, Uhrzeiten, etc. über ein freies Textfeld.
Das Problem ist, dass Nutzer häufig nicht genau wissen, was das korrekte Format für die Eingabe ist.  Entweder erhält man dann unbrauchbare Daten oder der Nutzer muss per trial and error herausfinden, was das richtige Format ist.

Lösung:

• Dem Nutzer helfen, Daten einzugeben (z.B. über einen visuellen Kalender)
• Auswahl anbieten (drop-down Listen, Checkboxen, etc.)
• Eingabe-Toleranz gewährleisten

3. Kein Fokus für ein Text-Eingabe-Feld

Sei es bei Suchmaschinen oder Formularen, oft wird der Text Eingabe Fokus nicht auf das erste Eingabe-Feld gelegt. Besonders lästig ist dieser Fehler, wenn es sich um Seiten handelt, die über lediglich ein Eingabefeld verfügen, wie z.B. Suchmaschinen.

Lösung:

• Mit ein paar Zeilen Javascript lässt sich der Fokus setzen.

Weitere Web-Blooper, die der Autor Johnson beschreibt sind: Zu viel erläuternder Text, zu viel Fach- oder Produkt-interne Ausdrücke, Besucher werden "Nutzer" genannt und viele, viele weitere.

Zusammenfassung

"Web Bloopers" ist ein Buch, dass vor allen Dingen für Einsteiger ein hilfreiches Buch sein wird. Nach der Lektüre aller 60 üblichen Fehler, wird man nicht nur wissen, wie man diese Fehler vermeiden kann. Sondern wird auch seinen Blickwinkel auf die Probleme von Nutzern beim Besuch von Web Seiten ausgerichtet haben.

Das Buch hat 329 Seiten mit einer Unmenge an farbigen Abbildungen und Erläuterungen.

[Hier geht es zur Homepage des Buches, wo man sich ein paar Auszüge durchlesen kann.]

In seiner aktuellen Kolumne Alertbox wertet Usability-Guru Jakob Nielsen eine Studie zu Lesegewohnheiten von Nutzern im Internet aus.

Die Studie vom Februar 2008

In der Studie wurden die Länge des Aufenthaltes ins Verhältnis zu der Anzahl der Worte auf einer Seite gesetzt.

Dieser Wert wird veglichen mit der durchschnittlichen Lesegeschwindkeit.

Es wurden knapp 60.000 Seitenbesuche ausgewertet.

Das Ergebnis: Inhalt werden immer stärker gescannt

Das Ergebnis zeigt deutlich, dass im Durchschnitt nur ca. 20% bis im besten Fall 28% der Worte auf einer Seite gelesen werden.

Auf Seiten mit unter 111 Worten wird nur ca. die Hälfte der Information verarbeitet.

Dieses Ergebnis unterstützt vor allen Dingen jene Befunde von Eye-Tracking-Studien, die deutlich gezeigt haben, dass Nutzer im Normalfall eine Webseite in einem F-Pattern lesen.

Interessant und neu ist auf alle Fälle der quantitative Aspekt. Dass gescannt wurde, war klar. Aber wieviel zeigt sich jetzt erst so richtig.

Fazit

Inhalte müssen also immer weiter komprimiert werden und in möglichst einfach zu scannende Blöcke verpackt werden, um den Lesegewohnheiten der Nutzer gerecht zu werden.

Prägnant, kurz gefasst und übersichtlich zu schreiben und die Inhalte zu gestalten sollte für erfolgreiche Web Seiten stets die Priorität sein.

[Hier gehts zum Alertbox-Artikel von Jakob Nielsen]

Die Webkrauts haben in Anlehnung an die Ende letzten Jahres von A List Apart durchgeführte Umfrage, deutsche Web-Arbeiter befragt und die Ergebnisse nun veröffentlicht.

Die Fragen an die gut 2800 Teilnehmer rangieren von Finanziellem über Ausbildung bis zur aktuellen Tätigkeit und sind auf der Seite von Michael Jendryschik recht anschaulich präsentiert.

Ich werde nicht weiter ins Detail gehen, sondern jedem, der sich dafür interessiert, was die "Kollegen" so umtreibt, emfpehlen, einen Blick auf die Ergebnisse zu werfen.

Persönlich denke ich, dass all die Statistiken und durchschnittlichen Angaben nicht wirklich interessant sind, oder gar eine Anregung darstellen. So kann ich für mich keine hilfreiche Aussage ableiten aus der Ergebnis, wie sich meine "Kollegen" fortbilden. Ich setze da mehr auf individuelle Geschichten und persönliche Tipps. Lese daher auch gerne Interviews mit Web Workern, da sie meist viel mehr aussagen, als alle möglichen Statistiken.

Bill Buxton, der Chef von Microsoft Research, spricht in diesem Video-Vortrag über grundlegende Fragen des Design-Prozesses.

Unterwegs (gut 50 Minuten) gibt er auch eine Anekdote über den wahren Grund des Erfolgs des iPods zum Besten.

Was ist Design?

• Design ist nicht Innovation
• Design ist nicht Inspiration
• Design ist nicht Kreativität
• Design ist Kompromiss

Zusatz von mir: Ich denke, dass sich Design gerade dadurch auszeichnet, dass es Anforderungen genügen muss, ein Problem lösen muss und nicht zweck- und funktionsfrei betrachtet werden kann. Darin unterscheidet Design sich auch im Wesentlichen von Kunst.

Ein guter Design-Prozess?!

Butxon weist darauf hin, dass ein Design-Prozess der zu einem erfolgreichen Produkt führen soll vor allen Dingen dadurch ausgezeichnet ist, dass der Fokus nicht auf dem materiellen Gegenstand oder dem Interface liegen darf sondern auf der tatsächlichen Verwendung und dem Umfeld.

Ein gutes Beispiel von Buxton ist ein Fahrrad, dass er selbst entwickelt hat. Drei verschiedene Darstellungen illustrieren diese Herangehensweise:

1. Das Fahrrad ist in der Seitenansicht vor weissem Hintergrund dargestellt.
2. Das Fahrrad wird von hinten rechts mit Schatten abgebildet.
3. Das Fahrrad in vollem Einsatz gefahren durch einen Bach, in einem Wald, Wasser spritzt durchs Bild. Das Fahhrad ist kaum zu sehen.

Ein guter Designer?

Was einen Designer nach Buxton auszeichnet, ist die Fähigkeit, eine Menge von Lösungen für ein Problem zu finden, und von diesen Lösungen die beste zu extrahieren und weiterzuentwickeln. Der Designer ist also im Wesentlichen ein Entscheider.

Um eine möglichst breite Palette an vielfältigen Lösungen in möglichst kurzer Zeit hervorbringen zu können, empfiehlt Buxton die Technik des Skizzierens. Er unterscheidet bei Entwürfen auch nicht zwischen Low oder High Fidelity sondern zwischen Right und Wrong Fidelity. Für jedes Problem gibt es also auch eine notwendige Detail-Genauigkeit des Enwurfs.

Alles in allem sehr interessant von einem alten Hasen ein paar kluge Gedanken aufschnappen zu können, wenn auch die Audio- und Slide-Qualität im Video mäßig ist.

Ich denke, ich bin nicht einfach zu beeindrucken, geschweige denn umzuhauen. In Anbetracht der Fülle an Details und kleinen Ideen, die in die folgende Illustration geflossen ist, bin ich noch auf der Suche nach einer Steigerung von "umhauen".

Chad Pugh hat für das Video-Portal vimeo.com eine Illustration mit dem Titel "Science Machine" für das Registrations-Formular gestaltet. Nicht irgendeine Illustration, sondern ein kleines Kunstwerk (oder besser: Talentwerk). Den Prozess hat er in Screenshots, die er alle 5 Sekunden gemacht, in einem Video zusammengefasst. Ingesamt 40 Stunden an harter, detaillierter Arbeit.

[Am besten du schaust dir das Original-Video an, die Auflösung ist deutlich besser...]

Der Japaner scheint uns doch in vielerlei Hinsicht vorauszusein: So hat er für das Problem des Fahrrad-Parkens in der Grossstadt eine äußerst elegante und beeindruckende Lösung gefunden.

Steigende Spritpreise und verstopfte Strassen führen jetzt schon in Berlin zu stets voll belegten Fahrradständern an zentralen Plätzen von Berlin. Für Autos gibt es Tiefgaragen und für Fahrräder ab demnächst automatisierte Abstellmöglichkeiten:

Und wenn ich es richtig deute, dauert die Ausgabe des Fahrrad lediglich 23 Sekunden. So schnell bin ich fast nicht beim Abschliessen ;)

[via core77.com]

In einer sehr lesenswerten Einführung in das Thema der Mikroformate für das Markup beschreibt Brian Suda wie diese funktionieren und das Html bedeutungsvoller und somit funktionaler machen.

Was sind Microformats?

Wenn man von der formalen Definition absieht wird man schnell herausfinden, dass Mikroformate eine Art semantische Erweiterung des bestehenden Htmls (und damit der Inhalte) sind, die der Funktion dienen soll, dem jeweiligen Html-Block eine spezielle Bedeutung zu geben.

Im wesentlichen werden Html-Elemente mit bestimmten Klassen-Namen versehen und erhalten somit eine Art Tag, dass den Inhalt des Elements weiter spezifiziert.

Der Clou an der ganzen Geschichte ist, dass nicht irgendwelche Klassen-Namen und somit Microformats verwendet werden, sondern es werden bereits vorhandene, standartisierte Formate verwendet, wie z.B. hCalendar, ein Kalenderformat.

Wofür das Ganze?

Die Idee hinter dem Projekt ist, dass die mit Microformats versehenen Inhalte leichter gefunden werden können. Eine normale Html-Seite ist derzeit noch (in eventuell späteren Html-Versionen soll sich das ja ändern) völlig bedeutungslos. Ein p-Tag ist ein p-Tag ist ein p-Tag. Sollte aber z.B. ein Kalender-Eintrag mit Microformats versehen sein, so weiß man sogleich, um welche Art Inhalt es sich hier handelt, und kann diesen dann z.B. automatisiert anzeigen oder weiterverwenden. So kann aus einem p-Tag z.B. ein Datum werden.

Yahoo, Flickr, Microsoft...

Wenn man sich über die Frage, wie sinnvoll das Projekt ist, hinaus wundert, ob es sich denn um ein zukunftsweisendes und vielversprechendes Projekt handelt, dass eventuell sogar als Standard implementiert werden könnte; so lassen die oben erwähnten Namen eine positive Antwort erahnen. So werden bei Flickr und Upcoming.com Microformats verwendet.

Darüber hinaus melden auch Browser-Hersteller Interesse für Microformats-Funktionalität angemeldet. So könnte man dann automatisch Adressen in das Adress-Buch importieren oder Termine im Google Calendar speichern.

Es gibt sogar schon ein Plug-In bzw. Add-On für den Firefox mit dem Namen Operator, der genau dies ermöglicht.

Weiterführendes:

• Zum oben erwähnten, einführenden Artikel zum Thema Mikroformate (mit Beispielen)
• Zur Homepage des Projekts
• Zum Microformats Cheat Sheet von Brian Suda (Referenz)