Swiss Made in eine digitale High-End-Welt übersetzt
3S entwickelt und produziert hochwertige, gebäudeintegrierte Solarsysteme in der Schweiz. Wir übersetzten diesen Qualitätsanspruch in eine digitale High-End-Welt: grosszügig, bildstark und konsequent auf die Bedürfnisse von Architekten, Fachplanern, Installateuren und Bauherrschaften ausgerichtet.
Die zentrale Aufgabe war, die Qualität von 3S digital spürbar zu machen. Eine klare Informationsarchitektur verbindet die Anwendungen Solardach, Solarfassade, Solargeländer und Solar-Overhead mit technischen Vorteilen, Downloads und realisierten Projekten. Grossformatige Bilder und Success Stories zeigen, wie Swiss-Made-Präzision, Architektur und Solarenergie zusammenfinden.
Die redaktionelle Basis bildet ein modular aufgebautes DatoCMS mit wiederverwendbaren Inhaltsblöcken und Logiken für Verlinkungen, Downloads, Ansprechpartner und vier Sprachversionen. Eine besondere Integration ist die Fachpartner-Map: Sie verbindet Partnerdaten mit einer geografischen Suche und führt Interessierte direkt zu passenden Fachbetrieben in ihrer Nähe.
Die 3S-Website ist serverseitig gerendert und läuft auf dem Gridonic-Framework «dastro» (Astro v6.3.5) mit Netlify als Hosting- und Deployment-Plattform. Serverseitiges Rendering liefert vollständige, sofort lesbare Seiten aus, während Interaktivität nach dem Insel-Prinzip nur dort geladen wird, wo sie gebraucht wird. So bleibt der Auftritt trotz bildstarker Inszenierung technisch schlank.
Grossformatiges Bewegtbild wird als adaptiver Mux-Stream nachgeladen, und die Markentypografie ist self-hosted und metrisch an ihre Fallbacks angeglichen, um Layout-Sprünge zu vermeiden.
Der Auftritt ist fluid angelegt: Layout, Bildflächen und Typografie skalieren über vw/vh und clamp() stufenlos über die gesamte Browserbreite – von kleinsten mobilen bis zu grössten Desktop-Viewports. Ein durchgängiges, ebenfalls fluides Grid-System gibt dieser Freiheit Ruhe und Ordnung.
Grossformatiges, edge-bleeding Bildmaterial laufen randlos über die Fläche und werden mit Bewegung inszeniert. Der Auftritt nutzt mehrere Animationstypen gezielt und zurückhaltend: On-Scroll-Animationen, Parallax-Effekte, Smooth Scrolling, feine Mikroanimationen an Interaktionselementen, ein Loop-Hintergrundvideo im Hero sowie weiche Page Transitions beim Seitenwechsel.
