Format Your Posts For Readability
August 31st 2007
As 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?
Read something useful? Subscribe!
Find other posts tagged with: Organization, Post Formatting, Prominence, Readability, Usability
Twitter
August 31st at 11:34 am GMT
Comment #1
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
August 31st at 12:00 pm GMT
Comment #2
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??
).
August 31st at 12:27 pm GMT
Comment #3
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.
August 31st at 3:31 pm GMT
Comment #4
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!
August 31st at 3:56 pm GMT
Comment #5
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.
August 31st at 3:58 pm GMT
Comment #6
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.
).
August 31st at 4:00 pm GMT
Comment #7
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...
August 31st at 10:16 pm GMT
Comment #8
Thanks for the link Michael! Like always, this was a very nice read.
September 1st at 1:03 am GMT
Comment #9
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/bl.....verywhere/.
Cheers!
Jeanne
September 1st at 12:57 pm GMT
Comment #10
Thanks Jeanne. I appreciate that, so thanks!
Sly - No problem.
September 1st at 2:44 pm GMT
Comment #11
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.
September 1st at 2:54 pm GMT
Comment #12
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.
September 1st at 9:01 pm GMT
Comment #13
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
September 1st at 9:23 pm GMT
Comment #14
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
September 1st at 9:55 pm GMT
Comment #15
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.
September 1st at 10:08 pm GMT
Comment #16
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.
September 1st at 10:08 pm GMT
Comment #17
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
September 2nd at 12:55 am GMT
Comment #18
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...
September 2nd at 1:14 am GMT
Comment #19
Marco - I like how you've styled that example you gave; a mixture of subheadings and blockquotes and lists, very well done.
September 2nd at 1:45 am GMT
Comment #20
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...
September 2nd at 12:37 pm GMT
Comment #21
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.
September 2nd at 1:02 pm GMT
Comment #22
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.
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.
September 2nd at 6:33 pm GMT
Comment #23
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...
September 2nd at 7:51 pm GMT
Comment #24
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?
September 2nd at 9:07 pm GMT
Comment #25
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
September 2nd at 9:08 pm GMT
Comment #26
oops...Michael, can you be so kind and fix the HTML entities I messed up?
September 2nd at 9:29 pm GMT
Comment #27
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.
September 3rd at 6:21 am GMT
Comment #28
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
September 3rd at 2:19 pm GMT
Comment #29
Just right. In particular, most people won't know about the ":first-letter" pseudo-class, which is very handy.
September 16th at 7:57 am GMT
Comment #30
It really helped me.