Die Lesbarkeit von Artikeln in Blogs und auf Webseiten hat in den letzten Monaten etwas Aufmerksamkeit bekommen. Es deutet sich ein Trend zu einem größeren und damit übersichtlicheren Schriftbild an. Dieser Trend hat hauptsächlich mit der Gestaltung zu tun, und nicht mit semantischem Markup, das sich ja sowieso hinter jeder Gestaltung verbergen sollte.

Mit dem Relaunch im Herbst letzten Jahres setzte Zeit-Online ein deutliches Zeichen in diese Richtung. Während die gesamte Seite in Punkto Lesbarkeit deutlich optimiert wurde, fiel besonders in der Einzelansicht der Artikel das größere Schriftbild auf. Die Änderungen auf die ich mich hier berufe, liegen vor allem in der Verbindung von größerer Schrift und einem höheren Zeilenabstand. Auf einigen Blogs war ähnliches zu bemerken. Das kommende Standardtheme von WordPress, mit dem Namen 2010/Twenty Ten, nimmt diesen Trend ebenfalls auf.

Ein bewusst gewähltes größeres Schriftbild im Inhaltsbereich einer Webseite erhöht die Lesbarkeit der Artikel. Damit unterstreichen wir die Ausrichtung auf den angebotenen Text in unseren Artikeln, und sorgen dabei dafür, dass die Inhalte unserer Webseite von den Besucherinnen und Besuchern leicht erfasst werden können. Gleichzeitig gibt uns diese Gestaltungsform auch die Möglichkeit andere Elemente bewusst kleiner zu lassen, und somit die Schönheit des Kleinen und der Liebe zum Detail Ausdruck zu verleihen.

Während mancher Besucher vorher die gesamte Seite vergrößerte um den Text in einer leicht zu lesenden Größe auf seinem Bildschirm zu haben, bekommt er diesen nun schon in einer angenehmen Größe angeboten. Wird die gesamte Webseite vergrößert, bleiben zwar die Relationen bestehen, jedoch wird insgesamt alles größer. Durch das Angebot eines größeren und damit übersichtlichen Schriftbildes bleibt die Gestaltung der Nuancen in unserer Hand. Wir haben somit stärkeren Einfluss auf das Erscheinungsbild der Seite und setzen bewusst Schwerpunkte.

In meinem anderen Blog führte ich in diesem Zusammenhang ein kleines Experiment durch. Nachdem ich die Schriftgröße im Inhaltsbereich vor kurzem etwas angepasst hatte, wollte ich noch etwas mehr Fokus auf die jeweiligen Artikel legen. Dennoch wollte ich auf die unterschiedlichen Informationen in den Seitenleisten nicht verzichten. Daher entschied ich mich für die alleinige Darstellung des Artikels in der Einzelansicht und die Beibehaltung der Seitenleisten auf der Startseite und den anderen Seiten des Blogs.

In der Einzelansicht des Artikels wird nun der Inhalt der Seitenleisten nicht mehr aufgerufen, und durch die Verwendung einer bestimmten Klasse für den Seitenbereich, wird mittels Stylesheet die Seitenbreite angepasst. Auf diese Weise ist es den Besucherinnen und Besuchern der Seite möglich die Artikel übersichtlich präsentiert zu bekommen und gleichzeitig in einer ablenkungsarmen Atmosphäre zu lesen. Ähnlich der Konzentration auf Bilder oder Videos durch die Verwendung von Lightboxen, kann auf diese Weise auch Lesbarkeit von Artikel gesteigert werden.

Über das Posterous-Blog von Manuela Hoffmann wurde ich letzte Woche auf einen interessanten Artikel aufmerksam. Sam Brown schrieb in diesem Artikel über die unterschiedliche Darstellung von Webseiten in verschiedenen Browsern und mögliche Wege damit umzugehen. Seine abschließende Äußerung erscheint mir als eine sehr wichtige und gleichzeitig interessante Aussage:

»I want my sites to look Safari in Safari, and IE6 in IE6. I most definitely do not want my sites to look like IE6 in Safari.«
Sam Brown

In den verschiedenen Browsern werden Webseiten unterschiedlich dargestellt. Ein Extrembeispiel in diesem Zusammenhang ist sicherlich der Internet Explorer 6. Folgt man an dieser Stelle Sams Ansatz, dann ist ein Nutzer des Internet Explorer 6 ein gewisses Umfeld in seinem Computer gewohnt. Diesem Umfeld kann auch die Gestaltung einer Webseite entsprechen. Eine Safari-Nutzerin hingegen ist ein anderes Umfeld gewohnt. Interessanterweise unterstützen die beiden Exrembeispiele auch die entsprechenden Klassifikationen der Darstellung. So werden beispielsweise im Safari abgerundete Ecken und auch Schatten unterstützt, die von Netzgestalterinnen und Netzgestaltern mit Hilfe von CSS 3 definiert werden. Der Internet Explorer 6 dagegen stellt weder die Abrundungen noch den Schatten dar.

Ob diese Klassifikation in deinem Browser unterstützt wird, kannst du sehr einfach an folgendem Beispiel erkennen:

Wenn beide Blöcke gleich aussehen unterstützt dein Browser CSS 3. Im linken Block werden die abgerundeten Ecken und der Schatten mit den entsprechenden CSS 3 Klassifikationen angelegt. Der rechte Block dagegen ist einfach ein Screenshot der Darstellung im aktuellen Safari.

Sam plädiert dafür, diese Techniken einzusetzen. Wie bereits oben deutlich wurde, schlägt er vor, hier nicht von einem Minimalkonsens auszugehen, und daher nur die Klassifikationen zu verwenden, die von allen Browsern unterstützt werden. Die oben erwähnte Safari-Nutzerin ist abgerundete Ecken gewohnt, und freut sich wenn das gewohnte Umfeld auch auf Webseiten anzutreffen ist. Ein IE 6 Nutzer dagegen wird die abgerundeten Ecken wohl auch nicht vermissen. Wichtig ist es, dass die Inhalte für alle Zugänglich sind, wie diese jedoch dargestellt werden, darf sich unterscheiden. Hier besteht ein wichtiger Unterschied zwischen der Gestaltung von Drucksachen und von Webseiten. Die Drucksachen gelangen in der Endversion in die Hände der Betrachter. Die Darstellung von Webseiten hängt jedoch sowohl vom Betriebssystem als auch vom verwendeten Browser ab, und muss daher, nach Ansicht von Sam, nicht von allen in derselben Weise dargestellt werden.

Nutzt du CSS 3?

Im letzten Abschnitt seines Artikels plädiert Sam für die Nutzung der CSS 3 Klassifikationen. Mir geht es da ähnlich, da ich die Möglichkeiten von CSS 3 sehr schätze, und habe mich daher über sein Plädoyer gefreut. Mich interessiert eure Meinung zu dem angesprochenen Thema, und freue mich auf eure Kommentare…

Den heutigen Beginn der Weltstillwoche nehme ich zum Anlass auf ein Projekt hinzuweisen das vor einiger Zeit online ging. Ich hatte die Gelegenheit eine Webseite für Andrea Schwager im Rahmen ihrer Geschäftsausstattung zu realisieren. Frau Schwager ist Kinderkrankenschwester und widmet sich in ihrer freiberuflichen Tätigkeit der Unterstützung von Eltern in der Anfangsphase mit ihren Kindern. Für weitere Informationen zu ihren Angeboten empfehle ich einen Besuch ihrer Seite…

Ich freue mich sehr, dass mit martingommel.de eine neue Seite von Martin Gommel online ist bei deren Entstehung ich beteiligt sein durfte. Im Projektbereich habe ich eine Seite dazu eingefügt und empfehle dir einen Besuch dort und den Genuss der Bilder von Martin: martingommel.de

Heute findet der alljährliche CSS-Naked-Day statt. Ein Tag an dem man Webseiten ihre CSS-Kleider auszieht und so deren Körper in voller Pracht zu sehen ist. Dabei handelt es sich um eine Initiative zur Förderung von Webstandards und semantisch aufgebauten Webseiten. Weil ich das alles sehr gut finde, hab ich mein Blog nun auch ausgezogen, und es wird für die nächsten 48 Stunden nackt bleiben.

Mehr Infos zu dieser Initiative findest du hier: CSS-Naked-Day 09.

Gestern ging ein Projekt online an dem ich in letzter Zeit gearbeitet habe und da ich hier wieder etwas mehr schreiben möchte, kommt heute ein Eintrag dazu in dem ich auch darauf eingehen möchte wie jede und jeder ganz einfach anhand zweier Zahlenwerte die Größe eines Bildes anpassen kann.

Maren Hessler und Marcus Splitt starten mit shifthappens.de ein Online-Magazin für Veränderung in Organisationen und Gesellschaft. Ich zitiere dazu einfach mal aus dem Beitrag „SHIFTHAPPENS“ von gestern:

Wir sind der Meinung, dass es sich bei der aktuellen Krise nicht um eine Wirtschafts-, sondern um eine Systemkrise handelt. Deswegen wollen wir eine andere Perspektive anbieten und Impulse für zeitgemäßere Organisationsformen geben sowie Menschen zu Wort kommen lassen, die die Chance eines Shifts er- und begriffen haben.

In diesem Sinne empfehle ich dir das Blog. Für Menschen die das Blog weiterempfehlen wollen finden sich dort auf der Mitmachen-Seite ein paar Bildchen die auch Banner genannt werden. Da ich immer wieder mit solchen Bildern zu tun habe und ab und an feststelle, dass das Einbinden eines solchen Bildes in einer Größe die von der angebotenen Größe abweicht als Herausforderung erscheint möchte ich nun dazu ein paar Wort schreiben. Auf Seiten die solche Bilder anbieten findet sich meist ein Code-Schnipsel der in die eigene Seite eingebunden werden kann – es ist also nicht mehr zu tun als diesen Code zu markieren, zu kopieren und an einer geeigneten Stelle auf der eigenen Seite einzufügen, das werde ich nun auch machen…

Das einfügen des Codes führt dazu, dass hier das Bild in der angegebenen Größe angezeigt wird. Die Größe des Bildes wird durch die Angaben width=”200″ und height=”60″ bestimmt. Diese beiden Angaben helfen dem Code-Schnipsel dabei „standardkonform“ zu sein und lassen den Browser von Anfang an wissen wie viel Platz er für das Bild frei halten muss.

Möchte ich das Bild nun etwas kleiner darstellen verändere ich diese beiden Werte. Es empfielt sich Bilder nur kleiner darstellen zu lassen, da es bei Vergrößerungen natürlich zu Unschärfen kommt. Nehmen wir nun also an wir wollen das Bild in eine Seitenleiste einbinden die nur 150px breit ist, muss also der eine Wert width=”150″ heißen, um die Seitenverhältnisse des Bildes korrekt darstellen zu lassen muss sich auch der Wert height=”60″ ändern. Eine einfache Methode diesen Wert zu ermitteln ist es ihn durch 200 zu teilen und mit 150 zu multiplizieren – dabei erhält man den neuen Wert height=”45″. Natürlich kann man das auch mit jedem beliebigen Bildbearbeitungsprogramm erfahren, kleine Rechnung sollen aber auch gut für das eigene Gehirn sein, und das muss man selten extra öffnen.

Für einen Auftrag habe ich in den letzten Tagen etwas ausführlicher mit jQuery gearbeitet. Es handelt sich dabei um eine JavaScript Bibliothek die angetreten ist den Umgang und die Benutzung von Webseiten zu vereinfachen.

jQuery: The Write Less, Do More, JavaScript Library.

Das jQuery-Motto gefällt mir sehr gut und ich stimme gerne in den Chor derer ein, die diese Bibliothek und die Einfachheit des Programmierens loben. Schöne Effekte lassen sich mit jQuery recht einfach umsetzen und tragen meiner Ansicht nach zur Übersichtlichkeit und Benutzbarkeit einer Webseite bei.

(weiterlesen…)

Heute ist es nun soweit, dieses Blog geht online. Darüber freue ich mich besonders, da ich auf diese Weise ein kleines Projekt abschließe, bei dessen Entwicklung ich in den letzten Tagen eine Menge Freude hatte. Genau genommen wird das Projekt jedoch nicht abgeschlossen, sondern nur in eine neue Phase seines Daseins begleitet – es geht ins Netz. Von nun an, will es gepflegt und mit Inhalt gefüttert werden. Es öffnet sich für Besucher und freut sich an Betrachtern, Lesern, Abonnenten und Kommentatoren.

(weiterlesen…)