Search this and you'll get seven words starting with C. Different order every time, and half the lists have swapped a couple out for words the writer preferred. Clarity, Consistency, Call to action.
Those lists are made up. There's a real seven underneath them, and it's older than most of the sites people apply it to.
Where they come from
Jeffrey Rayport and Bernard Jaworski, 2001, an e-commerce textbook. They weren't writing about web design. They were describing what they called the customer interface, meaning everything a business puts between itself and the person buying from it. A website was the obvious example at the time.
- Context
How the site looks and how you get around it. Layout, navigation, fonts, color. - Content
What's on it. Words, pictures, video, prices. - Community
Whether the people using the site can reach each other. - Customization
The site fitting the person looking at it, on its own or because they set it up that way. - Communication
The site talking to the visitor. Email, notifications, support. - Connection
Links out to other sites, and links in from them. - Commerce
Taking money. Cart, checkout, shipping, receipts.
Nothing on that list has expired. For something written about the web in 2001, that's unusual, and it's probably why people are still asking about it.
Only one of them is about design
Context is the design one. The other six describe what the site has, not how it looks.
So if you came looking for a design framework, you didn't get one. You got a list of what belongs on a site. That's useful, just not for the thing you asked. Run a new project past the seven and you'll usually find something nobody decided yet. Try to design a page with them and you have one word to work with.
Four of them you now just install
In 2001 the last four were the expensive ones. Commerce meant building a cart and talking to a payment processor. Community meant running a forum and moderating it. Communication meant a mail server. Connection meant emailing other webmasters and asking nicely.
Today you install all four. A checkout you drop in, a link to a Discord, a support widget, an embed.
The work didn't disappear though, it moved. Every one of those pieces arrives on your page with its design already decided by somebody else. The support bubble sits bottom right in a blue you didn't pick. The checkout runs on another domain in a font you don't use. The review strip brings its own heading size. The consent banner covers whatever you spent longest on.
And you can't judge any of that in a design file, because none of it exists until the page is running.
Content and Customization are what break Context
These two fill the page, and neither one is settled when you design it.
The product title comes from a supplier feed, and one of them runs ninety characters and takes your card grid apart. The price carries a discount badge, but only for some visitors, in some countries. The dashboard is empty for the first ten minutes of every new account and never empty again after that.
Context is the C you sign off. Content and Customization decide whether that sign-off means anything. Approve a layout against neat sample text and a logged-out homepage and you've approved a version of your site nobody is going to load. Most of the states worth checking can't be mocked up at all.
What's missing
Every C describes the site as it's supposed to end up. None of them says anything about the ten minutes after you look at it and find something wrong.
Describing a two pixel problem takes longer than fixing it. That's the whole thing.
That's where your time goes now. The code stopped being the slow part a while ago. You can see that the widget's blue is off, that the badge is sitting on the price, that the long title needs the grid to give up a column. Seeing it takes a second. Then you have to write it down for somebody else, precisely enough to act on, and read what comes back to find out whether they understood you.
This is the part Pixy handles. Put the tag on your site, or install the Chrome extension if you'd rather not touch code. Press ⌘⇧E and you're editing the page instead of reading it. Your stylesheet, your content, whatever width your window happens to be. Move the badge off the price. Take the grid down a column. Change the widget's blue.
What goes to your developer or your agent is the change itself: the element, the property, the value before and after, and the width you were sitting at. Make a fix at 390 and it belongs to the phone layout, not to the whole site. Spacing that belongs to a rule goes on the rule, so every match updates instead of one card drifting away from the others.
So are they useful?
For planning, yes. Six of the seven are decisions you make once, before the site exists, and the list is good at catching the one you forgot.
Context isn't like that. It's the only one that stays open, because it's the only one that has to survive the other six landing on top of it. No framework helps you there. You have to open the page and look at it.
Start with the page carrying the most borrowed boxes, the one with the chat bubble, the checkout button and the review strip. Open it from your projects and count how much of it is still yours.
Enough theory. See what your site is missing.
Use Pixy to inspect and improve this page, or bring in your own.