I am currently designing a webpage and I want to had ads to help with costs of keeping the site up, but I don't want to decrease the quality of the site so much that people don't want to visit the site, which defeats the purpose of putting the hard work into the webpage.

Here is what I have so far, but it doesn't seem enough to make it worthwhile:

  • Have all ads "Shrinkable" giving the user an option to hide the advertisement and make the body of the page bigger
  • Similar to the one above, have a full-screen button that removes toolbars and taskbars and also have a text size button. It would be just the text, a few links at the top, some text size/font options [possibly if I have enough time], a tiny logo, and copyright info at the bottom of the page.

[For both of the above, each time you navigate to a different page, it will go back to the initial form so it doesn't remove them if they're just browsing, but when they are focused on the text, they can hide annoying ads that they don't like. If they notice the "Hide" button, chances are that they already noticed the ad and decided whether or not to click on it. People that don't notice the button probably won't notice the ad. The buttons would be close to the ad so someone doesn't get in the habit of clicking there right away without looking at the ad. Does this sound annoying also?]

  • Have a banner ad cover most of the title with just a little icon of the logo, but disappear after about 15 seconds.

For the community, I will also allow ads geared towards applications, mobile platforms, etc., although I would appreciate it if one of your ideas in the question was for a website.

Thanks for any ideas in advance.

Example Images for the examples 1 and 3:

The initial webpage [Note: there may be a hide ad button by the top ad.]: Initial webpage

And after about 15 seconds, the top shrinks and then the user clicks the "Hide Ad" button by the side one.

And after about 15 seconds, the top shrinks and then the user clicks the "Hide Ad" button by the side one.

[Just realized this: the text in the above picture will expand to fill the whole page.]

  • 2
    I think you might be over thinking it. If you must have ads, just make it clear that they are ads. People tend to ignore them by default.
    – DA01
    Commented Feb 26, 2013 at 1:33
  • 2
    The thing to remember about ads is that they are operating completely at odds to the purpose of your users. The users want to read the cool thing you've written. The ads are there to take attention away from that reading, and onto themselves. This is necessary, and you need to strike a balance between the ads attention-grabbing and the stated purpose of the site. Commented Feb 26, 2013 at 1:41
  • 2
    The best solution (though also the most far reaching) follows from what Michael Kohne said. Reduce the gap between what the user wants and what the ad wants. Make sure that the ad sells something that your user may want to buy (or at least something that isn't so ridiculous that the ad has to compensate by shouting). A good example is a an ad for stock photography on a design site. These ads can be very muted and modest, and still be very effective. Look at the ads at subtraction.com for an example.
    – Peter
    Commented Feb 26, 2013 at 12:04

4 Answers 4


Having ads on the top is bad in several ways. They destroy your first impression, make the site slow and cost you in terms of SEO and search-engine ranking. Study about Google Panda release for that. But if you had to put some ads and wanted to avoid clutter, follow something simile which Smashing Magazine has followed.

  • Put all the ads on the extreme right corner. You read from left-to-right and if your eyes are satisfied with the content on the left, they don't need to look towards bright ads on the right side. Ads placed on the right-most-column

  • keep your ads visible only as long as browser width (or device resolution) is higher than a particular value (For example higher than 1024). In case of Smashing Magazine when the browser width is reduced to 960 pixels or so, the ads column is made invisible. Hiding ads when page-width is reduced

  • To actually make some money out of your ads, try putting ads in the middle of your content (after displaying some 40% of content at least) and mark them "advertisements" so they are understood as ads. In-context ads which are properly marked as ads

I don't think Static Ads are such a big life-savoir. Even static ads use sharp colors and bold fonts which distract the reader anyway. If you had to use ads, use them what pay the best but go with Squarish ads instead of Horizontal or Vertical one.


There is a conflicting relationship between advertising and user experience. And I couldn't resist to not make a Venn diagram about it :D

Sites with ads vs Sites with great UX

There are two keys to make you ads more appealing and having balance between advertising and user experience: first you have to care about what ads you display and then about how do you display them, here are some general guidelines on both:


The ads must be relevant to your audience, this is probably the key in advertising and it must be your goal with the ads, show the users ads about things that they are actually interested in.

This doesn't mean that you necessarily have to use "targeted ads", there are other ways to reach relevancy: you can vet advertisers, you can join niche ad networks, etc.


The amount of ads is not proportional to the earnings generated: the more ads the more banner blindness and thus a worse user experience.

Try using just a few ads and both your users and advertisers will appreciate that. For example, "one-ad" networks (eg. AdPacks, The Deck, etc ) are very successful using only one ad per page that gets all the attention.

As a general rule don't annoy your users: do not autoplay audio, avoid animated and flashy ads, and don't use intersitial or full-page ads.

But your real purpose with the ads is to make money, so here are some specific tactics that you can use to improve ads performance that are aligned with the criteria that I mentioned before:

  • Guarantee relevance: relevance is key both for performance and for the UX and, as I previously mentioned, there are several ways to make your ads relevant:

    • Use targeted ads.
    • Join an ad network that is relevant to your niche.
    • Manually control the ads and their quality.
    • Make your ad spots more expensive to get better advertisers.
  • Ads style: because you want the users to read the ads, the ad styling is key to avoid banner blindness. Google has some good guidelines on ad styling, basically you can:

    • Blend: by making the background and borders of your ads the same color as the background of your page where the ad is placed.
    • Complement: the styles by using colors that already exist on your site, but don't match the background and borders exactly.
    • Contrast: by choosing colors that stand out against the background of your site.

Blend, complement and contrast

  • Ads size and shape: from Google's guidelines "As a rule of thumb, wider ad sizes tend to outperform their taller counterparts, due to their reader-friendly format."

  • Last but not least, try to use Native advertising: which consists in making ads that match your main form of content, eg. promoted tweets, advertorials and sponsored stories in blogs. See links 4 and 5.

Interesting links:

  1. Why don't users want to see adverts relating to products/services they might be interested in?
  2. How do interstitial ads impact site UX?
  3. Stackoverflow allows the users to "rate ads"
  4. Ad blending from the advertiser perspective increases performance.
  5. Infographic on native advertising
  • this should be marked as the answer. good job.
    – JT703
    Commented Jan 16, 2015 at 20:20

In my view as a user, the best thing you can do is to keep the ads STILL. Things that move attract the eye, that's why so many ads want to be animated, or shift in and out of view. If they would bring in enough revenue, text ads would be awesome, but I suspect they pay too little to be worth it.

For my money, put static ads wherever on the page seems appropriate (top, right, left, whatever). But DON'T let them be animated gifs, and DON'T let have them show and then retract out of the way. Movement draws the eye like nothing else - if you keep them still, they'll be less intrusive. And less effective, but you're trying to strike a balance here.

Also, make DARN sure that the page loads fast, even if the ads take a while to show up for some reason. Load time kills, and I've seen sites that hold the content hostage waiting on the ads - don't be like that, load fast and if the ads take a while to show up, so be it.

Giving the user the ability to 'hide' the ads is only going to help if you can hold that setting across pages (if you don't, it'll just be annoying). But if you do hold the setting, a large number of your users will hide the ads, and your revenue will be approximately zero, and the ads won't buy you much.

  • Good point about the "Still" idea. Do sites like Google Adsense allow you to only have non-animated gifs? Also, do animations pay more? Thanks. Commented Feb 27, 2013 at 1:35

A good way to make ads more interesting is to make them fit into your content.

For exemple, it's common for bloggers to make (paid) posts about products they want to sell. If you're making an online radio, it's nice to have a link to buy the music you're currently listening to.

Magazines usually have a few pages dedicated to advertisements selected by the editor and targeted at their readers, and that approach works well.

Obviously this is much more complicated to implement than automatic advertisement, but it's also the only way to be sure your users will actually pay attention to your ads, and won't feel put off by them.

Another nice thing to do is ask the user what kind of ads they want. If you have a few different themes, and the user can pick from them, they will feel more involved and less overwhelmed by the ads. It also has the benefit of making them more likely to click.

  • I forgot about affiliate programs-this would work nicely with some sites that I am building. What do you mean about having the users pick ads? Thanks Commented Feb 27, 2013 at 1:38
  • @AnnonomusPerson I had, for exemple, an e-mail from Amazon asking me whether I wanted advertisement about books that I might be interested in, cheap books, sales, ... I picked one, and since then their e-mails have been good enough that I actually read it. If your website were fb, for exemple, you might ask the user if they want ads targeting their profile, or about what their friends like, or about things they have liked previously. Commented Feb 27, 2013 at 8:25
  • Oh sorry... I thought you meant to do that with a program like Google Adsense. Now I see what you're saying. I never thought about advertising in newsletters, not spam but "Here's a new article. I made this using this part from RadioShack" if I was doing a blog about electronics. Commented Feb 27, 2013 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.