Client websiteEdificio Construction
Edificio Construction Management is a design-build and construction management firm with offices in Mississauga, Saint John and Atlanta. I built its site, edificiocmi.com, delivered through PixelKrafts: PHP pages with clean URLs, a page for each featured job, a 44-photo gallery, a PDF catalogue, and a hero film held back until the page is idle or the visitor starts to scroll or tap.
- Role
- Developer at PixelKrafts
- Client
- Design-build and construction management firm
- Offices
- Mississauga · Saint John · Atlanta
- Stack
- PHP 8.2 · Bootstrap 5 · vanilla JavaScript with Swiper and GLightbox
- Media
- Photos, hero film and PDF catalogue on Bunny CDN
- Replaced
- A WordPress and Elementor site
A site for a builder in three cities
Edificio does general contracting, design-build, pre-construction and project management for restaurants, clinics, plazas, gas stations, schools, custom homes and more. It works from offices in Mississauga, Saint John and Atlanta. Its previous site ran on WordPress and Elementor.
The new site shows the work and gives a visitor three quick ways to get in touch: a phone call, WhatsApp, or a free consultation booked on Calendly.
PHP pages and one project template
The site is plain PHP on Bootstrap 5. It started from BootstrapMade's UpConstruction template, restyled in Edificio's yellow and navy. Pages live at clean URLs, and the old .php addresses answer with a 301 to them.
Each featured job gets its own page from one project template: a set of photos and a card with the category, type, location and year. An unknown project sends the visitor back to the projects list instead of an empty page.
Heavy media, loaded late
A builder sells with photos and film, so these pages carry a lot of media. I serve the photos, the hero film and the catalogue from Bunny CDN, and the heavy pieces wait their turn:
- The hero opens on a still photo, preloaded at high priority because it is the largest thing on the first screen.
- The hero film loads only once the browser is idle, or on the visitor's first scroll, tap or click. With Data Saver on, on a 2G connection, or when the visitor asks for reduced motion, it never loads.
- The film pauses when the slider moves on or the tab is hidden, and plays again when it comes back.
- The PDF catalogue, over 3 MB, loads only when it scrolls near the screen.
- Each page loads only the vendor CSS and JavaScript it needs, and 57 of the home page's 59 images are lazy-loaded.
The rest of the site
- Six service areas and twelve industries, from restaurants and dental clinics to gas stations and custom homes
- A 44-photo gallery that opens in a lightbox
- A scrolling strip of client logos, testimonials, FAQs and a link to the firm's Google reviews
- A contact page with all three offices and a contact form, and a newsletter sign-up in the footer
Highlights
- Built edificiocmi.com in PHP on Bootstrap 5, with clean URLs and 301 redirects from the old .php addresses
- Gave each featured job its own page from one project template, with a photo set and a project card; an unknown project redirects to the list
- Kept heavy media off the first paint: a preloaded hero still, a hero film that loads on idle or first interaction, and a PDF catalogue that loads near the viewport
- Skipped the hero film for Data Saver, 2G and reduced-motion visitors, and paused it when its slide or tab is out of view
- Served photos, film and the catalogue from Bunny CDN, with each page loading only the vendor CSS and JavaScript it needs