One-Theme-Webseite mit HTML & CSS
Als Juweliergeschäft mit einem bestehen von mehr als 50 Jahren, fühlt sich unser Kunde Juwelier Rüger aus Kleve mit der Stadt Kleve sehr verbunden und hat daher beschlossen, einen Ring für Kleve zu gestalten, der so ausschließlich bei Ihm zu erwerben ist.
Bei einem Kaffee haben wir gemeinsam die 6 Elemente des neuen Klever Stadtringes ausgearbeitet, die die Stadt Kleve am ehesten präsentieren und auf dem Ring abgebildet werden sollen.
Dazu hat sich unser Kunde auch eine kleine, von seiner eigentlichen Webseite losgelösten, Webseite von uns gewünscht.
Das Vorgespräch
Wir haben dem Kunden eine simple One-Page-Webseite vorgeschlagen, da sich diese Art des modernen Webdesigns am ehesten für die Präsentation eines einzelnen Produkts eignet.
Als Beispiel haben wir Ihm unsere zu damaliger Zeit noch im Entwicklungstadium befindliche Webseite gezeigt, auf der Sie sich jetzt befinden. Dabei hat Ihm die Funktion der Leistungen mit der Möglichkeit zwischen zwei Themen zu wechseln, ebenso wie der Kontaktbereich, so gut gefallen, dass er uns darum gebeten hat, diese exakt so auf der Webseiten für den Klever Stadtring umzusetzen.
Die Vorgaben
HTML-basierende One-Page-Design-Webseite mit allen Inhalten untereinander auf der Startseite.
Es soll kein Menu geben.
Ein Slider soll großflächig den ersten Bildbereich der Webseite abdecken und die Schmuckstücke groß abbilden.
Es soll einen Bereich geben, in dem die Symbole einzeln dargestellt sind und eine Beschreibung dazu aufgerufen werden kann.
Es soll sowohl für den Klever Stadtring als auch für den Klever Stadtanhänger einen separaten Reiter geben, dessen Inhalte beim Wechsel der Reiter komplett ausgetauscht werden.
Die Inhalte der Reiter sollten sowohl die Ringe als auch die Anhänger in allen verfügbaren Farben abbilden. Zudem sollen alle relevanten Informationen zu dem jeweiligen Schmuckstück in einer Tabelle aufgeführt werden.
Der Kontaktbereich soll eine Anbindung an die Google-Map-API aufweisen.
Ein Kontaktformular soll als Kaufanfrage-Formular dienen.
Die Programmierung
Das Screendesign ist ebenso wie die Webseite recht schlicht gehalten. Als Kopfzeile haben wir die Fläche des Rings als Graustufengrafik eingebunden.
Der Slider, bestehend aus drei großen Bildern, die wir anhand der einzelnen, (von uns) freigestellten Schmucktücke selbst erstellt haben, basiert vollständig auf CSS und passt sich der jeweiligen Darstellungsgröße des Ausgabegerätes an.
Die Darstellung der Symbole variiert je nach Ausgabegerät. Während beim Desktop sowohl die Grafik, als auch die Kuezbeschreibung gefolgt von einem Button angezeigt werden, sind auf einem Tablet nur noch die Symbole zu sehen. Tippt man ein Symbol an erscheint an dessen Stelle die Kurzbeschreibung inklusive dem Button, der die detaillierte Beschreibung aufruft. Beim Smartphone ist die Funktion ähnlich, jedoch werden hier nicht mehr drei Symbole nebeneinander anzeigt, sondern je nach Richtung des Smartphones zwei oder gar nur ein Symbol je Reihe angezeigt.
Der Darstellungsbereich der Information zu den jeweiligen Schmuckstücken war da schon etwas komplexer, denn wir haben uns dafür entschieden, einen Ring in einer Farbe groß und die anderen etwas kleiner abzubilden. Eine nebenstehende Tabelle zeigt alle wichtigen Informationen wie, Farbe, Legierung, und verfügbare Größen des Rings. Klickt man auf einen der kleineren Ringe, so ändert sich das größere Bild für eine bessere Darstellung in den Ring mit der gewünschten Farbe, sowie auch die dazugehörigen Details innerhalb der Tabelle.
Beim Tablet im Querformat entsprich die Darstellung der eines Desktop-PCs oder Notebooks. Hält man das Tablet jedoch hochkant, wird aufgrund der zu geringen Breite die Tabelle unterhalb der Ringe angezeigt. Diese Darstellung trifft auch auf Smartphones zu.
