PB Contracting
Targeted Mobile-First Rebuild — Highest-ROI Wins, Desktop Look Preserved
New homepage on desktop — the look and feel the client wanted to keep, now responsive on phones too.
01 / The Client
PB Contracting LLC
A residential door installation company based in Broomall, PA, with strong content and door photography on a Hearst DMS template site that had stopped keeping up with how customers actually browse — on a phone.
Location
Broomall, PA — serving Delaware, Bucks, Chester, Montgomery, and Philadelphia counties
Industry
Residential door installation — entry, patio, storm, and interior doors
Background
Family-run installer with strong photography and content, on an aging Hearst DMS template site
Engagement
Targeted rebuild — focused on the highest-ROI mobile and SEO fixes; client elected to keep the rest of the site largely as-is
Services Offered
The brief, in the client's words
“The client liked the look of their site on desktop and wanted to keep the overall feel intact. The priority was making the site actually work on a phone and putting real SEO foundations in place — not a top-to-bottom redesign.”
02 / The Challenge
Solid Brand, Unusable on Mobile
The content was good. The door photography was great. But on a phone or tablet the layout fell apart — and that's where most customers were actually landing.
- Old Hearst DMS template was effectively unusable on mobile — top nav wrapped to two lines and shrunk to ~10 px text
- Services page crammed two-column desktop content into a single narrow column with body text at ~9 px
- Gallery rendered four thumbnails per row at thumbnail-stamp size with no zoom or lightbox
- Contact form lost styling on phones, had no spam protection, and locked the recipient to the builder account
- SEO foundations were missing — generic page titles, duplicated meta descriptions, no canonical metadata, builder watermark on the social card
- Cumulative Layout Shift of 0.038 — text and images jumped on load (a Core Web Vital ranking factor)
- No 1200×630 Open Graph image, so links shared on iMessage/Slack/Facebook looked unbranded
03 / What We Built
A Mobile-First Marketing Site on Next.js + Vercel
A targeted rebuild focused on the highest-ROI fixes — making the site work on a phone, layering in real SEO foundations, and adding a conversion-ready lead capture flow — while preserving the desktop look the client wanted to keep.
Fully Responsive Pages
- Home, About, Services, Gallery
- Before/After, Catalogs, Contact
- Sitemap matches the original — no broken organic traffic or customer bookmarks
- Statically exported for edge-CDN delivery
Photos & Catalogs Preserved
- Every original door photo carried over
- Pre-built WebP variants at 1920w + 1200w
- 3 vendor catalog PDFs hosted on Vercel's edge CDN
- Intrinsic image sizing prevents layout shift
Mobile-First UX
- Tap-to-call header bar — single full-width thumb-reach target
- 2-column responsive gallery with full-screen lightbox + keyboard nav (Esc/←/→)
- Before/After viewer using CSS clip-path to slide between halves of each composite photo
- Parallax hero sections matching the original's signature look on desktop
Lead Capture & SEO
- Web3Forms contact form with Google reCAPTCHA v3 and a honeypot field
- Branded /thank-you page for conversion tracking
- Custom 1200×630 Open Graph card + Twitter summary_large_image
- sitemap.xml, robots.txt, canonical metadata, unique titles + descriptions per page
- Single H1 per page, logical heading hierarchy, 100% alt text coverage
- Branded favicons (favicon.ico + icon.png + apple-icon.png) generated from the company logo
04 / Before & After
Mobile, Page by Page
Real iPhone-15 viewport screenshots, side by side. The mobile experience is where the old site lost the most ground — and where the rebuild made the biggest difference.
Home — Mobile
The old Hearst DMS layout shrinks the desktop nav to ~10 px text and collapses the brand identity. The new build leads with a tap-to-call header, a clean hero, and a clear path to the catalog and contact.
About — Mobile
Old About page renders desktop sidebar content stacked into a narrow column with type small enough to be hard to read. The new About is a single mobile-first column with proper typography and trust-building content flow.
Services — Mobile
The single biggest mobile fix. Old Services page jams two-column desktop content into one narrow column with body text at ~9 px — essentially unreadable. The new Services page is full-width mobile-first sections with parallax dividers between groups.
Gallery — Mobile
Old gallery rendered 4 thumbnails per row at stamp size with no zoom interaction. The new gallery is a 2-column responsive grid with tap-to-open full-screen lightbox and keyboard navigation.
Contact — Mobile
Old contact form loses styling on phones, has no spam protection, and is locked to the builder's email account. The new form has labeled inputs, reCAPTCHA v3, a honeypot, and redirects to a branded /thank-you page that's trackable as a conversion event.
05 / Lighthouse Scores
Real-World Conditions, Real Numbers
Captured 2026-04-30 via local Lighthouse CLI on Chrome stable. Old site is the live Hearst DMS template; new site is the Next.js / Vercel build.
| Category | Old (Mobile) | New (Mobile) | Old (Desktop) | New (Desktop) |
|---|---|---|---|---|
| Performance | 100 | 100 | 99 | 100 |
| Accessibility | 100 | 96 | 100 | 96 |
| Best Practices | 81 | 100 | 81 | 100 |
| SEO | 100 | 100 | 100 | 100 |
Best Practices
81 → 100 (+19)
Both mobile and desktop. The old site failed audits for JavaScript console errors, deprecated APIs, and missing image aspect-ratio attributes. The new build clears every modern best-practices check.
Cumulative Layout Shift
0.038 → 0
Old site: text and images shift as the page loads (a Core Web Vital ranking factor). New build: layout shift eliminated entirely on both mobile and desktop.
Performance — Mobile
100 = 100
Tied at perfect 100/100 mobile Performance — held the top score while adding richer photography, a lightbox, the before/after toggle, custom fonts, and a conversion-tracking thank-you flow.
Performance — Desktop
99 → 100 (+1)
Pushed desktop Performance from 99 to a perfect 100. Core Web Vitals on the new build: FCP 0.53 s, LCP 0.72 s, TBT 0 ms, CLS 0.
06 / SEO Improvements
Foundations the Old Site Didn't Have
The Lighthouse SEO score stayed at 100, but the foundations underneath it went from builder defaults to hand-crafted per-page metadata.
| Old | New | |
|---|---|---|
| <title> per page | Generic "PB Contracting - Broomall, PA - {page}" | Unique, keyword-rich per page |
| Meta description | Same template across pages | Unique per page, 150–160 chars |
| Canonical metadata | Missing | Present (metadataBase + page URLs) |
| Open Graph image | Generic builder watermark | Custom 1200×630 with logo, tagline & CTA |
| Twitter card | None | summary_large_image |
| sitemap.xml | Builder default | Hand-crafted with priorities + change frequency |
| robots.txt | Builder default | Custom with sitemap pointer |
| Mobile-friendly (Google) | Marginal | Fully passes |
| Heading hierarchy | Inconsistent | Single H1 per page, logical nesting |
| Alt text coverage | Partial | 100% |
| Cumulative Layout Shift | 0.038 | 0 |
07 / Technologies Used
Built With Modern Tools
A statically-exported Next.js site on Vercel's edge CDN — no plugin sprawl, no monthly builder fees, easy to iterate from a private GitHub repo.
Why this stack?
Statically exported pages render from Vercel's edge CDN with zero render-blocking JavaScript on first paint. Pre-built WebP imagery (1920w + 1200w) plus intrinsic image sizing keep Largest Contentful Paint and Cumulative Layout Shift at their floors. Self-hosted Poppins + Lora via next/font (font-display: swap) avoids the FOIT/FOUT churn typical of builder-platform sites. The contact flow is independent of any builder account — Web3Forms + reCAPTCHA v3 means the lead pipeline doesn't break if the host changes.
08 / What's Next
Phase 2 Backlog
The rebuild is live as a Vercel preview. The pipeline from here is the DNS cutover plus a stack of local-SEO and conversion improvements that the new foundation makes straightforward.
- DNS cutover from Hearst to Vercel for pbcontracting.com
- Schema.org LocalBusiness markup + Google Business Profile sync
- Service-area landing pages (Broomall, Newtown Square, Media, Springfield, etc.) for organic local-keyword capture
- Personalized gallery alt text for image-search SEO
- Google Ads integration with /thank-you as a conversion event
- Customer review collection workflow + on-site testimonials section
- Accessibility polish (one outstanding contrast item to push back to 100)
Want a Mobile-First Rebuild Like This?
We rebuild contractor and trade websites as static Next.js sites on Vercel — fast, accessible, and with the SEO foundations baked in from day one.