Zur visuellen Gestaltung
Das Websitedesign für KRAFTSTOFF wurde im Erstvorschlag bereits mit Hilfe von Photoshop skizziert. In der Umsetzung wurden allerdings entscheidende visuelle Aspekte der Webseite geändert.
Das Menü auf der linken Seite musste weichen. Dies passierte aufgrund von Überlegungen, die das Layout auf mobilen Endgeräten betreffen. In der vertikalen Ansicht wurde durch diese Art der Navigation wertvoller Platz genommen. Zwar wäre es durch ein Media Query denkbar gewesen, die Menüführung für unterschiedliche Endgeräte auch unterschiedlich zu gestalten, jedoch hielt ich das für unnötig. Von der ästhetischen Seite her war mir eine fixierte Navigation am oberen Ende der Website genau so recht. Aufgrund dessen bevorzugte ich die einheitliche Lösung.
Wie beschrieben blieb ich beim One-Page-Layout. Jede Einzelne "Seite" wurde mit einem Hintergrundbild versehen, das thematisch an die entsprechende Überschrift angelehnt ist.
Bei der farblichen Gestaltung wurden anhand entsprechender Suchkriterien bestehende usergenerierte Farbpaletten der Website colourlovers.com in Anspruch genommen.
Zur technischen Umsetzung
Technisch wurde die Website teilweise anhand des Dreamweavers vorgenommen, wobei allerdings vordergründig der Codebereich gewählt und vom komfortablen Wechsel zwischen .html- und .css-Datei Gebrauch gemacht wurde. Zur besseren Übersicht verwendete ich auf meinem heimischen Schreibtisch zwei Bildschirme. Auf dem einen war der Code ersichtlich, während auf der anderen die entsprechende Websitefile mithilfe der Google-Chrome-Erweiterung Easy Auto Refresh regelmäßig aktualisierte.
Die technische Umsetzung des One-Page-Layouts gestaltete sich erwartet schwierig, da es dieser Art von Website zueigen ist, dass der Code unübersichtlich werden kann. Dieser Problematik konnte ich einigermaßen erfolgreich mittels Kommentarsetzung und der Tatsache, dass ich den Code zu 99% händisch verfasst habe, entgegenwirken.
Eine Herausforderung für die Umsetzung der Website war die Einbindung eines Javascripts zur Erreichung des Smooth Scroll-Effektes. Hierbei wurde ein Open-Source-Template per Reverse Engineering zerlegt, um Verständnis für die Implementierung zu erreichen. Anschließend wurden die notwendigen Codezeilen und Verweise in das eigene Dokument übernommen. Dies wurde gleich zu Beginn der Website-Gestaltung erledigt, da ich denke, dass sich eine nachträgliche Änderung nur durch schwerwiegende Änderungen im Grundgerüst erreichen lässt.
In weiterer Folge wurde erst der grobe Aufbau in sections eingeteilt. Anschließend wurde die Navigation erstellt, die "Inhaltsboxen" festgelegt und mit Beispieltexten befüllt. Erst zum Abschluss folgte die Einbindung von Bildmaterial und sinnvollen schriftlichen Inhalten.
Das Video wurde auf der Startseite mithilfe des html5-Videoplayers Video.JS eingebunden. Dieser Player lieferte mir die gewünschte Freiheit im Bezug auf das Layout und entsprach meinen Vorstellungen im Bezug auf die Unaufdringlichkeit. Letztlich habe ich mich aufgrund der Skalierbarkeit dazu entschieden, die Größe des Videos anhand prozentueller Angaben zu steuern, wodurch bei manchen Auflösungen ein schwarzer Rand entstehen kann. Hier habe ich gegenüber der genauen Pixelangabe, mit der in den Rand verhindert hätte, einen Tradeoff zugunsten der Funktion hingenommen.
Im Menüpunkt Futter wurde die Seite in ihrer Größe erweitert, sodass diese nicht nur eine, sondern zwei Bildschirmhöhen in Anspruch nimmt. Dies liegt der ausführlicheren Natur einer Speisekarte zugrunde. Hier wurde einfach mehr Platz gebraucht. In der weißen Box selbst wurde per CSS implementiert, dass die weiße Box nicht erweitert, sondern scrollbar wird. Dies wurde in den weiterern Menüpunkten ähnlich umgesetzt.
Im Menüpunkt Reservierung entstand ein Formular mit Eingabefeldern, wobei hier zwischen den Eingabefeldern "Text", "Date","Time", "Number" und "Email" unterschieden wurde. Diese input type-Variationen sorgten für eine Eingabevalidierung im Browser, weitere Einschränkungen - beispielsweise bei der Anzahl der Personen für eine Reservierung - wurden händisch festgelegt (hier: 1 bis 20). Bei erfolgreichem Versand erscheint eine Dummy-Page mit Dankesnachricht, eine weitere Funktion wurde nicht implementiert.
Weiters wurde im Menüpunkt Kontakt mithilfe des Google Maps-Dienstes eine interaktive Karte in Form eines iframes eingebunden, die dem Kunden bei der Orientierung helfen soll.
Im Bezug auf die Browserkompatibilität wurde die Website in den neuesten Versionen von Chrome, Firefox und Safari getestet. Im Internet Explorer gab es kleinere Unterschiede visueller Natur, die Funktion blieb allerdings gleich.
Grundsätzlich sollte die Funktion in verschiedenen Auflösungen gewährleistet sein, da im Design der Website vordergründig prozentuelle Angaben bei der Definition der Größen angewandt wurden. Für die Darstellung in Portraitansicht, z.B. bei mobilen Endgeräten, wurde das Logo per Mediaquery ausgeblendet, dafür befindet sich im Menü der Menüpunkt "Home".
Hier befindet sich der grobe Aufbau der Website.
<!DOCTYPE html>
<html lang="de">
<head>...</head>
<body>
<nav>...</nav>
<section id="intro" class="intro-section"> ... </section>
<section id="futter" class="futter-section"> ... </section>
<section id="saft" class="saft-section"> ... </section>
<section id="reservierung" class="reservierung-section"> ... </section>
<section id="kontakt" class="kontakt-section"> ... </section>
<section id="impressum" class="impressum-section"> ... </section>
</body>
</html>
Im Kopf wurden Javascripts eingebunden, ebenso im Body am unteren Ende des Dokuments. Für die Navigation wurde er HTML5-Tag <nav> verwendet. Die einzelnen Bereiche wurden in Sections unterteilt und mit Inhalten befüllt. Zumindest auf Firefox und Chrome sollte hinter diesem Link der Quellcode ersichtlich sein.