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?

Dieses Buch erscheint im Verlag »A BOOK APART«, von den Herausgebern des Web-Magazins A LIST APART. Die Bücher, die in diesem Verlag erscheinen, folgen dem Anspruch kurz und bündig über Themen zu schreiben, die für Webdesigner wichtig sind.

Mir hat die Lektüre des Buches sehr gut gefallen. Auf mich wirkt es wie ein Espresso. Es enthält in konzentrierter Form eine Fülle wichtiger Gedanken und Anregungen, die beleben und Lust machen, weiter mit HTML5 zu experimentieren. Auf »CSS3 for Web Designers«, das sich noch in meinem Rucksack befindet, freue ich mich schon sehr.

In Kapitel 4 thematisiert Keith die Möglichkeiten, die HTML5 im Umgang mit Formfeldern bietet. Und auf einen Aspekt davon möchte ich nun gerne kurz eingehen.

Im Umgang mit Formfeldern <input> bringt HTML5 einiges an Neuerungen. Ein Suchfeld, wie hier abgebildet kann mit folgendem Code erzeugt werden:

<p>
<label for="query" >Suche: </label>
<input id="query" name="query" type="search"
placeholder="Suchbegriff ..." >
</p>

Es ist nun möglich Formfelder entsprechend ihrer Funktion anzusprechen. In diesem Fall verwendete ich folgendes: type=”search”. Die Browser verstehen sofort, dass es sich bei dem entsprechenden Feld um ein Suchfeld handelt. Diese Felder werden dann entsprechend der Spezifikationen der Browser dargestellt.

Die zweite Möglichkeit ist das Eingeben eines Platzhaltertextes. Dies wurde hier mittels placeholder=”Suchbegriff …” umgesetzt. Bisher wurde dafür Javascript verwendet. HTML5 löst an einigen Stellen den Einsatz von Plugins ab, und ermöglicht es so Webdesignern, gewünschte Funktionen direkt über das Markup zu realisieren. Bei meinen kurzen Tests eben, stellte sich jedoch heraus, dass es bisher lediglich die Webkit-Browser (Safari und Google Chrome) sind, die die Platzhalter-Spezifikation unterstützen.

Auf dem Weg zu semantisch aufgebauten Webseiten sind die genaueren Bezeichnungen unterschiedlicher Formfelder, und darüber hinaus einzelne Abschnitte einer Webseite, eine wichtige Neuerung. Die Möglichkeiten auf Erweiterungen mittels Javascript und anderer Plugins zu verzichten, und die gewünschten Funktionen direkt über das Markup zu realisieren werden der Kompatibilität und der Schnelligkeit von Webseiten zuträglich sein.

Wieso eigentlich extra gestalten?

Keith wirft im angesprochenen Kapitel die Frage nach der Gestaltung der so erzeugten Formfelder auf. Die Browser, die eine besondere Gestaltung liefern (im Falle des Suchfeldes sind das die Webkit-Browser), bieten momentan noch keine weitere Gestaltungsmöglichkeit. Sie erscheinen also auf die Weise, wie der Browser sie ausgibt. Diese Ausgabe entspricht jedoch der Darstellung eines Suchfeldes im Browser selbst.

Die Frage nach der Gestaltungsmöglichkeit wendet er daraufhin geschickt zur Frage, ob Formfelder überhaupt extra gestaltet werden sollten. Wenn Benutzerfreundlichkeit eng verbunden ist mit Gewohnheit, dann erscheint diese Frage plausibel. Eine Person, die eine Webseite mit einem Safari betrachtet, kennt die Darstellung eines Suchfeldes in ihrem Browser, sie wird dementsprechend das Suchfeld innerhalb der Webseite als solches erkennen.

Keith betrachtet die browserspezifische Darstellung der Formfelder als Herausforderung an die Browserentwickler. Diese werden sich ins Zeug legen, gebräuchliche Formfelder gut gestaltet auszuliefern, so dass ein angenehmes Surferlebnis entsteht, und somit Benutzerinnen und Benutzer gewonnen werden. Ich hoffe, dass die Entwicklung tatsächlich in diese Richtung geht.

Momentan würde mich jedoch interessieren, wie ihr das seht. Was haltet ihr davon bei der Gestaltung von Webseiten auf „vordefinierte Formfelder“ zu setzen?

_

Ein Browser, der die HTML5-Spezifikation der Formfelder nicht auf diese Weise unterstützt, behandelt sie wie normale Texteingabe-Felder. Die Spezifikation kann also verwendet werden, ohne dass Besucherinnen und Besuchern daraus ein Nachteil erwächst, sollte ihr Browser diese Spezifikation nicht unterstützen.

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.

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…

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.

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.