Format Your Posts For Readability
42As bloggers, we write pages upon pages of content each week. We spend hours promoting the articles, choosing the right words and trying to get our point across as clearly as possible. How can formatting be used to further improve our posts?
There are a few basic tools that you will have heard mention of time and time again, such as bolding words. The first section re-explains their purpose, and the second will explain how to perfect your usage of them to achieve optimal formatting.
The Formatting Toolbox
- Headings and subheadings. Posts usually cover 2 or 3 sub-topics of the overall post topic. If you don’t use headings to mark out the sub-topics, then the reader has no way of knowing exactly which topics have been covered in the article. What if they’re only interested in the last section? Mark out the last section with a good header, and they’ll know to read it.
- Bold keywords. A bold keyword is said to have more weight in the search engines. That may be true, but the best usage of bold formatting is when you can highlight a phrase which sums up the whole paragraph. If you removed all but the words in bold on this page, you would end up with a usable summary of the page.
- Italics. Italics are another, equally valid, method of highlighting certain phrases. Often I use italics for file names, or snippets of code in a paragraph. On personal blogs, it may be used to indicate sarcasm. Its meaning will depend on your own style of writing.
- Lists. Lists are a good way of presenting information.
- Spacing. In design, empty space is a powerful tool for creating a usable web page. The same rule applies to post formatting. Is there enough space surrounding your sub-headings? Are your lists and blockquotes indented?
The Finishing Touches For Perfection
When you have written a post, and applied the usual formatting to it, it is important to then preview your post as it will look when published. In this view, you will see it exactly as your readers will, and can make the final tweaks as necessary.
- Are your images dominating? Many posts may use images to help describe a point. They are a highly effective tool, but when they fall too close to a heading, they can often dominate the heading, rendering it less useful. The solution is to add extra spacing around the image. An example can be seen in this post on proximity in design. The second image has had extra spacing applied beneath it, in order to allow the heading enough room to be effective.
- Bold phrases should be physically separated. Bolding a phrase makes the text larger and heavier. When a bold phrase on one line is followed by a bold phrase directly beneath it, the two may appear to merge. This has been demonstrated in this paragraph.
- Line breaks may be used in lists. If a list has been used to convey short pieces of information, there may be no need for line breaks between the bullets. However, if each list item contains a full paragraph, as in this page, spacing should be used to prevent the list from becoming a daunting block of text.
- Text wrapping around inline images and adverts. I begin every post here with an inline image, and many blogs do the same with other images or adverts. These items should be positioned in a way that does not cause content to be laid out awkwardly. For images, this may mean resizing the image. For adverts, you may need to change the length of a paragraph, add line breaks or reposition a heading.
There are many different ways of using formatting, but the key thing to remember is to develop your own style, and then use it consistently. The way in which you choose to apply formatting is largely irrelevant, provided you format consistently. If your style includes using sub-headings, inline images, and italics then your readers will expect to find these things in all of your posts.
What formatting do you use formatting in your posts?
Enjoy this post? You should follow me on Twitter!
I’m still developing my own style, but I believe my Web Standards and Accessibility article is pointing into the direction of a style I’ll end up with…
I know that my last article breaks with the style, but I did it on purpose to underline the message. Although a consistent style should be a must for a blog, there are a few occasions where it is good to break with the “default” style :)
Nice example Marco. There are always exceptions to any rule, but in most cases, consistency is recommended. For a special article like that, then breaking the routine is fine (How could you not start a Star Wars piece with some nice yellow text?? :lol: ).
Thanks for your explanation. I think these things are effective when used properly and make things easier/less daunting to read.
At the moment I try to make things visually appealing with images to break up text (although sometimes when demonstrating something they’re not particularly appealing, but demonstrative). I think it would be a good idea to employ sub-headings aswell.
Great entry, in one time you pretty much summed everything up what I usually tend to forget in my posts :P. Formatting is definitely something I should pay some attention to although it’s one of those things for me I usually tend to think of only the moment I get it reminded like when reading an article like this, the years and years of writing mainly on forums I suppose have made me lazy when it comes to keeping effective formatting in mind.
So I’m afraid I don’t really come much further than lists yet, and even that took quite some effort to be honest. Sometimes I still catch myself of stuffing it into a paragraph and separating it with the semicolon.
And of course there’s spacing, but that’s simply covered by CSS so can’t really forget that.
I guess my style could be summed up as a slowly improving lack of formatting, 10 years from now I might actually be using all of it! :P
This is valuable stuff. When I go to various sites that I am unable to read quickly I pass. I am not an avid RSS reader so this is is extremely important.
Kristarella – For me, headers help a lot, but then again, I don’t use images as well as you do. For instance, your post on Google Analytics is already very well split up using images. Headings may or may not help that. It’s up to you really, so long as you never just present a wall of text to the reader. :)
Slevi – lol – Any improvement is still an improvement! I think I’ve been quite badly effected by years on forums as well (Not least, a slight obsession with smilies. ;) ).
Jake – Same here. There is so much content on the web, you don’t have the luxury of simply assuming that reading a page will be worth your time. You need to scan it first, and guess whether or not it’s worth reading.
If you can’t scan, I usually assume it’s not worth it…
Thanks for the link Michael! Like always, this was a very nice read.
Michael,
Just wanted to let you know that I’ve nominated ProBlog Design as one of my five recommended new blogs for Blog Day 2007. You can read my post at http://www.writersnotes.net/blog-day-2007-a-celebration-of-new-blogs-everywhere/.
Cheers!
Jeanne
Thanks Jeanne. I appreciate that, so thanks! :D
Sly – No problem. :)
Michael,
Excellent points. You can write the best content possible, but if it’s not formated well for the web it won’t be read by very many people. Your obviously know what you’re talking about as your posts are very visually appealing.
That’s true Steven, and something you’ve certainly realised on your blog as well. Your posts are always nicely broken up for easy reading.
Hi, Michael!
At Writer’s Notes, I use bolding, italics, headings, and empty space. One technique I use is to bold the first phrase or sentence in each paragraph, because I feel it helps draw the reader into the next paragraph, by drawing attention to it.
However, I hadn’t considered the fact that this initial phrase isn’t always particularly important, content-wise. In fact, sometimes, it isn’t even a complete thought. Yet, in general, the technique seems to work.
I tend to bold names and titles (of people, blogs, companies, or software, for example) and, often, important ideas that I want to emphasize, as you’ve mentioned.
Thanks for an excellent–and eminently helpful–post!
Jeanne
Hey Jeanne,
I did notice your style with bolding when I first visited. Highlighting the first few words was very distinctive. It could well be working!
Have you ever seen websites that use CSS to make the first letter of each paragraph huge (Like in magasines), or that make the first line of each paragraph be in upper-case? It reminded me a lot of that. :)
Highlighting names and such is definitely very useful.
Glad you found the article helpful!
Michael
Last week I noticed that lately I’ve been posting SO MANY lists and it’s become natural to do so. I’m trying to get back to regular writing though. Nice post.
That’s a good point ses5909. It’s definitely possible to go over the top. The effects lose their value if they are over-used.
A healthy mixture of paragraphs and lists is much better.
Michael,
I’m familiar with the concept of making the first letter of a paragraph larger than the others (as you say, from magazines), though I’m not certain I’ve actually seen it done with blog posts. Sounds like a great technique, though, for those who know how to do it!
Thanks again for a great post!
Jeanne
I was playing a bit with structure and style in my recent article and I wish I had a look at the comments here before doing so because I would have tried that capital letter and the bolding technique just to see how it looks like.
Still, I think the style I’m now using is quite good, just need a bit more tweaking…
Marco – I like how you’ve styled that example you gave; a mixture of subheadings and blockquotes and lists, very well done.
thanks, I’m still a newbie to blogging, but I have a feeling for design and layout (although I lack the skills to properly use any kind of graphics software).
That’s why I try to be very good when it comes to the usage of HTML/CSS and converting a layout to HTML/CSS. To be honest, that design of my blog is the best I ever created so far…
P.S.: I will try the capital letter and the bolding technique in the next article I write…which should be in two days or so because I got one article in the queue already…
Some useful suggestions there. I try to use as much of these as possible as it breaks up the text nicely. I’m very weary of having too uch text in one space on my sites. So subtle changes to posts like the ones listed are really useful.
Marco – The most recent post is great. I had a scan down it, and it was easy to pick out the bits that interested me. I loved your usage of the many images. That really livened things up. If you can find an appropriate image for a post, it usually does look good. :D
Daniel – Yes, having large blocks of text is probably the easiest way to scare off your readers. Ample spacing is a pleasure to read from.
Michael – Without your article I would have needed a bit more time to become that good in structuring my articles, I’m sure.
I just added a piece of CSS to try that “first letter of a paragraph larger than the others” idea. Feel free to share your thoughts, but I think it does look quite good, although it messes my story up a bit…
I actually prefer it on the headers. It looks a little too much on short paragraphs (Like in your story), but it looks really good on your blog on the headings. Have you tried applying it to only the headings? How do you think that would look?
well, I’m using the :first-letter pseudo class to make this happen. That’s why each paragraph gets the the capital letter. The CSS to do that:
div.entry p:first-letter {
font-size:1.5em;
font-weight:700;
text-transform:capitalize;
}
I’m now changing it so I can decide where I have the effect by using this CSS code:
div.entry p span.c_letter {
font-size:1.5em;
font-weight:700;
text-transform:capitalize;
}
You just have to wrap a <span class=”c_letter”> around the letter you want to capitalize and you get that effect. This will only work if the span is inside a paragraph.
e.g.: <p><span>T</span>he first letter is huge[…]</p>
I believe this method is way better because it gives you a bit more control on the layout…only problem is that I need to edit older articles if I want to use that on them…I edited the Peter Gabriel article just to see how it looks like :)
oops…Michael, can you be so kind and fix the HTML entities I messed up?
Thanks for sharing your technique with other readers. :)
I wouldn’t worry about going through old articles though. It’s not worth the effort. If it’s a style you like, then just start using it in posts from now onwards. Don’t worry about the oldies. (It can actually be good to leave the older ones as they are, because it shows your blog has developed)
And sure – Cleaned up now.
thanks :)
I think if we are already talking and testing this technique, I should at least also show the code and explain how this can be achieved in case someone else don’t know as much about CSS and would like to also use it :)
Just right. In particular, most people won’t know about the “:first-letter” pseudo-class, which is very handy. :)
It really helped me.
This information is really treasure. I have learned a lot from it. I’m sure after reading this post any one can now do a effective website.
Great post on formatting and readability. Could you explain how you created the green boxes around your sub-titles “The Formatting Toolbox” & “The Finishing Touches For Perfection?” This really makes your post pop.
The instructions and advices that were given in formatting a post are very useful. This post is really providing the users with reliable instructions.
This kind of post will really be very helpful and useful for the majority because the instructions that were stated are reliable to use.
Excellent. Great tips for having a well written and informative blog – essential for success!
Thanks for the info,,, I love it
Formatting is important because its like the finishing touches which we give to a product we’re about to sell. Its really time consuming and a headache to do the formatting so even if I hire someone I prefer to get the formatting done as well.
I am still in the prcoess of learning how to blog. The information that I have obtained has been very helpful and useful. It is really a good idea for companies and businesses to post blogs!
Very nice post. I just stumbled upon your weblog and wanted to say that I have really enjoyed browsing your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again soon!
I agree with most of your points, but a few need to be discussed further, I will hold a small talk with my partners and maybe I will look for you some suggestion soon.
Hi, nice blog
I like the readability features of this site. I will keep applying these post formatting guides. Thanks.