Am 1. März konnte ich pünktlich zum Start der neuen SUP-Saison die neue Version der Website standuppaddeln.at launchen. Über den Design-Aspekt habe ich bereits hier ausführlich berichtet. Heute will ich auf die Realisierung in WordPress eingehen.
In diesem Video seht ihr einen Überblick über die Realisierung der neuen Website:
Features:
- konsequentes Corporate Design (schwarz/rot wie bei einer Schreibmaschine und entsprechende Schrift, runde Bilder wie das Logo Blick durch ein Fernrohr quasi)
- Sticky Menü und shrinking header, verschwindet beim Runterscrollen und erscheint wieder beim Raufscrollen
- SVG Logo mit verschiedenen Settings (farbig, einfarbig, Favicon, horizontal lang, vertikal größer)
- läuft auf virtuellem Server (nicht auf WebHosting) von netcup
- full screen hero section mit slider
- Beiträge werden dynamisch eingebunden
- eigener Template basierend auf 2023 Theme, Site Editor Templates
- SVG Logo animiert bei MouseOver am Desktop (als Gutenberg Block/Plugin mit NodeJS und React realisiert)
- SVG Infografiken:
hier klicken - Landing Pages mit Video in Hero Section, z.B.:
hier klicken - Icons im Menü (Icon font wurde reduziert auf die verwendeten Zeichen um Ladezeit zu verringern)
- lazy loading der Bilder (bis auf das 1. für first contentfull paint) und scripts async
- Caching über CloudFlare (Bilder werden von lokaler Node ausgeliefert, z.B. aus Wien)
- Bilder als webp und Videos als webm (optimierte kleine Formate)
- Newsletter mit Lead Magnet und Contact Formular
- Plugins nur auf Seiten geladen, wo sie verwendet werden
- WooCommerce Shop mit Affiliate Links und virtuellen Produkten (E-Book):
hier klicken - Tourenkarte (Benutzer können selber Einstiege hinzufügen):
hier klicken - Interaktive Landkarten (Leaflet) mit KML/GPX Download, z.B.:
hier klicken - DSVG-konforme Einbettung von Videos, Landkarten, Google Analytics, etc. (YouTube wird erst kontaktiert, wenn man auf ein Video klickt und damit die Datenschutzbestimmungen akzeptiert)
- The SEO Framework (statt Yoast, was jeder verwendet um Werbung spammt)
Was ist deine Meinung zur Realisierung? Hast du Fragen?
Schreibe mir eine Nachricht!