Dreger Optik & Juwelier

Dreger Optik & Juwelier ist ein familiengeführtes Geschäft in Burladingen im Zollernalbkreis, seit 1988 Optiker und Juwelier unter einem Dach. 2025 habe ich die Website juwelier-dreger.de als One-Pager mit Oxygen Builder auf WordPress gebaut. Design und Entwicklung lagen bei mir; das Impressum der Seite nennt entsprechend „Technische Umsetzung und Webdesign Tomislav Zecevic“.

Die Aufgabe

Das Geschäft vereint zwei Geschäftsfelder, die auf einer Seite nebeneinander stehen müssen: Optik mit Brillen und Kontaktlinsen sowie Juwelier mit Trauringen, Verlobungsringen, Schmuck und Uhren. Dazu kommen zwei lokale Services, die eigene Sichtbarkeit brauchen: Goldankauf mit sofortiger Auszahlung und Passbilder. Die Website sollte alle Bereiche auf einer Seite zeigen, ohne dass sie ineinanderlaufen, und einen direkten Weg zum Termin bieten.

Die zweite Anforderung betraf die Bestellwege. Kontaktlinsen, Trauringe und Verlobungsringe sollten über eigene Bestellformulare bestellbar sein. Die Seite musste danach vom Geschäft selbst gepflegt werden können, und das Nachladen der Webfonts musste zum Consent-Management passen.

Die Umsetzung

Aufbau in Oxygen: One-Pager mit Sprungnavigation

Die Startseite ist ein One-Pager in Oxygen 4.9.1, dem klassischen Oxygen. Jeder Bereich ist eine eigene Sektion mit eigener ID: #brillen, #ringe, #uhren_schmuck, #goldankauf, #passbilder und #kontakt. Die Navigation läuft über das Oxygen Pro Menu und springt per Anker direkt in die Sektionen; dazu kommt der Button „Termin vereinbaren“. Oxygen 4.9.1 enthält das Component Framework, mit dem sich wiederkehrende Bausteine zentral pflegen lassen. Für die Scroll-Animationen setze ich AOS ein, das Elemente beim Einscrollen einblendet.

Unterseiten und Bestellformulare mit Contact Form 7

Neben der Startseite gibt es fünf Unterseiten: Kontaktlinsen bestellen, Trauringe bestellen, Verlobungsringe bestellen, Impressum und Datenschutz. Die drei Bestellseiten tragen je ein Formular auf Basis von Contact Form 7 in Version 6.1; auch das Kontaktformular läuft über Contact Form 7. Alle Formulare sind mit reCAPTCHA gegen Spam abgesichert. Contact Form 7 habe ich gewählt, weil das Geschäft Felder und Empfänger später selbst im Backend anpassen kann, ohne Code anzufassen.

Consent-Management: Webfonts erst nach Einwilligung

Das Consent-Management übernimmt Real Cookie Banner. Die beiden Webfonts Coolvetica und Special Elite werden nicht beim Seitenaufruf geladen, sondern erst nach Einwilligung über den Web Font Loader, der an die Consent-API des Banners gekoppelt ist. Liegt keine Einwilligung vor, bleibt die Seite bei den Fallback-Schriften; sobald die Zustimmung erteilt wird, lädt der Loader die Schriften nach. So entsteht vor der Zustimmung keine Font-Anfrage.

SEO und strukturierte Daten mit Rank Math

Für Metadaten und strukturierte Daten setze ich Rank Math SEO ein. Die Seite liefert Schema.org-Markup für AboutPage, Place, PostalAddress, WebSite mit SearchAction und ImageObject. Place und PostalAddress bilden den Standort in Burladingen ab, damit Suchmaschinen Geschäft und Adresse eindeutig zuordnen können.

Performance und Medien: Inline-SVG, AVIF und Instagram

Die 16 Icons liegen als Inline-SVG direkt im Markup, ohne zusätzliche HTTP-Requests. Ein Bild wird als AVIF ausgeliefert. Die Instagram-Galerie auf der Startseite kommt über das Plugin insta-gallery und zeigt aktuelle Beiträge des Instagram-Accounts, so dass die Startseite auch ohne Pflege im Backend neue Inhalte bekommt.

Betrieb und Hosting

Die Seite läuft auf WordPress 7.1.3 mit PHP 8.3, ausgeliefert über nginx unter Plesk. Inhalte werden im WordPress-Backend und im Oxygen-Editor gepflegt, Formulare in Contact Form 7, die Einwilligungen in Real Cookie Banner.

Technik im Detail

• WordPress 7.1.3, PHP 8.3, nginx mit Plesk
• Oxygen 4.9.1 (klassisches Oxygen) mit Component Framework und Oxygen Pro Menu
• AOS für Scroll-Animationen
• Rank Math SEO mit strukturierten Daten: AboutPage, Place, PostalAddress, WebSite mit SearchAction, ImageObject
• Contact Form 7 (Version 6.1) mit reCAPTCHA für das Kontaktformular und die drei Bestellformulare
• Real Cookie Banner als Consent-Management; Webfonts Coolvetica und Special Elite über Web Font Loader an die Consent-API gekoppelt
• Plugin insta-gallery für die Instagram-Galerie auf der Startseite
• 16 Inline-SVG-Icons, ein AVIF-Bild
• One-Pager mit Sprungnavigation zu #brillen, #ringe, #uhren_schmuck, #goldankauf, #passbilder, #kontakt und Button „Termin vereinbaren“
• Fünf Unterseiten: Kontaktlinsen bestellen, Trauringe bestellen, Verlobungsringe bestellen, Impressum, Datenschutz

Design und Rollen

Design und Entwicklung lagen 2025 komplett bei mir: Layout, Typografie mit Coolvetica und Special Elite, Aufbau in Oxygen, Formulare, SEO und Consent-Integration. Das Impressum der Seite nennt „Technische Umsetzung und Webdesign Tomislav Zecevic“.

Das Ergebnis

Die beiden Geschäftsfelder Optik und Juwelier stehen auf der Startseite klar getrennt nebeneinander, die lokalen Services Goldankauf und Passbilder sind als eigene Sektionen sichtbar und über die Navigation direkt erreichbar. Bestellungen für Kontaktlinsen und Ringe laufen über eigene Formulare. Die Seite ist vom Geschäft selbst pflegbar. Mehr zu dieser Art von Projekt unter Websites sowie SEO und Performance.