{"id":979,"date":"2008-10-05T01:34:43","date_gmt":"2008-10-04T23:34:43","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=979"},"modified":"2008-10-05T01:34:43","modified_gmt":"2008-10-04T23:34:43","slug":"baudax-der-shop-fur-heim-und-handwerkerbedarf-hat-fertig","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2008\/10\/baudax-der-shop-fur-heim-und-handwerkerbedarf-hat-fertig\/","title":{"rendered":"Bautied: Der Shop f\u00fcr Heim- und Handwerkerbedarf hat fertig"},"content":{"rendered":"<p>Vor etwas mehr als einem Dreivierteljahr waren wir ungef\u00e4hr da, wo wir in ein paar Wochen wieder sein werden: in der Weihnachtszeit. Anl\u00e4sslich des Weihnachtsfestes 2007 hatte ich <a href=\"http:\/\/www.frische-zitronen.de\/2008\/01\/03\/redesign-2-1a-werkstattgeratede\/\">ein paar grafische Layouts verschenkt,<\/a> u.a. auch eines f\u00fcr <a href=\"http:\/\/www.bautimeblog.de\/\">Michael Lalk vom BauTime-Blog,<\/a> Unternehmer und Betreiber des Bautied-shops. Heute kann ich berichten wie die Geschichte weiterging.<\/p>\n<p>Michaels Wunsch war es, dass er mit einem neuen Layout f\u00fcr seinen shop verdeutlichen m\u00f6chte, dass er ausschlie\u00dflich gute Markenprodukte verkauft und dar\u00fcberhinaus eine wirklich gute und fundierte Beratung bietet.\u00a0 Die Weihnachtsaktion kam ihm daher sehr gelegen um mal zu schauen, wie denn sein shop aussehen k\u00f6nnte.<\/p>\n<h3>Und das war der damalige &#8222;Stegreif&#8220; :<\/h3>\n<p><a href=\"http:\/\/www.frische-zitronen.de\/wp-content\/uploads\/2008\/01\/1a_werkstatt.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-635\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/01\/1a_werkstat_th.jpg\" alt=\"\" width=\"300\" height=\"187\" \/><\/a><\/p>\n<p>Der Entwurf aus der Weihnachtsaktion bezog sich auf den 1a-werkstattger\u00e4te-shop, deswegen galt es zun\u00e4chst f\u00fcr den Baudax nochmal genau auszuloten was wohl das richtige Design sein k\u00f6nnte. Mir ist wichtig, dass ein Kunde sich im Design wiederfindet und man hier nicht etwas \u00fcberst\u00fclpt was er nicht ist- genauso wichtig und eben nicht nur das aber auch, dass ein Design bei potentiellen Eink\u00e4ufern gut ankommt. Einen shop zu gestalten ist jedoch nicht ganz das gleiche wie eine normale Webseite. Hier hat die \u00dcbersichtlichkeit absoluten Vorrang, denn jeder Kunde, der einen shop genervt verl\u00e4sst ist mit der Zeit ein sp\u00fcrbarer finanzieller Verlust. Keine ganz so leichte Aufgabe &#8211; ein Shop ist eben keine Webvisitenkarte.<\/p>\n<p>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\u00f6chte ich Michael und seine Frau lobend erw\u00e4hnen &#8211; er wusste ganz genau was wichtig ist, weil er sich als durch und durch professioneller Shopbetreiber nicht selten auf Konferenzen herumtreibt und alles M\u00f6gliche liest was Shopbetreiber wissen m\u00fcssen um Kunden so weit wie m\u00f6glich auch im Internet entgegenzukommen.\u00a0 Es ist f\u00fcr uns Webdesigner und auch f\u00fcr die Programmierer als die ausf\u00fchrende Seite\u00a0 eine wertvolle Hilfe, wenn Kunden gut informiert sind und wissen wo sie stehen und was wichtig ist.<\/p>\n<h3>Die Vorentw\u00fcrfe<\/h3>\n<p><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-001.jpg\"><img decoding=\"async\" class=\"img1 float\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-001-thmb.jpg\" alt=\"baudax heimwerkerger\u00e4te entwurf 001\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-002.jpg\"><img decoding=\"async\" class=\"img1 float\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-002-thmb.jpg\" alt=\"baudax heimwerkerger\u00e4te entwurf 002\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-003.jpg\"><img decoding=\"async\" class=\"img1 float\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-003-thmb.jpg\" alt=\"baudax heimwerkerger\u00e4te entwurf 003\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-004.jpg\"><img decoding=\"async\" class=\"img1 float\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-004-thmb.jpg\" alt=\"baudax heimwerkerger\u00e4te entwurf 004\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-005.jpg\"><img decoding=\"async\" class=\"img1 float\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-005-thmb.jpg\" alt=\"baudax heimwerkerger\u00e4te entwurf 005\" \/><\/a><\/p>\n<p>Die M\u00e4nnerhose 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\u00e4t. Weg vom Frickel-Image. Michael entschied sich f\u00fcr Layout 5 (aber mit mehr Rot) weil es das wiederspiegelt wie seine Produkte sind &#8211; solide und werthaltig.<\/p>\n<h3>Und so kam dann der erste Prototyp zustande:<\/h3>\n<p><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-006.jpg\"><img decoding=\"async\" class=\"img1 float\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-006-thmb.jpg\" alt=\"baudax heimwerkerger\u00e4te entwurf 006\" \/><\/a><\/p>\n<p>Ja, so kann das mal am Anfang aussehen ;-) und es w\u00e4re ja zu sch\u00f6n gewesen, wenn ab alles so aalglatt durchgegangen w\u00e4re. Ist es aber nicht und es w\u00e4re gelogen, wenn ich nur erz\u00e4hlen w\u00fcrde 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\u00e4t ber\u00fccksichtigt und mich total vefranst.<\/p>\n<p>Es gibt in diesem shop kein Backend &#8211; was f\u00fcr den Admin den Vorteil hat, dass jeder Artikel &#8222;on the fly&#8220; ge\u00e4ndert werden kann. Das hei\u00dft, dass wenn man als Admin eingeloggt ist, unter jedem Artikel Links erscheinen, die man nur anklicken brauch um die Inhalte zu \u00e4ndern. Kein umst\u00e4ndliches Suchen in einer wohlm\u00f6glich ganz anderen Struktur im Backend. Das macht diesen shop f\u00fcr Anwender trotz seiner Komplexit\u00e4t sehr einfach erlern-, bedien- und administrierbar.<\/p>\n<p>F\u00fcr mich war aber genau das die b\u00f6se, b\u00f6se Falle, denn alle css-Auszeichnungen \u00fcbertrugen sich auch auf den Adminbereich. Tja &#8211; 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 &#8211; da bin ich ziemlich ins Schwitzen geraten. Aber Ende gut, alles gut oder &#8222;ett h\u00e4tt ja nochmal jut jegange&#8220; ;-) &#8230; und au\u00dferdem habe ich im zweiten Anlauf vieles nochmal \u00fcberdacht und \u00fcberarbeitet und serh viel gro\u00dfz\u00fcgiger gestaltet.<\/p>\n<h3>So sieht es heute aus:<\/h3>\n<p><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-007.jpg\"><img decoding=\"async\" class=\"img1 float\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2008\/10\/baudax-entwurf-007-thmb.jpg\" alt=\"baudax heimwerkerger\u00e4te entwurf 007\" \/><\/a><\/p>\n<p><a href=\"http:\/\/www.baudax.de\">Zum Baudax-shop<\/a><\/p>\n<p>Im Wesentlichen muss man f\u00fcr diesen shop zwei Layouts erstellen, eines f\u00fcr die Artikel\u00fcbersicht und eines f\u00fcr die Detailansicht. Im Unterschied jedoch zu einer normalen Webseite wimmelt es da nur so von Daten die \u00fcber Codeschnipsel in die Seite eingef\u00fcgt werden. Aber das ist wohl f\u00fcr einen shop normal &#8211; da muss man durch und mit ein bisschen \u00dcbung kann man doch ganz gut verstehen um welche Ausgabe es sich handelt.<\/p>\n<p>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 \u00e4ndern m\u00f6chte ist man bei diesem shop nicht nur in der Lage die Gestaltung sehr frei mit css zu beschreiben, sondern auch das markup weitestgehend selbstst\u00e4ndig zu ver\u00e4ndern. Das macht ihn f\u00fcr Webdesigner interessant, denn ich kann im Prinzip alles ver\u00e4ndern.<\/p>\n<p>Und so habe ich dann n\u00e4mlich 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\u00e4teren Administrator visuell zu verdeutlichen, dass er sich jetzt auf der Admin-Ebene befindet. Das fand ich wichtig &#8211; auch wenn mich das einige Mehrarbeit gekostet hat.<\/p>\n<h3>css und xhtml<\/h3>\n<p>In diesem Punkt hat mich die Zusammenarbeit mit Mathias nochmal ein gutes St\u00fcck weitergebracht, denn er legt viel Wert auf Semantik. Das tue ich eigentlich auch, aber es gab hier &#8211; gerade weil es ein shop ist &#8211; doch noch ein paar Dinge, die ich in dieser Tiefe noch nicht durchgespielt hatte. Zu schnell h\u00e4tte 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 ;-) &#8211; Man lernt eben nie aus und an dieser Stelle auch nochmal einen Dank an Mathias f\u00fcr die konstruktiven Hilfestellungen und auch f\u00fcr ein paar Kniffe, die ich noch nicht kannte.<\/p>\n<p>Schlussendlich haben wir hier ein Markup, welches f\u00fcr uns eine optimale L\u00f6sung darstellt. Einschr\u00e4nkend muss man aber sicherlich auch hinzuf\u00fcgen, dass es an manchen Stellen der eine oder andere diskussionsw\u00fcrdig finden w\u00fcrde aber die Diskussion wahrscheinlich kein entscheidend besseres Ergebnis bringen wird. Die M\u00f6glichkeiten von css2 sind eben beschr\u00e4nkt 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\u00fcr Spalten keine andere M\u00f6glichkeiten zur Verf\u00fcgung gestellt werden und man hier und da (meiner Meinung nach) auch ruhig mal eine b\u00f6se, b\u00f6se Tabelle h\u00e4tte nehmen k\u00f6nnen.<\/p>\n<h3>Fazit<\/h3>\n<p>Ich k\u00f6nnte jetzt sicherlich noch mehr schreiben \u00fcber alles was los war oder es bei ein paar W\u00f6rtern belassen:<br \/>\nspannend, lebhaft, interessant, konstruktiv, herausfordernd.<\/p>\n<p>F\u00fcr mich eine Erfahrung, die einmal mehr best\u00e4tigt, dass es sowohl fachlich als auch menschlich ein Gewinn ist, in einem gut funktionierendem Team zu arbeiten.<\/p>\n<p>Die Shopsoftware hat durch den modularen Aufbau viel Potential f\u00fcr alle m\u00f6glichen Erweiterungen. So ist jetzt schon klar, dass es demn\u00e4chst noch ein Modul f\u00fcr Kundenkommentare geben wird und die M\u00f6glichkeit Kommentare und Artikel zu bewerten. Auch die Verschlagwortung von Artikeln und Shoporganisation via Tagging ist schon in Arbeit &#8211; ebenso wird es auch noch andere Layouts geben, die das Erscheinungsbild f\u00fcr Sonderangebote auf der Startseite hervorheben und hier noch etwas auflockern. Sehr viele interessante sowohl f\u00fcr Kunden als auch Shopbetreiber wertvolle Funktionen.<\/p>\n<p>F\u00fcr mich ein shop, der insbesondere auch f\u00fcr die Webdesigner interessant ist, die bei allen Funktionen auch Wert auf semantische Strukturen und Webstandards legen und die gerne mit css arbeiten.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vor etwas mehr als einem Dreivierteljahr waren wir ungef\u00e4hr da, wo wir in ein paar Wochen wieder sein werden: in der Weihnachtszeit. Anl\u00e4sslich des Weihnachtsfestes 2007 hatte ich ein paar grafische Layouts verschenkt, u.a. auch eines f\u00fcr Michael Lalk vom BauTime-Blog, Unternehmer und Betreiber des Bautied-shops. Heute kann ich berichten wie die Geschichte weiterging.<br \/>\nMichaels Wunsch  &#8230; <a title=\"Bautied: Der Shop f\u00fcr Heim- und Handwerkerbedarf hat fertig\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2008\/10\/baudax-der-shop-fur-heim-und-handwerkerbedarf-hat-fertig\/\" aria-label=\"Mehr Informationen \u00fcber Bautied: Der Shop f\u00fcr Heim- und Handwerkerbedarf hat fertig\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,119,290,291,292],"yst_prominent_words":[],"class_list":["post-979","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-grafik-gestaltung","tag-baudax","tag-shop","tag-shopsoftware"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/979","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=979"}],"version-history":[{"count":0,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/979\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=979"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}