Take a Website Apart
This is a website for Lakeside Dental, a practice we made up for this page. From the outside, it's one simple page.
Inside, it's six layers and 33 blocks. We'll take it apart from the top, where everything shows, down to the layer nobody sees.
Press Start the Tour and it plays on its own, one layer at a time. Pause whenever you like to try the demos, or scroll through at your own pace.
06Design
It's the layer people see first, and they judge it in a blink.
Five blocks make it up: the grid, the type scale, the color system, the photography and the motion.
Switch the blocks off one at a time and see what's left.
What we buildAn original design system, so the fortieth page looks as sure of itself as the home page.
All five design blocks are on.
50 ms
People rated how appealing a web page looked after seeing it for 50 milliseconds, and those snap ratings matched the ones they gave after a longer look.
Lindgaard and colleagues, Behaviour & Information Technology, 2006.
05Words
People skim a home page, so the words have to land at a glance.
Six blocks: the headline, the subhead, the button words, the page names, the small print and the snippet search engines show.
Take the five-second test. Two versions of the same page, one question each.
What we buildEvery word on the site, starting with a headline that says what you do and who it's for.
20%
On an average visit, people read about 20% of the words on a web page.
Jakob Nielsen, Nielsen Norman Group, May 2008.
04Proof
Every claim on a page raises a question. Proof answers it right next to the claim.
Five blocks: dated reviews, the owner's replies, real numbers, faces with names, and credentials.
Pull the proof out and read the claims on their own.
What we buildProof placed beside every claim, and review feeds that stay current on their own.
74%
of consumers look for reviews written in the last three months.
BrightLocal, February 2026. A survey of 1,002 US consumers.
03Access
Some people hear your site. Some never touch a mouse. Some zoom it to twice the size, and some read it outside at noon.
Six blocks: headings, image descriptions, form labels, contrast, focus and motion settings.
Try the same page three other ways.
What we buildSites built to WCAG 2.2 AA and tested with a keyboard and a screen reader before launch.
64%
of companies sued over digital accessibility in the first half of 2026 had revenue of $25 million or less.
UsableNet, July 2026. It found 36% had more.
02Speed
Every block on a page has weight, and on a phone, weight is time.
Five blocks: images, fonts, code, outside scripts and hosting.
Load two pages on the connection Google's Lighthouse uses to test phones.
What we buildA weight budget for every page, and a check that runs each time you publish.Read the Speed Guide
The median phone home page
2,559 KB
Median bytes on phones: images 911 KB, JavaScript 632 KB, fonts 122 KB. Web Almanac, 2025.
This page, weighed in your browser
Measuring
Fonts, code and words. No image files and no outside scripts.
Download time on Lighthouse's slow 4G profile: 1.6 Mbps, plus four 150 ms round trips to connect. It counts bytes only, not the time a phone spends drawing the page.
8%
more sales for Vodafone after its main content loaded 31% faster, in an A/B test on real traffic.
Vodafone case study, web.dev, March 2021.
01System
The last layer is the one nobody sees. It's also the one that makes the phone ring.
Six blocks: the form, the CRM, the calendar, alerts, follow-up email and reporting.
Send a test request and follow it through.
What we buildWe wire the site to HubSpot, your calendar and your phone, then test every path before launch.
Simulated here. On a live site, HubSpot runs each of these steps when the form is sent.
1 of 114
B2B companies replied personally to a demo request within five minutes.
Workato, March 2026. The average first reply took 11 hours 54 minutes.
&Together
Six layers and 33 blocks, working as one page. Jud & Co. builds all six.
Now put your name on it.