Seven Expert Tips For Outstanding Web Writing

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 use blogger and would like more information on creating printable pages. I am interested in creating PDF links…how do I do that? I did find some html code for creating a printable page, but it was a little beyond me.

line-height is actually one of the few CSS properties which doesn’t need to have a size scale like em or px. If it’s just the value, it calculates the actual line height based on the font size. Just set it to 1.3 (1.4, 1.5 …) and leave the rest to your browser of choice.

I’m afraid I don’t know about plugins for blogger that would create pdfs, as I don’t use blogger myself.

One solution would be to get hold of pdf995 (which is free), then you can turn a Word document etc into a pdf by selecting “pdf995” as the printer. You’d have to do this for each page/document you wanted to put on your blog as a pdf, though, which I can understand might be a pain!

Thanks especially for the info on how to create a PDF. I’ve been wanting to post samples of menu plans and shopping lists I’ve described on my site and nothing I did worked. I also never knew I could offer a print-version! So cool! Thanks again for your many resources!

Yes, yes, and yes again. These are great tips. Honing your writing skill is a never ending battle where none of us is ever as good as we would like to be. If you can’t be a brilliant writer today, at least you can have good looking prose to make life easier on your readers.
Great tips!

Great post! I’ve been trying to figure out how to create printer friendly pages on Blogger for the longest time. I Googled it a while back, but only found information that was rather difficult to understand.

Do you have any simple information? It would be much appreciated. Thank you!

great tips indeed as I’m starting a switch from a plain blogger ‘blog’ to an actual, paid for, having-to-work-on-it website. (not launched yet) That said, ahem..where is the ‘print post’ link? If I read interesting articles, I tend to want to print them out so that I can sit back with my ‘cuppa’ and re-read and think about them. Or..put them up for display as usefull reminders.
Case in point Darren! [g]

g’day and I’m now following you also on Twitter..great many and useful tips (hope you never have to sit next to a drunken woman ever again!)

Love the tip on printing – I can definitely use that. And I agree about setting a style guide but would suggest that rather than reinventing the wheel, consider using the AP style manual or the Chicago Manual of Style.. If you found a publication you particularly liked, look at its writers guidelines and see what style manual it follows.

To set-up Print for Your Blogger Account, this site will tell you how to take care of the basic areas (header, sidebar-wrapper, sidebar, footer-wrapper, footer, date-header, post-meta-data,comment-link, comment-footer, blog-pager, backlinks-container, navbar-section subscribe_notice):

Re printability of posts, many blogs and websites are not very printer-friendly. Many sites do not provide a printable view, and when you do try to print, the menus/ads/etc take up so much room on the paper that the actual content doesn’t fit!

However, it’s not necessary to create a new copy of each page that’s printer-friendly. With a bit of CSS, you can hide some content when it’s printed.
I use it to hide menus/ads/etc when pages are printed, as detailed in the Web Page Printability With CSS article I wrote a few years ago.

Ali,
Thanks for the wonderful set of tips. I especially like the way you included solutions for each issue right in the post. Too many articles, just tell you what you should be doing, and give no clue how to go about it. I’m sure some blogs around here are about to become far more reader friendly. Off to check out your blogs, Thanks Again.

I’m a sucker for problogger tips. This article was written shortly after I discovered it. Showed some of improvements from the previous embarrassing messes, but still, PLENTY of room for improvements there.

One way to greatly improve your writing is to read the Associated Press style manual. When there’s an issue such as “theater” or “theatre”? the manual tells how it’s done. The AP book has tons of advice on usage, preferred spellings, libel issues and basic grammar.

I worked on newspapers for many years and read the AP manual every time it came out. Always learned a lot.

Of course, part of the fun of being a publisher is setting your own style. …

The tip about generous linking is a really good one – most people believe that linking to other sites is just a traffic leak. However, I have seen in my testing that most visitors will keep coming back.

High Contrast Text
Use the highest contrast possible for text. Black text on white page is best. Black pages with white text are very hard to read.

Use A Sans-serif Font
Use an Arial or sans-serif font. A font is set of letters, which have the same design and uniform size. Serifs are the little tails, which are on some letters. “Times” is a serif font.

Two Fonts Per Page
Limit yourself to two fonts per website. A different font for the title or heading can look nice but after that readability get worse.

Do Not Use All Caps
Capitals should be limited to the first letter of a word. A paragraph or page in all caps is like an annoying person standing too close and talking too loud.
Use correct spelling and grammar and please just one period at end of sentence.

Just One Space Please
Use just one space between sentences and words. This means no justifying. The uncomfortable widths of words in justified text are also difficult to read.

Good post. I’d like to add that simplicity is usually the best approach. Try black colored simple font on white background. Too much distraction on page with different colors will only distract the readers.

Nice tips! I love the styling guidelines and I’ve tryed to follow them on my personal blog. Also, I’ve tryed to always use Link Titles & always link to relevant articles either on my site or on another.

I like the idea of making articles print friendly. I hope the WP Plugin is easy to use.

Exactly my thoughts. Since its all read onscreen, a format should always be considered as an excellent tool to increase the aesthetics of a blog. I think the style sheet might need an artistic flair though.