A website you can keep up yourself

Most small business websites I’m asked to fix aren’t badly designed. They’re out of date: last summer’s opening hours, a menu with a cake that left in March, a news page whose newest post is two years old.

Nobody lets it slide on purpose. The site was built so that every change needed the person who built it, and that person was busy. When I build a site in Framer, the aim is the opposite: you can change whatever changes, without writing to me first.

Sort everything by how often it changes

Before any design, I sit down with the owner and sort everything the site will say into three piles. Which pile a thing lands in decides how it gets built.

The weekly pile gets the most care, because it’s the part that goes stale first. If adding an item takes more than five minutes, it won’t happen on a busy Monday.

The middle pile is simpler than it sounds. Opening hours live in one place and appear wherever they’re needed, so changing them once changes the footer, the contact page and the home page together.

The last pile is the one I protect. Layout and colours stay fixed on purpose, so a busy week can’t turn the home page into a noticeboard of stickers and banners.

Build the weekly part as a list

Framer’s CMS works like a small spreadsheet behind the site. Each row is one thing, a project, a product or a release, and the page lays every row out the same way.

Keep the fields few

Every field is a question someone has to answer each time they add a row. I aim for around eight, with only two that must be filled in. For a café’s specials, the core usually looks like this:

• A name, because every row needs one.

• A date, so the newest comes first without sorting.

• One picture, with room for a few more.

• A short text, two or three sentences at most.

The rest are optional extras, a price or a tag, and an empty one never breaks the page.

Name the fields in your words

Call a field what you call the thing. Dobra’s release notes have a field called What changed rather than Body, because that’s the question the developer is answering every time they fill it in.

A test worth five minutes

Hand the CMS to the person who will use it, with no instructions, and ask them to add one row. Every pause is a field to rename, move or remove.

Let the design forgive the content

An owner’s text is never the length of the placeholder. A title might be four words or eleven, and the photo might be a phone shot taken at the counter at closing time.

So the layouts are built to cope. Headings wrap without breaking the grid, picture frames crop any shape to the same ratio, and a section hides itself when its field is empty. If a row has no second picture, the space closes up instead of showing a grey box.

We ship an update, add a row, and the site is right. We haven’t had to ask anyone for help with it since launch.

Co-founder, Dobra

Dobra’s site has taken every release since it went live, 31 of them so far. I wasn’t involved in any, and that is the part of the project I’m proudest of.

Hand over with a short guide

The last thing I deliver is a one-page guide, written for the site as built. It covers the jobs the owner will actually do:

1. Add a row to the list and publish it.

2. Change the opening hours or a price.

3. Swap the picture at the top of the home page.

4. Undo a change that went wrong.

After that comes a half-hour call where the owner does each job while I watch, and keeps the guide for the day they forget. It’s the shortest part of the project and the one that decides whether the site is still right a year later.

I also leave the file tidy behind me. Pages and sections are named in the owner’s words, Menu and Opening hours rather than Section 4, so the Framer layers panel reads like the site itself when someone opens it in a hurry.

If you’d like a site that keeps up with your business, tell me what changes most.