A website that lives up to the best reputation in town

Every card in “What we renovate” opens its own page: bathrooms, kitchens, full renovations, lofts and roofs, pools and outdoors, accessibility. All six share the same structure —a hero with a photo, what is included, before and after, a gallery, timings and price, questions, other services and the form with the renovation type preselected— and all six come out of a single Python file that describes each service and generates them.

The home page works the same way: it is written in a source HTML with three macros —IMG, CMP and GAL— and the generator turns them into <picture> elements with three widths, into comparators and into gallery cards, reading each photo's real size to write its width and height. Nobody types a srcset by hand, which is why none of them is wrong.

_src · build.py · servicios.py · index.src.htmlPillow reads the dimensions · 418 image files generated

Eight comparators of real jobs, four in view and four more on request. Each one is an invisible <input type="range"> covering the photo: it works with the mouse, with a finger and with the arrow keys, and it tells the screen reader where it is. There is no comparison library; there is a native control, well placed.

When it enters the viewport, the divider moves on its own once. That is the hint that it can be dragged, and it never does it again. With “reduce motion” on at system level, not even that.

js/main.js · comparatorsOne native range per photo · keyboard and screen reader

The audit said it plainly: for a renovation company, the photo is the argument. Twenty-one photographs of the company's own work, none from a stock library, with filters by type —bathrooms, kitchens, full renovations, outdoors, lofts— and a viewer built on a native <dialog> that traps focus, closes with Esc and moves between photos with the arrow keys.

And they weigh what they should: every photo exists in three widths —480, 960 and 1,400 pixels— and two formats, WebP with a JPG fallback, with its dimensions written so the page does not jump while loading. The only image that does not wait is the hero, which is preloaded.

index.html · gallery · js/main.js · viewer21 photos · 5 filters · <dialog> with trapped focus

Twelve real Google reviews, quoted with first name and initial, in a carousel with controls, with its state announced to screen readers, and which stops if the system asks for reduced motion. The score —5.0 across 33 reviews— sits in a card of its own with a link to the Google Maps listing, because a rating is only credible if it can be checked.

The section is dark on purpose. It is the only one on the home page that is, and that is why it stands out: Phase 1 designed it as the moment the page changes voice and the customer speaks.

index.html · reviews · js/main.js · carousel12 reviews · controls, announced state, paused under reduced motion

The audit listed it in the table of what a customer looks for and could not find: price guidance, “does not exist”; reviews, “does not exist”. Here there are three indicative ranges —bathroom, kitchen and full renovation— with what each includes and a clear note that the fixed price comes after the site visit. And a financing block, because one in three renovation customers would ask for it and, of the sixteen companies in the southern corridor the benchmark looked at, only one offers it.

The amounts are marked as provisional until GMF validates them; this page says so further down, under what is still missing.

index.html · prices3 ranges · financing · a note that they are indicative

Four required fields, an optional message and the privacy checkbox. The browser validates first and moves focus to the first error; then the submission goes by fetch to a single PHP file on the same host that validates everything again, because browser validation can be bypassed. If the server rejects a field, the error appears under that field, not in a generic message.

Against spam, three silent layers: an invisible honeypot field, a minimum of three seconds —no human fills four fields faster— and a cap of five submissions per hour and IP. The bot is told everything went fine, and nothing happens. Every request is also saved to a CSV in case the email fails, and consent is logged with date, policy version and a salted, anonymised IP: what the GDPR asks for and almost nobody does.

api · presupuesto.php · config.phpDouble validation · 3 antispam layers · GDPR log · CSV copy

Seven in ten visits to a renovation website come from a phone, and the audit described the previous site as “shrunk to mobile, not optimised for it”, so what got measured most was 390 pixels. A fixed bottom bar with Call, WhatsApp and Quote; a full-screen dark menu with those three channels always at the end; and a compact cookie notice that no longer covers the headline or the bar.

Two small decisions that show: on mobile the floating WhatsApp button disappears, because it was already in the bar and covered the buttons; and the header compacts between 961 and 1,520 pixels so that “Free quote” does not get cut off on a laptop. Version 6.1 also fixed a menu that the header's blur was clipping into a 76-pixel box: the first three links were off-screen and could not be tapped.

css/styles.css · v6 block · js/main.js · menuNo horizontal overflow at 390 px on any page

Each service has its own page with its preloaded photo, its “what is included”, its comparators, its gallery, its timings and its price. Two of them also carry site video shot by the team itself: a bathroom with a built-in washing machine, from the inside, and on the full-renovation page the same flat before and after, in two paired videos.

The videos play muted when they enter the viewport and pause when they leave; they do not start if the system asks for data saving or reduced motion; and the “Sound” button turns on the audio of one and mutes the rest. They come from WhatsApp originals run through ffmpeg: from 8 and 15 MB down to 3.9 and 4.9, with a poster taken from a frame of the video itself and VideoObject structured data.

_src/servicios.py · video key · js/main.js · videoPlays on entering the viewport · one sound at a time