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.

55 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.

  19. This article gives the information about how we can present the ads over the blogs.Very interesting.

  20. Thanks for sharing information about how should we present the ads in blogs

  21. In this article we’ll examine the issues that face corporate blogs, we’ll observe some current trends, and we’ll look at a large sample of blogs from companies of various sizes in a wide variety of industries.

  22. tesekkurler…

  23. This is very helpful. I have done ads in some of my original websites. I ended up removing them because I didn’t like how they looked. I will be doing one with ads shortly. I have bookmarked this page. Thank you!

  24. Great Blog very useful to all webdesigners, I suggest all designer to share this blog

  25. Nice resources, Thanks

  26. Really good article. I’m new to adsense and getting the right balance is crucial to making those few extra bucks (well…cents just now!)

  27. Nice Article about adding ads in Blog Design. I like your tips. I will try it in my blog. Thanks for sharing.

  28. Really Interesting and something different article .. Thanks For giving idea through this article….

  29. Thanks for this tips..

  30. Thanks for giving this information…

  31. Really nice one.. keep writing

  32. Can I raise a question, if a commercial site has good traffic, should the tone be lowered by putting ads on it? Most commercial firms are now adding blogs for traffic, should these have Ad space? Many more Q’s pop into my mind, would like to hear other responces.

  33. nice designing of adds

  34. Very useful for bloggers who want to design a nice looking blog, and have the ability to place ads around their content.

    • Travis
    • February 22nd, 2010 at 1:12 pm
  35. I learned a lot from it!
    You are sharing information about how should we present the ads in blogs. I love it
    Thanks !

  36. Great guide. I think it’s always obvious when ads have been dropped in as an afterthought, so it’s important to consider your ads as an integral part of the design. Especially seeing as the ads that get more clicks tend to be at the top of your site and are therefore one of the first things your visitors will see.

  37. Awesome posting,very informative as well. thanks for sharing…

  38. Nice article. It really gave us a lot of information. We were trying to get information on some subject which is related to this to an extent for last couple of days and this article really helped us. Good job !

  39. It is absolute great post, so many visitors like it.
    Thanks

  40. Designing for ads is important, because we have to give best user experience for users.

  41. You have shared nice information to design for ads in blog. thanks for sharing this post.

  42. Just a super discussion here. I am following you from a time. Keep it up buddy Thanks !

  43. Great post, still applies nowadays.
    Find a best gift boxes here , thanks.

  44. good idea for design the blog, thanks.

  45. Find a good way to design the ADS , thanks.

  46. who want to download the words ?

  47. have the ability to place ads around their content.

  48. very useful for me, thanks for share your article with me……

  49. As the others said, nice post! and useful, because it is something that we usually see when we search on the internet and we better know what they are exactly ;)

  50. 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.

  51. 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.

  52. A ads must be beautiful and appealing…

  53. 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.

  54. That was great! Its good to know that thing you shared now.

    Sean

    • Sean
    • August 30th, 2010 at 7:32 am
  55. Very interesting. More clear information, that will really help.

    Todd

    • Todd
    • August 30th, 2010 at 11:44 am

Add a comment