When I asked what the most important aspect of design was, many of you replied that it was readability; how easy it is to read your content.
People come to your blog to read articles, and the easier they are to read, the better. A design that obscures the content will only turn visitors away.
So what can we do to increase readability, and keep those readers reading?
30 Things That You Can Do Now
- Underline your links. Readers expect links to be underlined, so don’t disappoint.
- Use appropriate space between lines in a paragraph. A quick way to test this is to divide your line-height by your font-size. Ideally you want a value around 1.5.
- Clearly separate your post from the rest of your design. It should be obvious where the post starts and stops. Your sidebar, comments, post meta etc. should be visually distinct from the actual content.
- If you use pull-quotes, make sure they’re extremely obvious and near the top of the article. If a user doesn’t spot them quickly, they aren’t of much use.
- Keep it brief. Odds are that if you’ve written something in 50 words, you could probably say it just as well in 30.
- Use Snook’s Color Contrast Checker on your font and background colors, to ensure the combination is readable to those with visual impairments.
- Use a structured hierarchy in your document, e.g. Title – Intro – Heading – Text – Subheading – Text, etc. This gives your page a more logical flow.
- Refrain from breaking up posts with adverts in the middle. This will interrupt the readers thought train.
- When styling italics and bold, there is usually no need to change their color. Doing so will only confuse readers about what is and isn’t a link.
- Use semantic markup, i.e. h1, h2, h3 for headings, strong for bold etc. Many of your readers will be reading your content in a feed reader, where your <span class=”myheading”> will have no effect.
- Use post images at the start of the post. In most cases, their purpose is to draw users into an article. Naturally, they do this best at the top of the article.
- Blocks of text are bad. Nothing scares a web user away more than a wall of text. Liven things up a little!
- Left aligning is usually best. Very rarely is centered or justified text going to look better, and I can’t think of any time when right aligning is the best choice.
- Take care with text wrapping. Depending on how your text wraps around an image, you may want to rephrase the text, or resize the image to let things sit better.
- Headings and subheadings must stand out. One of the major benefits of using headings is that readers can scan down and see exactly what is in the article. This only works if the headings stand out, so feel free to use larger fonts, underlines, colors or whatever else is necessary.
- Know when to use an ordered list, and when to use an unordered one. If your bullets are in a particular order, then number them.
- Indent your lists. Show that they aren’t just more paragraphs.
- If a certain image plays an integral part in your post (e.g. a diagram or chart), then center it, and skip a line before and after. This shows that the image is a part of the article, not just a decoration.
- Remember that your posts may not always be read on screen. Set up a print stylesheet to keep your articles looking good on paper as well.
- When choosing what font to use, choose a common font that everyone has.
- If you add a “PS – I forgot to mention that xyz…” to your post, style it in italics to show clearly that it is an addition to the original post.
- Highlighted phrases should be the same font-size. Changing the font size will change the height of that particular line, breaking the flow.
- DON’T USE ALL CAPITALS ON BODY TEXT. Making all of the letters a similar size reduces the different between them, making it much slower to read.
- Don’t use SnapShots on your links. Whilst the feature may seem cool the first time, it becomes a pain in the neck the rest of the time. The pop-up covers a good few lines of text every time you accidentally hover over a link.
- Keep lines to a reasonable length (Under 100 characters). Liquid layouts often cause the content area to stretch on wide monitors, making reading much more difficult.
- Too many paragraphs is better than too few. When writing on paper, paragraphs might commonly be 4 or 5 sentences long. On the web, shorter paragraphs of just 2 or 3 sentences are common because they present the point of the paragraph in a nice, bite-size chunk.
- Keep your sidebar short. The sooner your sidebar ends, the sooner it will stop competing with the article for attention.
- If you use pagination (Splitting one post onto several different pages), then make sure the post navigation is clear and easy to use. Also, begin the post with a quick table of contents so that users know what they can find.
- A faint gray color works well for that information that has to be there, but isn’t crucial (e.g. the post date, author etc.). The faint color means the line won’t draw attention.
- Use the acronym HTML code to expand acronyms that readers may not all be familiar with. Use CSS to style the acronym with a dotted bottom boarder (The common convention).
There is a lot that can be done, and that’s only the visual aspects. Just think of how much your actual wording matters.
What do you do to increase readability on your blog?
Custom Search
David Airey (55 comments)29 October 07
Excellent points, Michael.
I particularly like blogs where the sidebar ends sooner, rather than later, quite like this one. It keeps the emphasis on the blog post, rather than superfluous widgets and advertising.
AL (11 comments)29 October 07
Surprisingly, you’ve missed the most important but commonly ignored point: use legible font size.
I have a perfect eyesight, but I usually increase the font-size of just about every blog I want to read an article in (ehm, including this one). Maybe it’s just me, or my low-end work monitor, but I try to keep my eyes happily reading all the time.
I’ve actually written a post a while ago about why I think IE dropped the ball big time on helping users read web pages at a comfortable font size.
Speaking of which, what do you think Michael: is it the job of the web designer to have legible font-size or should this be the responsibility of the browser to enable users to increase the font size?
There seems to be a bit of controversy regarding who’s responsibility is what.
Sumesh (39 comments)29 October 07
Hi Michael, I’ve dugg it here -
http://digg.com/design/30_ways.....adability/
Sumesh,
http://www.techzilo.com
jsanderz (6 comments)29 October 07
Michael,
This is an excellent article, I must admit I don’t do alot of these, this is going to be printed out and will go up on my wall.
Regards.
Elliott Cross (16 comments)29 October 07
Excellent list Michael! One suggestion that I have been using is to use the “preview” function in WP when I am writing. I find this extremely helpful to visualize what my post is going to look like on my site before I officially publish it.
ps. Don’t forget grammer and spell checking too!
Rachel Bowen (10 comments)9 November 09
Would be good if you checked your grammar, not your grammer.
pelf (32 comments)29 October 07
OK, I think I am doing fairly well and I hope my blog is “readable” enough
One more thing, we do not just underline our links because” our readers expect links to be underlined.” One of the things that I have learned while blogging about disability-related matters during Blogathon 2007 was that links that aren’t underline wouldn’t be picked up by screen readers used by blind bloggers.
Whatever it is, some indication that “links are links” are crucial
Robert (10 comments)29 October 07
Great Post! Now I need to go back and make changes!
Will Wilkins (1 comments)29 October 07
21. If you add a “PS – I forgot to mention that xyz…” to your post, style it in italics to show clearly that it is an addition to the original post.
You can also insert additions like this by wrapping in the ins tag and then styling it with italics or however you like.
Nice post though.
Rachel Bowen (10 comments)13 January 10
Using a lot of italics, makes reading very difficult – has been proved by research.
Michael Martin (1319 comments)29 October 07
David – Likewise. That’s one of the best things about a 3 column layout I think. It makes much better use of your horizontal space, so that the vertical length is less.
AL – That’s a good point. I thought about it actually, but decided to leave it out for 2 reasons. The first is that it’s pretty common advice (By now, most people will know that 10px fonts just aren’t smart…), and the second is the one you mentioned. I know that the typography isn’t perfect on this site, but I can’t fix that easily (This whole layout is based off the font-size.
).
I also like your second question. I’ve listed to that podcast before, and it was a great piece. Personally, I think that it’s both. The browser can only do so much with a terrible page, and likewise, a great page won’t be much good in a terrible browser. Browsers should offer the ability to increase font size, whilst page coders should create good markup that allows for browsers to resize.
If I had to lean to one side, I’d say that lately, it has come to lean more and more on the side of the browser makers and the users. FireFox and IE7 can both resize the text here, but IE6 can’t. IE6 is old though, so I’m not worried about that. The browser makers have fixed the problem with their new version, so it’s up to the user to get a hold of a modern browser.
Sumesh – Thanks. I’ve added a Digg button to the article. *fingers crossed*
Jsanderz – There is a lot that can be done, but I doubt that any of us can do it all, all of the time. If you can get a few good practices into your head though, most of it will become second nature.
(And thanks for proving point 19 right. 
)
Elliot – That’s a good point. I use Windows Live Writer to write posts, because it lets me write straight onto a backdrop of my blog. It’s great for the reason you said; your article could look completely different on your blog than it does in the WP text editor.
Pelf – Hmm… are you sure about that? I’ve never actually used a screen reader, but that doesn’t make much sense to me. The visual appearance is all controlled by CSS, and screen readers don’t use CSS at all. To detect a link, they would just read the HTML and look for the a href=”…” markup.
eg. Does that mean that if I underline a normal word, is the screen reader going to pick it up as a link?
Robert – lol – Good luck!
Will – True. ins is definitely the right markup for it. In terms of pure appearance though, the italics are important. It’s just another convention (Though not as set in stone as some of the others).
Jake (3 comments)29 October 07
Thanks for the quick comment Michael! I literally just posted that entry…you’re on top of it!
goldfries (81 comments)29 October 07
eh, the links on your columns are not underlined.
Anyway one of the ways to make a link be a link would be to dedicate a specific color for it.
Michael Martin (1319 comments)29 October 07
Jake – lol – I picked up on the trackback. I practically live in the WordPress dashboard.
Goldfries – I was talking about articles and posts. Your idea works for regulars who know the system, but what about the first timers? Why would you force them to learn your system? I know it’s only a little thing, but the less they have to think about, the better.
Brian Purkiss (24 comments)29 October 07
Good post!
I’ll have to remember them!
shivam (3 comments)29 October 07
Hey a great help, i modified many things by these points. But still feel there may be somethings I might have not understood. Would be great if I am able to put all these points in mind when I am up for a new project.
Take a view of the site… I think U may notice.
redwall_hp (139 comments)29 October 07
My readability advice: DO NOT have a black background and white text for your main content. Black on White = Headache.
Bev (2 comments)17 December 09
I remember the first website I ever built was about 10 years ago and I had red text on a black background. I thought that it was really stylish at the time! LOL.
Michael Martin (1319 comments)29 October 07
Brian – Glad you liked it.
Shivam – Practice makes perfect. As you try things out, you’ll see the difference yourself. If you like a certain thing (e.g. Say you used to use a lot of capitals, but tried an article without them now), then you’ll notice the difference, and keep on using that.
Redwall – It does work sometimes (You need to increase the weight of the font a little, at the very least). It’s just that it isn’t often done well. For large articles though, I agree.
goldfries (81 comments)30 October 07
Hehe, I was pulling your leg there.
Anyway, I don’t have a fixed way to style my links. My company website has all links underlined. My blog on the other hand has a mix.
redwall_hp (139 comments)30 October 07
You’ve probably heard of the two huge Harry Potter news sites http://www.leakynews.com and http://www.mugglenet.com.
For two years I used Mugglenet, but I got fed-up with the dark background, the short little “news bites” instead of real articles, and the lack of professionalism. So I switched to Leaky Cauldron. None of my complaints apply to them, and I’ve become a big fan of their site.
The dark background really got on my nerves after awhile, and was a major cause in me switching.
Michael Martin (1319 comments)30 October 07
Goldfries – lol – Good of you to keep me on my toes.
Redwall – Yep, I’ve visited them both a fair bit. I don’t read either of them regularly though (Just every now and then when I take a HP notion.
), but I prefer Mugglenet for its little news bites. It’s easy to scan down the homepage every now and then.
I suppose that if you’re a regular reader though, more substantiated articles would be nicer, and the black would definitely take its toll. I can definitely think of times when I was reading longer pages on Mugglenet and had to just sit back and blink for a few seconds because it was hurting my eyes. xD
pelf (32 comments)30 October 07
@Michael: OK, maybe I got that wrong, but it does makes sense to underline links so that readers who are colour blind can recognize them as links?
I’ve seen bloggers whose link colour is similar to the text colour that readers who aren’t colour blind have difficulties detecting the links.
Michael Martin (1319 comments)30 October 07
Pelf – Underlining them for color blindness makes a lot more sense. That’s a very good point.
kristarella (141 comments)30 October 07
Yay for the acronym tag! I haven’t heard of ins… I’ll have to check that one out.
Fairly unimportant thought: lists aren’t indented in RSS readers
oredering still works though and is useful.
I think I glossed over your print css post – I’ll look into doing that!
Michael Martin (1319 comments)30 October 07
Kristarella – Ins stands for “insert.” It’s just a way of showing that the line was added after the original post. I’m not entirely sold on whether or not it’s worth the effort for a blogger though (I don’t use it).
There’s a good post on this and a few other tags on it at BloggingTips.
As for the indented lists; that depends on your reader. In Google Reader at least, they’re indented.
Elliott Cross (16 comments)30 October 07
@ pelf and Michael,
One other issue about links is using a “hover” or “active” state in the CSS. This is another method to help identify where the active item is on the page for people that use the “Tab” key.
Generally, you can change the background color or something else to make it friendly to see where you are on the page if you aren’t using a mouse. Works great and adds to the accessibility of your site.
pelf (32 comments)30 October 07
@Michael: WooHoo! At least I got something right
@Elliott: That’s a very good tip! Thanks for sharing
Michael Martin (1319 comments)30 October 07
Elliot – That’s very true. It’s also worth adding a :focus state now, for non-mouse users.
Pelf – lol – You taught me something new! Thanks for sharing it.
sbpoet (10 comments)30 October 07
I had never heard of the acronym HTML code before — that will come in handy (already has, today) — thanks!
I’m thinking about the underlined links. I use color — but had not thought about color blind readers. I do a lot of linking-out, and all that underlining seems visually cluttered to me.
But, back to the thinking cap…
And to the Dig button — which I’ve never used until you & Skellie came along.
Michael Martin (1319 comments)30 October 07
Underlining can get messy when you have a load of links together (Usually in a sidebar), but it’s not too bad in articles I think, unless your text is cramped together.
As for the Digg button, I sometimes put it into my better posts (The ones I think might have a shot at the front page). You only have 24hrs on Digg to get to the front though, so after that time, I remove the button again (It’s no longer useful
).
kristarella (141 comments)30 October 07
I figured it was short for insert – I’d never seen it as an html tag before. I’ve just used ’strike’ for crossing stuff out.
That was a pretty interesting post. Thanks for the link.
shivam (3 comments)30 October 07
Thanks for the quick review, I am constantly working out with experiments. And I use forums to get advice on them… and I cover each single bit of them. These tips are a ready reference for me and I’ll try to cover up them too.
Michael Martin (1319 comments)30 October 07
Kristarella – The effect is pretty much the same, but the semantics of the new tags are better. It’s similar to how “i” is almost the same as “em.” The difference is that “i” is about presentation, wheras “em” is just saying that the text should be emphasised.
It’s the same with “strike” and “del.” Del doesn’t imply any sort of style. It’s better semantics.
Shivam – Glad to hear it. That really is the best way to learn and to improve your site.
Seattle DUI (1 comments)31 October 07
Tight article. I am always adding Internet marketing tips to my SEO/SEM knowledge.
Steven Snell (24 comments)31 October 07
Nice points Michael. Your blog is very easy to read, so you know what you’re talking about.
Deron Sizemore (34 comments)31 October 07
Nice tips there. I probably need to start underlining my links. It’s something that I’ve never really liked to do just because I like who it looks without them underlined, but users do expect it in most cases. I like to underline on hover though.
Sumesh (39 comments)1 November 07
Too bad this didnt make the front page of digg. Though i see you’ve got 19 diggs.
Lists like these usually top digg, I guess you’re unlucky with this one.
Never mind – have fun
goldfries (81 comments)1 November 07
Well, AFAIK links are underlined by default.
I usually don’t underline links. Not that I use links often in my post anyway.
shy guy (1 comments)3 November 07
First time visit this blog..
Good info ,,,
I think passion and commitment is most important thing to improve readability..
Vishal (1 comments)3 November 07
this is my first article i have read on your site. its brilliant! I will be here often!
Laarni (4 comments)3 November 07
Helpful article. Yeah, I hate SnapShots too!!!!!
Michael Martin (1319 comments)3 November 07
Seattle – Glad ya liked it.
Steven – Thanks. It’s not a problem for you either I’ve noticed.
Deron – There are some cases when it’s fine. You can be your own judge.
Sumesh – It got a tonne of Stumbles at least. I was more than happy with that.
Goldfries – Yup, they’re usually underlined by default. That has all added to the convention.
Vishal – Glad to hear it. I’ll be expecting comments often as well then!
Laarni – Can’t stand it. xD
Dominik Lenk (25 comments)5 November 07
Actually, a comment that I have about readability is that using a font with a bigger x-height is nice. However, this is often not possible as the client might not have that particular font installed. Therefore, I find myself specifying lots of fall-back options using css. (Lucida Grande being the first choice.)
Something that also greatly improves readability is making the font size smaller—yes, smaller—and the line-height bigger. This gives the impression that you use a bigger font, while it actually takes up the same amount or even less space. (I will do this to my own blog in some time as the body text is a little too big anyway…)
Michael Martin (1319 comments)5 November 07
Dominik – Fonts are definitely awkward to choose with such a limited selection. I tend to fall back to Arial in most cases, though there are times when I’d specify another font (Helvetica and Georgia are 2 good ones
) for certain situations.
As for the line-height, that’s a good point. It only works in some situations, and there are limits, but a lot of leading is definitely preferable to very little.
Dominik Lenk (25 comments)5 November 07
Micheal – Arial? {cue: everybody start screaming}
I’d use Verdana instead, even though it is also not the best choice from a typographic point of view. It’d be interesting what other people think about this…
Michael Martin (1319 comments)5 November 07
I know it’s not the best font, but you do get used to it. PBD is in arial (When Helvetica isn’t available), and I’m happy enough with it.
Verdana characters are very wide. Too wide I’d say at the size of font I’m using here.
Dominik Lenk (25 comments)5 November 07
If Verdana is too wide: What do you think about Trebuchet. It is also readily available on client computers.
Another alternative would be the new vista fonts, but I haven’t tried those out.
Luckily I have Helvetica, so I do not have to endure PBD in Arial;-)
If you are interested in typography you should check out ilovetypography.com, if you haven’t already. (The site is booming.)
Michael Martin (1319 comments)5 November 07
Trebuchet is nice (Using it in a project right now actually! xD ), but Vista is nowhere near popular enough yet for its font set to be of much use…
And yep, I’ve seen the site. It’s very good.
kristarella (141 comments)5 November 07
When choosing fonts I just get overwhelmed with choice and the possibility that others won’t have them so I tend to choose one specific font that I’ll think they have and then just sans-serif (or serif if I was going with that). Perhaps I should make a list of fonts that I like and that most people have so I have a reference next time I’m designing a page.
Portuguese Breakfast (1 comments)20 November 07
I now feel more used after implementing these ideas. Being used is nice.
Whatever-ishere (1 comments)21 November 07
thanks for the GREAT post! Very useful…
Michael Martin (1319 comments)21 November 07
Portuguese Breakfast – Haha – In this case at least!
Whatever – Glad you liked it.
Mariobox (1 comments)23 November 07
I especially like #24 and #27, since they advocate uncluttering sites. Too many bloggers fill their sites with useless widgets, images, etc. all competing for attention, without any focus. Usually, the main call to action will be lost in the clutter and conversion suffers. Sometimes giving less options is better for business.
Michael Martin (1319 comments)23 November 07
Clutter is one of the bigger problems on the web these days.
Black Zedd (7 comments)26 November 07
I’m using a dark (black actually) background instead of a lighter one.
It smoothen the glare to the reader’s eyes. Reading on white backgrounds are like spotting text on a florescent light.
Michael Martin (1319 comments)27 November 07
Black text on white is very clear to read from. It is definitely a bit of a shock if you’ve just been watching a movie/reading a black web site, or anything else that was dark.
Beyond that, I think it’s better a lot of the time. Black however can be just as legible, and often more artistic (Black background is less common that white these days).
Raphael Roale (1 comments)14 December 07
Great article. Some comments:
#1 – Underline the link may not work depending on the theme you are using. But you MUST use a mark (change color and the font style, like bold)
#24 – SnapShots are really disgusting. Makes reading a painful task.
Michael Martin (1319 comments)14 December 07
Raphael – There are times when underlining isn’t ideal, but whatever you use, it needs to be extremely distinctive (Which is why I usually recommend underlines
).
Bolding on rollover is a little iffy because it changes the size of the text, pushing lines up and down.
Totally agreed on the SnapShots though!
Webhosting Reviews (1 comments)10 February 08
You live by your post as manifested by problogdesign.com.
Chris Leone (1 comments)25 March 08
Informative and insightful post, Michael. So often, it’s the little things that make such a big impact on the quality of a product or service. Blogs are no different.I plan on using this information in my entrepreneur blog.Thanks for the tips!
Michael Martin (1319 comments)25 March 08
Chris,
Agreed. Little changes can add up to a big difference.
Mikko (5 comments)21 April 08
Wow, another wonderful post.
I usually don’t use pull-quotes.
The PS part, I also do italicize them!
Rob (35 comments)4 May 08
Michael, I really appreciated the tips in this post – in fact, I posted a link to it in a recent post of mine.
I tried underlining the links, but in the sidebar especially, it really looked bizarre since it’s mainly links. Maybe there’s something I could put in the code for the sidebar so that the links there aren’t underlined?
Anyway, thanks for some great tips. Some bloggers who read my blog thanked me for the link to this post.
kristarella (141 comments)5 May 08
Hey Rob,
I think it’s ok to underline links in posts and articles, but leave sidebar and navigational links plain. It does depend on the way you present the sidebar and navigation, but generally people expect lists in sidebars to be comprised of links, so not underlining for the sake of de-cluttering is okay.
To do that, you need to find what your sidebar is called – I just had a look and the id assigned to it is r_sidebar. So in the CSS try to find something that says
#r_sidebar a {some styles here
}
If it’s not there add it in and put
text-decoration:none;in between the curly braces.Rob (35 comments)6 May 08
Thanks, Kristarella! That worked great!
Rob (35 comments)6 May 08
I changed things back to the way they were. I think the blue of the links is sufficiently different from the black of the rest of the text that even color blind people can spot the links. I just didn’t care for the look of the underlining. Sorry.
Rachel Bowen (10 comments)9 November 09
You do ned to be aware that there are different ‘levels’ of colour blindness, or Daltonism. It isn’t just a case of some people, more men than women (9 to 1) can’t see any colour. some can’t differentiate between greens and yellows for example.
In the documents I create, I do use some colour, but so far, we haven’t had anyone who suffered from Daltonism using our documents.
Shivam (3 comments)6 July 08
Hey everyone is getting a photo on the right column. How do I do that, I also want to join the community.
Michael Martin (1319 comments)6 July 08
Shivam,
I’m glad to hear you do!
The little pictures are called “avatars.” To get one, you just have to sign up (for free) at http://en.gravatar.com/, and upload your picture there.
Then when you comment here with the email address you registered to that site with, your avatar will automatically appear.
More importantly though, it will also appear on thousands of other blogs that use Gravatar as well, when you comment on those.
Cory (2 comments)24 July 08
Great Tips! I think I have a pretty good handle on most of them in my blog. I’m certainly guilty of having a pretty tall sidebar. I have a lot of content that I want to be available to readers at all times. I’m not sure how else this can be done without putting them in the sidebar. I guess I could prioritize my sidebar items, but for some reason I think they should all be there. Any suggestions?
angela (2 comments)22 August 08
It’s funny, because I always thought long sidebar (blog rolls) looked great. Now I’m reconsidering. In my other blog (wordpress) I have the monthly archive and catergories as a drop down menu.
Etienne (1 comments)27 August 08
This is extremely valuable information. I used this post to help me design my blog and will use it again in the future, thanks.
tomirk (1 comments)7 October 08
Very usefull article. I will use these tips on my blogs. I’ve added a link to this article on delicious because is worth of it.
annant (1 comments)22 October 08
thanks for da tips!
ive disabled snap shots feature in my bloggie…
Anil (3 comments)24 November 08
Thank you ! Good tutorial. I have a perfect eyesight, but I usually increase the font-size of just about every blog I want to read an article in (ehm, including this one). Maybe it’s just me, or my low-end work monitor, but I try to keep my eyes happily reading all the time. http://www.cheapstuffforbaby.com
Anil (3 comments)24 November 08
This is an excellent article, I must admit I don’t do alot of these, this is going to be printed out and will go up on my wall.
john - laptop (8 comments)27 November 08
i agree with your opinon. thank you for this post. very intresting. i like it.
Diane (2 comments)3 December 08
Excellent article and it really summerizes everything in a nutshell. Thank you so much for sharing.
Galwin (1 comments)28 December 08
Wow! Since I read this, I’ve been re-writing my codes. Thanks!
prateek (2 comments)6 January 09
WOW!
Thanks dude for this exhaustive list on how to improve readability! I am definitely bookmarking this list for future reference.
To add to this list, making the content engaging and humourous also helps a lot relax the atmosphere of the blog and perhaps attract comments..
keep posting more like this and you will see a religious folllower..hehe
zara clothing (5 comments)7 January 09
Yes, underlining links would help, but they would look ugly
Michael Martin (1319 comments)7 January 09
Depends on how you do it. It can look ugly of course, but it can also look great. Most of the time though, it doesn’t look either. It’s just usable, which is all you need it to be.
Snake (14 comments)12 January 09
I think that underline the links will help to the users to know when is a an External Link, but there are many things for customize with CSS.
TutorialCompiler (5 comments)15 January 09
I really liked your article. May be an update would be helpful.
Great tips
Sean (3 comments)18 January 09
Nice post, some things there I definately wouldn’t have thought of, but that I might try to incorporate into my blog.
BK (3 comments)3 February 09
Use footnote
Supermance (5 comments)11 February 09
im just about to start learn css technique to increase readability on my blogs …
debt consolidation (3 comments)16 February 09
I am surprised I have missed out on so many excellent points to improve the readability of my posts. surprisingly, most of them are simple common sense. but thanks for opening our eyes man! really.
Deepak (4 comments)24 February 09
The best way to get traffic is to give good and related comments.And the look of your template should not be crazy.It should be simple and you should update it daily.Thank you.
Creare Design (2 comments)25 February 09
Couldn’t agree more with the points in your articles, readability is so crucial but still you find ‘web designers’ completely missing the point and not even adding structure to their content.
Pramodh (2 comments)26 February 09
The best way to get traffic is to give good and related comments.And the look of your template should not be crazy.It should be simple and you should update it daily.Thank you
SJL Web Design (10 comments)26 February 09
I love snook’s contrast tool, it’s little tools like that, which ensure that your site works for everyone. Readability is one of the core things you should be thinking about when designing, if people can’t read your content, why are you building a site?
Michael Martin (1319 comments)27 February 09
Ah, I haven’t used that tool in ages now. I forgot all about it, it was brilliant! Thanks for pointing it out.
Milton Keynes (3 comments)4 March 09
There are no where near enough posts on readibility, you made some excellent points too. I hate huge sidebars, they always distract me from the article text. Thanks!
Mainak (1 comments)4 March 09
Amazing posts!! I must say this blog encapsulates all the essentials of good blogging in a a nice package!! Very useful indeed!!
peter (6 comments)13 March 09
i interested about ways to improve readability/ and this advice.thank you
Dream (5 comments)14 March 09
good info, I will continue to pay attention to it
karthik (1 comments)16 March 09
Nice info. Everything you have listed out here is 100% true. Thanx for the great information.
bags (1 comments)21 March 09
Bolding on rollover is a little iffy because it changes the size of the text, pushing lines up and down.
Tomstricks (4 comments)22 March 09
Very nice and informative article.THANKS FOR THIS VALUABLE iNFORMATION.
web design norwich (3 comments)24 March 09
Great usability tips, thanks. Like Jakob Nielson, but also giving good design some freedom!
Raju (3 comments)24 March 09
Brilliant article man… loved it
Vu Tong (1 comments)25 March 09
Thanks for the list, quite useful tips listed.
Jitendra Vyas (1 comments)26 March 09
This post is a must read for every Designer and client too. both can learn . I like vey much this article. this is the first post i read on this blog. and found better one at start. now i will read all posts and now i ‘m adding in my rss reader.
I didn’t get #18 and #21 properly . can anyone explain?
dani (4 comments)29 March 09
Michael,
Nice list..
#13. Justified text sometimes look better on wide enough area, and right aligning maybe better for Arabian or poems
# 21.
semantically, I guess we should use
insordel+ins datetime="..."rather than justitalicorem?Rachel Bowen (10 comments)30 March 09
Point 13, Left justification is good, complete justification is VERY bad, causes all those long breaks between words when the line length is very short. You can’t think when right justification would be a good idea – when writing an address in a letter format is one use, and when aligning figures in a column is another.
I’ve been trying to encourage a very stubborn layout person not to use columns which are too narrow, – she says that she has found info on the net which says that the narrower a column, the easier text is to read, which is patent nonsense. Any pointers to guidelines for column width. When I did my Master’s degree in Reading, (not the place) we studied eye movements, ideal text line length etc, but she doesn’t want to believe me.
Rachel Bowen
Rachel Bowen (10 comments)30 March 09
Point 23, additional information.
When we read, we don’t just read the letters, we synthesize, and to do this we look at the shape of words, when one uses all caps, there is no shape, all words are the same shape.
Rachel Bowen (10 comments)30 March 09
Point 2, additional info.
When you design the styles for your document, build in the spaces between paragraphs. that is the ’space above’ and the’space below’ usually in points, but sometimes given in cms. That way the space is consistent, and no need to do a carriage return to get a space between paragraphs.
This applies for print or on-line design.
Rachel Bowen (10 comments)30 March 09
Point 15.
I wouldn’t recommend using underligning at all nowadays, except for a link, as this is what we expect underlining to do – lead us to the place of the underlined text.
Nieruchomosci Gryfino (1 comments)17 April 09
Avoid walls of text at all cost. Preferably use lists to convey your message – they’re the easiest way of reaching your readers.
Electric Drum (7 comments)19 April 09
I think its a great idea to have a duel readership path like you have used in this article. You have the word for word article as it is written and then you have used bolding, headlines, etc. to make it easy for those who want to skim through and read just the main highlights.
Rachel Bowen (10 comments)29 May 09
Hello Electric Drum, Why have you got people fighting duels?
You meant dual, meaning two, I imagine.
Malapropisms don’t help readability or understanding.
Stancja (1 comments)23 April 09
Faint grey color idea is great. I’d even stretch it further – everything except the title, sidebar and the text should be barely visible gray. Also posts written as lists are great!
Daily Good Tips (2 comments)26 May 09
I use justify in my blog because i think justify is better than left
Daily Good Tips’s Latest Post: When You Should Choose GSM or CDMA Internet Connection
apnerve (1 comments)28 June 09
nice post. I have one request… pls include social bookmarking feature (at least a ‘delicious’ bookmark link) in your blog. I wanted to save this post for later reference but had to do it manually.
.-= apnerve´s last blog ..uhuroo – content collaboration made easy =-.
MangJaya (2 comments)3 July 09
Wew, i used justify. I think that more beautiful. Because this post i know why left justify better than all justify…
Thanks..
Rachel (2 comments)20 July 09
Excellent post and so helpful!
Rohit Prakash (1 comments)23 July 09
Nice post. I am always looking for tips on blogging so that I can improve my own skills.
.-= Rohit Prakash´s last blog ..To improve fast, seek a mentor =-.
Eddie Gear (2 comments)28 July 09
Hi there,
A good compilation of information. I’ve been blogging for a while now and I’m very much interested in gaining more readability and user attention towards my site. I’m in the analysis phase and any possible suggestion would be appreciated.
Cheers,
Eddie Gear
.-= Eddie Gear´s last blog ..Online Poster Printing Giveaway – 16×20” Rolled Canvas Print for MetaliQue.com users =-.
LoveGuru (4 comments)31 July 09
Arial text is more readable than Times New Roman
Black text on white background has best readability
.-= LoveGuru´s last blog ..The Five Love Languages: Overview =-.
printer cartridge supplies (2 comments)23 August 09
Thanks for the tips! They are very useful. I agree full justification is really bad. Try to use left justification instead.
Avery (11 comments)31 August 09
You have post too many suggestions,Actually,you can post one suggestion per post and explain it very carefully with all the details.
Rangoli Design (1 comments)11 September 09
Really there are some of nice nice ideas you have written.
I am also getting rid of visitor’s bounce rate, and thus reached to ur page, it is so nice.
Keep it up.
Jon (9 comments)2 October 09
This is very good information. 12 and 13 are ones I need to pay attention too. Looks like I need to make some css edits. Thanks
Sabrina (2 comments)13 October 09
Great list! I learned a lot from your post.
Deana (1 comments)16 October 09
Terrific post! Great information here!
Boy75 (1 comments)23 October 09
However, you CAN discern between the two camps. ,
Jhonatta (1 comments)8 November 09
Hi,
First: I don’t speak English very well, (I’m from Brazil), forgive me any errors:…
Nice blog, I’ll make a site with Wordpress, it will have a job board.
I would like to know which plugin you use to give the option to send an email when the post gets a new comment.
Tk’s
magniwork free energy generator (1 comments)30 November 09
Some great thoughts here on blog and design composition. I’ll take them into account when I setup new sites.magniwork free energy generator
Seeking men (1 comments)3 December 09
This is very help info in fact this will help me redesign my blog since i have found very cool tips of making
I love all the contributers and all the articles thanx very much.
Rachel Bowen (10 comments)4 December 09
You know, you can’t make a successful blog, website or whatever, without the English is correct, no matter how many ‘good ideas’ you incorporate into the design. The design should support the content, not detract from it, but if the content is not good – then you might as well not bother.
Drug Rehab Utah (1 comments)11 December 09
# Underline your links. Readers expect links to be underlined, so don’t disappoint.
# Use appropriate space between lines in a paragraph. A quick way to test this is to divide your line-height by your font-size. Ideally you want a value around 1.5.
# Clearly separate your post from the rest of your design. It should be obvious where the post starts and stops. Your sidebar, comments, post meta etc. should be visually distinct from the actual content.
Rachel Bowen (10 comments)11 December 09
Re”appropriate space between lines in a paragraph.”
You should build in all spacing into the design of your styles, then they will be consistent. Don’t do it manually all the time. Firstly it takes more time, and secondly, you risk inconsistencies.
Most of these points don’t just relate to blogs, but to good layout for any text presentation.
Radon Remediation (1 comments)15 December 09
Always allow readers to comment! Great blog! Thanks for getting it out there!
Autai ptfe (17 comments)30 December 09
Great Poster !!!!!
Digital SLR Photography Guide (2 comments)13 January 10
Lol… I have never used #30 ever… But now I think I’ll be using it.
Overall, GREAT article dude!!!
Thanks again.
Tony M (2 comments)16 January 10
#12 is so true. Too many times Ill land on a webpage and see what looks like the Great Wall of Blog Text and realize this one isn’t falling. Red X will mark the spot for that site.
Great list, thank you.
Enver (1 comments)21 January 10
It was very helpful article for me.
I reconsidered all my designs and sites.
Man and a Van London (13 comments)12 February 10
Nice advice, I agree to all of what you have said in this post. I always take this in my mind so that every time I make a post it will be effective and visitors friendly.
Tony (6 comments)12 February 10
Great article, will put it to use now!
m65 (19 comments)27 February 10
nice share, is it good to disable them on a blog?
Mani Viswanathan (1 comments)10 March 10
Well these are nice tips..bookmarked it..thanks 4 the nice presentation
online ballet lessons (1 comments)12 March 10
great tips to improve readability. Definitely something to consider.