Mit dem iPhone kann sich das ändern. Trotzdem gilt weiterhin: Content ist King – aber der Weg dahin muss angenehmer werden. Eine Menge Tools und Anleitungen helfen uns, die Welt besser zu machen, zumindest für Handynutzer:

• iPhoney simuliert das Browsen mit dem iPhone auf jedem Mac, aber auch der Opera Mini kann simuliert werden
• das WordPress Plugin iWPhone bietet ein einfac zu installierendes WP-Theme für iPhone/iPod Touch
• Apples iPhone Dev Center bietet Informationen zu Erstellung iPhone-optimierter Seiten
• Webcredible gibt Usability-Hinweise: 7 usability guidelines for websites on mobile devices
• blue falvor veröffentlichte ein 97 Seiten starkes PDF zum Thema: dotMobi Mobile Web Developers Guide

Eine interessante Liste typischer Fehltritte auch und vor allem bei mobilem Webdesign findet man übrigens bei namics: Mobile Internet Update – 10 Fehler des mobilen Web Design. Und verglichen mit dem iPhone ist das Surfen mit PDA oder Smartphone kein wirkliches Vergnügen.

• Vitamin: Steve Ellis “Give your web app international appeal”
• Software Developer: “Designing on a Dime: 100 Freebie CSS Resources”
• Joe Clark, “Zoom layouts” (schon etwas älter, aber ein hervorragender Überblick)
• Uday Gajendar “What Does Rich Mean?”
• Grid Calculator

Ob das Jahr 2006 ein gutes war, sollte wohl jeder für sich beurteilen. Nicht zuletzt ist ein jeder von uns zur Person des Jahres gewählt worden. Vielleicht hilft euch diese Übersicht (in meinen Augen) wichtiger Artikel und Änderungen:

Webdesign

• Webstandards, z.B. bei den Webkrauts, Webseitenbetreibern oder dem Web Standards Project
• Usability, vor allem beim Guru Jakob Nielsen
• Ajax (Programmierung)
• Mikroformate (dt. Website)
• optische Trends, vor allem der Web2.0-Seiten: Ähnlichkeit zu Desktopanwendungen, große Schriften, Glaseffekt und Schatten, runde Formen

Mehr dazu im Read/WriteWeb “2006 Web Technology Trends”.

Web

• Social Networks
• Online Apps: YouTube, Flickr, Linklists, Tools von 37Signals, u.v.m.
• Blogs

Mehr dazu unter Oliver Reichensteins The “50 loudest websites in 2006 and what made them successful”, den “50 Coolest Websites” des TIME Magazines, der Liste “The new 100 most useful sites” des Guardian oder den Top 10 Web 2.0 Winners.

Technologie

2006 passierte viel, die besten Erfindungen hat das TIME-Magazine gefunden, ZDNet fasst das Jahr 2006 in Bildern zusammen und bei heise erhält man einen ganzheitlicheren Blick auf das (fast) vergangene Jahr.

Bücher im Jahr 2006

Einige Bestseller aus dem Bereich Webdesign, HTML und Web:

• Little Boxes. Webseiten gestalten mit CSS. Grundlagen
• CSS-Layouts. Praxislösungen mit YAML
• Don’t make me think! Web Usability: Das intuitive Web
• Webseiten programmieren und gestalten – HTML, CSS, JavaScript, PHP, MySQL, AJAX mit DVD

Im cne _LOG

Und natürlich war das Jahr 2006 auch für mein Weblog erfolgreich, daher möchte ich euch die besten, meist kommentierten und erfolgreichsten Beiträge hier noch einmal nennen:

• Typographie im Web
• Stimmübungen – Teil 1: Lockerungs- und erste Stimmübungen
• Stimmübungen – Teil 2: Sprechübungen
• Sprechtraining – Teil 3: Angewandtes Sprechen
• Übersetzung von Roger Johanssons Artikelserie Evaluating website accessibility: Die Evaluierung von Webseitenzugänglichkeit Teil 1, Hintergrund und Vorbereitung, Teil 2 und Teil 3
• Hartes Blogger-Brot – Gute Blogartikel schreiben

Abschließend bleibt nur noch eins zu sagen:

Ich wünsche euch einen guten Rutsch und einen guten Start in ein ebenso gutes Jahr 2007.

Nachzutragen wäre da nur noch der zweiteilige Artikel von Simon Griffin auf Vitamin: “Internet Explorer 7: Were you ready?”und “Wake up and smell the IE7!”.

Ebenfalls interessant sind die Ratschläge von Jeremy Sutton an einen jungen Grafiker: “Advice on Becoming a Professional artist”.

Diese Ratschläge sollte sich jeder zu Herzen nehmen, zusätzlich kommt es aber auch auf die Präsentation der eigenen Arbeit gegenüber dem Kunden an. Anne Halsey ist “Technical Communicator”, also Mittelsmann bzw. -frau zwischen Designer/Programmierer und Kunde. Sie fasst die Kernkompetenzen eines erfolgreichen Vermittlers so zusammen:

• Use language and visuals with precision.
• Prefer simple, direct expression of ideas.
• Satisfy the audience’s need for information, not my own need for self-expression.
• Hold myself responsible for how well my audience understands my message.
• Respect the work of colleagues, knowing that a communication problem may have more than one solution.
• Strive continually to improve my professional competence.
• Promote a climate that encourages the exercise of professional judgment and that attracts talented individuals to careers in technical communication.

Quelle: “Code for Communicators”

Diese Tips lassen sich auch für Webschaffende und andere Kreative anwenden, die ihre eigene Arbeit vorstellen, dabei aber immer die Bedürfnisse des Kunden im Blick behalten und eine Präsentation nicht als Bühne für die eigene Darstellung missbrauchen. Aber auch unter den Kreativen muss die Kommunikation stimmen (George Olson, ALA: “A Failure to Communicate”).

Die Summe eines solchen Verhaltens, des richtigen Verhaltens, wird oft als Professionalität bezeichnet.

Doch was ist Professionalität?

Jeff Croft hat sich mit eben dieser Professionalität beschäftigt: “What does it mean to be a “professional” web designer?”:

“And it was at that point that I decided to become a designer (which also meant learning CSS inside and out, since it was to be the design language of the web). I could have also chosen to become a programmer, a copy writer, a Flash guru, an accessibility and usability expert, or a few other things – but I chose designer. I read as much about design as I could get my hands on, and I continue to do so today. In my opinion, this was the point at which I became a professional.”

Sarah George vereint verschiedene Fähigkeiten wie z.B. Vertrauenswürdigkeit, Teamgeist, Führungsverhalten und Übernahme von Verantwortung unter dem Begriff Professionalität (“What Is A Professional Programmer?”) und Molly E. Holzschalg fasst es im letzten Dezember (“Web Standards and The New Professionalism”) so zusammen:

“Today, I want to express that I believe that this new professionalism means taking responsibility for the education of ourselves and each other, [...]“

Auch wenn diese Liste nicht vollständig ist, kann sie doch als Grundlage dienen und den Weg der täglichen Behauptung ein wenig erleichtern helfen. Ich lerne noch. sagte auch Michelangelo.

Ich habe einige Beispiele für diese Trends herausgesucht und möchte sie euch hier vorstellen.

Ein Redesign (oder besser Realign), das mir gut gefällt, hat Phu Ly auf seinem If..Else Log umgesetzt: Obwohl sich an der Grundgestaltung der Website nicht viel geändert hat, fokussiert das neue Design wesentlich deutlicher den Inhalt. Dazu kommen die leicht abgewandelten dunklen Farben und eine riesige Sidebar, die unter einer bestimmten Fenstergröße in den Fußbereich rückt, wie man an den Screenshots sehen kann.

Dunkle Designs, Mehrspaltenlayouts, farbliche Akzente

Whitespace mit Akzenten

Große Footer

Ein Problem ergibt sich meiner Meinung aber bei diesen großen Fußleisten: Wenn zuviele Informationen enthalten sind und zusätzlich der obere Bereich schon überladen oder einfach zu lang ist, verliert man als Leser schnell die Lust, in dieser Menge von Daten zu wühlen. Eine gewisse Übersicht, die erst auf den zweiten Blick (Scrollen) sichtbar ist, lenkt nicht vom Inhalt ab, aber ein Wühltisch an Infos erschlägt die Leser nur. Das gilt genauso für vollgestopfte Designs, die dem Auge des Betrachter keine Ruhe lassen.

Interessant ist in diesem Zusammenhang der Beitrag von Gerrit über sein Redesign, in dem sagt “Mir geht die allgemeine Völlerei in den Weblogs ein wenig auf die Nerven. Links und rechts zugeknallte Leisten mit hunderten von Listen, Thumbnails, aggregierten Informationen, Badges, Mitgliedschaften, usw. Wunderbar. Doch wer nutzt diese Informationen wirklich?”

Ebenfalls ist erstaunlich ist die Vorhersage von Gerrit selbst, die er in Jörgs Reihe Webdesign Trends 2006 geäußert hat — Und es sieht aus, als hätte er recht gehabt.

Bleibt nur noch zu sagen, dass diese Beispiele lediglich eine minimale Auswahl sind, aber dennoch die Trends erkennen lassen, die uns in diesem Jahr sicher noch begegnen werden. Für alle, die Inspirationen suchen, ist der CSSReboot eine tolle Anlaufstelle – aber auch die Beiträge der Rebooter, in denen sie ihr Vorgehen erklären, sind einen Leseabend wert.

Aber es gibt wie in allen Bereichen Richtlinien, die man beachten muss. Und wie im Grafikdesign gibt es Regeln, die man bewusst brechen kann.

Egal ob es bei einer Website um eine persönliche Seite geht oder es sich um ein großes Projekt wie eine Firmenwebsite handelt, mit wenigen Regeln kann man erfolgreich sein.

Ich stelle mir eine Website immer als ein Haus vor, das man begehen und erforschen kann. Es ist klar, dass ein Haus grundlegende Eigenschaften und Elemente besitzen muss, um ein Haus zu sein. Dazu gehören Mauern, Dach, Fenster und Türen, des Weiteren Zimmer, Möbel je nach Funktion des Hauses. Wenn wir das auf die Website übertragen, sind diese Elemente das Markup (die technische Bauweise), Layout und Design (besucherführende Elemente des Hauses) und der Inhalt (Funktion und Bewohner).

Die Regeln für die Erstellung der Website sind jetzt viel leichter nachvollziehbar. Als Hilfestellung kann man sich folgende Fragen stellen:

• Welche Technik steht mir zur Verfügung, um meine Website zu bauen? HTML, PHP, etc.?
• Welche Funktion soll die Website besitzen? Welchen Inhalt soll die Website haben?
• Wie sollen die Elemente Funktion und Inhalt unterstützen?
• Wie kann ich meine Besucher auf ihrem Weg führen?

Die Gemeinsamkeiten zwischen Haus und Website erleichtern mir die Arbeit. Ich kann die Gestaltung besser visualisieren, da meine Besucher wie in einem Haus geführt werden müssen, um Informationen zu erhalten. Ein logischer und verständlicher Aufbau ist unerlässlich, um die Besucher nicht zu verwirren. Auch wenn die Geschmäcker verschieden sind und ein Design immer subjektiv ist, geben mir Funktion und Inhalt einen guten Rahmen.

Ich muss meine Website also vor allem verständlich und benutzbar machen. Barrieren müssen abgebaut werden, dazu gehören technische, semantische und optische Barrieren. Trotzdem muss ich innerhalb meines Rahmens entscheiden, welche Elemente und Mittel die besten sind. Ich möchte nicht nur, dass die Website ansprechend ist bzw. mein Haus gut gebaut und eingerichtet ist, sondern auch dass Website und Haus ihrer Funktion entsprechen, sozusagen zu den jeweiligen Bewohnern passen.
So können auch Flashseiten angemessen sein – ausschlaggebend ist immer die Funktion. Aber wörtliche Informationen vermittelt man am besten mit Text.

Eine interessante Artikelsammlung ist im CHIP Sonderheft Homepage erschienen, die den gleichen Titel trägt und sich mit der technischen Bauweise einer Website beschäftigt: “Die perfekte Website” von Peter Müller, 5 PDF als kostenlose Downloads

The Web is not print.Obwohl mit der CSS-Technik ausgefallene Layouts möglich sind, die wie Werbeposter und Grafikdesigns anmuten, kann man Webseiten nicht mit gedruckten Seiten vergleichen, denn die Vorteile des Internets liegen klar auf der Hand: Finden, Kopieren, Indexieren – das geht mit Buchseiten nicht. Eine der Hauptfunktionen des Webs ist die Vermittlung von Informationen.

Dies geht am besten mit einfachem HTML-Text. Das mag zwar altmodisch anmuten, da man scheinbar zum Ursprung zurückkehrt und Errungenschaften wie Flash plötzlich außer Acht lässt, aber HTML-Text kann von allen Benutzern und Hilfmitteln verstanden werden. Und er ist wandelbar, lässt sich leicht an ein Design anpassen.

Doch wie kann das Schriftbild einer Webseite kontrolliert werden? Mittels CSS.

Welche Kontrolle habe ich mit CSS über mein Schriftbild?

CSS bietet vielfältige Möglichkeiten, das Schriftbild einer Website zu kontrollieren, doch die bewusste Verwendung der Mittel steht hier im Vordergrund, um den Besucher nicht zu verwirren. Weniger ist eben oftmals mehr.

Da uns auf dem Bildschirm nur eine begrenzte Anzahl an sicheren Web-Schriftarten zu Verfügung steht, die Monitorauflösung (maximal 96 dpi) mit einer Druckeraufläsung (bis zu 2400 dpi und mehr) nicht zu vergleichen ist und wir selten kontrollieren können, wie unsere Besucher unsere Seite wahrnehmen, muss man Kompromisse finden.

Die wichtigsten Aspekte kann man bereits mit wenigen Eigenschaften steuern: Schriftart und -größe.

Schriftart

Typeface sets the tone or personality of your text
The Anatomy of Web FontsGrundsätzlich stehen uns Serifen- und Serifenlose Schriftarten zur Verfügung, die gern unterschiedlichen Genren zugeordnet werden. Serifenlose Schriften (sans-serif) sind aber für den Einsatz im Web generell zu empfehlen, da sie besser lesbar sind. Serifenschriften (serif) eignen sich dagegen eher für Printprodukte. Serifenlose Schriftarten wie Verdana mit viel Platz zwischen und innerhalb der Buchstaben haben eine hohe Lesbarkeit.

Mittels CSS legt man beispielsweise folgende Regel fest, um die verschiedenen Betriebssystem zu unterstützen:

body {
font-family: verdana, "trebuchet MS", helvetica, sans-serif;
}

Eine schöne Möglichkeit, die verschiedenen Schriftarten zu testen, bietet Typetester.

Schriftgröße

Mit der Schriftgröße kann man die Hierarchie innerhalb einer Seite gut gestalten. Oft ist die Wahl der Schriftgröße verknüpft mit Spaltenbreite, Zeilenhöhe und anderen Faktoren des eigenen Designs. Daher können sowohl größere als auch kleinere Unterschiede zwischen den Schriftgrößen der einzelnen Elemente angebracht sein. Auf vielen modernen Websites sieht man große Überschriften, die allerdings in einer Serifenschriftart wie Georgia und mit einer helleren Farbe realisiert sind.

Eine wichtige Frage, die immer wieder angesprochen wird, ist die nach der geeigneten Einheit. Absolute Größen wie Points (pt), Pixel (px), Pica (pc), Inch (in), Zentimeter (cm) und Millimeter (mm) eignen sich auf Grund der unterschiedlichen Monitorauflösung bei verschiedenen Betriebssystemen nicht. Des Weiteren können diese Einheiten oftmals nicht skaliert werden. Für Druckansichten sind Größen wie Points allerdings ratsam, da das Drucklayout schon systemseitig über solche Einheiten gesteuert wird.

Für die Betrachtung mit dem Monitor eignen sich relative Größen wie em und Prozentangaben (%). So kann man sicherstellen, dass die Schrift auch für Sehbehinderte veränderbar ist. Die Einheit em steht lautmalerisch für (die Größe des Buchstaben) “M” und bezieht sich auf die Schriftgröße des Elements bzw. in der Definition font-size auf die Schriftgröße des Elternelements (letztlich <body> oder die Voreinstellung im Browser).

Betonungen

Betonungen kann man auf unterschiedliche Weise realisieren: Fett, kursiv, unterstrichen, Farbe und Grossbuchstaben. Natürlich sind mit CSS noch mehr Formatierungen möglich, aber auch hier sollte man sparsam damit umgehen, da sie nur für Akzente notwendig sind und beim Leser keine Verwirrung mit vorhandenen Elementen erzeugen sollten, so ist z.B. die Unterstreichung von Nicht-Links nicht ratsam, da mit Unterstreichungen im Allgemeinen Links assoziiert werden.

Zeilenabstand

“Je länger die Zeile, desto größer der Zeilenabstand”, könnte eine einfache Faustregel lauten. Durch die Erhöhung des Zeilenabstandes (line-height) wird die Lesbarkeit erhöht.

Abstände von Buchstaben und Wörtern

Diese Werte sollten nur für einzelne Akzente verändert werden, denn wenn man die Laufweite der Buchstaben ändern muss, hat man sicherlich die falsche Schriftart gewählt. Begriffe wie tracking oder kerning sind wohl eher für Grafiksoftware gedacht als für die Webseitenerstellung. Auch das Ändern der Wortabstände verschlechtert die Lesbarkeit eines Textes eher als zu verbessern.
Eine Änderung der Laufweite (letter-spacing) bei Überschriften ist oftmals angebracht, um die Balance im Design nicht zu stören oder gewisse Akzente zu setzen.

Ausrichtung

Eine beliebte Ausrichtung für Text ist linksbündig (text-align: left;), da es unserer Schrift gleicht, die von links nach rechts verläuft. Andere Formate sind abhängig vom Einsatzort: So sehen Blocktexte fast nur bei breiteren Texten gut aus, sind rechtsbündige Texte bei Akzenten angebracht oder verstärken Ausrichtungen generell ein Design durch die entstehengen Abstände.

Natürlich kann man seine Website gestalten wie es am besten gefällt, dennoch sollte man immer an die Leser denken, für die die Website erstellt wurde. Hindernisse in Form von zu kleiner Schrift oder zu geringen Kontrasten in Farbe oder Größe behindern in vielerlei Form den Lesegenuss. Und wem die eben vorgestellten Kontrollmöglichkeiten über das Schriftbild nicht ausreichen, der kann zu anderen Mitteln greifen. Trotzdem sollte dabei immer an die wörtliche Lesbarkeit gedacht werden, denn viele Besucher verwenden aus vielerlei Gründen Textbrowser, Hilfsmittel wie Screenreader oder mobile Endgeräte.

Wo bleibt das Design?

Der Webdesigner, der sowohl Form als auch Funktion kontolliert, sollte sich fragen, ob die Form der Wörter wichtiger als ihre Bedeutung ist:

Does the visual appearance of the subject communicate more that the words themselves and aid the user’s experience more than the inherent functionality of HTML text?
Typography on the Web

Sobald dies zutrifft, das heißt eine Webseite sich auf das WIE konzentriert anstatt “einfach nur” Informationen zu vermitteln, dann sind Alternativen angebracht. Dazu zählen Image Replacement Techniken, wie Bilder oder sIFR, und Flash. Lesenswert ist hier der Artikel “Übersicht: Image-Replacement-Techniken” von Jens Meiert.

Fazit

Typographie im Web muss also keine unveränderbare Größe sein. Mit wenigen Einstellungen kommt man einem gesetzten Ziel schon sehr nahe. Die Schrift unterstützt das Wort. Allerdings nur soweit, wie der Leser die Schrift als Form wahrnehmen kann.
Mittels verschiedener Techniken können heutzutage aber beinahe alle Lesergruppen angesprochen und zufrieden gestellt werden, ob mit einfachem Text, ausgefallenen Layouts oder vielen Grafiken.

Die Zugänglichkeit der Informationen für alle ist hier wichtiger als die Art der Umsetzung. Und sei es nur durch alt-Text.

Lektüre

Deutsche Artikel über Typographie im Web

• Typographie für Webautoren
• Wie groß ist 100%? – Immer Ärger mit den Schriftgrößen
• HTML-Schriften unter der Lupe
• Typo und Layout im Web
• Typografie – Danke an Steffen Giers
• Schriftgrößen, SCHRIFTGRÖSSEN, schriftgrößen
• Grundsatzdebatten im Webdesign – (Keine Antwort auf) Die Frage nach der richtigen Schriftgröße

Englischsprachige Artikel über Webtypographie

• Accessible web text – sizing up the issues.
• The Anatomy of Web Fonts
• Typography on the Web – Beauty is Not Letterform Deep
• Web Typography Tutorial
• Effective Style with em
• UsableType: Web Typography Guide
• Typography For Headlines – Showcase verschiedener Überschriften

Typographie/Print

• Thinking with Type
• Know Your Type
• Typography Crash Course Roundup – Linksammlung
• The Secret Lives of Fonts

Die Liste wird nach und nach um weitere Links zu deutschsprachigen Artikeln erweitert.

Eine bereits erstaunlich große Vorstellung elastischer Layouts kann man unter Liquid Designs sehen und muss dabei feststellen, dass sie nicht nur schön sondern auch sehr sinnvoll sein können.
Wie bereits von Björn Seibert unter “Herausforderung elastische Layouts” aufgezeigt (und treffend kommentiert wird), sind elastische Layouts richtig verwendet eine sinnvolle Umsetzung der Vorgaben durch den Kunden. Auch Eric Eggert hat in seinem FOCUS Recode ein Layout benutzt, das elastisch ist: Die Webseite passt sich nicht dem Browserfenster an und erzeugt unschöne breite Textpassagen, sondern orientiert sich an der Schriftgröße – das Layout schrumpft und wächst mit der Schriftgröße. Äußerlich ist es ein fixes Layout, aber unter der Haube flexibel.

Der Vorteil der elastischen Layouts ist die erhöhte Zugänglichkeit: Die Größe der Schrift kann der Leser selbst bestimmen, das sollte bekannt sein. Da klingt es nur logisch, auch die Website zu skalieren und stets ein gleiches Verhältnis zwischen Text und Design zu bewahren.

Einige Artikel, die sich mit elastischen Layouts beschäftigen:

• 456 Berea Street: Fixed or fluid width? Elastic!
• A List Apart: Elastic Design
• Eric Eggert: Übersicht Layoutgattungen

Ein sehr schönes Bespiel für elastische Layouts ist Gerrit van Aakens Olympischer Garten 1972 für den CSS Zen Garden.

Websites sollen so schlank und zugänglich wie möglich umgesetzt werden.

Björn Seibert zu den Webtrends 2006

Gedanken verschiedener namhafter Größen auf dem Gebiet bietet Jörg Petermann, seines Zeichens Fachmann strategischen Webdesigns, in seinem Blog einfach-persönlich: Webdesign 2006 – Trends, Erwartungen und Wünsche.

Nebenbei findet man auch Links zu internationalen Erwartungen für 2006 und immer wieder Lesenswertes zu anderen Bereichen.