3S develops and manufactures high-quality, building-integrated solar systems in Switzerland. We’ve translated this commitment to quality into a high-end digital experience: spacious, visually striking, and consistently tailored to the needs of architects, specialist planners, installers, and building owners.
"Swiss Made" Translated into a High-End Digital World
For 3S, a Swiss manufacturer of high-end, building-integrated solar systems, Gridonic translated its quality standard into a digital high-end world. A clear information architecture, large-format imagery and a geographic partner map guide architects, planners and building owners to the right applications and contacts.
The main goal was to make the quality of 3S digitally tangible. A clear information architecture links the Solardach, Solarfassade, Solargeländer, and Solar-Overhead applications with technical benefits, downloads, and completed projects. Large-format images and success stories demonstrate how Swiss-made precision, architecture, and solar energy come together.
The editorial foundation is a modular DatoCMS system with reusable content blocks and logic for links, downloads, contact information, and four language versions. One notable integration is the Specialist Partner Map: It links partner data with a geographic search and directs interested users directly to suitable specialist companies in their area.
The 3S website is server-side rendered and runs on the Gridonic framework “dastro” (Astro v6.3.5), with Netlify serving as the hosting and deployment platform. Server-side rendering delivers complete, instantly readable pages, while interactivity—based on the “island” principle—is loaded only where it is needed. This keeps the site technically lean despite its visually rich design.
Large-format video is loaded as an adaptive mux stream, and the brand typography is self-hosted and metrically aligned with its fallbacks to prevent layout breaks.
The design is fluid: the layout, image areas, and typography scale seamlessly across the entire browser width using vw/vh and clamp()—from the smallest mobile viewports to the largest desktop ones. A consistent, equally fluid grid system brings calm and order to this freedom.
Large-format, edge-bleeding images flow seamlessly across the screen and are brought to life through motion. The website uses several types of animation in a targeted and understated manner: on-scroll animations, parallax effects, smooth scrolling, subtle microanimations on interactive elements, a looping background video in the hero section, and smooth page transitions when switching pages.
