Website Design-Beispiel #2 2014: Wostock

Ach, herrlich – Wostock: Ein „Erfrischungsgetränk mit dem Aroma von Tannen“. Mit Taigawurzel, Fichtennadelöl, Eukalyptus und einen Hauch Kardamom. Gefällt mir sehr gut das Gesöff, auch wenn der Zuckergehalt mit ca. 30 Gramm – dem Durchschnitt einer Limonade – mir etwas zu hoch ist. Aber es schmeckt. Auch die Website, die natürlich in WordPress ist, sowie die gesamte CI gefällt mir sehr gut. Warum das so ist, will ich hier kurz beschreiben.

Im jedem Fall ist das gesamte Design der Produktelinien sehr gelungen. Mir gefällt das gut. Es passt sehr gut zum Geschmack des Getränks und ist zusammen mit dem Logo-Type konsequent und absolut professionell umgesetzt. Auch die Website passt zum Produkt. Die Farbgebung, die Hintergründe, die einfach, klare und wirkungsvolle Navigation, so wie die kleinen liebevollen Animationen, die mit CSS und JavaScript realisiert wurden, machen Lust auf das Gesöff und die Sache mal durchzuklicken.

Für das Web die CI konsequent weiterentwickelt

Das Layout ist wie die gesamte CI der Brause einerseits sehr modern, mit den großzügigen Elementen und der Typo; anderseits aber auch Retro, was sich in der Farbgebung und dem exakt platzieren Container mit dem Hauptcontent in der Mitte der Seite wiederspiegelt. Ich würde das vielleicht nicht so machen, aber es funktioniert. Gerade bei grafiklastigen Websites, die nicht viel Content, also Texte und dazugehörige Bilder haben, muss man den Platz dafür begrenzen. Hier ist das sehr gut und konsequent gelöst. Diese Konsequenz durchzieht die komplette CI und das ist sehr, sehr gut. So erzielt man einen hohen Wiedererkennungswert der Marke und ihrer Produkte.

Container mittels CSS zentrieren

Technisch interessant ist die Platzierung des Containers, die manchmal aus verschiedenen Gründen Kopfschmerzen machen kann. Man arbeitet mit einem „Negativ-Margin“, und zwar der negativen Hälfte der Breite und der Höhe:
.container {
position: absolute;
left: 50%;
top: 50%;
width: 960px;
height: 580px;
margin-left: -480px;
margin-top: -290px;}

Durch diesen kleinen CSS-Trick erreicht man, dass der Kasten auch tatsächlich mittig positioniert wird. Denn wenn wir 50% von oben und von links angeben, bezieht sich das ja eigentlich nur auf einen einzigen Pixel. Da der Container für den Inhalt aber viel breiter und höher ist, zieht man die Hälfte dieser Werte mit dem sogenannten Minus-Margin wieder von den 50% ab. Funktioniert sehr gut, ist aber nicht responsive und kann es auch nicht sein.

Der Container passt sie zwar durch die Prozent-Positionierungen an die Fensterbreite an. Allerdings nur bis zur festgelegte Breite von 960 Pixeln und ist damit eben nicht responsive oder wirklich adaptive. Das müsste man vielleicht ändern und dann auch mit einem anderen Container arbeiten. Aber das führt jetzt zu weit.

Bei Mouse-Over wackelt das Layout. Die Schrift ist zu klein.

Fährt man auf der Wostock-Website mit der Maus über die Inhalte oder fährt mit ihr in den Container ein, wackeln die Elemente. Der Content, die Grafiken verschieben sich scheinbar dynamisch in sich, was dieses seltsamen „Wackeleffekt“ hervorruft. Jeder Webdesigner fürchtet diese Phänomene und jeder kennt sie. Du veränderst hier was, passt dort etwas an und plötzlich ruckelt und wackelt auf der Website, dass es eine Freude ist. Manchmal ist der Fehler schwer zu finden. Hier sieht es so aus, als wäre dieser Effekt beabsichtigt, da er auch auf allen Unterseiten auftritt. Ist ganz witzig, sieht lebendig aus.

Aber es könnte auch sein, dass dieser Effekt eine Nebenwirkung von etwas anderem ist und sich nicht so ohne Weiteres vermeiden ließe. Also macht man aus der Not eine Tugend. Ich will nicht behaupten, dass es hier so ist, aber ich sage immer: „Es gibt nichts, was es nicht gibt.“

Noch ein Wort zum Font und den Schriftgrößen. Die Schrift ist super und passt zur CI. Oder ist das Logo-Type tatsächlich aus dem Font „futura-pt“? Jedenfalls funktioniert diese Schrift in Versalien nur bedingt. Kleiner als 13, besser 14 Pixel sollte diese Schrift nicht sein, sonst ist sie sehr schlecht zu lesen. Bei den H4-Zwischenüberschriften und einigen Unterseiten ist sie viel zu klein. Seltsamerweise wird ihr hier ein em mitgegeben, so dass sie mit 1em hier auskommen muss. Um sie aber noch einigermaßen leserlich zu halten, sollte sie wenn schon mindestens 1.5em bekommen.

Aber diese Sache mit der Schriftgröße ist nur eine Kleinigkeit und hat bei dieser Seite kein großes Gewicht. Anderes wird es beim Shop gemacht, der aber nicht mehr WordPress ist. Andere Schrift, angepasstes Design und vor allem Responsive. Aber es ist nicht wirklich zu vergleichen. Das Shop-Layout ist viel nüchtern, will das verkaufen, was mit viel Herzblut auf der eben besprochenen Seite wunderbar aufbereitet angeboten wird.

Fazit: Sehr gutes Design, intelligent gemacht. Konsequente Adaption der CI der leckeren Brause für das Web. Vom Layout kann man einiges lernen, wie man mit wenig Inhalten eine Seite füllt auch. Ob das Wackeln erwünscht ist oder nicht: An der mobilen Darstellung sollte gearbeitet werden und die Schrift sollte größer. Man kann sich auch überlegen, ob eine Interaktion mit den Kunden nur über Facebook oder auch über die WordPress-Website stattfinden sollte/könnte. Mein Tipp an alle: Wostock-Brause unbedingt probieren.

Zusammenfassung der Wostock Website:

• Wundervolle Corporate Identity (CI)
• Nicht Responsive
• Sauber und klar strukturiert
• Fester Container (Flash-Anmutung)
• Nicht Responsive
• CSS- und JavaScript Animationen
• Wackelt-Effekt bei Mouseover erwünscht oder Fehler?
• Shop-Anbindung extern (PrestaShop)
• Offenbar DNS-Fehler bei mobilen Aufruf (Seite über Smartphone nicht aufrufbar)

Daten der Beispiel-Website