http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Einleitung

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Vorbedingungen

Wir stellen uns vor: Irgendwo in einer deutschen Stadt, nennen wir sie Musterstadt, in der Musterstraße gibt es ein kleines Restaurant, die »Kochbar«, das sich fortan auch im Web präsentieren möchte. Wir stellen uns weiter vor, dass es einen zugehörigen Biergarten gibt, dessen Öffnungszeiten sich von denen des Restaurants unterscheiden. Wir gehen ferner davon aus, dass der Besitzer der Kochbar dem Projekt zunächst ein wenig verhalten gegenübersteht und seine Kosten daher möglichst gering halten möchte. Das bedeutet, die Website sollte sich auf das Wesentliche beschränken und nur die Informationen präsentieren, die wirklich notwendig sind. Natürlich soll es möglich sein, die Website später im Erfolgsfall durch weitere Informationen zu ergänzen, etwa zur Geschichte des Hauses, zur Einrichtung, zum Personal oder zu besonderen Veranstaltungen wie Mitternachtsbüfetts, Sommerveranstaltungen im Biergarten oder Silvesterdinner. Als das einzige besondere Angebot soll das Rezept des Tages zum Nachkochen auf der Site präsentiert werden.

Bevor wir anfangen, ist es notwendig, einige Vorüberlegungen anzustellen. Der Systemarchitekt Jens Meiert drückt dies treffend so aus:

»Ein gutes Informationsangebot fällt nicht einfach vom Himmel, und es lässt sich nicht schnell zusammenklicken. Nein. Es stellt Ansprüche an Ziele, Inhalte, Struktur, Design, Programmierung, Pflege. Es erfordert Expertise, und dies permanent.« [Meiert 2006-1]

Planung

Die Website soll potenzielle Gäste ansprechen, die sich über das Restaurantangebot in erreichbarer Nähe informieren möchten. Sie soll den Gast über die Kochbar informieren, ihm die Möglichkeit geben, die Speisekarte und die Öffnungszeiten einzusehen und einen Tisch zu reservieren. Das Rezept des Tages soll Hobbyköche und solche, die es werden wollen, zum regelmäßigen Besuch der Site animieren; denn wer des Öfteren vorbeischaut, der bestellt vielleicht eher mal einen Tisch.

Das schlanke Konzept stellt keine hohen Ansprüche an die Informationsarchitektur. Werfen wir einen Blick darauf, was wir an Anforderungen zusammenstellen können:

  • Die Startseite stellt die Kochbar kurz vor und ermöglicht den Zugriff auf die weiteren Informationen.
  • Um die Startseite nicht zu sehr mit Informationen zu überladen, gibt es eine weitere Seite »Kochbar«, die einen Blick »in die Töpfe« erlaubt.
  • Die Speisekarte informiert den Gast im Vorfeld darüber, welche lukullischen Genüsse ihn erwarten.
  • Die Angabe der Öffnungszeiten sorgt dafür, dass der Gast nicht vor verschlossener Tür steht.
  • Ein Kontaktformular erlaubt Rückmeldungen und Fragen und ermöglicht die Reservierung eines Tischs.
  • Das Rezept des Tages, auf jeder Seite an auffälliger Stelle verlinkt, macht aus jedem Besucher einen potenziellen Meisterkoch.
  • Darüber hinaus benötigt jede Website ein Impressum, auch die Kochbar. Informationen zur Impressumspflicht finden Sie bei [Ott 2008].

Screendesign

Wie das inhaltliche Konzept, soll auch das Screendesign schlank und übersichtlich, aber »appetitanregend« sein. Abbildung 8.1 zeigt den Photoshop-Entwurf, auf dem im Wesentlichen vier Bereiche zu erkennen sind:

  • ein Kopfbereich mit dem Kochbar-Schriftzug (Logo) und der Navigation,
  • eine Spalte auf der linken Seite, im Folgenden »Sidebar« genannt, die Kontaktinformationen und den Verweis auf das Rezept des Tages enthält,
  • der Inhaltsbereich rechts und
  • die Fußzeile, die Metainformationen über die Seite enthält (hier einen Hinweis auf den Beispielcharakter der Site im Rahmen dieser Einführung sowie die beteiligten Personen).

Neben dem Logo gibt es weitere grafische Elemente:

  • Die oberste Zeile ist mit einer Art Laminat-Muster gekachelt.
  • Eine sich wiederholende Reihe von Gabeln, die Leckereien aufspießen, bildet einen geschwungenen Übergang vom Kopf- zum Inhaltsbereich.
  • Aufgespießtes Gemüse dekoriert auch das Kontaktfeld.
  • Das Rezept des Tages wirkt fast wie handgeschrieben durch die aus Schulheften bekannte Linierung und die Unterstreichung der Überschrift.
  • Im Inhaltsbereich sorgt verstreutes Gemüse für Frische und Farbigkeit.

Die Farbgebung der Site ist sehr lebhaft. Warme Farben sorgen für eine freundliche Stimmung; so wie man es sich für die Atmosphäre eines Restaurants wünscht. Andere Elemente greifen das Graublau der Gabeln auf, beispielsweise die Navigation und die Fußzeile, kühlen das Design wiederum ein wenig ab und sorgen so für ein angenehmes Gleichgewicht.


Abb. 8.1: Startseite

Auf den weiteren Screenshots, Abbildung 8.2 bis Abbildung 8.4, sehen Sie die Entwürfe des Kontaktformulars, der Speisekarte und der Öffnungszeiten jeweils in Form einer Tabelle.


Abb. 8.2: Speisekarte


Abb. 8.3: Öffnungszeiten


Abb. 8.4: Kontaktformular mit der Möglichkeit, einen Tisch zu reservieren

Realisierung

Da Sie gerade ein Lehrbuch für XHTML und CSS in Händen halten, sind dies auch die Techniken, mit denen wir die Site umsetzen. Wir erstellen eine kleine, in sich geschlossene Website, die auch auf lokalen Datenträgern laufen wird. Der Fokus liegt ganz klar auf der Textauszeichnung im ersten und auf der Umsetzung des Designs im zweiten Teil.

Qualitätssicherung

Vor Fertigstellung der Kochbar-Website überprüfen wir die technische Validität und Konformität aller Ressourcen, sowohl des Markups als auch des Stylesheets.