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].
All very good tips. I already use most of them but appreciate the couple of new ones I don’t.
The line spacing is particularly important. People want to CRAM their blog with content. Space it out, loosen it up. Make it easier to read.
When I made this change to our blog – http://www.riggsfamilyblog.com – it made it much more readable and comfortable on the eyes.
Brent
http://www.brentriggs.com
Hi,
Thanks for your great information. I am going to fix the line height in my posts, and offer a printer friendly version right now.
Cheers!
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.
Cool! How about line spacing together with justified alignment? How do you find it?
The first point is totally new to me. I believe my Blog Theme is already optimized. Giving Printer Friendly Version of Post is a nice idea. I want to try it my self.
I already use Title tags and Mix lists and paragraphs. I am yet to use the On-page Anchor thing.
Linking generously is a thing every body should do. It will make the links natural and it is good for SEO both for linker and the linked website/blog
Being a relative novice at blogging, I was not aware before now how to do the title tags and anchors. Thanks for the great information!
So far we were only concentrating on ther quality of posts. But after reading this we realise that everything should be perfect to get noticed and stand different from others.
Point taken and will work on weekend on this.
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.
Thank you for the printer-friendly format–it is much appreciated. I am always frustrated when I try to print blog posts to read during my commute!
Thanks! I did not realize that the line spacing can also be troubling for any reader. I should start to experiment the best settings or follow your recommend style just to make my posts less cramped.
Hi Joy,
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!
Anyone know of a blogger plugin or similar that could help Joy?
Ali
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!
Yesssss. Thank you for writing this. So dead on, it’s not funny.
Great post, you raised some really useful points that hadn’t even crossed my mind before. Thanks!
Nice one there Darren and Ali. Loved the HTML brush up I had after so many years. Heard of HTML5 being used by Google in their mobile applications? Yeah, they are.
HTML5 is the latest schema of developing HTML(code, blah) accepted by W3C.
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!)
As for point 1 is concerned, it would entirely depend on the fonts used on the site. Thanks for the post very helpful information.
Cheers,
Eddie Gear
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.
Have a BLOGGER Account? Want a Printer Friendly Blog?
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):
Blogger Buster: How to Print your Blogger Posts Effectively
This set will teach you how to take care of the odd and ends on you Blogger account for printing:
Digital Inspiration: Blogger Hacks: How to Enable Printer Friendly Pages in your Blog
I really really to increase the line spacing on my blog but until you mentioned it I had never thought about it. Looking at it now though, the text does seem a little cramped.
That’s a few nice tips on writing on the web. I think we should always let our readers have more comfort in reading.
Just wanted to thank you all for the comments (I love guest posting here on ProBlogger, the feedback’s always really encouraging!) Glad that some of the tips have helped out.
Jeriko, cheers for that addition about the line-spacing. :-)
Some great points in this post!
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.
that’s way also useful when you use ” read more ” on your main page .. the reader can easily find what he looking for ..
thank you again .. you solve my problem..
Thanks Ali for these things. I found that #1 useful. My post is much easier to read than before.
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.
This comes very very much in handy as I am JUST “creating” a new theme for my blog =)
(more like editing an existing one though)
Excellent tips, very handy indeed I especially enjoyed the fourth tip.
@thepsychsheet.com. Fabulous advise with tips I had never considered, like printer-friendly posts and creating a style guide. As a former print reporter, I’m all about consistency.
What excellent advice! I hadn’t considered the very simple things like line height and print option. Just goes to show that the best writing is writing for the reader and their needs.
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.
Excellent tips. I knew most of them already, bu there are some really useful new ones among them.
Thanks for the tips. I’m slowly starting to learn more about customizing my basic blog, but the line spacing is a great tip, as well as the title tag for links (I didn’t know that was possible).
I’m applying the fist one :)
Ace tips!
Amen to the item on style.
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 most important thing from from your list above, IMHO, is creating a style guide for yourself. Once it set up, there you go, because here, we talk about display.
Interesting list though, i’ll try it. Thanks a bunch.
Never thought about Number 2. Making PDF links for longer post. This is convenient for readers. Thanks!
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.
I edited my blog’s stylesheet and I can just see the result.
Thanks Ali.The other points are also interesting and I would like to implement them on my blog very soon.
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.
DO NOT use Arial for body copy. That face was designed for headings, not for copy.
Here’s a good test. Go to the local bookstore and start browsing the books. Try to find one that uses Arial (Helvetica) for body copy.
You can’t and that’s because professional publishers (as opposed to bloggers) know which face to use for what.
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.
I never ever thought about the line spacing aspect. Really a very important yet overlooked aspect on a blog.
The TITLE attribute in link tags should be used judiciously — don’t overdo it: http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-title-attributes/
Link Anchors…I always wondered how to do those. Thanks.
Hi Ali,
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.
Those are very good tips. I wish I know that earlier, now I need to rewrite my website :-)