Bautied: Der Shop für Heim- und Handwerkerbedarf hat fertig

Vor etwas mehr als einem Dreivierteljahr waren wir ungefähr da, wo wir in ein paar Wochen wieder sein werden: in der Weihnachtszeit. Anlässlich des Weihnachtsfestes 2007 hatte ich ein paar grafische Layouts verschenkt, u.a. auch eines für Michael Lalk vom BauTime-Blog, Unternehmer und Betreiber des Bautied-shops. Heute kann ich berichten wie die Geschichte weiterging.

Michaels Wunsch war es, dass er mit einem neuen Layout für seinen shop verdeutlichen möchte, dass er ausschließlich gute Markenprodukte verkauft und darüberhinaus eine wirklich gute und fundierte Beratung bietet.  Die Weihnachtsaktion kam ihm daher sehr gelegen um mal zu schauen, wie denn sein shop aussehen könnte.

Und das war der damalige „Stegreif“ :

Der Entwurf aus der Weihnachtsaktion bezog sich auf den 1a-werkstattgeräte-shop, deswegen galt es zunächst für den Baudax nochmal genau auszuloten was wohl das richtige Design sein könnte. Mir ist wichtig, dass ein Kunde sich im Design wiederfindet und man hier nicht etwas überstülpt was er nicht ist- genauso wichtig und eben nicht nur das aber auch, dass ein Design bei potentiellen Einkäufern gut ankommt. Einen shop zu gestalten ist jedoch nicht ganz das gleiche wie eine normale Webseite. Hier hat die Übersichtlichkeit absoluten Vorrang, denn jeder Kunde, der einen shop genervt verlässt ist mit der Zeit ein spürbarer finanzieller Verlust. Keine ganz so leichte Aufgabe – ein Shop ist eben keine Webvisitenkarte.

Eine kleine Erleichterung war es jedoch, dass der alte shop vorhanden war und man anhand der Inhalte recht gut sehen konnte, was alles rein muss. An dieser Stelle möchte ich Michael und seine Frau lobend erwähnen – er wusste ganz genau was wichtig ist, weil er sich als durch und durch professioneller Shopbetreiber nicht selten auf Konferenzen herumtreibt und alles Mögliche liest was Shopbetreiber wissen müssen um Kunden so weit wie möglich auch im Internet entgegenzukommen.  Es ist für uns Webdesigner und auch für die Programmierer als die ausführende Seite  eine wertvolle Hilfe, wenn Kunden gut informiert sind und wissen wo sie stehen und was wichtig ist.

Die Vorentwürfe

Die Männerhose mit der Bohrmaschine hat ja was, hat auch im Nachhinein noch was, aber so sind die Lalks nunmal nicht. Sie legen Wert auf Zeit, auf individuelle Beratung und auf Qualität. Weg vom Frickel-Image. Michael entschied sich für Layout 5 (aber mit mehr Rot) weil es das wiederspiegelt wie seine Produkte sind – solide und werthaltig.

Und so kam dann der erste Prototyp zustande:

Ja, so kann das mal am Anfang aussehen ;-) und es wäre ja zu schön gewesen, wenn ab alles so aalglatt durchgegangen wäre. Ist es aber nicht und es wäre gelogen, wenn ich nur erzählen würde wie das hier immer alles so gut flutscht. Der Prototyp war schnell valide in xhmtl und css umgesetzt, der dicke Hund kam aber dann: dieser shop hat einen sehr benutzerfreundlichen Admin-Bereich und den hatte ich leider zu spät berücksichtigt und mich total vefranst.

Es gibt in diesem shop kein Backend – was für den Admin den Vorteil hat, dass jeder Artikel „on the fly“ geändert werden kann. Das heißt, dass wenn man als Admin eingeloggt ist, unter jedem Artikel Links erscheinen, die man nur anklicken brauch um die Inhalte zu ändern. Kein umständliches Suchen in einer wohlmöglich ganz anderen Struktur im Backend. Das macht diesen shop für Anwender trotz seiner Komplexität sehr einfach erlern-, bedien- und administrierbar.

Für mich war aber genau das die böse, böse Falle, denn alle css-Auszeichnungen übertrugen sich auch auf den Adminbereich. Tja – nachdem es wirklich ein Bilderbuchstart war, kam es an dieser Stelle doch ziemlich dick. Schlussendlich war das Layout nicht zu retten und ich habe berherzt alles nochmal vom Tisch gefegt und neu angesetzt. Ehrlich – da bin ich ziemlich ins Schwitzen geraten. Aber Ende gut, alles gut oder „ett hätt ja nochmal jut jegange“ ;-) … und außerdem habe ich im zweiten Anlauf vieles nochmal überdacht und überarbeitet und serh viel großzügiger gestaltet.

So sieht es heute aus:

Zum Baudax-shop

Im Wesentlichen muss man für diesen shop zwei Layouts erstellen, eines für die Artikelübersicht und eines für die Detailansicht. Im Unterschied jedoch zu einer normalen Webseite wimmelt es da nur so von Daten die über Codeschnipsel in die Seite eingefügt werden. Aber das ist wohl für einen shop normal – da muss man durch und mit ein bisschen Übung kann man doch ganz gut verstehen um welche Ausgabe es sich handelt.

Mathias Shopsystem basiert auf Templates. Bis auf einige wenige kann man an der url gut erkennen welches Template gerade geladen wird udn sich die Datei zum Bearbeiten in den Editor laden. Falls man etwas ändern möchte ist man bei diesem shop nicht nur in der Lage die Gestaltung sehr frei mit css zu beschreiben, sondern auch das markup weitestgehend selbstständig zu verändern. Das macht ihn für Webdesigner interessant, denn ich kann im Prinzip alles verändern.

Und so habe ich dann nämlich doch ein quasi-Backend eingebaut und allen Templates die im Admin-Bereich geladen werden ein div verpasst, mit welchem ich in der Lage war dem späteren Administrator visuell zu verdeutlichen, dass er sich jetzt auf der Admin-Ebene befindet. Das fand ich wichtig – auch wenn mich das einige Mehrarbeit gekostet hat.

css und xhtml

In diesem Punkt hat mich die Zusammenarbeit mit Mathias nochmal ein gutes Stück weitergebracht, denn er legt viel Wert auf Semantik. Das tue ich eigentlich auch, aber es gab hier – gerade weil es ein shop ist – doch noch ein paar Dinge, die ich in dieser Tiefe noch nicht durchgespielt hatte. Zu schnell hätte ich nach einem div oder mehreren ul gegriffen. Aber bei einem shop geht es auch anders, weil ja alle Artikel immer eine (1) Liste sind und alles was an Details kommt sich in dieser Liste verschachtelt. Gehirnakrobatik inklusive ;-) – Man lernt eben nie aus und an dieser Stelle auch nochmal einen Dank an Mathias für die konstruktiven Hilfestellungen und auch für ein paar Kniffe, die ich noch nicht kannte.

Schlussendlich haben wir hier ein Markup, welches für uns eine optimale Lösung darstellt. Einschränkend muss man aber sicherlich auch hinzufügen, dass es an manchen Stellen der eine oder andere diskussionswürdig finden würde aber die Diskussion wahrscheinlich kein entscheidend besseres Ergebnis bringen wird. Die Möglichkeiten von css2 sind eben beschränkt und da ist das eine ebensogut wie das andere oder ebenso schlecht. Als Webdesigner muss man wohl derzeit noch damit leben, wenn einem z.B. für Spalten keine andere Möglichkeiten zur Verfügung gestellt werden und man hier und da (meiner Meinung nach) auch ruhig mal eine böse, böse Tabelle hätte nehmen können.

Fazit

Ich könnte jetzt sicherlich noch mehr schreiben über alles was los war oder es bei ein paar Wörtern belassen:
spannend, lebhaft, interessant, konstruktiv, herausfordernd.

Für mich eine Erfahrung, die einmal mehr bestätigt, dass es sowohl fachlich als auch menschlich ein Gewinn ist, in einem gut funktionierendem Team zu arbeiten.

Die Shopsoftware hat durch den modularen Aufbau viel Potential für alle möglichen Erweiterungen. So ist jetzt schon klar, dass es demnächst noch ein Modul für Kundenkommentare geben wird und die Möglichkeit Kommentare und Artikel zu bewerten. Auch die Verschlagwortung von Artikeln und Shoporganisation via Tagging ist schon in Arbeit – ebenso wird es auch noch andere Layouts geben, die das Erscheinungsbild für Sonderangebote auf der Startseite hervorheben und hier noch etwas auflockern. Sehr viele interessante sowohl für Kunden als auch Shopbetreiber wertvolle Funktionen.

Für mich ein shop, der insbesondere auch für die Webdesigner interessant ist, die bei allen Funktionen auch Wert auf semantische Strukturen und Webstandards legen und die gerne mit css arbeiten.