How to Design for Ads in Blog Design

How to Design for Ads in Blog Design

Introduction

Anyone who has been reading blogs for than a few days will notice that there are two common types of ads in blogs. Those two types are Google adsense, which is essentially a bunch of text with links and banner ad blocks, which often comes in the size of 125 x 125. Then there are three places it often gets placed, the sidebar, inside of a post, or at the bottom of a post.

Advertisements are a nice way of making money with blogs, but where it often goes wrong is the implementation of these ads into blog designs. Most blogs tend to just stick the advertisements right into the blog design without a second thought. This often results in making the blogs distracting, ugly, and less usable. But this does not have to be the case, there are many ways of integrating ads into blog designs without making it worst.

There is pretty much nothing you can do about the design of the ads themselves, besides rejecting the advertisers, which will only end up hurting your earning potential. Therefore the only thing you can do is to ensure that the integration of the ads into your blog design is done well.

1. Give the ads their own real estate

Noupe

By creating separate real estate for the ads, it makes it clear that they are separate from the actual content of the site itself. This makes it easier for your readers to navigate and use your blog.

An easy way of doing this is to group the ads into a separate container or area of the blog and styling them different from the rest of the blog. Noupe did this in the above example by making the background color for the ads different. You could also try creating a thick but subtle border around the ads.

2. Label the ads as ads

WebDesignerWall - Inline Post Ad Design

Why bother labeling ads? Because it makes it easy for the reader to know that they are ads at a quick glance. Also by labeling the ads as ads, this decreases the likelihood that the readers will confuse the ads as actual content of your blog.

Ads in the sidebars usually don’t need labels because the sidebar is already separate from the content, but the labels are still helpful. Ads inside of posts should always be labeled as ads, because it is more likely that the reader will confuse them with actual content and get distracted.

An easy way of labeling ads inside of posts is by creating tabs that say “Advertisement” as WebDesignerWall has done above. Simple and to the point, it doesn’t need to be fancy at all.

3. Design for content over ads

Macalicious - Google Adsense Design

In any blog design, there is a hierarchy of elements with varying levels of importance. In general, it is a bad idea to make it so that advertisements appear to have a greater level of importance over your actual content. When you make ads appear more important in your design, it shows the reader how little you value your own content. If it seems like you don’t value your own content and just want to make some quick money, your credibility will drop. Along with your credibility, it decreases the chance that the reader will actually read through all of your content because the ads will be distracting.

Basically what I am saying is that anytime the ads are too distracting or taking way too much attention away from your actual content, then you are designing with ads over content in mind. Ads are often already jumping off the page, there is no need to add to that. Macalicious does a great job of designing with content over ads in mind with their blog design.

Conclusion

As you can see from the above examples, advertisements don’t have to be ugly or distracting. Now that you don’t have any more excuses, make those ads pretty!

Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.

Further Reading

1. For more on blog design, check out my massive guide on Blog Design.

References

1. Top picture is by Steve Webel

Related posts

Give some love back?

If you like this post, please take a moment to vote. This will help the blog to grow even further. Thanks.
Site Templates and WordPress Themes.

18 comments

  1. This was a great blog post. I learned a lot from it!

    • Renee
    • October 10th, 2008 at 10:00 am
  2. That was actually helpful, I personally don’t enjoy ads inside the blog post it is just uncomfortable to watch, while in some other websites ads even look good!

    • fred
    • October 10th, 2008 at 11:41 pm
  3. Hi. I stumbled upon on your blog and really like it :D

    • Hussein
    • October 11th, 2008 at 9:08 am
  4. Earlier this year I decided to include some ads on my blog, although it originally wasn’t designed to include ads. I knew the location was awkward, but I was planning to re-design the theme. It took me a few months to get to the re-design, and I know the ads were kind of annoying. I think only one reader commented on it, but it was certainly not an ideal design. Ads definitely need to be accounted for in the design process.

  5. Nice article!

  6. Good article. Taking time to place the ads definitely helps.

  7. Good job - The traditional looking ads need to go! The web is already looking cluttered

  8. I am trying to design some custom ads for my own blog. Found your blog from google. Nice to read about the tips and the article is also very informative.

  9. Wow useful!

    • Jose
    • October 28th, 2008 at 1:58 pm
  10. Thanks for pointing out the pitfalls and tips n tricks for using ads in blogs. I think it is quite hard to ads in a nice and friendly way; e.g. not annoying your readers.

    • Niels
    • October 30th, 2008 at 5:59 pm
  11. I think AD layout is perhaps the most overlooked element in design. Very cool info on best practices.

  12. you are right, we do all need something extra. ;) Never thought of some of these really awesome tips!!

    • vishalhd
    • December 22nd, 2008 at 4:35 pm
  13. Hi…
    I think you are right,he traditional looking ads need to go!while in some other websites ads even look good.& nice article.

    • Ravi
    • January 3rd, 2009 at 1:46 am
  14. I normally only use image banners, which in my opinion, look better and are less confusing than text ads.

  15. I’ve found this one of the hardest things to do. I always make them either too light or too dark. Getting them to flow is difficult but this definitely helps.

    • bralynn
    • March 6th, 2009 at 1:55 pm
  16. Looks really great. One erkent immediately most in the design. Acts to me suffer for the bad in English.

    • awenza
    • April 2nd, 2009 at 10:38 am
  17. realy nice tips on adding ads to blog templates

  18. Placement of an ad is also important. The top left-hand corner of a website is where most people have their eyes. But not every website has the same hot spots. Therefore, you may want to track the “hot spots”. How? Use heat mapping software such as Crazy Egg, or Click Heat. This software will track every click on your site, whether it is a link, or just a click anywhere on your site. After you observe your heatmap for a few weeks or even a month, place ads accordingly, and watch your CTR climb.

Add a comment