Skip to content
Work

Client case study

Construcciones Andrés: a roofing and façade company's website

A roofing and façade company in Avilés with a website that shows its work and takes enquiries over WhatsApp. Launched in October 2026 and maintained by us.

Screenshot of the construccionesandres.com home page on desktop
Screenshot of the construccionesandres.com home page on mobile

This is the only client case we publish with a name and a domain: the rest of our work is either our own products or jobs we have no permission to publicise. Every fact on this page comes from the project’s own documents, not from a press release.

Starting point

The company had no website: its identity lived on the vehicle livery and in the vector artwork used to print it.

Construcciones Andrés is a roofing and façade company based in Avilés, Asturias. Its business runs on the phone and on site, with local customers asking about roofs, leaks and façades. What did exist was real, usable material: a logo drawn as vector artwork for signage, a palette taken from the company’s own vehicle and real job photographs supplied by the company.

That was the brief: start from what the company already was, not from a template. No invented identity, no stock photos and no website claiming work the company does not do.

What we did

We built a static site with Astro, in Spanish and English, published on 12 October 2026 at construccionesandres.com.

The work ran along five fronts: identity, content, languages, contact and the technical base. Each one rests on a specific decision.

Identity: the original logo, not a close copy

The logo was extracted from the client’s original vector artwork and its outlines were kept: the letterforms, the brick wall and their proportions. Nothing was redrawn, no lookalike typeface was chosen and no OCR was run over it.

The only change is the one the owner asked for: reducing the “AN” block by 4% uniformly and centring it over “DRES”. The letters are not distorted.

The palette comes from the company’s real signage, not from an invented colour chart. Brick orange #FF8140 is the digital value of the original artwork: it is used on buttons, rules and accents with black text on top, and it does not change in dark mode. For orange text on a light background there is a darker derivative with enough contrast.

Content: the photographs belong to the client

The three published photographs come from the company itself, chosen from its own material and cropped at the source so the detail stays sharp without upscaling a small image. There are no stock photos, no generative retouching, and no location data or licence plates are published.

The crops were made in the original file, not in the browser: the browser receives the size it needs instead of a huge image shrunk with CSS.

The copy is organised around what a local customer looks for — roofs, leaks, façades — rather than around a generic service catalogue. The FAQ answers concrete questions, with the guarantee tied to the type of job, without overpromising.

Spanish and English, light and dark

The site is in Spanish at / and in English at /en/, with legal pages in both languages. Each page declares its counterpart with hreflang, so a search engine does not treat the two versions as duplicate content.

Both themes, light and dark, are resolved with colour variables: the identity does not fall apart when the theme changes, and the orange stays.

Contact: WhatsApp, no form pretending to be a mailbox

The form prepares a WhatsApp message and opens the chat with the text already written; the visitor only has to send it. The owner ruled out email, so there is no address presented as an attended inbox.

With JavaScript disabled the form is disabled and a direct link appears instead: no form is ever submitted that nobody will receive, and personal data is never sent as a GET parameter. The call and WhatsApp buttons are covered by the tests, and the point where delivery depends on an external service is stated as such.

Technical base: static, with nothing to update

The site is generated as static HTML and published on Cloudflare Pages. There is no database, no content management system and no third-party extensions: the three things that break most often and get forgotten most often on a small website.

What we looked after during the build:

  • Structured data for the business, with the company identified in Avilés, its service area and its website, plus the pages and the site as entities. No invented ratings, opening hours or certifications.
  • SEO: per-language titles and descriptions, a single H1 per page, canonical, reciprocal hreflang with x-default, sitemap and robots.txt derived from one origin, and an llms.txt written from the business’s real data.
  • Images in AVIF and WebP with responsive sizes, reserved dimensions and the hero prioritised; everything else lazy-loaded.
  • Typography: a self-hosted, preloaded variable font, so there are zero requests to third-party font servers.
  • No third-party scripts. Analytics (Umami) is served from the site’s own domain and uses no tracking cookies, so there is no banner in the way.

Performance: check it yourself

The site’s PageSpeed scores are public: you do not have to take our word for it, they can be measured at any time.

Run the analysis in PageSpeed Insights with the domain construccionesandres.com. We do not publish numbers here because a measurement changes with the day, the network and the device; what does not change is where to verify it.

Testing and accessibility

Every version goes through automated checks for types and SEO before it is published, and the project includes Playwright browser tests in Chromium and Firefox, accessibility included.

Among the things tested are the original logo, the header at 320 px wide, both themes and the contact paths. What is not tested is stated as such: WebKit and Safari have not been validated, and the real WhatsApp handoff is tested with the service intercepted rather than by sending messages.

Publishing: Cloudflare Pages and cost

The site is published on Cloudflare Pages (free plan) from its own repository. The recurring cost is zero apart from the domain: there is no server of ours and no email service behind it.

Each build also generates the host’s security headers — a content policy with the hashes of the inline JavaScript, iframe protection and a referrer policy — and long-lived caching only for hashed assets.

How it is maintained

We maintain it: hosting, checks after every publish and the content changes the owner asks for.

With no content management system and no extensions, looking after it is not about updating plugins every week. It is about making the changes the client asks for and confirming the site still answers and the automated checks are still green on every publish.

A site like this is built in days, not months: what stretches it out is almost never the development, but gathering copy and photographs.

What this job taught us

What paid off most was not a technical decision but refusing to invent: using the company’s original logo, its real orange and its own photographs.

A small site stands on three things: the identity really belongs to the client, the contact path works without relying on a form nobody reads, and there are no parts to update to stay standing. Everything else — structured data, languages, images and performance — exists so that this gets found and read.

If you want something along these lines, this is how we do web design and development: starting from the identity you already have, with the domain and the code in your name.

At a glance

What we did, in short statements you can check on the published site.

  • Static site built with Astro: no database and no extensions to update
  • Spanish and English, with light and dark themes and legal pages in both languages
  • Logo extracted from the client's original vector artwork, not redrawn, and a palette taken from their real vehicle livery
  • The client's own photographs, served as AVIF and WebP with responsive sizes
  • Contact over WhatsApp: the form prepares the message and opens wa.me
  • Business structured data, sitemap, ES/EN hreflang and a self-hosted variable font
  • No third-party scripts: cookieless analytics served from the site's own domain
  • Playwright browser tests, accessibility included

Want something along these lines?

This is how we do web design and development: from your identity, with the domain and the code in your name.

See the service