Most of us probably put a great deal of thought and effort into the design of a blog, but once it’s launched there is a tendency to type a post and hit publish without giving much thought to the visual elements of the post. I know I fall into that trap quite often, and I don’t think I’m alone.
The heart and soul of the blog post is the content itself, however, the design, layout, and formatting certainly impacts the attention that visitors give to the content. For the current re-design that’s in the works for this blog, this is a factor that I would really like to improve.
I’ve been looking at some of the blogs that I read and evaluating what I like and what I don’t like concerning the visual elements of individual blog posts. I’d like to share with you a few that I find to be excellent examples of attractive, readable blog posts. These bloggers and designers have done a good job of creating something that allows the design to impact the post.
CSS Globe
I know many of you subscribe to CSS Globe, and if you’re only reading the posts in a feed reader you’re missing one of my favorite examples of posts that are very well laid out. The sample screen shot below is from Alen’s post CSS Do’s and Don’ts Part 1: CSS Selecting.
With no images in the post Alen still creates an attractive look that is a big improvement on standard blocks of text. The h3 tags have a light gray top border (which may be hard to see in this image) and the code samples have a nice blue background with a slightly darker blue border. Alen typically uses short paragraphs and a few sub-headers in his posts, which adds more whitespace and improves readability.
Darren Hoyt
Our second example comes from Darren Hoyt’s recently redesigned blog. In fact, the sample screen shot below comes from his post that announced the redesign. Like Alen’s post, Darren’s includes no pictures in this post, but still manages a nice look.
What stands out to me the most is the typography, including the italicized post title and sub-headers. You don’t see italicized headers very frequently, but Darren pulls it off.
ProBlogger
I find the posts at ProBlogger to feature excellent readability. With such a huge audience and I would assume a lot of visitors from social media sites, there are thousands of people that are scanning Darren’s posts every day. He does a nice job of breaking up the posts to allow for scanning.
The sample below is from How to Be an Interesting Blogger. Short paragraphs, plenty of whitespace, the use of sub-headers, lists and bold text all add to the visual appearance of this post. Darren’s bulleted list uses a non-standard arrow icon that gives it a nice touch.
Pro Blog Design
Michael Martin of Pro Blog Design always uses posts and excerpts that work well with his content. The sample below is from Should a Sidebar Go On the Left or Right?
Michael does an excellent job of creating readable post layouts by using the same elements mentioned above with ProBlogger, short paragraphs, whitespace, sub-headers and bold text. The sample post also shows a blockquote that adds to the attractiveness of the post.
20 comments from readers
1 inaequitas Jun 12, 2008 at 1:35 am
Personally, I much prefer clean-cut designs for blogs and other avenues that revolve around text. As a mere apprentice of design, only as of late have I noticed the subtle annoyances in many websites. As a rule of thumb, however, if it takes more than a second for me to identify the ‘real’ content on a page, something is wrong. Choosing blog themes (before I have attempted a design of my own) always revolved around that.
2 Tad Chef Jun 12, 2008 at 7:43 am
Hey Steven, make it 5, you forgot my blog, just look at this formatting:
http://seo2.0.onreact.com/bloggers-to-get-attention-go-where-the-attention-is
3 Sameer Vasta Jun 12, 2008 at 9:24 am
Thanks for sharing those examples! As someone who focuses more on content than design, I sometimes forget that the look of my content matters too!
4 Adam Jun 12, 2008 at 10:05 am
I’d have to agree with inaequitas. I really prefer the clean-cut designs because they put so much focus on the content and not the design itself.
I’ve never put much thought about watching what the posts look like. If you’re going to spend so much time on the design, you should make sure your posts reflect the design.
5 Mordechai Boaziz Jun 12, 2008 at 12:17 pm
Some really good CSS examples to follow. Thank you!
6 Moni Jun 12, 2008 at 2:34 pm
Good post, you address an important issue right there!
Another thing is color, bg VS font color. Some blogs drive me mad, they do everything right, their content is amazing, but they make life harder to read everything.
Take the blackhat seo blog http://www.shoutingzone.com/blog their content is among the coolest, design and seo related but that theme makes me want to kick babies in the face you know? Sure it’s all based around blackhats but does everything have to be so…black? Why not add some red, anything, make the text white not grey?
7 Jeanette Jun 12, 2008 at 3:31 pm
So true, sad to say, maybe it’s my ADD tendencies but if the readability isn’t great my interest is lost rather quickly. The colors, snappy headings, etc. all draw me in and capture my attention. Thanks for the reminder.
8 Ty (tzmedia) Jun 12, 2008 at 4:12 pm
There are many things to design with and around.
Here’s a great post illustrating that very fact:
http://jontangerine.com/silo/typography/p/
Ahhh the lowly paragraph, many people don’t even consider sculpting this common tag. A blog post should have some hierarchy or it might as well be just text.
I’ve actually been struggling to format gallery posts screenshot, link title, and design blurb-age. As a guest poster it makes it a little bit more difficult, without creating some inline styles.
Don’t mind me I just look at the pictures
9 Vandelay Design Jun 12, 2008 at 7:00 pm
Tad,
Yours looks good too:)
inqequitas and Adam,
I tend to prefer clean looks also. I think the posts at CSS Globe are a good example of a nice, clean look.
Moni,
Yes, that gray text is hard to read. I wouldn’t be able to read that for very long before going somewhere else.
Ty,
Thanks for the link. That’s helpful… I’ve had similar experiences with guest posting and freelance blogging.
10 ifoh designs | » Friday’s Five: Week 3 | Web Design That Is Neat. Jun 13, 2008 at 9:54 am
[…] Designing and Formatting Blog Posts for Readability […]
11 Snowboarder Jun 13, 2008 at 1:37 pm
Sorry to be contrarian, but I don’t think that design matters too much if the content is spectacular. Craigslist and MySpace are good counterexamples, although they’re not blogs. At the end of the day, although a pleasing layout will definitely help readership, content is still king.
12 Dejan Cancarevic Jun 13, 2008 at 6:38 pm
very nice article and examples, thanks
13 Michael Martin Jun 13, 2008 at 7:04 pm
Thanks for the complement Steven! I’m glad you find the posts readable, and thanks for sharing it with your readers.
One of my favorite examples of well formatted content is from http://www.trizle.com/
The sheer style and attitude of their language is the main thing, but the formatting amplifies it tenfold. It’s very unique and very well done.
14 Darren Hoyt Jun 13, 2008 at 8:12 pm
Thanks for the mention, Steven. I’m especially flattered you featured the site for exactly the three reasons I redesigned it in the first place — improved readability, organization and typography. I usually like a more dramatic design, but when you want to emphasize the writing, there’s no need for the two to compete, just to complement each other.
15 Vandelay Design Jun 13, 2008 at 8:41 pm
Snowboarder,
I don’t disagree that content is more important than design, but I don’t think that means we should all blow off the design and not even attempt to improve. If the design prevents you from being able to easily read or find the content, then it becomes a serious issue.
Michael,
Thanks for sharing that link, I’m not familiar with that site.
Darren,
I really like the new design. You’re right, there’s no need to “wow” people with the design when the content is the focus.
16 virtual hosting Jun 14, 2008 at 2:28 am
Yes I agree.Very nice one.Thanks for the post.
17 Diseñando y formateando posts ~ Gran Impetu Jun 15, 2008 at 1:17 pm
[…] Vandelay hablan sobre este tema y citan algunos sitios que a su entender trabajan mucho sobre este factor. […]
18 Patrick Jun 20, 2008 at 6:45 pm
Great post! You touched on a very common problem in the web community. Great discussions. Keep up the good work.
19 Cliff Posey Jun 30, 2008 at 6:00 pm
There seems to be a balance to everything you do with a blog or website. Thanks for the thoughts.
Cliff
20 Father Knows Best When It Comes To Links - This Month In SEO - 6/08 | TheVanBlog | Van SEO Design Jun 30, 2008 at 8:19 pm
[…] Designing and Formatting Blog Posts for Readability […]