Sieleolie | WaretaGarasuSkip to main content
WaretaGarasu
Language
Theme
Glass
Build notes

Build notes: sieleolie.com

A bilingual rebuild for a 28-year-old electrical firm in the Aeolian Islands.

2026Client workHTML · CSS · vanilla JavaScriptLast updated: May 1, 2026sieleolie.com ↗

The brief

Siel SRL is an electrical firm based in Lipari, trading since 1997. They handle electrical installations, fire safety, and security systems across the Aeolian Islands. Their ICIM certification (held since 2014 for fire-safety systems) is the key differentiator in the local market: according to the client, SIEL is the only certified provider in Lipari and the smaller islands. A detail that matters as much as the quote in B2B contexts: insurance bids, hotels, marina jobs.

The real problem with the old site wasn't aesthetics: it didn't surface the credentials that actually win B2B work, including ICIM certification, complete legal data (VAT, REA, PEC), and a contact channel that holds legal weight. New bilingual site (IT/EN, for international maritime and tourist clientele) with a focus on load speed from Lipari, where the connection isn't always LTE.

Constraints from the client

The palette is drawn from their logo: #0b4b66 (deep Aeolian-sea blue) and #4f9dcf (sea-sky blue). No invented colors, no moodboard. Thirteen real job-site photos chosen by the client, no stock photography. Legal data is visible in the footer: for a firm that bids on insurance jobs, it's part of the message.

Stack

Same i18n setup as eolietech (IT/EN, data-i18n attributes, localStorage persistence): 73 translation keys, reused one-for-one. No webfonts: the system stack adds zero extra requests, and on a job site, on an iPhone over 4G, that buys real first-render time.

Hosting

Cloudflare Workers was the right home for staging: a deploy-on-push URL to demo without touching the production domain. DNS cutover complete: www.sieleolie.com now points to the final build, with automatic GitHub deploys.

Contact without a form

No traditional form. Four recognizable deep links: tel:, wa.me, mailto: and PEC, each with a copy-to-clipboard button. PEC (Posta Elettronica Certificata) is a legally recognized email channel in Italy: it has the legal weight of a registered letter. There's a short inline glossary for non-Italian readers, because it makes sense for the client to accept it as an official channel.

The decision not to build a form is commercial, not technical. PEC and WhatsApp are the channels SIEL actually uses to close work: one for the formal legal channel, one for direct contact with small businesses and private clients. Building a form would have solved a problem the client doesn't have.

A small thing I'm pleased with

iOS Safari has a curious quirk: a header with position: sticky loses its sticky behavior when the body scroll is locked, which happens when the mobile menu is open. The fix is to promote it to position: fixed only while the menu is open, so it stays pinned without jumping. The panel also closes on swipe-down past 80px; past 200px the translation is rubber-banded at 0.4× so it doesn't run away. No library: pointer events on the drawer, inline transform during drag, transition stripped on touchstart and restored on touchend.

Performance

Every photo was converted to WebP, with loading="lazy" and decoding="async" below the fold. No webfonts, no blocking JS, no third-party scripts. HTML 34KB · CSS 23KB · JS 25KB (uncompressed).

Tuning and active work

The OG card (1200×630) is generated with Python and PIL: logo on the left, company name, islands, description and palette stripes on the right. ~50 lines of script, no graphic tool, no upload. The JSON-LD includes a hasCredential entry for the ICIM certification recognized by ICIM S.p.A., and most LocalBusiness sites skip credentials entirely; for this client it's the most relevant B2B signal in the markup.

The noscript banner is bilingual (IT message plus separator plus EN message), so the page degrades cleanly with JS fully disabled. Next step is a full LocalBusiness JSON-LD schema with VAT, REA, and Lipari address, and customer reviews when they come in.

Where it stands

The site is live on www.sieleolie.com. Active work: LocalBusiness JSON-LD with real data in progress, OG card already live, light/dark theme aligned on mobile.

If I started over

I'd add a Web3Forms contact form from the start, even though the client's primary channel is WhatsApp and PEC, a form is an extra entry point for visitors coming from organic search. The full LocalBusiness JSON-LD with P.IVA, REA, and ICIM certification data would be live from day one. And I'd plan for the Workers migration from the beginning, rather than switching mid-project.