A Page Layout That Breaks When the Owner Edits It

One sentence changed, half the page moved

The owner logs in to change a price. One line, a few seconds' work. They press update and open the page to admire it.

The right-hand column has dropped below the left. A photograph box sits alone at the bottom, and a line of code in square brackets has appeared above the heading.

They try to undo it and make it worse. Then they email the designer, wait two days, and pay for an hour to put it back.

Next time they ask the designer instead. Before long they stop asking, and the site stops changing.

How pages get built this way

Plenty of recent sites use page builders or layout codes: short instructions in square brackets that open a row, open a column inside it, then close each one.

Older sites did the same thing with tables inside tables. Either way, the layout and the words share one editing box.

That works for the designer, who knows which codes are which. To an owner, the box is a page of text with strange markings, any of which might be safe to delete.

What breaks, and why

• A deleted closing code, which swallows everything after it.
• Text pasted from Word, carrying its own fonts and spacing.
• A longer sentence in a box with a fixed height.
• An image wider than the column it was dropped into.
• The visual editor quietly rewriting code it does not understand.

The first spreads furthest. A column that opens and never closes takes in everything after it, so one stray deletion while selecting a sentence can rearrange the rest of the page.

The real cost is stale content

A broken page gets fixed within days, because everyone can see it. The lasting cost is quieter.

An owner who has broken a page twice stops editing. Prices stay at last year's figures, holiday hours stay up into February, and staff who left are still introduced on the team page.

Customers act on what the page says. They arrive expecting the old price, or phone someone who no longer works there.

The site was paid for so that the business could keep it current, and the layout has quietly taken that away.

Keep the words out of the layout

The fix is to separate them. The layout lives in the template, which the owner never needs to see, and the page holds only the content.

For pages that change often, the content becomes fields: a name, a description, a price, a photograph. The template decides where each goes and how the columns sit.

A price list built this way is a set of entries. Adding one, removing one or rewriting one cannot reach the layout, because the owner never touches it.

WordPress supports this through custom fields and page templates, and most content systems have an equivalent.

Design for the text the owner will write

Layouts break most often at their limits, so test them there.

Fill each section with the longest realistic text, then the shortest, then with no photograph at all. Boxes should grow with what is in them rather than holding a fixed height.

Images should scale to fit their column whatever size is uploaded. And text pasted from Word or an email should arrive as plain text, which most editors can be set to do.

A worked example

A hair braiding salon with four chairs on a busy suburban street offers box braids, cornrows, twists and crochet styles, many of which take several hours.

Its services page was built with a page builder: three columns of styles, each with a photograph, a description, the time needed and a price, inside boxes of a fixed height.

When the owner raised two prices and added a note that braiding hair was included, two boxes overflowed, the third column dropped below the others, and a layout code appeared at the top of the page.

The designer restored it from a backup, and the owner stopped editing. A year later customers were arriving with the old prices in mind.

The rebuild turned each style into an entry with fields for name, description, time, price and photograph, laid out by the template. She now changes a price in a box labelled price, and the columns stay put.

Show the owner which parts are safe

Even a well-built site needs a short tour: which pages the owner edits, which fields are theirs, and which parts belong to the designer.

A page of notes with screenshots works better than a long manual. So does labelling fields in plain words: price, opening hours, staff photograph.

Anything the owner should never change, such as the header or the structure of a menu, can usually be kept out of their reach entirely.

An undo the owner knows about

WordPress keeps earlier versions of each page, called revisions, and any of them can be restored from the edit screen. Most owners have never been shown where.

Knowing that a mistake can be reversed in a minute changes how people edit. They try things.

Show the preview button as well, so a change can be checked before it goes live, and make sure a recent backup exists.

The counter-case

Some pages are designed one-offs: a home page with an unusual layout that changes once a year. Those can reasonably stay with the designer, locked away from accidental edits.

And some owners would rather not edit at all and prefer to send changes by email. That works too, provided someone answers promptly.

For the pages an owner updates often, though, build them from templates that hold their shape, and show the owner which parts are safe.

Before the next edit

1. List the pages the owner actually updates.
2. Move their layout into the template.
3. Turn prices and hours into simple fields.
4. Test each layout with long and short text.
5. Label the fields in plain words.
6. Show the owner where revisions are kept.
7. Watch the owner make one real change.

Step seven is the one that tests all the others. Watching an owner make a real change shows exactly where they hesitate, and those are the places that need to be safer or better explained.

Deciding who makes those changes in the first place is covered in who decides what goes on the website this year.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.