Die Seite sollte auf die Umgebung reagieren in der sie aufgerufen wird. Wir wollten keine unterschiedlichen Seiten entwickeln, sondern setzen auf »responsive Webdesign«. Auf diese Weise passt sich die Seite auf das Ausgabegerät (die Größe des Browserfensters) an, und wird optimiert für die unterschiedlichen Geräte dargestellt.

Bei der Entwicklung der Webseite gingen wir vom kleinsten Ausgabegerät aus. Durch die Vorgabe alle bestehenden Inhalte zu übernehmen, standen wir hier vor der Herausforderung die Inhalte zu gewichten und so anzuordnen, dass sie mit einer schlankeren Navigation zu erreichen sind.

Zur Zeit arbeite ich an weiteren Projekten, die die angedeutete Vorgehensweise berücksichtigen. Meiner Ansicht nach nimmt die Nutzung mobiler Endgeräte wie Smartphones und Tablets weiter zu, so dass Webseiten dann am Besten genutzt werden können, wenn sie darauf eingestellt sind.

_

Eine Frage noch an diejenigen Leserinnen und Leser, die selbst solche Projekte durchführen: Wie präsentiert ihr diese Projekte in eurem Portfolio?

Für die demnächst erscheinende CD/DVD von Sting – Live in Berlin – hatte ich die Möglichkeit, im Auftrag der Deutschen Grammophon, die Album-Webseite zu entwickeln.

Über das Album wird folgendes geschrieben:

This live collection features Sting Live in Berlin, accompanied by the Royal Philharmonic Concert Orchestra conducted by Steven Mercurio. Culled from Sting’s critically acclaimed world tour, Symphonicity, this exclusive compilation features many of his greatest hits, including “Englishman in New York,” “Whenever I Say Your Name,” “King Of Pain,” “Desert Rose,” and more, all re-imagined for symphonic arrangement. Featuring special guest Branford Marsalis, this live concert experience is quintessential Symphonicity.

Während die Videos und Hörbeispiele der Webseite für Computer in Flash ausgegeben werden, sind sie für Besucherinnen und Besucher der Seite mit iPhones alternativ angelegt, so dass die Inhalte auch dort zugänglich sind.

→ zur Albumwebseite

In den letzten beiden Woche gingen zwei Webseiten ins Netz, die ich in Zusammenarbeit mit zwei Grafikern umgesetzt habe. Die beiden Grafiker waren dabei selbst die Kunden und sind nun die Betreiber der jeweiligen Webseite.

Bei beide Seiten arbeitet im Hintergrund WordPress, und wir realisierten die Darstellung der Projekte mit Hilfe der Möglichkeit eigene Post-Types zu definieren, und arbeiten an unterschiedlichen Stellen mit den Artikelbildern und benutzerdefinierten Feldern.

Wie ebenfalls im letzten Eintrag angedeutet, trägt jedoch auch eine Reduktion der den Text umgebenden Elemente zum besseren Erfassen der Inhalte bei. Aus diesem Grund habe ich in meinem anderen Blog in der Einzelartikelansicht auf die Seitenleisten verzichtet, und auch das Design dieses Blogs betont die Artikelspalte.

Der Reader in Safari 5

Vor einigen Tagen erschien die aktuelle Version des Browsers aus dem Hause Apple – Safari 5 – und eine Funktion des Browsers hat es mir besonders angetan: der Reader. Safari 5 ist der erste Browser, der mit einem besonderen Lesemodus geliefert wird. Sobald der Browser einen Artikel auf einer Seite erkennt (in diesem Blog beispielsweise in der Einzelartikelansicht) bietet der Browser die Möglichkeit den Artikel hervorgehoben darzustellen. Das sieht dann so aus, wie auf dem Bildschirmfoto über diesem Abschnitt.

Der Reader ist sowohl in der Mac- als auch in der Windowsversion enthalten. Er lässt sich entweder durch einen Klick auf das Readersymbol in der Adresszeile aktivieren, oder mit den entsprechenden Shortcuts:

• MAC: Apfel + Shift + R
• WIN: strg + Shift + R

Auf diese Weise aktiviert liegt die Konzentration auf dem Artikel. Die Darstellung erinnert stark an eine Druckversion der Webseite. Seitenleisten und viele andere Quellen der Ablenkungen ausgeblendet. Der Kontrast ist angenehm stark und die Schriftgröße gut zu lesen (diese lässt sich auch einfach anpassen). Darüber hinaus bietet der Reader die Möglichkeit den Artikel zu drucken oder ihn per E-Mail zu versenden.

Einige bevorzugen eine invertierte Darstellung von Text auf ihrem Bildschirm. Dazu gibt es leider keine, eigentlich Apple-typische einfache Oberfläche. Dennoch kann die Darstellung des Artikels im Reader angepasst werden. Dazu ist etwas CSS-Kenntnis notwendig, damit steht einer Anpassung jedoch nichts mehr im Wege.

Den Reader am Mac anpassen

Zunächst muss im Programme-Ordner das Safari-Icon ausgewählt werden. Nach einem Rechts-Klick auf das Symbol wird »Paketinhalt anzeigen« als Auswahlmöglichkeit angeboten. Nachdem der Paketinhalt angezeigt wird, den Ordner »Resources« auswählen und hier die Datei »Reader.html« suchen. Ich habe mir dann erst mal eine Sicherungskopie der Datei in einem anderen Ordner gespeichert, und empfehle dies natürlich auch gerne weiter. Diese Datei in einem Programm öffnen, das zur Bearbeitung von html-Dateien geeignet ist, und die gewünschten Stile verändern.

Wer beispielsweise die Textdarstellung invertieren möchte, der kann in den Zeilen 407 und 408 die Farbwerte für color und background-color austauschen. Aus Sicherheitsgründen werden die Rechte überprüft, und du solltest mit Adminrechten ausgestattet sein um Änderungen durchführen zu können.

Der Pfad zur Datei sieht so aus:
/Programme/Safari.app/Contents/Resources/Reader.html

Um die Änderungen zu betrachten musst du ein neues Safari-Fenster öffnen, den Artikel neu laden und dann den Reader aufrufen.

Den Reader unter Windows anpassen

Nachdem die Anpassung auf dem Mac so einfach war, wollte ich auch sehen wie es unter Windows geht. Und siehe da, hier geht es ähnlich einfach.

Im Explorer steure ich zunächst den Ordner auf der Festplatte an, in dem sich die Programme befinden (bei mir ist das C:). Hier wähle ich den Safari-Ordner aus, klicke auf Safari.resources und finde in diesem Ordner eine Datei mit dem Namen »Reader.html«. Von dieser Datei fertige ich eine Sicherungskopie an, und offne sie dann in einem html-Editor. Nun kann ich mir die Stile ansehen und die gewünschten Änderungen durchführen.

Der Pfad zur Datei sieht so aus:
/Programme/Safari/Safari.resources/Reader.html

Auch unter Windows öffne ich ein neues Fenster, lade den Artikel neu, aktiviere den Reader und sehe mir die Änderungen an.

_

Auf die Möglichkeit den Reader am Mac anzupassen, wurde ich dank dieses Artikels auf macosxhints.com aufmerksam. Dort finden sich, für Interessierte, auch Codeschnipsel.

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.

»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…

Die Seite motionfruit.de ist schon eine ganze Weile online, in den letzten Tagen habe ich sie nun auch als Projekt hier angelegt. Das kreative Team um Marc Böttler bietet uns auf der Seite Einblicke in sein Schaffen. Für einen sehr guten Vorgeschmack auf die Arbeit des Motionfruit-Teams empfehle ich das dort aktuell eingestellte Projekt von Intros zu Interviews das hier als Quicktime in HD angesehen werden kann und worüber Marc hier ein paar Worte geschrieben hat.

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

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