Today Ali from Ali Adventures (and other blogs) shares some tips on writing for the web.
You’re an experienced blogger. You know all the basics: you’ve read all about writing useful and unique content, and all your posts use subheadings, thoughtfully bolded text and bullet-pointed lists to be as reader-friendly as possible.
But could you be doing more? I spent two years working in an IT company, with overall charge of documentation, and these are some of my top tips for outstanding articles that deliver a brilliant experience for your readers.
In a world of Stumbles, Digging and Tweets, the few seconds after a reader arrives on your blog are vital, and the first post they see must provide a great reading experience.
1. Set Line Spacing to At Least 130% (1.3em, 16pt)
One of the most irritating mistakes on a blog – and one of the easiest to fix – is having lines of text that are too cramped up. Small clear text is fine, but scrunched-together lines make your posts look heavy and uninviting.
Check your blog’s stylesheet and look for a section (probably in “post” or “entry”) which specifies the default line-height in posts on your blog. It should look something like this:
.entry { font-size: 1.4em; line-height: 1.65em; }
If your lines are too cramped, change the “line-height” to a higher value. It’ll be an em (like mine), a percentage or a pt value (like font size). You can find out more on the W3Schools line-height page, or convert between em, percentages, pixels (px) and points (pt) at http://pxtoem.com/www.pxtoem.com.
2. Offer a Printer Friendly Version of Posts
With longer posts, or a series of post, it’s nice to provide a printer-friendly or downloadable version. One simple way to do this is to compile the post(s) into a pdf, and offer a downloadable link. (You can use software such as pdf995 to create pdfs for free.)
Think about which posts readers might want to print: perhaps detailed instructions, or posts which require a lot of concentration when reading.
Another ways of doing this is to install a plugin such as WP-Print that automatically generates a printer friendly version. A lot of big sites (such as newspapers’ websites) offer a “print this page” button, so it could make your blog seem more “pro” to a reader.
3. Mix Lists and Paragraphs
Bullet-pointed lists are great for getting your message across quickly and clearly. But if your whole article consists of lists, readers are likely to feel as though you’ve just written an outline and presented it as a complete post.
A lot of lists can also make the text look “choppy” on the page, as the reader’s eyes will skip from one to the next.
Try having a few short lists, then a couple of full paragraphs. The variety both in the writing style and in the visual look on the screen will help keep the reader’s attention – increasing the chances that they’ll read right to the end of your posts.
4. Use On-Page Anchors
If you’ve written a long post with several subsections, it’s worth putting links at the top so the reader can navigate around the post easily. These are called “anchors”, and you can find out full details here.
To use an anchor in your post, switch to the HTML view, and put the following near the top of the post, where you want the list of links (the “myanchor” text can be anything you want, but it should be preceded by a hash symbol):
<a href=”#myanchor”>Jump straight to an anchor</a>
Then, wrap these tags around the heading of the relevant section. (Note that this time, “myanchor” does not have a hash symbol.)
<a name=”myanchor”>Section heading</a>
Using anchors is particularly important if some of your post might not be relevant to everyone reading; for example, if you’ve written a list of “Online resources for designers, writers and programmers”, it would make sense to save your readers from wearing out their scroll wheel. You could give links at the top like this:
- Resources for designers
- Resources for writers
- Resources for programmers
5. Use Links Generously
As well as using links in places where they’re considered “necessary” (linking back to previous posts of yours on the topic, acknowledging the source of images, linking to blogs you’re quoting from), try thinking of links as gifts to your readers. One of my blogging friends, Sid Savara, wrote recently in an email to me:
I try to link not just as a source, but for sort of “Easter Eggs.” That is, each link in my article can lead someone down a whole new rabbit hole.
This is exactly the right attitude. Readers who feel delighted by the richness of your posts, and who have found extra resources through your links, are likely to come back to your blog for more.
6. Use the Title Tag for Links
If you put a title tag in your link, readers can get extra information about the link when they hover over it. This is especially useful if you’re linking words in the middle of a sentence to a different blog post, as the post often won’t have the same title as the linking word.
You can set the title to anything you want. It’s often useful to give the title of the post or page you’re linking to, along with the name of the blog it’s on (if it’s not your own one). If you’ve set the link to open in a new window, it’s helpful to mention this in the title tag too.
To add the title to a link using a visual editor, click to edit the link, and look for an option called “Title”.
To add a title in HTML code, add it like this:
<a href=”https://problogger.com/” title=”ProBlogger site”>
7. Create a Style Guide
The IT company I worked for had a “style guy” that covered everything from how titles were capitalised to how “alt” tags should be used on images (for accessibility purposes). Your writing will look more polished and professional if you’re consistent: for example, do you use single or double quotes? Do you capitalise words like “Government” and “Senate”? Do you write “website” or “web site”?
It’s worth creating a simple style guide for your own blog. This doesn’t need to be a huge task – you can just add to it as you go along.
If you have guest posters, or if you employ writers to work for you, you could give them your style guide and ask them to keep to your house style – to make sure that posts are consistent.
Do you have a tip for writing outstanding content that wows readers by being easy-to-read and looking professional? Share it in the comments!
About the Author: Ali is a freelance blogger and writes for a number of popular blogs (see her current list here). If you’d like to hire her, drop her an email at [email protected].
I already do break up longer posts with subheads, but hadn’t thought to use anchors to make it easier to jump to those subheadings.
Purely out of curiousity, do anchors offer any SEO benefit? I might be inclined to use them more often even on shorter posts if so…
Anchors, Titles and Spacing oh my… Well I’ve got some work to do now. Thanks Ali for the tips and your writing style is very fluid.
Thanks for this great list… I know this will help alot of web designers in their approach to writing copy for the web.
Cool thanks for another perfect plugin suggestion to download, been thinking about adding print icons for a while now.
I wish I could have the “style guy” job sounds like it could be pretty interesting. One of the things that I feel really devalues a brand and site on the internet is inconsistence.
I also liked the tips about seo friendly link titles, on-page anchors and line spacing.
Thanks again for another great post!
Thanks for the line-height advice Ali! I never thought, or read, about changing line-height to make the page more easy to read, but as soon as you mentioned it, it seemed so obvious!
Using on-page anchors can be even simpler than you described! The HTML 4.01 spec on linking states “Destination anchors in HTML documents may be specified either by the A element (naming it with the name attribute), or by any other element (naming with the id attribute).” So, instead of wrapping your section header in an anchor, with a name attribute, just add an id to the section header tag you’re using.
There are two examples on the HTML 4.01 spec page that show how to implement on-page anchors. http://www.w3.org/TR/html401/struct/links.html#h-12.1.1
Some new ideas! I like the print option. I like to use it myself so whatever I like, I put on my blog! It’s my blog :)
@ Nicholas Powiull – Thank you SO much for sharing about the printer friendly code. I installed it tonight and it is awesome! Love it!
Does anyone else have thoughts about using Arial type for body content (vs. a more traditional Times or Courier)? I like to read Arial, but I want one of my blogs to read more like a magazine.