Website für einen fiktiven Bastelladen

Der Bastelbedarf Berthold Brecht ist ein fiktiver Bastelladen, für den eine Website erstellt werden sollte. Im Modul „Medienpraxis Onlinemedien“ erlernte ich die Grundlagen der HTML- und Javascript-Programmierung auf Grundlage der 2004 üblichen Webstandards. Diese Website war mein allererstes Webprojekt und ist komplett ohne Zuhilfenahme von Software und nur durch Schreiben des Codes im normalen Microsoft Texteditor entstanden. Wie es seinerzeit noch üblich war, wurde die Website noch nicht mit Div Layern sondern mit Tabellen umgesetzt. heutigen Ansprüchen würde sie also sicher nicht mehr genügen.

Konzept

Zielsetzung:

Der Onlineauftritt soll einen emotionalen Einblick in den Betrieb des Bastelladens geben, Hilfe stellen beim Finden von Bastelbedarf in Berlin-Mariendorf und eine weitere Ebene des Verkaufes durch Versand eröffnen. Hierdurch sollen bisherige Kunden gebunden und neue Kunden geworben werden. Durch ständige Aktualisierung, beispielsweise ereignisbezogene Bastelideen, soll sich auch der wiederholte Besuch der Homepage lohnen.

Zielgruppe:

1. primäre Zielgruppe des Ladengeschäfts sind Leute, die am Ausleben von Kreativität durch Basteln daheim oder in Workshops interessiert sind und daher Bastelmaterial benötigen. Angesprochen sind Erwachsene, die selbst gerne basteln oder Kinder haben, die basteln. Sekundäre Zielgruppe sind die Schüler der Schulen im Einzugsgebiet des Ladens, die Schreibwaren und Schulbedarf benötigen.
2. Die Zielgruppe des Onlineauftritts vernachlässigt die sekundäre Zielgruppe des Ladengeschäfts, da Schreibwaren keine Produkte sind, für die man längere Fahrten auf sich nimmt, sondern die man auf dem Schulweg kauft. Der Onlineauftritt konzentriert sich daher auf Interessierte an Bastelmaterial und Bastelkursen aus der näheren und weiteren Umgebung. Sekundär können Bastelbedarfbesteller aus dem gesamten Bundesgebiet (deutschlandweiter Versand) als Zielgruppe betrachtet werden.

Leistungsmerkmale:

1. Leistungen am Kunden: Der Onlineauftritt soll Kontaktmöglichkeit zum Bastelladen sein, sei es Hilfe beim Auffinden des Standortes oder ein Formular zur Bestellung von Zuhause aus. Der Kunde soll emotionalisiert werden durch aktuelle familien- und feiertagsbezogene Basteltipps, sowie eine Selbstdarstellung der Inhaber, welche jedoch unaufdringlich in den Hintergrund treten soll. An oberster Stelle soll das Kundeninteresse stehen, weshalb die Seite eine einfache Navigation mit klarer Hierarchie von Ober- und Unterkategorien braucht.
2. Leistungen für den Auftraggeber: Die klare Struktur und Übersichtlichkeit  muss sich im Quelltext fortsetzen. Die Seite soll einfach zu verwalten sein und eine Möglichkeit der späteren Erweiterung durch andere Technologien bieten. Ein potentielles Redesign soll schnell und unaufwendig sein.
3. Leistungen des Designs: Der Seitenaufbau soll passend zum Bastelladen, im Aufbau an einen klar strukturierten Baukasten/Setzkasten erinnern und in der Farbgebung an Buntstift- oder Tonpapierfarben. Eine corporate identity zum Ladendesign soll gegeben sein. Die Seiten-Ladezeiten sollen nicht zu hoch sein.

 Verwendete Technologien:

Ansetzend beim Baukastensystem habe ich mich gegen Frames entschieden und auf  verschachtelte Tabellen gesetzt. Sie sorgen für klare Formen und gute Formatierbarkeit von mehreren Spalten. Ich habe per Style Sheets eine begrenzte Anzahl von Farben vergeben, die sich einerseits als Farbleitsystem in der Navigation, sowie in der jeweiligen Seitenüberschrift wiederfinden, als auch aus dem Leitsystem herausgenommen in Unterüberschriften und Textboxen. Dieses Leitsystem erleichtert dem Kunden die Orientierung und kann mit wenigen Klicks vom Webmaster geändert werden. Weiterhin entschlacken die Style Sheets die jeweiligen Seiten, die nun nur noch das Seitengrundgerüst und den jeweiligen Seitencontent enthalten und damit übersichtlicher und übersichtlicher sind.

Kommentare ermöglichen dem Auftraggeber, sich leichter zurechtzufinden und verhindern, dass bei einer Veränderung an falscher Stelle die ganze Seite nicht mehr funktioniert. Der Auftraggeber kann selbst Änderungen vornehmen oder zusätzliche Seiten aus bereits bestehenden erstellen. Auch die Link- und Textformatierung ist komplett per Style Sheets optimiert und unterscheidet grundlegend in Navigation und Content. Mit wenigen Handgriffen lässt sich das komplette Design ändern. Eine sortierte Liste strukturiert die AGB und erleichtert das hinzufügen oder herausnehmen von einzelnen Punkten.

Bei Bastelzubehör und Produktpalette genügen unsortierte Listen zur grundlegenden Strukturierung. Die Bestellung erfolgt standardisiert über Formularfelder, was die Kommunikation mit dem Kunden erleichtert und dafür sorgt, dass keine relevanten Daten vergessen werden. Per css sind die Formulare dem Design angepasst. Das Formularfeld auf den jeweiligen Produktseiten, das bisher nur eine Übersicht bietet, kann später per JavaScript navigationsfähig gemacht werden, um zwischen den Unterkategorieseiten der Produktpalette, die keinen Link in der Seitennavigation haben, noch besser zu navigieren. Zugunsten der schnelleren Ladezeiten verzichte ich auf Bilder in der Navigation und setze sie lediglich als Hintergrundgrafiken und zur Bebilderung ein. Nur in der Produktpalette und im Header kann man Grafiken anklicken, um eine zusätzliche Zutrittsmöglichkeit für die Unterkategorieseiten zu erhalten.

Die Bilder sind soweit nötig mit height und width versehen, damit die Seite sofort richtig unverzerrt angezeigt wird, auch wenn das Bild langsam oder gar nicht lädt. Das Bild auf der Kontaktseite ist mit einer Imagemap versehen. Ein Klick auf den Standort des Ladens führt Benutzer mit niedriger Auflösung  oder verkleinertem Fenster per lokalem Link auf der Seite nach unten zur Adresse. Ein Klick auf die Bus-Haltestellen und die U-Bahnstation führt als externer Link zum jeweiligen Standortplan der BVG, um dem Kunden die Fahrverbindungssuche zu erleichtern. Interne Links finden sich überall auf der Seite und verbinden die Einzelseiten miteinander. Die AGB öffnen sich in reduziertem Design in einer neuen Seite. Sie sollen rein zweckdienlich sein und nebenbei gelesen werden können. Gemäß ihrer geringen Bedeutung für den Onlineauftritt als solches finden sie sich nur dort, wo sie relevant sind.