Of all the edges I know of, embracing amazing design is the easiest, the fastest and the one with the most assured return on investment.
—Seth Godin Free Prize Inside
Looks matter. We don’t always want to face it, but it’s true. People will make judgments about the quality inside based on looks alone. A pretty package gets more attention every time. So how can you make your posts more attractive to help guarantee they get read?
Better Formatting for More Readable Posts
You’ve seen the advice to make your posts more scanable. While some will debate that people do read online, scanability aids readability. The more visually interesting you can make your posts the more your post will draw the eye all the way through and the more your words will get read. The good news is it’s fairly easy to do if you keep formatting in mind as you write and remember a few simple design tips.
A well formatted post makes use of a few elements that contrast with the dominant paragraph style.
- Images
- Whitespace
- Headings and Subheadings
- Lists
- Bold and Italics
- Color
- Blockquotes
The key is the contrast between the string of words that make up your post and the visual element.
Mea Culpa: My Poorly Designed Post
I have to admit I’ve not always done a good job formatting posts. My post design has improved over time, but it still has a long way to go. In part my poor formatting is a result of an overall design that didn’t anticipate a blog. When I created this site I opted for a liquid layout over a fixed layout. The fluid design means the width of the main content column changes making it more difficult to control how the images will display. I’ve shied away from adding images in the past, but that’s no excuse for poor formatting.
Take a look at the image to the right. It’s an older post stripped of the site design around it. Not very inviting is it? You have to really want to read that post to get through it all. The post does make use of subheadings throughout, but it’s about as poorly formatted as a post can get. Ironically it’s a post arguing that graphics are important to a balanced design.
David Airey pointed out the irony in a comment on the post and neither the irony nor the lesson was lost on me. I’ve been more conscious of post formatting ever since.
Compare that post to the two below and notice how much more inviting these two posts are. In addition to subheadings, each makes use of images, whitespace, and lists. If you had to choose between either of the posts below and the one above, which would you read?
Consistently Well Designed Posts
While I’ve done better with the formatting of my posts over time, I still have much to improve. There are blogs that consistently get the formatting right and they make a great example for learning. Look at the three posts below from DoshDosh, SEOmoz, and CopyBlogger. Each links to the original post as do all the screen shots in this post. I cropped the DoshDosh and SEOmoz posts a little. Both continued longer down the page, but the formatting you see continues to the end.
Notice the liberal use of images in Maki’s post on the left. There’s a rhythm to the post. Heading, text, image, heading, text, image, heading, text, image, etc. The images also add a lot of color to the post. Rand’s post (above center) makes use of images as well with the same pattern, though the images don’t contrast as much in their color.
Brian’s post on the right has only the one image, but it includes headings, lists, and a blockquote. The blockquote itself is a list. The post is more distinctly formatted above the fold, which makes sense as once you’ve gone below the fold you’re probably already hooked. Still the post contains a good deal of whitespace throughout.
By the way if you click to any of the three sites above take a look at the subscriber counts they show. Yes, all three have great content, but ask yourself if the post design also contributes to those counts.
Formatting isn’t only in the Images
The screen shots above might lead you to believe that a good post design is all about the images. Images are the most powerful of the elements listed above, but they are not the only way to format a post. A post without images can still be inviting to read. Consider the two posts below, one of my own and one from Daily Blogging Tips
Neither post contains an image, though both use lists to create whitespace. My post includes a blockquote at the top, but Daniel’s post is designed better as it uses shorter paragraphs to create additional whitespace.
Both posts are limited in their formatting, but neither is particularly long and so not a lot of formatting is required. The key to crafting a well formatted post is in the balance. Too little and you have a long and boring string of text, too much and you have a crowded mess with everything in the post fighting for your attention.
The post to the left is from SEO Book. It does contain two images; one for the post date and one in the blockquote, but both are subtle. Most of the formatting is text based in the use of lists, a blockquote, and three levels of headings. Aaron’s post makes great use of color in the subheads as well as the links. The post is very inviting.
SEO Book posts are generally formatted well, but if you look through them you’ll notice very few have additional images beyond the two this post uses. The formatting is nearly always done through text elements.
Your Presentation Improves your Information
It might sound strange to think that the way your information is presented can actually improve the information. The information is still the same isn’t it? Yes. but the way you present your content does make it easier or more difficult to comprehend and that does alter the information received by the reader.
Look up to the original screen shot of my post that used no formatting. Would you read it? I probably wouldn’t. I’m surprised anyone did. I could have made a great argument for using images in your posts, but who would know. If you did read it you’d likely struggle through, which would lead you to absorbing less of what’s said.
As you write your next post think about how you could improve it visually. Images will have the most visual impact, but you can create an inviting post without them. The key is to find some way to create areas on the page that contrast with the standard paragraph.
Are you conscious of your post design as you write? What elements do you use to format your posts and create a more appealing visual design.
Download a free sample from my book, Design Fundamentals.
vangogh, what an excellent post. I loved Maki’s vivid images, as well as the “rhythm” that you point out.
Another benefit to using images in your posts is that it might improve clickthrough rate from feed readers. I don’t have any empirical evidence to back this up, but experientially, it always seems I am more likely to click through on a feed with an image than one without. It would also seem to dovetail with Gord Hotchkiss’ eye tracking studies on thumbnails in SERPs.
Very Good tips indeed thank you for the info.
@David – Thanks. I agree about Maki. He always does a great job finding images to go with the posts.
You know I thought about how the images would look in the feed after I published this post. I ran into another post last night that mentioned it, though I’m at a loss at the moment about which post. It makes sense though, that images in the feed would help increase click through. Feeds particularly tend to look boring after awhile.
@Blogger Dollar – Thanks. I’m glad you liked the post.
…and the greatest of these is whitespace. Think of it this way, if you used all the other formatting elements you listed – images, headings, lists, etc. – without proper whitespace, you would still be in formatting hell. Yet, use whitespace alone, without any other element, and you would probably have a readable post.
@Stephen – That’s true. Whitespace is essential. You automatically create some of it just by using paragraphs, but then again I have seen people writing as one long paragraph too. I never can understand why they expect it will get read.
@Gypsy Dave – I have noticed more imagery at your blog. It’s funny because I’m a web designer too. I even tell people all the time they need to format their content and yet I still forget myself all the time.
You know a screen shot of SEO By The Sea almost made it into this post. Ever since Bill had the site redesigned I’ve had a thing for the way his blockquotes are colored. Don’t tell him, but I may have to copy the idea when I redesign this site.
I couldn’t say it’s because I’m formatting posts better, but since I started I have noticed more subscribers and comments. The formatting makes the posts so much more inviting and readable and now that more people are reading they can see how brilliant I really am. 🙂
@darren – Thanks. I agree in less is more too. I don’t think you should ever overdo design. You end up with something no one wants to see. Clean lines are your friend.
You know, that’s a funny thing Steve-O. In case you hadn’t noticed, over the last few months I have redesigned my blog and started using more imagery. It should have been a no-brainer considering I was a graphic designer, web designer in my past life. It took Bill to tell me one day that I should start using those talents on my blog. I really hadn’t thought about it. I was ranting and rambling and delivering information, it never occurred to me.
Since I started, I don’t know about my minions, but I sure like the look of things so much more. A picture is worth 1000 words and can pull people deeper into a post ‘below the fold’. Is it tied to recent success? Who knows, but it certainly is part of what I have been doing differently the last few months….
Great post bro…. I can’t wait until next week when the loonies take over the asylum :0)
Great post, indeed.
I think clean lines and belief in the notion that less is more is a sure-fire crowd pleaser. Plus, it just LOOKS nicer.
darren
I completely agree that attractive formatting can be SEO too. Thanks for the Yahoo tips. I need to think about them more when I format too.
Here’s a little tip for yer readers; if you want to rank in Yahoo, look at a magazine and format as they do. Use prominence factors such as BOLD,ITALICS, H1-4 and other breaks and formatting you see in a magazine… pure gold with Yahoo (they like TITLE attributes as well)…. attractive formatting can be SEO as well :0)
Great article. I can’t agree more on presentation. I don’t like my beginning post that have to much color highlighted and font is unproffesional. I went on the advice of mentors. But finally broke away because it basically nausated me. And started doing clean text with subtle pictures and was much more impressed with the layout. And to my surprise my blog experienced more traffic and more interaction.
Thanks for the information
Thanks Megan. I’m glad you liked the post. Too much presentation is just as bad as no presentation. The key is finding the right balance, which sounds like what you’ve managed to achieve with the clean text and subtle pictures.
It doesn’t surprise me at all that traffic and interaction increased as you improved the look of the page.
You have shared and giving me some great tips and ideas, has a new blogger I am teachable, so I am going to keep a close eye on your posts. Thank you and I am sure you are helping many of us out here. Kudus to you.
This was sent my way via Stumble, and it’s good when you read something that makes you pause and think. Especially given the timing … I’m working on a post that I want to be “epic” in scale. I just got back from one of the lesser known national treasures, with my spirit recharged from being there … and it’s naturally what I’m writing about.
I’ve got a killer WP theme, but it’s interesting to look at the screen shots you took of posts without the site they live in. This is a new concept for me … I’d never stopped to consider one without the other. It makes sense that a beautiful template and a 500 word run on is going to be painful to look at … this is the kind of thing that’s great to always carry around in the back of your head.
Even knowing the value of white space, I’ve always sought to write longer paragraphs. Short ones seem cheating somehow. I’ll have to give that some though.
Forrest the packaging definitely improves the content at least in how well the content is absorbed. Long blocks of text are harder to read and can potentially turn a reader away. It’s something I need to work on myself since I tend to write longer paragraphs.
Whitespace is your friend and does help make a post more inviting. The same is true for images and any visual candy you add within limits. You don’t need a lot, but a little can go a long way.
You’re in an enviable position since your posts will naturally contain images. If you add a list or two and vary the length of paragraphs you’ll easily have some visually appealing posts.
There’s a neat little Wordpress plugin that allows you to define pullquotes, which works a treat and helps break up text nicely and at the same time highlight aspects of your post you want readers to take away with them.
Not unsurprisingly the plugin is called Fancy Pullquotes – http://www.cafelamarck.it/22
db
Thanks David. The plugin looks nice. I probably wouldn’t use it myself. As someone who develops sites I would just as soon style a class to create the pullquote myself, but I can see how the plugin would be helpful to people not as familiar with html and css.
Actually, I think you’re right. There are two serious drawbacks to using this plugin out of the box. The first is positioning – there doesn’t seem to be any control of that. The second is that it has to use the exact text as is shown in the post, you cannot paraphrase.
I think I may take the hint and create a new class to do this much more elegantly as you suggest.
db
I think for anyone who knows html and css it’s probably easier to create a class or classes so you have more control over the pullquote, but I can see where the plugin would be useful for someone who’s not so comfortable with code.
How does the plugin know which text to add to the pullquote? Do you wrap some code around it in your post or does it create a custom field that you add the text to?
You wrap the chosen text in a hidden code. It’s quite neat and is tweakable to some extent.
That sounds like it would be pretty useful for someone not too comfortable changing css files. I’d still prefer making the css changes directly myself since I’d have more control over things, but for the person who’d rather not edit the css directly the plugin sounds like a good thing.