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!
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
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), is reader-friendly, and reduces your menu complexity. Also, Google gives you a higher page rank because people spend more time on your page.
Bullet or Numbered List
- Lists optimize scannability!
- 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 and 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!
