🎨 Bright Side Plumbing | Web Design & CRO Playbook for Audrey

📊 Where We Are Right Now

28-45

Mobile Speed Score

5.2-8.2s

LCP (Target: <2.5s)

WordPress

+ Oxygen Builder

KC Metro

Service Area

These scores mean we are losing 40-60% of mobile visitors before they even see the page. Every design decision in this playbook is aimed at cutting load time AND increasing conversions simultaneously.

👥 Know Your Customer Personas

Every design decision starts with: "Who is this for?"

🚨 Emergency Eric

50-60% of revenue | Mobile-first | Converts in under 60 seconds

Burst pipe, no hot water, sewage backup at 2AM
Searching on phone, one-handed, possibly panicking
Needs: Phone number, "We're available NOW", trust signals
Will NOT scroll past fold. Will NOT read paragraphs.
Design for: Giant click-to-call, immediate trust, zero friction

Revenue share ~57%

🔍 Renovation Rachel

25-30% of revenue | Researches 3-14 days | Desktop + Mobile

Planning a bathroom remodel, water heater upgrade, sewer replacement
Compares 3-5 companies. Reads reviews. Checks portfolios.
Needs: Before/after photos, detailed process info, financing options
Will scroll entire page. Wants to feel confident in quality.
Design for: Rich content, social proof, photo galleries, long-form

Revenue share ~28%

🏢 Business Bob

8-12% of revenue | High ticket | Wants reliability + compliance

Property manager, restaurant owner, office building maintenance
Needs: Commercial experience proof, response time SLA, insurance/licensing
Cares about: Liability coverage, backflow certification, fleet size
Longer sales cycle but bigger contracts
Design for: Professional credibility, certifications, case studies

Revenue share ~10%

🔧 Maintenance Mike

45-55% of leads | Highest lifetime value | Repeat customer

Annual water heater flush, drain cleaning, faucet repair
Not urgent. Price-conscious. Wants to feel like a "regular"
Needs: Membership/maintenance plan info, seasonal tips, scheduling ease
Best candidate for email nurture and review generation
Design for: Membership CTAs, easy scheduling, loyalty messaging

Lead volume ~50%

🔬 Scientific Insight

Emergency Eric and Maintenance Mike together account for 90%+ of all leads. But Rachel's research phase means she sees every page on the site. Design primary pages for Eric's speed, secondary content for Rachel's depth, and sprinkle Mike's maintenance CTAs everywhere.

🏗️ Section 1: Service Page Architecture

The anatomy of a page that converts at 8-12% instead of 2-3%

📐 The 7-Section Service Page Blueprint

Every service page follows this exact structure. No exceptions. This order is backed by heatmap data from 50,000+ plumbing site sessions.

🖼️ Hero Section

Full-width. Headline + subheadline + CTA + trust bar. Must load in under 2.5 seconds. This is where 70% of decisions happen.

Eric converts HERE

⭐ Trust Bar

Google rating (4.8+ stars), years in business, number of reviews, "Licensed & Insured", BBB badge. Horizontal strip. 1 line max.

😰 Problem / Solution Block

Name the pain ("Sewage backing up into your basement?"). Show empathy. Then present the solution with 3-4 bullet benefits. Image of a technician at work.

🎧 Three Options Layout (Chris Fresh Framework)

Source: The Plumbing Sales Coach, Ep #336 | For service page Problem/Solution blocks

Design Pattern: 3-Option Card Layout
Replace generic benefit bullets with three visual option cards on every service page. When customers see 3 options, they compare OPTIONS instead of comparing BSP vs. competitors.

🔧 Repair

1-2 days | $$ | Addresses immediate issue

🏗 Trenchless

2-3 days | $$$ | Saves landscaping

🏠 Full Replace

3-5 days | $$$$ | Warranty + value-adds

CTA Variants to A/B Test:
• "Get My Free Sewer Assessment" (diagnosis framing, 12-15% better than "estimate")
• "Compare Repair vs. Replacement Options"
• "Schedule Free Inspection, See Your Options"

FAQ Questions That Support the Framework:
• "Can my sewer line be repaired, or does it need replacement?"
• "What's the difference between trenchless and traditional replacement?"
• "How much can I save by fixing this early?"
• "What if I can't afford the recommended option right now?"

🔬 CRO Test Hypothesis

If we present three options (Repair/Trenchless/Replacement) as visual cards instead of generic benefit bullets, Renovation Rachel will increase scroll depth by 40% and conversion rate will increase 12-15% because she feels informed, not pressured.
Test: A/B current page vs. 3-option cards | Duration: 2 weeks or 200 conversions | Metrics: conversion rate, scroll depth, time on page

⭐ Social Proof Section

3 real reviews with first name + city. Star ratings visible. Photo of reviewer if possible. "200+ 5-star reviews" headline.

Rachel reads EVERY review

❓ FAQ Accordion

5-8 real questions from ServiceTitan call notes. Schema-marked FAQ for Google rich results. Addresses pricing fears, timeline, warranty.

📞 Sticky CTA

Mobile: Fixed bottom bar with phone + "Schedule Now" button. Desktop: Floating sidebar or sticky header CTA. Always visible.

Eric taps this Mike taps this

🦶 Service Area Footer

City list (Overland Park, Olathe, Lenexa, Shawnee, etc.), service hours, secondary CTA, links to related services. Good for local SEO.

📋 Page Templates by Service

🏆 #1 Priority: Sewer Repair / Replacement

Highest ticket service. Highest ad spend. Must be perfect.

Hero image: Camera inspection footage or clean trenchless repair
Headline formula: "KC's #1 Rated Sewer Repair | [City Name]"
Unique sections: Trenchless vs. traditional comparison, camera inspection process, before/after gallery
Trust signals: "No-dig options available", warranty badge, financing
FAQ must-haves: Cost range, timeline, insurance coverage, permits

🔥 Water Heater Install / Repair

Hero image: Clean install, modern tankless unit
Headline: "Same-Day Water Heater Service | [City]"
Unique sections: Tank vs. tankless comparison table, brand logos (Rheem, Bradford White), energy savings calculator concept
Trust signals: "Same-day install available", manufacturer warranty
FAQ must-haves: Tank vs. tankless, lifespan, cost, rebates

🚿 Drain Cleaning

Hero image: Tech with drain machine, clean and professional
Headline: "Fast Drain Cleaning | Starting at $XX"
Unique sections: Common causes (hair, grease, roots), prevention tips
Trust signals: "No hidden fees", upfront pricing badge
Key CTA: Price-forward for Mike, speed-forward for Eric

🚨 Emergency Plumbing

Hero image: Bright Side van at night or tech arriving fast
Headline: "24/7 Emergency Plumber | KC Metro | Call Now"
Design principle: FEWEST words possible. BIGGEST phone number. Zero scrolling required to call.
Unique: "What to do right now" emergency checklist (builds trust while they wait)
No form. Phone only. Eric doesn't fill out forms at 2AM.

⚠️ Warning

Never use stock photos of models pretending to be plumbers. Rachel spots fakes instantly. Use real Bright Side team photos, real job sites, real trucks. Authenticity converts 23% better than stock in home services (LocaliQ 2025 study).

🖼️ Section 2: Hero Section Mastery

The first 3 seconds determine 70% of whether someone stays or bounces

🎯 Image Selection by Persona

Persona	Hero Image Style	Emotional Trigger	Avoid
Eric	Tech arriving quickly, van with lights on, fast-response imagery	Relief, urgency resolved	Slow/staged photos
Rachel	Beautiful finished result, modern bathroom, clean install	Aspiration, quality	Messy job sites
Bob	Commercial building, professional team, fleet of vans	Reliability, scale	Residential-only imagery
Mike	Friendly tech at the door, smiling, clean uniform	Familiarity, trust	Impersonal or corporate

✍️ Headline Formulas That Convert

Pick from these proven structures. Test one per month via A/B.

[City]'s #1 Rated [Service] | [Trust Signal]
Overland Park's #1 Rated Sewer Repair | 200+ 5-Star Reviews
[Speed Promise] [Service] in [Area]
Same-Day Water Heater Replacement in KC Metro
[Pain Point]? [Solution] [Trust]
Sewer Backing Up? 24/7 Repair with No-Dig Options
[Number] [City] Homeowners Trust Us for [Service]
2,500+ KC Homeowners Trust Us for Drain Cleaning

🔘 CTA Button Design Rules

Primary CTA (Click-to-Call)

Color: Bright Side brand yellow/gold on dark background
Size: Minimum 48px height, full-width on mobile
Copy: "Call Now: (913) XXX-XXXX" not just "Call Us"
Icon: Phone icon left of text
Hover: Slight scale (1.03) + shadow increase
Always above the fold. Always.

Secondary CTA (Schedule Form)

Color: Outlined/ghost button or lighter variant
Copy: "Schedule Online" or "Get a Free Estimate"
Placement: Next to or below primary CTA
For: Rachel and Mike who prefer forms over calling
Must go to multi-step form (see CRO section)

⚡ Hero LCP Optimization (Critical for Designers)

⚠️ This Is Why Our Score Is 28-45

The hero image is the #1 cause of our terrible mobile speed. Every millisecond matters. Follow these rules exactly.

The Rules (Non-Negotiable)

✅ Use <img> tags, NEVER CSS background-image for hero images. Browsers cannot preload CSS backgrounds.
✅ WebP format only. JPEG is 30-50% larger. Use Squoosh (squoosh.app) to convert. Quality 75-80 is plenty.
✅ Add fetchpriority="high" to the hero <img> tag. This tells the browser to load it first.
✅ Add <link rel="preload"> in the <head> for the hero image.
✅ Specify exact width and height attributes to prevent layout shift (CLS).
✅ Size hero images to max display width. Desktop: 1200px wide max. Mobile: 768px wide max. Use srcset.
❌ No lazy-loading on the hero image. Remove loading="lazy". It's above the fold.
❌ No CSS filters, gradients-over-images, or complex overlays that force GPU compositing on load.

🔢 Microsteps: Hero Image Workflow

Select photo. Crop to 16:9 or 3:1 aspect ratio (hero banners).
Export at 1200px wide (desktop) and 768px wide (mobile).
Run through Squoosh: WebP, quality 78, effort 4.
Target file size: under 80KB for mobile, under 150KB for desktop.
Upload to WordPress media library.
In Oxygen, use an Image element (not a Section background).
Add fetchpriority="high" in the custom attributes.
Test with PageSpeed Insights immediately after publish.

<!-- Correct hero image markup -->
<img
  src="hero-sewer-repair-768.webp"
  srcset="hero-sewer-repair-768.webp 768w, hero-sewer-repair-1200.webp 1200w"
  sizes="100vw"
  width="1200" height="400"
  alt="Bright Side Plumbing technician performing trenchless sewer repair in Overland Park"
  fetchpriority="high"
  decoding="async"
>

<!-- In <head> -->
<link rel="preload" as="image" type="image/webp"
  href="hero-sewer-repair-768.webp"
  imagesrcset="hero-sewer-repair-768.webp 768w, hero-sewer-repair-1200.webp 1200w"
  imagesizes="100vw"
  fetchpriority="high">

🧪 Section 3: CRO Design (Scientific Method)

Stop guessing. Start testing. Every change should be a hypothesis.

🔬 The CRO Scientific Method

📊 1. Observe

Use Microsoft Clarity heatmaps to see where users click, scroll, and rage-click. Record sessions. Find the drop-off point.

💡 2. Hypothesize

"If we move the CTA above the trust bar, Eric will convert faster because he won't need to scroll." Write it down.

🧪 3. Test

Run A/B test for minimum 2 weeks or 200 conversions (whichever comes first). Use Google Optimize successor or VWO.

📈 4. Analyze

Did conversion rate change? Is it statistically significant (95% confidence)? Document results.

🔄 5. Implement or Revert

Winner stays. Loser dies. Move to next test. Never run two tests on the same page simultaneously.

🖱️ Heatmap Analysis with Clarity

What to Look For

Signal	What It Means	Design Action
🔴 Hot zone above fold only	Users not scrolling	Content below fold is irrelevant or page loads too slow
😡 Rage clicks on non-clickable element	Users think it's a button	Make it a button or remove the visual affordance
📍 Clicks on phone number in text	Users want to call but number isn't linked	Make EVERY phone number a `tel:` link
⬇️ Scroll depth drops at 40%	Content in bottom 60% is never seen	Move important elements higher or improve content flow
🖱️ Ghost clicks on images	Users expect interactivity	Add lightbox, link to gallery, or enlarge on click

💎 Pro Tip: Clarity Setup

In Clarity, create custom segments: Mobile + Sewer pages and Desktop + Water Heater pages. This isolates persona behavior. Eric's mobile sewer sessions look completely different from Rachel's desktop water heater sessions.

🔘 CTA Optimization Deep Dive

🎨 Color Psychology for CTAs

Color	Effect	Use For
🟡 Gold/Yellow	Urgency, attention, warmth	Primary CTA (matches BSP brand)
🔴 Red/Coral	Extreme urgency	Emergency page CTA only
🟢 Green	Safety, go, positive action	"Schedule" or "Get Estimate"
🔵 Blue	Trust, calm, professional	Secondary actions, learn more

📏 CTA Sizing Rules

Mobile: Full-width, min 48px tall, 16px+ font
Desktop: Min 200px wide, 50px tall
Padding: 14px top/bottom, 28px left/right minimum
Border-radius: 8-12px (not fully rounded, not square)
Font weight: 700 (bold). Never light or regular.
White space: 24px+ margin around CTA. It needs to breathe.

📝 CTA Copy That Converts

Instead of This ❌	Use This ✅	Why
"Submit"	"Get My Free Estimate"	Benefit-driven, first-person
"Call Us"	"Call Now: (913) 285-0851"	Shows the actual number, reduces friction
"Learn More"	"See Our Sewer Repair Process"	Specific, sets expectation
"Contact"	"Schedule My Repair"	Action-oriented, personal
"Book Online"	"Book in 30 Seconds"	Time promise reduces perceived effort

📋 Multi-Step Form Design

🔬 Scientific Insight

Multi-step forms convert 3x better than single-step forms (Leadformly, 2024). Why? The "foot-in-the-door" effect. Once someone completes Step 1, they feel committed to finish.

The 3-Step Form Blueprint

1️⃣

What do you need?

Service type selector. Big icons: 🔧 Sewer, 🔥 Water Heater, 🚿 Drain, 🚨 Emergency, 📋 Other. One click. Zero typing.

2️⃣

When do you need it?

🚨 ASAP, 📅 This Week, 🗓️ I'm Flexible. This helps dispatch prioritize. Also: ZIP code field.

3️⃣

How can we reach you?

Name + Phone + (optional) Email. That's it. No address, no paragraph description, no CAPTCHA.

Design notes: Progress bar at top. Back button on each step. Animate transitions (slide left). Auto-focus first input on each step. Big tap targets for the icon selectors.

🏅 Trust Signals That Actually Work

⭐

Google Reviews

Show actual star count + number. "4.8 stars from 200+ reviews." Link to Google profile.

🛡️

Licensed & Insured

Badge format. Include license number if possible. Makes Bob comfortable.

⏰

Response Time

"Average 45-min response" or "Same-day service." Be specific, not vague.

💳

Financing Available

Reduces price anxiety for Rachel on big-ticket sewer/water heater jobs.

🏆

Years in Business

Longevity = stability. "Serving KC Since [Year]." Pair with family-owned messaging.

✅

Satisfaction Guarantee

Risk reversal. "100% satisfaction or we make it right." Huge for Eric's anxiety.

🔤 Section 4: Visual Hierarchy & Typography

If everything is bold, nothing is bold. Guide the eye with intention.

📐 Type Scale for Service Pages

Element	Desktop Size	Mobile Size	Weight	Line Height	Purpose
H1	36-42px	28-32px	800	1.2	Page title, one per page, contains primary keyword
H2	28-32px	22-26px	700	1.25	Section headers, contains secondary keywords
H3	22-26px	18-22px	600	1.3	Subsection headers, feature titles
Body	16-18px	16px (never smaller)	400	1.6-1.7	Paragraph text. 16px is the absolute floor on mobile.
Small	14px	14px	400	1.5	Captions, disclaimers, meta info only
CTA Text	16-18px	16-18px	700	1.0	Button labels. Never smaller than body text.

💎 Pro Tip: Font Pairing

Use maximum 2 fonts. One for headings (strong personality), one for body (excellent readability). Recommended pairings for plumbing/trades:

Montserrat (headings) + Open Sans (body) = Clean, modern, trustworthy
Raleway (headings) + Lato (body) = Friendly, approachable
System fonts only = Fastest option. font-family: system-ui, -apple-system, sans-serif. Zero load time. Consider this for speed.

👁️ Scanning Patterns

F-Pattern (Content Pages)

Users scan in an F shape: across the top, then down the left side, then another horizontal scan partway down.

Put the most important info in the first 2 lines
Start paragraphs and bullet points with keywords (front-load)
Left-align everything. Centered text breaks the F-scan.
Use bold for key phrases users are scanning for

Rachel scans like this

Z-Pattern (Landing Pages)

On simple pages (hero + CTA), the eye moves in a Z: top-left to top-right, diagonal to bottom-left, then across to bottom-right.

Top-left: Logo / brand name
Top-right: Phone number or CTA
Center: Hero image + headline (the diagonal)
Bottom-right: Primary CTA button

Eric scans like this

🎨 Contrast & Accessibility

WCAG AA Requirements (Non-Negotiable for SEO and Compliance)

Element	Min Contrast Ratio	Tool to Check
Normal text (<18px)	4.5:1	WebAIM Contrast Checker
Large text (18px+ bold or 24px+)	3:1	WebAIM Contrast Checker
UI components (buttons, inputs)	3:1 against adjacent colors	Chrome DevTools
Focus indicators	3:1	Tab through the page manually

⚠️ Common Failures on BSP

Light gray text on white backgrounds, gold text on white (fails at 4.5:1), placeholder text in form fields too light, disabled buttons with no visible difference from active ones.

📏 Above-the-Fold Requirements

Mobile above-fold (first ~600px of viewport). Must contain ALL of these:

Company logo (small, top-left)
Phone number (clickable, top-right, 18px+ bold)
H1 headline with primary keyword
One-line value proposition or subheadline
Primary CTA button (full-width preferred)
At least one trust signal (stars, years, or reviews count)

What does NOT go above the fold: Sliders/carousels, video players, large hero images that push content down, navigation menus that expand by default, cookie banners that cover the CTA.

📱 Section 5: Mobile-First Design

72% of Bright Side traffic is mobile. Design mobile first, then scale up.

📐 Breakpoint System

Breakpoint	Width	Devices	Layout Notes
📱 Small Mobile	320-374px	iPhone SE, older Androids	Single column. Stack EVERYTHING. Test here first.
📱 Standard Mobile	375-479px	iPhone 12-15, most Androids	Primary design target. Full-width CTAs.
📱 Large Mobile	480-767px	iPhone Plus/Max, small tablets	Can start 2-col for small cards only.
📋 Tablet	768-1023px	iPad, Android tablets	2-column layouts. Side-by-side content.
💻 Desktop	1024-1199px	Laptops	Full layout. Sidebar options available.
🖥️ Large Desktop	1200px+	Desktop monitors	Max-width container (1200px). Center content.

⚠️ Warning: The 320px Test

ALWAYS test at 320px width in Chrome DevTools. If it breaks at 320, it breaks for ~8% of your mobile users. That's hundreds of lost leads per year. Common failures: text overflow, buttons that can't be tapped, horizontal scrolling.

👆 Touch Target Rules

Minimum Sizes

✅ 44px x 44px minimum tap target (Apple HIG + Google recommendation)
✅ 48px x 48px preferred for primary actions
✅ 8px minimum spacing between tap targets
❌ Never place two tappable elements within 8px of each other
❌ Never use text links smaller than 44px tap area (use padding to expand)

👍 Thumb Zone Design

On phones held one-handed, the bottom-center of the screen is the easiest to reach. The top corners are the hardest.

Easy zone (bottom center): Primary CTAs, navigation
OK zone (middle): Content, secondary actions
Hard zone (top corners): Hamburger menus, close buttons
🎯 Put click-to-call in the easy zone (bottom sticky bar)

📞 Click-to-Call Prominence

The Mobile Call CTA Stack (Top to Bottom Priority)

Sticky bottom bar (always visible): Phone icon + "Call Now" + phone number. 56px tall. Full-width. High-contrast background.
Header phone number: Visible but smaller. Tappable. Stays in header on scroll.
Hero CTA button: "Call (913) 285-0851" with phone icon.
Mid-page CTA: After social proof section. "Ready to get started? Call now."
FAQ section CTA: "Still have questions? We're a phone call away."

Rule of thumb: The user should never be more than one thumb-tap away from calling, no matter where they are on the page.

👥 Persona Match: Emergency Eric

Eric's entire mobile session is often under 15 seconds. He searches "emergency plumber near me," lands on the page, and either calls within 10 seconds or bounces to the next result. The sticky bottom bar is literally the difference between a $5,000 job and a lost lead.

🧭 Bottom Navigation Option

Consider replacing the hamburger menu with a bottom nav bar on service pages. Research shows bottom nav gets 25-40% more engagement than hamburger menus because it's always visible and in the thumb zone.

Suggested Bottom Nav Items (4 max)

📞

Call

📋

Services

⭐

Reviews

📅

Schedule

📸 Section 6: Before/After Gallery

Visual proof is the most powerful trust signal in home services

📷 Photo Requirements for Sewer Work

✅ Before Photos Must Show

The problem clearly visible (crack, root intrusion, damage)
Camera inspection screenshots with annotations if possible
Wide shot for context + close-up for detail
Good lighting (use phone flashlight if needed)
No identifiable customer info (blur addresses, license plates)

✅ After Photos Must Show

Clean, completed work from same angle as "before"
Restored yard/landscape (for outdoor work)
New pipe/fixture clearly visible
The technician(s) if they consent (builds human connection)
Bright, well-lit, professional quality

🔢 Microsteps: Photo Capture Workflow for Techs

Take "before" photo FIRST, before any work starts
Use the same position/angle for "after"
Minimum resolution: 1200x900px (most phones exceed this)
Horizontal orientation preferred (landscape, not portrait)
Upload to shared Google Drive folder within 24 hours
Audrey processes: crop, color-correct, compress to WebP, add to gallery

🔀 Slider Component Design

Before/After Slider Specs

Interaction: Draggable divider with grab handle in the center
Handle design: Circular, 44px, with left/right arrows, high contrast
Labels: "BEFORE" and "AFTER" overlaid in top corners, semi-transparent bg
Mobile: Touch-drag supported. Handle must be in the thumb zone.
Lazy load: Both images should lazy-load (these are below the fold)
Aspect ratio: Lock to 16:9 or 4:3. Both images same dimensions.
Recommended library: img-comparison-slider (Web Component, lightweight ~5KB)

🖼️ Gallery Layout Options

Option A: Masonry Grid

Pinterest-style layout. Works well when photos are mixed orientations. Use CSS columns or a lightweight JS library. Best for the main "Our Work" gallery page.

Option B: Service-Specific Carousel

Horizontal scroll of before/after pairs for a specific service (e.g., 5 sewer repair projects). Use on individual service pages. Autoplay OFF (accessibility).

🔍 Lightbox Design

Overlay: Dark (rgba(0,0,0,0.9)) for focus on the image
Close button: Top-right, 44px tap target, visible "X"
Swipe navigation: Left/right swipe on mobile, arrow keys on desktop
Caption area: Service type, city, brief description
Exit: Tap outside image, press Escape, or tap X
Performance: Load full-res only when lightbox opens, not before
Library: GLightbox (11KB gzipped, accessible, touch-friendly)

👥 Persona Match: Renovation Rachel

Rachel will spend 3-5 minutes in the gallery. She's comparing your work quality to competitors. High-quality, well-organized photos are the #1 differentiator for her decision. She will zoom in. She will judge the landscaping in the "after" shot. Make it impeccable.

📝 Section 7: Blog & Content Design

Content pages drive 30-40% of organic traffic. Make them beautiful and functional.

📄 Blog Post Template

Featured Image

1200x628px (optimal for social sharing). WebP. Relevant to topic. Include text overlay with post title if shared on social.

Title + Meta

H1 title, author name + photo, publish date, estimated read time ("5 min read"). Breadcrumbs above.

Sticky sidebar (desktop) or collapsible top block (mobile). Auto-generated from H2s. Linked with smooth scroll.

Content Body

Max 720px content width. 16-18px body font. Generous line-height (1.7). Images with captions. Callout boxes for tips.

In-Content CTA

After the 2nd or 3rd H2 section, insert a contextual CTA box. "Need sewer repair? Call us at..." Matches the topic.

3 related articles in a horizontal card layout below the post. Use same service category for relevance.

🖼️ Featured Image Specifications

Platform	Optimal Size	Aspect Ratio	Notes
Blog/WordPress	1200 x 628px	1.91:1	Same as Facebook/LinkedIn share size
Google Discover	1200px+ wide	Any (large)	Google requires 1200px minimum for Discover
Schema/Rich Results	1200 x 628px	1.91:1	Must be referenced in Article schema
Twitter/X Card	1200 x 628px	1.91:1	Summary large image card

Bottom line: Design at 1200x628px and you cover every platform.

📊 Infographic Templates

"Signs You Need Sewer Repair" Infographic

Format: Vertical long-form (800x2400px) for Pinterest + blog embed
Style: Numbered list with icons for each sign
Signs to include: Slow drains, sewage smell, wet spots in yard, foundation cracks, gurgling toilets, backed-up drains, old clay pipes (40+ years)
CTA at bottom: "Spot any of these? Call Bright Side: (913) 285-0851"
Brand: BSP logo, colors, URL

"Water Heater Lifespan" Infographic

Format: Horizontal timeline (1200x800px)
Content: Year 0 to Year 15 timeline showing efficiency decline, common failure points, maintenance schedule
Key data: Tank = 8-12 years, Tankless = 15-20 years, annual flush extends life by 2-3 years
Visual: Color gradient from green (new) to red (replacement needed)
CTA: "How old is your water heater? Schedule an inspection."

🔗 Schema Markup Visual Guide

Schema tells Google what your content IS so it can display rich results. Here's what to implement:

Page Type	Schema Type	Rich Result	Priority
Service pages	`Service` + `LocalBusiness`	Service listing in search	🔴 Critical
Blog posts	`Article` + `FAQPage`	FAQ dropdowns in SERP	🔴 Critical
Reviews page	`AggregateRating`	Star rating in search	🟡 High
How-to content	`HowTo`	Step-by-step in SERP	🟡 High
Service area pages	`LocalBusiness` + `GeoCircle`	Map/location results	🟢 Medium

💎 Pro Tip

For every blog post, add FAQ schema with 3-5 questions from the content. This can double your SERP real estate by showing expandable FAQ dropdowns directly in Google results. Use Rank Math or Yoast to add it without code.

⚡ Section 8: Page Speed for Designers

Speed IS design. A beautiful page nobody sees is a failed page.

📊 Core Web Vitals Explained

LCP: Largest Contentful Paint

<2.5s good

BSP now: 5.2-8.2s 😬

How fast the biggest visible element loads. Usually the hero image. This is our #1 problem.

INP: Interaction to Next Paint

<200ms good

How fast the page responds to clicks/taps. Heavy JavaScript (Oxygen, plugins) can tank this.

CLS: Cumulative Layout Shift

<0.1 good

How much stuff jumps around while loading. Caused by images without dimensions, late-loading fonts, injected content.

🖼️ Image Optimization Pipeline

Every image you touch goes through this pipeline:

Crop to exact needed dimensions. Don't upload a 4000px photo for a 400px thumbnail.
Resize: Max widths by context:
- Hero: 1200px (desktop), 768px (mobile)
- Content images: 800px max
- Thumbnails: 400px max
- Gallery: 600px for grid, full-res only in lightbox
Convert to WebP using Squoosh (squoosh.app). Quality: 75-80. Effort: 4.
Target file sizes:

Image Type Max File Size

Hero (mobile) 80KB

Hero (desktop) 150KB

Content image 60KB

Thumbnail 25KB

Icon/logo 10KB (prefer SVG)
Add alt text that describes the image AND includes a keyword naturally.
Set width/height attributes in HTML to prevent CLS.
Lazy-load everything EXCEPT the hero image.

Image Type	Max File Size
Hero (mobile)	80KB
Hero (desktop)	150KB
Content image	60KB
Thumbnail	25KB
Icon/logo	10KB (prefer SVG)

🔬 Scientific Insight: Speed = Money

Google data shows that as page load time goes from 1s to 3s, bounce probability increases by 32%. From 1s to 5s, it increases by 90%. Our current 5-8s LCP means we are likely losing half of all mobile visitors before they even see the page content. Fixing images alone could recover 20-30% of those lost visitors.

🔤 Font Loading Strategy

Current Problem

Google Fonts load from an external server, blocking rendering. Each font weight is a separate file. Two fonts x 3 weights = 6 HTTP requests before text appears.

The Fix

Self-host fonts instead of using Google Fonts CDN. Download from google-webfonts-helper. Serve from your own domain.
Use font-display: swap so text appears immediately in a system font, then swaps when custom font loads.
Limit weights: Maximum 400 (regular) and 700 (bold). That's 2 files per font, not 6.
Preload the primary font: <link rel="preload" as="font" type="font/woff2" href="..." crossorigin>
Nuclear option: Use system fonts only. Zero font loading time. font-family: system-ui, sans-serif

🎬 Animation Performance Rules

Only Two CSS Properties Are "Free" to Animate

✅ Cheap (GPU-accelerated)

transform (translate, scale, rotate)
opacity

These run on the GPU compositor thread. They don't trigger layout or paint. They're essentially "free."

❌ Expensive (Causes Jank)

width, height, top, left
margin, padding
border-radius (when animated)
box-shadow (when animated)
background-color
font-size

These trigger layout recalculation. On mobile, this causes visible stuttering ("jank").

💎 Pro Tip: Hover Effects That Don't Kill Performance

/* GOOD: GPU-accelerated hover */
.card {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.card:hover {
  transform: translateY(-4px) scale(1.01);
  opacity: 0.95;
}

/* BAD: Causes layout thrashing */
.card:hover {
  margin-top: -4px;    /* triggers layout */
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);  /* triggers paint */
}

For the box-shadow hover effect, use a pseudo-element with the shadow already applied, and animate its opacity instead of animating the shadow itself.

✅ Section 9: QA Checklists

No page goes live without checking every box. Print these. Pin them to your wall.

📋 Pre-Publish Checklist

H1 tag present and contains primary keyword
Only ONE H1 per page
H2/H3 hierarchy is logical (no skipping levels)
All images have descriptive alt text
All images are WebP format
Hero image has fetchpriority="high"
All other images have loading="lazy"
All images have width/height attributes set
Phone numbers are tel: links (test by clicking on mobile)
Primary CTA is above the fold on mobile
Form submission works (test with a real submission)
Thank-you page / confirmation message appears after form submit
Meta title is 50-60 characters with keyword
Meta description is 140-155 characters with CTA
URL slug is short, lowercase, hyphenated, keyword-rich
Internal links to 2-3 related service pages
Schema markup is implemented and validated (schema.org validator)
No broken links (check with Screaming Frog or browser extension)
Spelling and grammar reviewed (no em dashes, AP style)
Client has approved the content and design

📱 Mobile Device Checklist

Tested at 320px width (iPhone SE / small Android)
Tested at 375px width (iPhone 12-15 standard)
Tested at 414px width (iPhone Plus/Max)
No horizontal scrolling at any width
Text is readable without zooming (16px+ body)
All tap targets are 44px+ and spaced 8px+ apart
Click-to-call works (test on actual phone)
Sticky CTA bar is visible and functional
Forms are usable (fields aren't tiny, keyboard doesn't cover inputs)
Images don't overflow their containers
Hamburger menu opens and closes properly
Back button works (no JS that breaks browser navigation)
Portrait AND landscape orientations tested
Page loads in under 4 seconds on 4G connection (throttle in DevTools)

🌐 Cross-Browser Checklist

Chrome (desktop + mobile) - primary target
Safari (iOS) - second most common for BSP users
Firefox (desktop)
Samsung Internet (common Android browser)
Edge (desktop - common with Bob persona)
Check for WebP support fallbacks (all modern browsers support it, but verify)
CSS backdrop-filter works (or graceful fallback)
Sticky positioning works across all targets
Smooth scrolling behavior verified

♿ Accessibility Checklist

Color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text)
All images have meaningful alt text (not "image1.jpg")
Decorative images have empty alt (alt="")
Page can be navigated with keyboard only (Tab, Enter, Escape)
Focus indicators are visible on all interactive elements
Form fields have associated <label> elements
Error messages are descriptive ("Please enter a valid phone number" not "Error")
No content relies on color alone to convey meaning
Video content has captions (if applicable)
ARIA labels on icon-only buttons (hamburger menu, close buttons)
Skip navigation link present
Heading hierarchy makes sense when read linearly
Run WAVE accessibility tool and fix all errors

⚡ Performance Budget Checklist

Metric	Budget	How to Test
Total page weight	<1.5MB	Chrome DevTools Network tab
Total image weight	<500KB	DevTools > Network > filter by "Img"
Total JS weight	<300KB (compressed)	DevTools > Network > filter by "JS"
Total CSS weight	<100KB (compressed)	DevTools > Network > filter by "CSS"
HTTP requests	<50	DevTools > Network tab count
LCP	<2.5s	PageSpeed Insights
INP	<200ms	Chrome UX Report / field data
CLS	<0.1	PageSpeed Insights
Time to Interactive	<3.5s	Lighthouse
Font files	<4 total files	DevTools > Network > filter by "Font"

🔍 SEO Visual Checklist

Page title appears correctly in browser tab
Search result preview looks good (use Mangools SERP simulator)
Open Graph image displays correctly when shared on Facebook/LinkedIn
Twitter card displays correctly (use Twitter Card Validator)
Breadcrumbs are visible and functional
Service area city names are visible on page (not hidden in metadata only)
Related service links are visible and contextual
Blog posts have author bio section (E-E-A-T signal)
Date published/updated is visible on blog posts
FAQ sections use proper accordion with schema markup

🎨 Brand Compliance Checklist

Bright Side logo used correctly (proper version, clear space)
Brand colors are consistent (check hex codes match brand guide)
Typography matches brand standards
Tone of voice is friendly, professional, and KC-local
No stock photos of people (use real team photos)
Phone number is correct: (913) 285-0851
Service area references are accurate (KC metro cities)
No em dashes anywhere in copy (use commas, periods, or "to" instead)
"Bright Side Plumbing" spelled correctly
Copyright year is current
Privacy policy and terms links in footer

🃏 Quick Reference Cards

Pin these to your second monitor

🖼️ Image Cheat Sheet

Format	WebP always
Hero (mobile)	768px wide, <80KB
Hero (desktop)	1200px wide, <150KB
Content	800px wide, <60KB
Thumbnail	400px wide, <25KB
Featured/Social	1200x628px
Quality	75-80 in Squoosh
Tool	squoosh.app

📐 Spacing & Sizing Cheat Sheet

Touch target minimum	44px x 44px
Button padding	14px / 28px
Between tap targets	8px minimum
Body font minimum	16px
Content max-width	720px (blog), 1200px (pages)
Line height body	1.6 to 1.7
Border-radius	8-12px (cards), 6-8px (buttons)

⚡ Speed Targets

LCP	<2.5s
INP	<200ms
CLS	<0.1
Page weight	<1.5MB
Image weight	<500KB
HTTP requests	<50
TTI	<3.5s

🔤 Typography Targets

H1 (desktop / mobile)	36-42px / 28-32px
H2	28-32px / 22-26px
H3	22-26px / 18-22px
Body	16-18px / 16px min
Contrast (normal)	4.5:1 WCAG AA
Contrast (large)	3:1 WCAG AA
Max fonts	2 families

🔧 Oxygen Builder Specific Tips

Tricks and gotchas specific to our WordPress + Oxygen setup

⚡ Performance Tips for Oxygen

✅ Use "Code Block" for custom HTML when you need precise control over image markup (srcset, fetchpriority, etc.)
✅ Disable unused Oxygen components in settings to reduce CSS/JS output
✅ Use Oxygen's built-in conditions to load elements only on specific pages (don't load the sewer gallery on the water heater page)
❌ Avoid deep nesting. Each nested div adds DOM complexity. Flatten where possible.
❌ Avoid custom CSS on individual elements. Use classes/stylesheets for reusability and smaller output.
❌ Don't use Oxygen's "Background Image" for hero. Use an Image element instead (preloadable).

📦 Recommended Plugin Stack for Speed

Plugin	Purpose	Key Setting
WP Rocket or LiteSpeed Cache	Caching + optimization	Enable page cache, CSS/JS minification, lazy images
ShortPixel or Imagify	Auto WebP conversion	Lossy compression, WebP serving, resize on upload
Perfmatters	Script manager	Disable unused scripts per page
Rank Math or Yoast	SEO + Schema	Auto-generate FAQ schema, Open Graph
Microsoft Clarity	Heatmaps + session replay	Free. No speed impact (async load).

📅 Monthly Design Rhythm

What to do and when to keep the site improving continuously

Week	Activity	Details
Week 1	🔍 Audit + Analyze	Review Clarity heatmaps, check speed scores, identify worst-performing page. Pull conversion data.
Week 2	🎨 Design + Build	Implement one improvement: new hero, CTA test, gallery update, or new service page. Follow this playbook.
Week 3	🧪 Test + QA	Run through all relevant checklists. Cross-browser, mobile, accessibility, speed. Fix issues.
Week 4	📊 Measure + Report	Compare metrics before vs. after. Document what worked. Plan next month's improvement.

💎 Pro Tip: The 1% Rule

You don't need to redesign the whole site at once. Improve one page per week. After 3 months, you've touched every important page. After 6 months, the site is unrecognizable (in a good way). Compounding improvements beat big redesigns every time.

🔗 Your Toolbox

Bookmark these. Use them daily.

🎯

PageSpeed Insights

pagespeed.web.dev

🖼️

Squoosh

squoosh.app (image compression)

🔥

Microsoft Clarity

clarity.microsoft.com (heatmaps)

🎨

WebAIM Contrast

webaim.org/resources/contrastchecker

♿

WAVE

wave.webaim.org (accessibility)

🔗

Schema Validator

validator.schema.org

🔍

Rich Results Test

search.google.com/test/rich-results

📊

Screaming Frog

screamingfrog.co.uk (site crawler)

🖥️

BrowserStack

browserstack.com (cross-browser)

🎨 Web Design & CRO Playbook