Auch wenn ich in letzter Zeit mich intensiv mit xt:Commerce auseinandergesetzt habe – die Entwicklung rund um das Shopsystem ist etwas an mir vorbeigegangen. Nicht nur die Beta von 3.04 SP 2.2, die ein tabellenloses Layout mitbringen soll, liegt hier noch unbenutzt und vor allem uninstalliert rum, auch das finale Release des YAML-Templates für xt:Commerce ist nicht so recht in meinen Fokus gerückt. Björn Teßmann, der sich in Bezug auf die Entwicklung des Templates hauptverantwortlich zeigt, hat hier aber für Abhilfe gesorgt und mir darüber hinaus noch den aktuellen Release Candidate zum Anschauen zur Verfügung gestellt, mittlerweile ist die Version 1.0.2 erhältlich.

Das Template selbst kommt im schlichten Grau. Auch wenn Björn dieses nur als Grundlage für die eigene Arbeit ansieht, ein Antialias hätte dem Schriftzug ‘Your Logo here’ trotzdem gut zu Gesicht gestanden. Die Buttons kommen im Web 2.0-Look, ein Photoshop-Vorlage wäre aber zum schnellen Ändern von Buttontexten hilfreich. Es gibt aber zwei verschiedene Arten Buttons, nämlich gelbe und schwarze. Zusammen mit den diversen nicht veränderten Originaldateien, wie etwa den hässlichen Kundengruppe-Icons oder den Bewertungssternen, trägt das nicht unbedingt zur Übersichtlichkeit bei.

Übersichtlich gestaltet sich hingegen der Quelltext. Leider gilt aber für die Boxüberschriften das bereits zum RedRiver-Template gesagte: Die Wahrscheinlichkeit, dass es sich dabei um die wichtigsten Überschriften auf der Seite handelt und daher der Einsatz von h1 gerechtfertigt ist, dürfte gegen null gehen. Diese wäre für den eigentlichen Header, der das oben angesprochene Bild enthält, wesentlich besser geeignet und man hätte sich einen div-Container gespart. Außerdem ist es unter SEO-Gesichtspunkten sicherlich sinnvoller, dass Bild als Hintergrundbild einzubinden und den Text beispielsweise mit der Phark-Methode ‘verschwinden’ zu lassen – wenn es denn überhaupt unbedingt ein Bild im Header sein muss. Auch sollte der anklickbar sein. Meine Hand neigt stark dazu, den Schriftzug zu klicken, um zurück auf die Startseite zu kommen, was derzeit nicht von Erfolg gekrönt ist.

An den Header schließt sich die als Liste realisierte Navigation an. Allerdings ist nicht schlüssig, warum die Liste selbst noch einmal in einen div-Container verpackt und für was das leere <a id="navigation" name="navigation"></a>-Element. Wenn es da nur darum geht eine Sprungmarke zu setzen, das lässt sich auch nur mit einer ID erreichen, was alle modernen Browser mittlerweile als Anker nutzen können. Auch sonst finden sich innerhalb der Anchor-Tags noch einmal span-Elemente, die nicht nur auf den ersten Blick überflüssig erscheinen.

Im Hauptbereich ist die Breacrumb-Navigation keine Liste, ein Umstand, der sicherlich der Tatsache, dass sich das Markup hierfür in den php-Dateien findet, geschuldet ist. Die Kategorien werden als korrekt verschachtelte Liste ausgegeben, der dafür erforderliche php-Code ist noch um ein gutes Stück kompakter und aufgeräumter als meine Adaption von gunnART’s Anpassungen. Das CSS hingegen kaskadiert nicht, wodurch Einrückungen und auch hover-Effekte nur bis zur vierten Ebene vorhanden sind, was sich bei den Einrückungen in Hinblick auf die Übersichtlichkeit durchaus argumentieren lässt, beim Überfahren mit der Maus oder beim Auswählen einer Kategorie ab der fünften Ebene sollte dieser Zustand aber ersichtlich werden. Allerdings muss man vielleicht auch noch mal ans Reißbrett und die Shopstruktur überdenken, benötigt man tatsächlich derart tief verschachtelte Kategorien.

Zu den Boxen selbst habe ich ja schon angemerkt, dass die Überschrift erster Ordnung eher fehl am Platz ist. Auffällig ist auch, dass bei allen Boxen die Überschrift außerhalb eines div-Containers steht, während dieser selbst mitunter nur ein weiteres Blocklevel-Element, etwa eine unsortierte Liste, enthält. Da es kein Element gibt, mit dem sich die gesamte Box ansprechen lässt und die Einzelelemente auch nicht durch ID referenzierbar sind ist ein einfaches Ausblenden oder Umgruppieren nur über das Markup, nicht jedoch über CSS möglich. Als Beispiels mag hier der Erzgebirge-Palast dienen:

<div class="box" id="boxContent">
	<h4>Mehr &uuml;ber...</h4>
	<ul>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/3/content/AGB" class="normal">AGB</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/1/content/Versandinformationen" class="normal">Versandinformationen</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/10/content/Zahlungsmoeglichkeiten" class="normal">Zahlungsmöglichkeiten</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/11/content/Widerrufsrecht" class="normal">Widerrufsrecht</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/7/content/Kontakt" class="normal">Kontakt</a></li>
		<li><a href="http://www.erzgebirge-palace.com/shop_content.php/coID/70/content/Newsletter-RSS-Feeds" class="normal">Newsletter/RSS-Feeds</a></li>
	</ul>
</div>

Etwas mehr Aufmerksamkeit verdient die Besteller-Box. Wenn das keine sortierte Liste ist, was dann? Ich tendiere hier zu einer ol-dl-Kombi (leider scheint Björn Seibert den experimentellen Bereich eingestellt zu haben, deshalb hier auch kein Link, da mittlerweile auch der Google-Cache die Seite nicht mehr enthält), was dann in etwa so aussehen könnte:

<div class="box" id="boxBestseller">
	<h4>Unsere Bestseller</h4>
	<ol>
		<li>
			<dl>
				<dt>Testprodukt 1</dt>
				<dd>83,00 EUR</dd>
				<dd>zzgl. Versandkosten</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt>Testprodukt 2</dt>
				<dd>55,00 EUR</dd>
				<dd>zzgl. Versandkosten</dd>
			</dl>
		</li>
	</ol>
</div>

Und bei einem div, der den Klassennamen hrDiv hat und eine horizontale Linie erzeugt, fragt man sich durchaus, warum man nicht einfach das dafür gedachte hr-Element benutzt, bei dem ich sowieso der Meinung bin, dass es zu Unrecht ein Schattendasein führt, da wohl noch immer viele damit die aus den Anfangszeiten des Webs bekannten Trennlinien assoziieren, ohne sich der Gestaltungsmöglichkeiten mittels CSS auch für dieses Element bewusst zu sein.
Das gilt im übrigen auch für die Definitionsliste, die sich für weit mehr sinnvoll einsetzten lässt, als ihr Name vermuten lässt. Entsprechende Ideen mag das obige Beispiel vermitteln, dass sich auch problemlos etwa auf die Rezensionsseite übertragen lässt.

An der ein oder anderen Stelle laufen einem br-Elemente über den Weg, deren einzige Aufgabe offensichtlich darin besteht, einen float zu clearen, was sich eigentlich auch an ein sowieso notwendiges Element binden lassen sollte.

Björn setzt für das Template auf den Transitional-Doctype von XHTML 1.0. Wer das ganze gegen die Strict-Variante validieren will muss neben den hier gegebenen Tipps zur Validitätsverbesserung unter anderem auch noch ein font-Tag im Checkout eliminieren. Das steckt nämlich in den Sprachdateien beim ‘Bearbeiten’-Link.

Alle Formularelemente haben derzeit keine ID, wobei hier als pirmärer schuldiger aber der Shop selbst anzusehen ist. Mit etwas Aufwand an den PHP-Dateien lässt sich aber auch das realisieren, evtl. geht es sogar mit Smarty-Funktionen, ohne die Sourcefiles ändern zu müssen. Nach Auskunft von Björn ist da wohl auch was in Arbeit. Damit würden sich dann auch Formulare besser und zugänglicher gestalten lassen.

Ab und zu laufen einem dann doch noch Tabellen über den Weg. Die dürften aber, wie etwa die Auflistung der Seiten beim Produktlisting oder auch im Checkout-Prozess größtenteils im Source befinden und von daher mit einem Template nicht eliminierbar sein. Apropos Checkout-Prozess: Habe ich eigentlich schon erwähnt, dass ich so langsam aber sicher die Silk-Icons von famfamfam.com nicht mehr sehen kann?

Die einzige berechtigte Tabelle, nämlich der Warenkorb, ließe sich von der Zugänglichkeit her noch verbessern, Anregungen dazu mag das Beispiel auf macx.de liefern.

Alles in allem bietet das YAML-Template eine solide Grundlage für die eigene Entwicklung eines CSS-basierten und weitestgehend layouttabellenfreien Templates, das nicht nach ‘Stange’ aussieht. Bei der Gestaltung des ganzen helfen, nachdem eine Buttonvorlage ja fehlt, möglicherweise die von Deziner Folio zur Verfügung gestellten Ebenenstil- und Verlaufsvorlagen für Photoshop.