Is Your Blog Scannable?
They say nobody reads websites. Instead, most people scan the pages they visit. I can buy that. I don’t remember the last time I read an entire web page from start to finish. I may start out strong, but before I know it my eyes are jumping down to the next heading. Then again. Jump. Jump. Quickly getting the gist of the discussion as I go.
Web surfers have gotten very good at scanning content, and gleaning the info they need quickly. I love writers and/or designers who recognize this. Too many websites cram the content so tightly together, with no thought to how legible the information is! By borrowing a few techniques from print media, making your site scan-worthy is simple. A few of the most common follow:
Don’t Fear White Space
One of the most important elements in a page’s style is not what’s there, but what isn’t. Creating whitespace helps the eye transition from one element to another – one thought to the next – on through the page. Adding margins and padding to paragraphs, columns, tables, lists, etc., goes a long way toward readability and makes for a clean layout as well.
Appropriately Narrow Columns
Setting up reasonably narrow columns widths makes it much easier to follow the material being presented. Extremely wide columns are difficult for the eye to follow the line. If readers have to focus too intently on the lines, they’re not going to get much out of the information you’re trying to share with them. Keep in mind however, that extremely narrow columns can also be difficult to read.
Tight Paragraphs
Keeping your paragraphs concise (usually 5-7 lines) is a great way to improve the flow of your articles. Long-winded paragraphs can be discouraging to sift through – particularly if your reader is trying to reference one specific sentence.
Smartly Placed Titles
Headings not only serve to visually separate blocks of text, but help readers conceptualize what you’re talking about. This goes back again to white space, but semantically correct titles can also improve your site’s accessibility and SEO!
Funny how that all works together. :)
This post is tagged: blogging, publishing, writing
Good post. I’m trying to start a blog now and it’s hard to break everything up and add titles/whitespace after being indoctrinated in the school system so long to write dense text with longer paragraphs.
Ah yes, good ‘ol academia. There’s definitely a different writing style expected of say, a thesis. I clicked around through your site – you’ve done a nice job of laying out the modules and keeping it clean. No worries, you’ve got it down! :)
As it happens I’m saving for a digital camera. Now that I know of your site, I’ll have a good source for comparisons when I’m ready to buy. Thanks for posting Sam!
Great article, Charity! I’ve been looking for something from a designer’s perspective on the subject of scanability. Everyone always says “make it scannable by creating lists,” but there’s more to it than that and I’ve been trying to figure it out. And you’re definitely practicing what you preach, giving us the perfect example of what you’re talking about!
Some good points there. I generally take a bit of time just to mentally plan out my post layout. Once I have posted something, I’ll go back and see if it is presentable enough.
Infact I recently rearranged my gaming blog’s(http://danielprimed.com) side pannel. Because there was just too much text to digest. So the flickr stream and ‘featured post’ icons have made a huge difference. This makes it more ‘scannable’. ^_^
@Lauren – you’re most welcome and I agree. Lists are just a small portion, and not always appropriate. Writers who try to mold content into lists just to make it scannable probably aren’t really reading their own material.
I see you have blog now. Yay! I picked up your feed. :)
@Daniel – I love the new preview feature of WordPress for doing just that. I find myself trimming down or rearranging paragraphs a lot, once I see how the content really fits into the space I’ve designated for it.
Your site is looking good btw. That Flickr thing is really cool. Is that a plugin or did you code that yourself? I’ve never seen one yet where the pic zooms like that.
Yay! Another reader! Thanks Charity! Looking forward to seeing you in the comments :D
It is one of the plugins on the flickr website. Its one of the best ones there IMO. ^_^
I don’t know much about it as I got my brother to take care of all of the coding etc.