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

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

Die Abbildung zeigt ein Suchformular, wie es nicht mehr zeitgemäß ist. Das was den Nutzern oft als “Expertensuche” verkauft wird (z.B. Operatoren wie die zum Verknüpfen von Suchergebnissen AND oder OR etc.), ist für mich unbrauchbar bzw. zumindest nur mit erhöhtem Aufwand benutzbar.

Wir erinnern uns an einen wesentlichen Aspekt von Usability: Effizienz – Die Möglichkeit, Aufgaben zuverlässig mit möglichst wenig Aufwand lösen zu können. In diesem Fall ist dieses Kriterium für mich nicht erfüllt.

Gerade im vorliegenden Beispiel, ist die Möglichkeit einer Anpassung der Suchanfrage über die bekannten SQL-Operatoren, eine Spur zu viel. Ich erwarte hier eine wirkliche erweiterte Suchfunktionalität. Ein ordentliches Formular, dass mir die wichtigsten Suchkriterien anbietet. Suchkriterien, die ich dann über ein gut gestaltetes Formular definieren und variieren kann.

Soll eine Möglichkeit angeboten werden, mehrere Suchbegriffe einzugeben, kann auch ein Texteingabefeld ausreichend sein. Mit einem entsprechenden Hinweis, dass mehrere Suchbegriffe durch Komma getrennt eingegeben werden können.

Wobei man es mit dem Angebot an möglichen Suchoptionen nicht übertreiben sollte. Denn auch das kann verwirren und bremsen.

Kürzlich erschienene Veröffentlichungen können einen Teil dazu beitragen, bessere Formulare und somit auch bessere Suchfunktionen zu realisieren:

• Formulare total 1 (Formulardesign) (Technikwürze Podcast)
• Formulare total 2 (Barrierefreie Formulare) (Technikwürze Podcast)
• Web Forms for People

Am besten hat mir in letzter Zeit die Website des Texters Neil Wheatley gefallen.

• Barrierefreiheit muss sexy sein: Das Thema muss langsam mal normalisiert werden. Barrierefreie Umsetzung sollte eine selbstverständliche Anforderung sein.
• Webnavigation – mehr als eine Reihe von Links: Interview mit O’Reilly-Autor James Kalbach
• Über den Umgang mit Kritik von Kollegen: Tipps vom Verbesserer
• Jens Meiert erklärt die 3 Grundregeln zu HTML
• Eine Präsentation zum Thema Webentwicklung für mobile Geräte. Es ist nicht alles iPhone, was sich bewegt: Usability in Mobile Applications
• Can You Say That in English? Explaining UX Research to Clients: Wie man kundenfreundlich Userexperience erklärt und verargumentiert.

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

Eine persönliche Website. Nick Finck begrüßt seine Besucher sehr authentisch. Nach zwei Minuten weiß man, wer er ist, was er macht, welche Themen einen erwarten und wo man ihn findet.

Der Bithalter heute mit sieben kommentierten Links.

• Einführung in WAI ARIA (dt. Übersetzung)
• Was vom Web 2.0 übrig geblieben ist: Das Web 2.0 auf dem Weg zum Web 3.0, jenseits der Geeks und Nerds.
• Machen Patterns unflexibel? Welche Vor- und Nachteile bieten sie? Damit beschäftigt sich der Artikel “Thinking in patterns“
• Einfach ist nicht einfach: 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces
• Graceful degradation versus progressive enhancement: Der kleine aber feine Unterschied
• Typografie ist ein wesentlicher Erfolgsfaktor in Design und Usability: 12 CSS Tools and Tutorials for Beautiful Web Typography
• Object Oriented CSS: Raus aus der Performance- und Effizienzfalle

Das Blog Some Random Dude. Ein aufwendig gestaltetes Blog, mit ungewöhnlichem Farbschema. Brauntöne dominieren. Mit viel Liebe zum Detail werden Hovereffekte mit Javascript gepimpt.

Bei deaktiviertem Javascript gibt’s leider keinen Hintergrund, die linksbündige Ausrichtung gefällt mir auch weniger. Trotzdem ein schönes Blog.

Die Links dieses Mal absolut konzentriert auf Webdesign.

• CSS: Dirk Ginaders Sammlung von CSS-Hacks. Falls man sie doch mal braucht. CSS Voodoo – Die dunke Kunst der CSS Hacks
• Webdesign: Eine Sammlung von Webdesign Best Practices Web Design+
• Webdesign & Webstandards: Zum Thema Prioritäten setzen. Webstandards? SEO? Effizienz? Reines Gewissen? Vernunft? Markup debates: rank priorities, code accordingly (via CSS Globe)
• Accessibility Tool: Browser-Bookmarklet für einen Schnelltest auf Barrierefreiheit. Quick Accessibility Page Tester

Darauf geht auch der Artikel “PDF Manuals: The Wrong Paradigm for an Online Experience” ein.

PDF manuals have outlived their usefulness. Yet they’re still hanging around like sports fans whose home-town team has moved to the West Coast. PDF manuals are hard to use, expensive to translate, and have nothing to recommend them as online solutions for meeting users’ information requirements.

Negative Erfahrungen, die wir bereits sammeln konnten. Wir arbeiten daher derzeit selbst daran, PDF abzulösen und auch die Doku zu Produkten und andere Dokumente im HTML-Format bereitzustellen. Druck- und speicherbar.

Diese Tipps zu befolgen ist nicht schwer, aber sehr effektiv. Warum also wird das Thema Lesbarkeit von Texten so stiefmütterlich behandelt?

Don’t tell us busy pages look better

Klar werden einige argumentieren, dass Besucher von Websites Texte sowieso eher scannen. Warum aber ist das so? U.a. vielleicht auch deshalb, weil viele Texte so schlecht für’s Lesen aufbereitet sind.

Eine bessere Lesbarkeit stellt man auch nicht dadurch her, dass man den Besuchern Möglichkeiten anbietet, das Schriftbild der Website zu verändern. Das sollte zwar sichergestellt sein, aber in der großen Masse sollten Texte bereits von vornherein besser aufbereitet sein.

Tipps für bessere Lesbarkeit

• Standardschriftgrößen (Browser-Voreinstellung) für Fließtexte
• Whitespace – Raum zum Atmen
• Großzügige Zeilenhöhe
• Kontrast
• Kein Text in Abbildungen

Eigentlich nichts neues diese Regeln. Nichts neues aber auch, dass sie in schöner Regelmäßigkeit (oft allesamt) missachtet werden.

Das ist ein Grund dafür, warum man auch mal einen zwei Jahre alten Artikel wieder rausholen kann. Die Ausführlichen Erläuterungen zu Problemen und Lösungen der Lesbarkeit von Websites können im Originalartikel nachgelesen werden.