DIRECT ANSWER
A website works technically when it loads quickly, stays secure and operates on every device and with assistive technology. It works functionally when each kind of visitor can complete their pathway and every action reaches the business. It works aesthetically when the design makes the business clear, credible and its own. Each layer depends on the ones beneath it.
Key terms
- Working website
- A website that meets three layers at once: technical, functional and aesthetic. A failure in any layer weakens the other two.
- Technical layer
- Whether a website loads, stays secure and operates on every device and with assistive technology, shown by evidence such as a secure connection, loading and stability measures, working links, keyboard access and readable contrast.
- Functional layer
- Whether each kind of visitor can complete their pathway from arrival to next step, with every action reaching the person or system that completes it.
- Aesthetic layer
- Whether the design makes the business clear, credible and recognizably its own, through visual order, readable type and imagery that belongs to the business.
- Handoff
- The point where a customer action leaves the website and reaches the person or system that completes it. Full entry: What Should a Customer Be Able to Do After Visiting Your Website?
Three layers, one website
"The website works" can mean three different things. It can mean the site loads, stays secure and runs on every device. It can mean a visitor can do what they came to do. It can mean the design makes the business clear, credible and recognizably itself. A working website meets all three, and each layer depends on the ones beneath it.
| Layer | The question it answers | Evidence that it works | Typical failure |
|---|---|---|---|
| Technical | Does the site load, stay secure and operate on every device and with assistive technology? | Secure connection on every page, loading and stability within published thresholds, working links, keyboard access, readable contrast | Slow loading on phones, broken links, shifting layouts, controls a keyboard cannot reach |
| Functional | Can each kind of visitor complete their pathway? | Each customer pathway walked end to end; every handoff verified | A form that submits but delivers nowhere, a dead booking link, a page with no next step |
| Aesthetic | Does the design make the business clear, credible and its own? | A visual order that leads to the answer and the next step, readable type, a look that belongs to this business | A generic template, low-contrast text, competing calls to action |
The technical layer
The technical layer is the foundation the other two stand on. Google's page experience guidance names the basics: pages served over a secure HTTPS connection, content that displays well on phones, and no intrusive pop-ups blocking the content [2]. Its Core Web Vitals measure the experience of loading, responding and staying stable: a good experience means the largest content element appears within 2.5 seconds, the page responds to interaction within 200 milliseconds and the layout shift score stays below 0.1 [1]. Google is also explicit that good scores alone do not guarantee rankings [2]. How to read these measures is covered in what Core Web Vitals tell a business owner.
Accessibility belongs to this layer as well. WCAG 2.2 requires that every function be operable through a keyboard, a Level A criterion [4], and that normal text reach a contrast ratio of at least 4.5 to 1 against its background, a Level AA criterion [3]. A site can look finished and still fail both.
The functional layer
The functional layer is where the customer pathways live. A site passes it when every kind of visitor can move from the page where they arrive to their next step, and the action reaches the person or system that completes it. Functional failures are often invisible from the outside. A form shows its thank-you message while the inquiry goes nowhere, which is why testing a contact form means following the inquiry to its destination.
The functional layer also covers returning customers. An existing customer who cannot find how to pay, reorder or reschedule has hit a functional failure, even when every page for new customers works.
The aesthetic layer
The aesthetic layer does more than decorate. Visual order decides what a visitor reads first, and a page with one primary action reads differently from a page with five equal buttons. Nielsen Norman Group's research on credibility lists a professional appearance, with clear organization and fitting colors and imagery, among the four factors that communicate trustworthiness, alongside transparency about prices and policies, thorough and current content, and presence beyond the site [6]. A design that belongs to the business, with its own photographs, voice and colors, helps a visitor remember which business they were considering.
How the layers depend on each other
A technical failure stops a visitor before function or design matter: a page that will not load on a phone has no pathway and no aesthetic. A functional failure wastes good design: an attractive page that leads nowhere delivers nothing. An aesthetic failure weakens a working site: a fast, functional page that looks generic or confusing gives the visitor no reason to choose it.
The layers can also mislead each other. The aesthetic-usability effect is the tendency to perceive an attractive interface as easier to use. It can mask real problems in testing, when a participant struggles with a task but rates the site highly because of how it looks [5]. A review that judges a site by its appearance can miss a broken pathway entirely. Checking each layer with its own evidence avoids that trap.
Applications
An inn with a beautiful, broken website
Illustrative example. A small inn's website opens with a full-screen video of the property and elegant typography. Reviewers praise the look. On a phone, the video delays the page for several seconds, and the booking button opens a reservation tool that does not fit a phone screen. The aesthetic layer is strong; the technical and functional layers fail where most guests decide. The fix keeps the design, replaces the video with a compressed still image and a short optional clip, and links to a reservation page that works on a phone.
A plumbing company with a working, generic website
Illustrative example. A plumbing company's website loads quickly, passes accessibility checks and routes emergency calls and quote requests correctly. It uses a template shared by thousands of other trades sites, with stock photos of people who do not work there. The technical and functional layers pass; the aesthetic layer gives a visitor comparing three plumbers no reason to remember this one. The fix replaces stock images with photos of the company's own trucks, team and work, and rewrites the opening in the owner's voice.
Limits and edge cases
- Thresholds measure part of the experience. Meeting a published threshold describes the measured loading and stability. It does not prove that visitors can complete their pathways.
- Appearance and testing are separate. Positive reactions to a design are not evidence that it works [5]. Function is tested by completing tasks.
- Accessibility claims. Meeting specific WCAG criteria is a technical target. It is not a legal determination of compliance with any accessibility law.
- Third-party tools. Booking, ordering and payment tools carry their own technical and functional behavior. They are tested inside the visitor's pathway, since the visitor experiences them as part of the site.
- Change over time. A site that worked at launch can stop working when a tool updates, a form's destination changes or a page is edited. Each layer is worth rechecking after changes.
Check the three layers
Mark each check as passed, failed, not tested or not applicable. The tool reports each layer's state and which layer to fix first.
Check the three layers
Technical: secure connection, fast and stable on a phone, working links, keyboard access, readable contrast. Functional: each customer pathway completed end to end, forms and bookings delivered, a next step on every page, returning-customer actions easy to find. Aesthetic: the first screen shows who, what and the next step, one primary action per page, the business's own imagery and voice, readable text on a phone. Fix technical failures first.
The checks follow this entry's three layers. Base each mark on evidence, such as a test on a phone or a delivered test inquiry, and on more than the look of the page.
How So It Sticks applies this
We check every build at all three layers before launch: technical checks for page speed, secure connections, links, mobile layout, keyboard access and contrast; functional checks that walk each critical path and verify form delivery; and a content and design review of the primary action, the verified facts and the business's own imagery. Start a Project Brief and tell us which layer worries you most about your current site.
Sources and method
The three-layer model, the examples and the tool are So It Sticks editorial frameworks. The examples are illustrative and describe no real business. Each linked source supports only the statements numbered beside it. Sources verified October 15, 2026.
- Google Search Central: Understanding Core Web Vitals and Google search results
- Google Search Central: Understanding page experience in Google Search results
- W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum)
- W3C: Understanding Success Criterion 2.1.1, Keyboard
- Nielsen Norman Group: The Aesthetic-Usability Effect
- Nielsen Norman Group: Trustworthiness in Web Design: 4 Credibility Factors