Article layouts that keep people reading

You can write an excellent article and still lose readers in the first few seconds, before they have read a word of it. A giant banner image pushes the opening below the fold. A sidebar of widgets competes for attention. A pop-up appears just as they settle in. By the time the article reaches the reader, half its chance has already gone.

Layout is the arrangement of everything around your words: where the title sits, how wide the text runs, where images go, what interrupts and what comes at the end. For a membership site that publishes articles, guides or lesson notes, a good article layout means members read more of what you create, which is a large part of what they are paying for.

Make the first screen count

The first screen a reader sees, before scrolling, should tell them what the article is and pull them into the opening paragraph. In most cases it needs only:

• The title, large and clear
• A one- or two-sentence summary beneath it, sometimes called a standfirst, that says what the reader will get
• A byline with the author's name, which adds a human voice
• A reading time estimate, such as “8-minute read,” so people can decide whether to read now or save it
• The start of the article itself

Watch out for oversized header images. A decorative photo that fills the whole screen forces every reader to scroll before they see any words. Keep header images modest in height, or place the main image after the first paragraph. The opening paragraph then has to earn the scroll, and write introductions that make members keep reading has techniques for exactly that.

Give the text one clear column

Readers follow a single column of text far more comfortably than a page split into competing areas. Keep the main column to a moderate width, so lines do not stretch across the screen, and give it generous space on either side.

Think hard about sidebars. On many sites they fill up over time with recent posts, tag clouds, social feeds, promotions and archives, none of which help someone reading an article. If you keep a sidebar, limit it to one or two genuinely useful items, and let it drop below the article on phones. For long guides, a better use of the side space is a short table of contents that lets readers jump between sections and see how far they have come.

Break up the page with purpose

Long, unbroken text looks like hard work. The answer is not decoration but structure that helps readers find their way:

• Subheadings every few paragraphs that describe what follows, which writing headings that help readers and search engines explains in detail
• Images that explain something, placed right beside the paragraph they illustrate and given a caption that says what to notice
• Callout boxes for a tip, a warning or a key definition, used a handful of times per article at most
• Lists for steps and sets of items that would be tedious as prose
• Pull quotes, a line repeated in larger text, only in long pieces and only when the line is genuinely striking

Every element should earn its place. An image that exists only because “articles need a picture” interrupts reading without adding anything.

Keep interruptions to a minimum

Each interruption gives readers a reason to stop. Common culprits include email sign-up pop-ups that appear on arrival, videos that play automatically, sticky bars that cover part of the screen on phones and promotional boxes inserted every few paragraphs.

For members reading content they have paid for, remove sign-up pop-ups entirely. For public articles, if you want an invitation, place one mid-article box after the reader has had real value, and one at the end. Keep both relevant to the article's topic, and make sure they look like part of the page rather than an advertisement.

Give the ending somewhere to go

The end of an article is where a reader is most engaged and most ready to take a next step, yet many pages simply stop, or trail into a long list of tags and share buttons. Plan the ending deliberately:

1. A short wrap-up or “what to do next” paragraph written as part of the article
2. One clear action, such as downloading the related worksheet, joining the discussion or starting the matching lesson, set as a proper button following the advice in buttons and calls to action that people click
3. Two or three hand-picked related articles, each with a title and one-line description
4. Comments or a link to the discussion thread, if you have them

Hand-picked related reading usually beats an automatic list, because you can choose the natural next step rather than whatever shares a tag.

A worked example: a motorcycle restorers' guide

Desmond runs a membership for people restoring vintage motorcycles. His long guides were popular but, judging by member comments, few people read past the halfway point. Here is the new layout for his carburetor tuning guide, from top to bottom:

1. Title and a two-line summary: what the guide covers and which models it applies to
2. Byline, “Updated after member feedback” note and “14-minute read”
3. The opening paragraph, visible without scrolling
4. A photo of the carburetor with its parts labeled, placed after the first paragraph instead of above the title
5. A table of contents in the side space on desktop, moved to a collapsible list on phones
6. Seven sections with descriptive subheadings, a warning box about fuel safety and a numbered list for the tuning steps
7. A “Before you start” tool checklist offered as a download halfway down, where the reader needs it
8. A closing paragraph, a button to the matching video lesson and two related guides

The old sidebar of recent posts and archive links is gone. The guide now has one path from beginning to end.

Improve your article layout

• Open your most-read article on a phone and a laptop. Can you see the first paragraph without scrolling?
• Reduce any full-screen header image or move it below the opening.
• Strip the sidebar back to one or two useful items, or remove it.
• Remove pop-ups and autoplaying video from member content.
• Add a table of contents to guides with more than five sections.
• Rewrite the ending of your top five articles with one action and two related reads.