The Client’s Guide To Tidy Content: Swish, Streamlined, Sane!
Aren’t editable websites great? Through them you can publish blogs, add team members, update your services and create eye-catching landing pages. With the right setup, a website lets you embark on large-scale marketing campaigns that aren’t beholden to a web developer. Content Management Systems (such as as WordPress) are a bridge between those that code, and those that write.
There is a caveat, however: editing content shifts some of the design responsibility to you.
Encouraging Tidy Habits
In this article I’m going to encourage tidy, consistent formatting when you update your website. I will also discourage practices that lead to off-putting and unsightly results. The result is a website that lasts longer, looks sleeker and fares better against future updates.
It will also put a smile on your web developer’s face!
- Headings
- Other Tips
Neat content…
- …is consistent with your website’s original design.
- …is clutter-free and easily read by search engines
- …looks great on all devices
- …loads fast
Messy content…
- …sticks out and overrides your website’s original design
- …is bogged down by code and unwanted formatting
- …doesn’t scale to different screen sizes
- …loads slowly.
I’ve spent years making, observing and correcting website DIY. Needless to say, you weren’t expected to know this so don’t be discouraged at my nagging. A lot of bad habits seem logical and wouldn’t be obvious if you didn’t have a pedantic web designer to point them out. That’s me! Pedant at your service.
Headings
Headings (or headlines) are so prone to mistakes that they get their own section! To be clear, we’re talking about the big titles that separate content: from H1 (or Heading 1) all the way to H6.
(Probably) Avoid Using H1
H1s (or Heading 1) are generally used once: to indicate what the page is about. If your website automatically generates the page title at the top, that’s likely to be the H1. While it’s fine to use multiple H1s, be sparing with them. Don’t plaster them across the page just because they’re the biggest option.
Split topics with H2s, then H3s for subtopics
When a new topic is introduced, use a H2 tag. If that section contains a subtopic, use a H3. This creates a “nested” hierarchy of related headlines that makes sense to the reader and the search engines. Your website will probably be designed so that headings trickle down in size. Make use of this!
- Norfolk’s Spider Population (H1)
- Urban Spiders (H2)
- Prey (H3)
- Habitat (H3)
- Rural Spiders (H2)
- Prey (H3)
- Habitat (H3)
- Urban Spiders (H2)
Avoid long full sentences in headings
If you want to emphasise a point, it is tempting to wrap an entire sentence in a heading tag. Don’t do this. At best it looks weird and at worst it looks spammy. Many times I’ve logged in to a website to find the owner has wrapped an entire paragraph in a H1 tag (see above).
If there’s a need to bolden or enlarge font for a particular effect, use large paragraphs, quotations or specially made blocks. If those options aren’t available, ask your developer to make it so.
Don’t put headings in block capitals
It’s understandable that you might write headings in block capitals. Block caps indicate importance and are an inherent part of certain designs.
The thing is, upper case is generated by your website’s style guide, not by what you type. If you want a headline TO STAND OUT, that should happen automatically the moment your theme sees H1, H2, H3 etc. This applies whether you type it Like This, like this or LIKE THIS.
Why this is important
WHEN YOU WRITE LIKE THIS search engines might display the block caps in their listings. This looks spammy to visitors and might reduce click through rate from the search results.
Block caps also make it harder for people with visual impairments that use screen readers; they may be incorrectly seen as shouting or acronyms.
Needless to say, if you genuinely want your content to SHOUT, have at it! Just avoid block capitals if they’re a part of your design. I say this as someone that regularly has to retype headings sent to me in uppercase. Grrr…
Don’t put headings in bold
In paragraphs, a font’s weight can be increased by wrapping it in bold or “strong” tags. No problems here.
<p>I am a <strong>strong and mighty</strong> paragraph!</p>However, people often apply this to headings.
There is no need to put headings in bold. Like block caps, your theme should automatically convert headings to a predefined weight that works with your design.
Why this is important
<h2><strong>Heading</strong></h2>uses more HTML than
<h2>Heading</h2>To the pedants who (rightfully) care about keeping things streamlined, these kind of errors stack up. The example above wouldn’t impact you in any meaningful way, but over time things will get messy.
Writing headings in bold might also render them as:
<strong><h2>Heading</h2></strong>Semantically speaking, this is illogical; the strong tag should really sit inside the h2. While it won’t tank your site, it’s nice to keep things consistent.
Finally, if you make headings bold you add another variable into the mix. Some headings will be thick, others thin. That’s one extra layer to your website’s consistency that could be avoided.
Don’t wrap headings in links
Adding links to a heading can confuse your readers; it’s not often obvious that the headline is clickable. Links tend to work better as part of paragraphs, or as eye-catching buttons. As with all things there are exceptions – blog cards come to mind. But in general, keep links to paragraphs and buttons.
Other typography tips
Don’t switch fonts
Bold, underline and italic are no problem. In some cases, content requires different colours. This is fine, and you can stylise your text within the content editor.
What’s not okay is changing fonts. The typography on your site should be decided long before you’re handed the logins. To change fonts mid-page makes things look ugly and inconsistent.
Furthermore, when you load an alternate font family, that puts extra resources on the server. This leads to an increase in loading speed, which makes for a negative user experience.
If parts of your content require an alternate font, those should be predecided and available under strict conditions in your editor.
Pasting content from elsewhere
When you copy content from one place to another, it’s not just the text that gets transferred. You might also paste formatting rules, font choices and raw HTML code. This can result in an absolute mess that bloats your page size and breaks up important site layouts.
When you paste content into WordPress, check the “Text” tab of your editor. If you see a horrific heap of code like the above, you should go back as paste “as plain text”. Other CMSs have a similar tab, often shown as a little rubber icon.
Internal vs External Links
When you prepare an article in Microsoft Word, you don’t have the option to open links in a new tab. However, it’s important your website does this when you refer to external websites. If it doesn’t, visitors will leave your site entirely and you’ll lose a valuable lead.
Paragraph Length
Web content is different to writing for the printed page. People read from a variety of device widths, most of which are backlit and more irritating to the eyes.
Whereas books and essays contain longer paragraphs, websites generally benefit from shorter, snappier sections. It’s important to make regular paragraph breaks to avoid readers hitting the dreaded “wall of text” and becoming overwhelmed.
Make your sentences as lavish as you like – just make sure their paragraphs are short and succinct.
Vary Your Content
Very seldom do topics demand text, text and only text.
Unlike ancient scrolls, websites have an arsenal of different content types. At the very least, these include:
- Bullet and numbered lists
- Blockquotes
- Embedded videos
- Photos, infographics and gifs
Depending on your website, you might also have access to advanced layouts like:
- Alternating rows with background colours or photographs
- Sliding carousels
- Assorted boxes or “panels” that contain snippets of content
- Accordion-style links that expand/close when you click on them
- Tabbed panels
- Pop up windows
Used wisely, these features make an enormous difference to the legibility and effectiveness of your content. 1000 words of plain text is a chore compared to 1000 words of cleverly planned blocks, rows, image captions and lists.
You might have a web designer or marketer to help you with this. If so, great – take their advice and observe how they’ve formatted other pages on your website.
Conclusion
In this article we’ve learned:
- Not to put headings in bold or block capitals; the website will do that naturally.
- Not to overuse h1 headings, and to stagger content with mostly h2 and h3 tags.
- Not to alternate font families in the middle of your content. Typography should be cemented at the design stage.
- To check the background HTML if you paste content from elsewhere. It should be clean and uncluttered, without stray code tags or CSS rules.
- To make external links open in a new tab. This means those who click the link are not taken away from your website.
- To make paragraph breaks more than you’re used to. This ensures text is legible and digestible, even on smaller screens.
- To vary the ways in which you present information. A spacious, colourful page is more compelling than a continuous wall of text.
I hope you’ve found this article useful. If you stick to these guidelines, you’ll ensure that as the website grows, it remains faithful to the original design and stays uncluttered.
Written by Bruce Sigrist in: Guides
