Websites are a great way to present courses, show in-depth features and help clients get the best out of your product or service. But this is the harsh truth of presenting technical instructions and learning materials online.
Screens and phones are hard to read! (Note: I set this as a “blockquote” with one click, and it changes to a new pullout with different colour and styling. My websites use stylesheets, making it easy for writers to keep consistent with long-form educational content!)
If you want people to read long-form content, you need to structure it in an exciting way for impact AND legibility.The process of designing for the digital world is called UX (or user experience). It’s the science of legibility, accessibility and readability.
Luckily WordPress helps content creators do this well. Yes, it CAN have only long-form, text based educational articles, but it also makes it easy for mid-level users to break up text to be SEO and reader-friendly.
General rules for quality, scannable content
- Use as few words as possible
- Put the most important information at the top
- Use short paragraphs and sentences
- Highlight essential words or phrases
- Break up large blocks of text – see the examples below
Layout ideas to make text scannable
Table of Contents
See that clickable table of contents at the top?
Nope, I didn’t write it. I don’t have to keep it up to date.
As I use headings and subheadings, it just creates itself! And when I look over the article, it helps me check that my article is structured correctly!
Accordions
What is an Accordion?
This clever layout tool is an Accordion. It’s one of my favourites for complex technical content. Sections pop open, to present the reader with one thing at a time.
A well-designed accordion reduces the number of pages on your site (and therefore the website cost), and reduces your menu complexity.
Why Accordions work
Accordions improve readability, accessibility and engagement.
- By hiding long blocks of wording, accordions stop information overload.
- They focus the user on one section at a time, no distractions.
- Accordions are clickable, giving readers control and power over what they view, and when.
- Accordions save space – it’s long form content without endless scrolling.
- The bright headings help users identify what is relevant to THEM.
Bullet or Numbered list
- Lists optimize scan-ability!
- Lists encourage the writer to summarize content.
- Should your list be numbered?
- Two-line lists provide primary text
and secondary text (consider a different, smaller font). - “Pogo-sticking” happens when the list hierarchy isn’t consistent.
- It’s called that, because the reader’s eyes jump around.
- If you have several sets of lists, use a divider or line.
- Indent hierarchies clearly, using a different bullet.
- Keep punctuation and writing style consistent.
Buttons
Buttons are your strongest call to action.
Don’t foret – buttons encourage the reader to leave the page (that’s why I rarely put buttons in a banner). Sticky buttons stay still despite scrolling – they can be annoying but they do attract attention.
- Make buttons LOOK like buttons
- Maintain style consistency across the website – edges, borders, colours…
- You can influence visibility and clickability with styling (solid vs outline)
- Label buttons clearly – be very specific
- Make sure it’s big enough to be clicked with a finger
- More than 2 buttons? Separate them with dividers, wording or headings.
Tables & Grids
| Label headers | Make it stand out |
|---|---|
| Keep it readable | think about alignment |
| Keep it short | use zebra stripes to reduce border lines |
| Keep it consistent | check how it looks on mobile |
Images
Good product photos sell.
If you overlay text, make sure it’s readable.
Keep the image size in balance with the rest of the article. Use table columns (rather then simple text alignment) to create responsive layouts.
A full width panoramic photo is a great way to break up long text!
Of course, these ways to break up text have to be available to you as the website content writer! One of the big pluses of WordPress over other platforms like Wix and Squarespace, is that your website developer can build in different formats for text.
