14 Tips You Should Bear In Mind When Designing Your Blog

Posted on 25. Aug, 2007 by Adam in Design

This post was written by Daniel of SuccessInTheDigitalLife.

I find it to be such a waste of potential, when I see a blog with fantastic content but a terrible design. Good site design does a lot to enchance the positive points of a website and working with a good design is one of the best techniques to get ahead of your competitors in the ever fiercening blogging race.

Rather than being a 101 class in Web Design, I’ve written this article more to help you engineer a blog that is geared towards success. I’ll talk about smart design techniques that subconsciously increase reader interest, support and loyalty. Keep in mind that you don’t need to have any experience in design to actually benefit from this article, just a bit of common knowledge. I’ll be sure to drop a few nuggets of design tips along the way though, just to give you that creative edge.

The Benefits of Good Design

A good site design is important on many different levels, not just as a form of visual eye candy. It can:

• Further develop your own niche
• Improve the accessibility of the site
• Add a certain level of professionalism to your site or online identity
• Increase potential outlets for further traffic
• Increase page stickiness for readers

So as you can see, there are many benefits. I will try to elaborate on the importance of these points thoughout the article.

Strengthening your Niche

Being a Blogtrepreneur I probably don’t need to tell you that creating a unique site is very important. It is what seperates you from everyone else and ensures that people don’t mistake you for a similar online personality. Unfortunately many people overlook the impact that your blog design can have on forming a respectable blog. Your attitude shines through your website’s theme and onto your readers. So use it to your advantage. The following points run through how to strengthen your niche through your design.

1. Theme

The best way to not have people thinking your blog is someone else’s is by having your own blog theme, that way you are unique. If this isn’t an option for you then do what you can in your power to change the way your site looks. Here are a few suggestions:

- Rearrange the layout
- Install some plugins/extensions
- Modify the colours of links, text etc.
- Insert some site specific images

Infact this shouldn’t even be an issue with websites out there like the “create your own WordPress theme“. All you need is an imagination and some computer skills and you already have set yourself apart from the pack.

2. Images

Gradients, text and lines aren’t going to help you much unless they are supported by strong images. Humans are visual creatures, so images showcase your personality like nothing else. I recommend that everyone has a photo of themselves somewhere on their website. This is your personal identifier, your avatar and we all know avatars are important. If you don’t want to post your own photo, then use an appropriate image that best represents you. Other images that identify a website’s personality are:

- A site logo
- Any other images that best define you
- Some sort of flickr photo feed

3. The Importance of the Header

The best place to put these images is in the site header, this area draws the most attention as it’s right at the top of the page. Nate Whitehill wrote up an article some time ago about the importance of your header image. Might be worth taking a look if you are interested in additional reading (which I suggest, extra study can only be a good thing).

A good example of a good header is the one I have at my video games blog; PrimeScape:

From this header you can draw mountains of information about me, just in one short glance:

- What I look like
- My interests
- What the blog is about
- What sort of person I am
- That I wear glasses
- That I know how to make a good header :)

I said “one short glance” for a reason, as that is all that a viewer needs to decide whether or not they should continue to look at the website.

Accessibility

I’m not much of a fisherman, but I absolutely love fishing analogies such as

Accessibility really is the bait for your website.

When a user visits your site you want them to be able to access the most important information first and the least important information last. Think back to that glance. You only have that glance to interest them, so make it easier for them to be interested. Once they are interested, then you have them hooked. The next few steps run through how to get them hooked (or rather how to make your site more accessible).

1. Layout

There is a golden rule when it comes to page layout in design, which is that everything on the page should be there for a reason. This same rule should apply to your blog. So to do this, remove anything unneccessary on your blog. If you are not sure of how best to conserve space then the following are a few nifty suggetions:

- Change an archive list into a archive page or a drop down box
- Remove multiple RSS subscription options, merge them into one
- Make tags or a long list of categories in a small font and tightly group them together

These small changes can provide much more room for important features of your blog, that you want people to notice.

2. Browser Support

This can be a nightmare, especially if you have little expereince in the field. Obviously you want your website to look the same for all internet browsers but due to how each web browser renders websites this isn’t always possible. If your site runs better with a particular browser then let people know about it, stick a ‘download this browser’ icon on your site. For example:

I myself am having this problem with the two blog sites that I run. They both render perfectly in Opera and FireFox but not very well in Internet Explorer, especially the older versions. This is a pain as the problem lies within the browser not rendering sites correctly, rather than within the code.

3. Bandwidth

Although it isn’t much of an issue in this information age, bandwidth can play a small role in the accessibility of websites. The best way for me to get my message across is by refering to one of my own blogs (Apologies again for the sneaky cross promotion):

My gaming blog PrimeScape has a header that is 320kb in size, unfortunately it had to be this way when balancing the scales of quality vs. size. What this means is that generally the header is the last image that loads on my page. Which (as you now know) isn’t good as I want it to be one of the first images that people see.

Using your Design to Encourage People to Continue Reading

So once you have hooked a big juicy viewer, you want them to stay on the line as long as possible. This could be through RSS subscription but usually involves attracting them to other pages on your site. Once again clever design practices can encourage this greatly. So keep a note of the following subtle techniques to reel ‘em in.

1. RSS Placement

RSS is like sliced bread for the blogging community, it’s practically our lifeblood and is an important piece of information. So this means that you must make it very accessible. You should have 3 subscription options, each with its own RSS icon:

- RSS Feed
- RSS Comments Feed
- Email Subscription

The three subscriptions can be handled by Feedburner which I recomend. It also compresses all of the subscription options for you. You want to flaunt your RSS button a bit, so firstly stick either all 3 buttons or one of those giant RSS buttons above the fold of the page (that is, when the page loads, the user should be able to see the RSS buttons without scrolling). The latter usually grabs my attention more, but the choice is probably more based around personal preference.

Secondly you want an RSS button after every post. So (stealing off Nate Whitehill again), You should include the magical sentence: “If you enjoyed this post then make sure that you subscribe to my RSS Feed”. This little sentence works a treat. Don’t forget to include one of the RSS icons as the lovely orange hue will lure them into RSS submission.

By exercising these techniques you are only making it easier to catch the fish.

2. Highlight Good Content

Quick pop quiz, what is the best way at reassuring new readers that you are a talented writer? Correct! Showcase your best work to them. Once again, important information must be accessible and your best work should definitely be easily accessible to your readers. There are numerous ways to highlight your good content. You can use a set of images like I have done:

Alternatively (and this seems to be the popular option) you can install the Featured Posts plugin and select which posts you want to feature. This appears on the side menu of your site. You could also create a single page and fill it with links to your best posts. I recomend doing both as you can’t fit all of your best posts in the side menu, right?

Personally I believe that the images are most effective but it does depend on what you can best incorporate into your site design. Once again, placement is important here, so place these links where they can be seen, above the fold line is excellent, but for most sites it is probably easier to use the sidebar.

3. Related Posts

Once again another clever idea compressed into a plugin. This plugin finds similar posts out of all your articles and then dislays the best matches at the end of each post. This is an excellent way to get people to read more.

As for design, try not to overflow the main post with Related Posts. Also keep it to the end of the main post, otherwise it becomes a bit of nuisance as you haven’t won the reader over just yet. Once you have won them over, its easier to get them to read more of your work.

4. Flow

Flow is dependent on how the easily the reader can jump from one bit of information to another. You can make your site flow better by improving the clarity of the design and by ensuring that your site can be split into several chunks. Here are some tidbits of advice:

• Create a header images for each post. This not only seperates the post but also makes your site more interesting to look at
• Ensure that the bottom of each post is neat and tidy as it is generally the place where most people don’t reach, hence normally a dumping ground for bookmark options, tags, categories, related posts etc.
• Use a 1px thin line to seperate each post
• Use different background colours to distinguish between the ‘chunks’ in your design, darker for menus and lighter for content areas

Avenues for Further Promotion

So you’ve hooked a reader and Feedburner is now teling you that someone is actually reading your blog. Now you want to milk that sucker for all he’s worth. A great and non-threatening way to do this is to use social media widgets. These are the small apps from Flickr, last.fm and Facebook to name a few. By offering these services it can ensure that the blogger doesn’t forget who you are once they have left your site. In order for us to make certain that these features get noticed, we need to cleverly intergrate the social media sharing widgets into our design.

1. Hurrah for Social Media Websites

There is a hell load of social media sites on the internet these days, its a growing trend which is bordering on plague-like. Most of these services offer a way in which you can intergrate them into your own site, so if they are relevent then why not do so? This can encourage a user to include you on their profile in the service, which is another way of ensuring that after they leave the site, your seed is still planted. So this:

a) Ensures that they won’t forget your site/forget you to a lesser extent
b) Increases the possibility of other people ‘finding you’ and hence for more fish catching

I personally think that a Flickr feed is a great idea. It allows you to display a series of random photos from your profile. This is excellent as it not only adds another dimension to your personality, but also looks great on most websites.

There are several ways that you can incorporate these ‘widgets’ into your design. If you use quite a number of services then you may wish to link to them all on a seperate page. Otherwise just store them anywhere appropriate on the page. These widgets are not that important so I would suggest putting them under the fold, maybe near your blogroll and other off site links to external sources.

I chose to place my flickr feed in the side panel to create a bit of air and remove some of the previous clutter. Check out the comparison.

So if you can, then be sure to use these widgets as a design advantage.

2. Technorati

Just a quick sidenote, much like the RSS Subscribe options, a Technorati button should be placed above the fold. I like to group the Technorati and RSS feeds together as it makes the Technorati button look more innocent.

3. Bookmarking Icons

The best way to encourage someone to share your work is to use those bookmarking plugins from those social bookmarking sites. These can be seamlessly incorporated into your design. Each website has their own but instead of using them all (which can be very messy and look straight out desperate, ugh digg chicklets) you should use an all in one. This comes in the from the “Bookmark this” icons and the bookmark per service icons:

I personally use the individual icons, but the “Bookmark This” is probably a better option. You might be confused by this right? Why would someone click this link? They can hardly see it compared to the icons for each service? Well its simple.

a) having a list of icons looks messy
b) people don’t need icons to remind them to share the post, if they like it and want to reward the writer then they will do so, even if it means going to the site themselves

4. Other

Just a few tidbits worth mentioning. You should change the colour of the widgets to suit your sites colours, use a photo editing program to find the exact hexadecimal values. That way the colour is perfect.

Hiding Advertisements

I talked quite a lot about this problem in another one of my articles:

“People often feel more comfortable viewing an ad free website as they know that the webmaster is running the website on passion alone. Therefore implementing ads slowly and stealthily keeps them off of the radar of viewers. So sticking a text based advertisement in an area in your design which doesn’t attract the eye is a good idea. Also be cautious of colours, choose non bright colours for your initial ad.”

As I mentioned before people go to your site to get something out of it. So if you keep the quality of your content on par with the number/locations of ads then people will stay. They won’t enjoy it, but its worth them enduring the ads for your golden content. A website such as Digg has a great balance of ads and content (despite being user driven).

Another idea is to only include text links. Such as the “Pay $20 to get your link featured here for a month” services. These are generally inconspicuous and are still a good way of making an honest buck.

Conclusion

There it is folks, quite a lengthy article indeed. I hope that this has helped you on your journey to blogging success. I can’t help but think that a few of the points that I mentioned aren’t entirely design related. I wanted to mention them, as when you are designing your website you need to keep these things in mind, as I have reworked my blog 3 times in order to incorporate these elements seeminglessly into the design.

I don’t know or claim to know everything about this topic, so if you have any suggestions or other ideas that could help bloggers, be sure to share it with the community and write down your thoughts in a comment.

Popularity: 1% [?]

• Eight Insider Tips for Turning Your Blog Into a Business – Part 1
• Top 5 tips for Search Engine Optimization (SEO) on your blog
• When Is It Time To Change Blog Themes?
• Business Loyalty is a Mind Game
• Eight Insider Tips for Turning Your Blog Into a Business – Part 2