Online Advertising And Its Impact On Web Design

Advertisement

In recent years, advertising has become a major revenue source for many websites. Not too long ago, online ads were often met with disapproval from visitors, and advertisers were unsure about their value or effectiveness. Today, most visitors have come to expect ads on commercial websites, and advertisers have recognized the potential of various online ad opportunities. Ads have long been a part of print publications, such as magazines and newspapers, and now they essentially have the same role in online periodicals and publications.

Although advertising is a concern for website owners and those pushing products or services, it is also has an impact on Web designers, because they have to be able to design and develop websites that can produce ad revenue and still meet the needs of visitors. Clients with websites that depend on ad revenue need a design that provides the necessary screen space and a proper layout for selling ads, and advertisers need placement that will get them the exposure they seek.

While advertisements are hardly the primary concern of Web designers in general, not accounting for them will result in a very awkward layout that can either detract from the flow of the website or put the ads in a spot where they will not receive enough attention from visitors. In order to maximize ad revenue for the client, with minimal interference in the appearance and usability of the website, the designer must take advertising needs into consideration throughout the design process.

Ads on The Raw Story1 seem to be squeezed in wherever possible, to the detriment of the content.

Screenshot2

Starting with the Basics

Of course, not all websites sell advertising space, but a growing number of them do. As the popularity of blogs continues to rise and designers get more requests for custom blog themes, this issue will only become more common. An adequate discussion of the subject requires starting with some basic issues.

Why do advertisers pay for ads?

Obviously, advertisers buy ads to gain exposure and improve their bottom line. The goals vary from one campaign to the next. Some may be primarily concerned with brand recognition and general exposure, while others are only concerned with sales of products. Online advertisers may be looking for click-through visitors from their ads, but ultimately all advertisers look for a strengthened business as a result of their campaigns.

Web designers can have some impact on this issue by their placement of ads. Of course, designers cannot completely sell products or services for advertisers, but ad placement is key to click-through rates and so has a sizeable impact on the success of an ad campaign.

Screenshot3

What are advertisers paying for?

Are advertisers paying for clicks by visitors? Are they paying for sales conversions? Are they paying simply for the screen space? Each of these is a possibility and depends on the situation. AdSense ads, for example, pay publishers per click. Affiliate ads pay per sale or per action. Direct ads, such as most banner sales, are generally sold at a set price for the screen space and location.

Keeping the desires of advertisers in mind throughout the design process is critical if the website is going to be selling ads directly to other businesses. AdSense and affiliate ads can be placed just about anywhere on a website, although the results will vary, but direct ad revenue will depend on what advertisers feel they are getting for their money. If they are paying for prime on-screen real estate, that’s what they’ll expect.

Why do websites or businesses publish ads?

Advertising can be very lucrative for websites with a large volume of traffic. Although there are other ways to monetize a website, ads are one of the few ways in which a website owner can quickly capitalize on existing traffic without any additional work, such as developing products or providing services.

Bloggers publish ads because the revenue allows them to earn income and essentially pay themselves for the time it takes to write content and maintain the blog. News websites sell ads because they typically have large audiences and because their offline business models, such as for printed newspapers, aren’t able to produce as much ad revenue as they have in past years. As a growing number of consumers turn to online publications rather than the daily paper for their news, ad revenue will shift from print publications to online options.

In most cases, ad revenue is critical to the success of the business. For this reason, it must be a priority during the design process. For a service-based business that uses a website to sell its services to visitors, the designer’s job includes creating a website that effectively promotes those services to visitors. The same thing can be said of websites and businesses that rely on ad income.

Screenshot4

Why are Advertisements an Important Part of Web Design?

For website owners and businesses that rely on advertising income from their websites, this is obviously an important part of the website that needs major consideration during the design process. Not having enough space or the right locations for ads will have a dramatically negative impact on the business. Once that happens, attempts will probably be made to move ads or open up new slots for sale, which could cause the website to look awkward and unorganized, because these areas were not originally accounted for in the design.

Websites with advertising revenue as their main source of income can be compared to e-commerce websites that depend on selling products in order to continue doing business. No designer is going to create an e-commerce website without making the placement of products, descriptions, and images in the layout a priority. Likewise, website businesses that require ad revenue cannot compromise on advertising space.

Advertisements are also a significant part of the design process because of the impact on visitors. Although a website may rely on advertising income, visitors are a critical part of the equation. Without them, ad revenue disappears. The website owner and designer need to incorporate ads in a way that still allows for a positive visitor experience.

The Conundrum of Online Ads

While website businesses that sell advertisements want and need those ads to be noticed and appreciated by visitors, a delicate balance is required. Aside from made-for-AdSense websites and websites set up solely for affiliate income, a typical website set up for ads needs to send a portion of its visitors away to the websites of advertisers in order to continue generating that revenue, but it also needs to retain a majority of visitors in order to grow itself. Keeping all visitors will result in no ad revenue, and losing all visitors to advertisers will result in no growth for itself.

Website owners and designers need to consider this issue during the design process so that the locations and sizes of ads are appropriate and so that the ads produce revenue with minimal negative impact on the website. Offline ad publishers don’t necessarily face the same dilemma. A magazine may run full-page ads throughout the publication, but when readers see an ad that interests them, they don’t necessarily stop reading and put down the magazine.

In the online world, a click on an ad could result in a visitor not coming back. Ads can be set to open in a new window to prevent this, but that still doesn’t guarantee that the visitor will come back after clicking the ad.

How Do Advertisements Impact the Design of a Website?

Regardless of how much attention designers give to advertisements in the layout of a website, ads will in some way impact the design. Ideally, the designer has accounted for specific ad slots in the design and laid out the website accordingly. In this case, ads can be implemented on the website in a way that does not disrupt the flow of content or information and that gives the ads a specific and strategic location.

On the other hand, if ads are not adequately considered during the design process, they can look very much out of place, which will disrupt the rest of the website. Layout and design decisions that were made without consideration for ads will rarely work well when ads are incorporated in the website.

Layout and Spacing

Advertisements can easily take up big chunks of space in the layout of a website. Whether it has one large banner ad or several smaller ones bunched together, the layout will be affected. Some websites will spread out various advertisements throughout the website, others will confine them to a specific area and leave the rest of the website ad-free.

The strategy here depends of several factors, but websites in particular industries and niches tend to take similar approaches. For example, major news websites typically have advertisements spread throughout the website’s layout. They may not include several ads in any one specific area, but they do have many spots that contain few ads.

CNN.com5 contains a few advertisements spread throughout the website.

Screenshot6

In contrast to news websites, many blogs keep banner ads contained within a designated area of the layout, typically the sidebar, and the rest of the blog may contain no ads. With this approach, the designer needs to account for advertisements in one large area of the layout, but the rest of the website will have little or no need to accommodate ads.

Blogging Tips7 includes six 125 x 125-pixel banners in the right sidebar, and the only other ad is a banner just above the comments on individual posts.

Screenshot8

Because ads are often used in sidebars of both blogs and news websites, one major consideration in designing the layout is the width needed to hold ads in the sidebar. For example, many news websites have 300 x 250 banners in their sidebars, so the sidebars must be big enough to contain the banners. If this consideration is not a part of the design process, monetization opportunities and potential income will suffer, or the layout will have to be changed later.

Of course, the sidebar isn’t the only common location for ads. Many websites sell ad space in their headers because this location usually brings the highest ad price on the page. In that case, advertising needs to be a consideration when the website is designed or else there will likely be no space available in the header. Typical website headers include a logo/branding area and primary navigation. To include space for advertisements, all of these items could be made to fit in the header design, or primary navigation could be moved elsewhere.

CSS Tricks9 is one of many blogs to include a banner in the header. In this case, the 468 x 60 banner fits nicely in the design of the header.

Screenshot10

Colors

Web designers can’t control the color or design of banner ads used on their websites, and definitely won’t be able to in future, but they can consider the possibilities when developing a color scheme for the design. Banner ads are often colorful and bright, for the purpose of grabbing the attention of the visitor. If a website is designed with lots of different colors and shades, it could look awkward and too busy with ads that are also full of color, especially when those colors don’t go together.

Some websites that display a lot of banners will need a muted color scheme that avoids potential color overload for visitors. In some cases, these websites need the ads to stand out in order to draw more attention to them, and color can be a very effective way of achieving that.

Flow

One of the challenges designers face with any type of website is to present the content so that the visitor’s eye is drawn to important information. The typical pattern of the eye’s movement on screen and the flow of content in the website’s layout can be influenced by ads. Website owners looking to maximize ad revenue will often include ads in locations where the eye is drawn to, because these locations tend to produce the best results and the most ad revenue.

Those who want some ad revenue but with minimal impact on the visitor will keep ads away from the primary flow of content. Examples of this are blogs that place ads within the content of the post or just in the sidebar. Ads directly above or below post titles are typically seen and clicked by more visitors than ads in the sidebar, so they will sell at a higher rate. Decisions here need to be made by the owner of the website, but the designer needs to be aware of the decision so that the ads can be implemented in the design.

The New York Times11 keeps its header and main content area free of ads on article pages, but there is a large area in the right sidebar for ads.

Screenshot12

What is the Designer’s Responsibility with Advertisements?

1. To understand the level of priority of advertising revenue.
Many websites include no advertisements at all, and others rely on ad revenue to stay in business. Still others include some ads but not as the primary source of revenue. The designer needs to communicate with the client to understand how much of a priority ads should have in the design. If ad revenue is critical to the business, advertising slots will be one of the most significant factors in the layout. If selling products or services is more important, then the products or services should be given priority in the design over any ads that may be included.

The designer’s job is not to determine how much of a role ads should play in the website’s design and layout, but he or she should make the effort to completely understand the needs and desires of the client in this area. Starting the design process with the right perspective and being on the same page as the client is critical.

2. To design a website that meets the needs of the clients.
Most Web designers would probably prefer never to have to design for ads and to be able to use the allotted space in other ways. However, the client’s needs include a website designed to allow for ad revenue, so these areas must be a part of the design.

3. To design an attractive and usable website that includes ad space.
Regardless of whether ads are a high or low priority, the designer needs to create a website that is attractive and gets the job done. Ads can be a difficult element to work with in the design because of the lost space and the interrupted flow, however, the designer must still create an effective website. If there are a lot of ads on the website, care must be taken to still make the website usable for visitors with minimal interference.

Trends in Ads and Design

By looking at websites that sell ads, particularly those that depend on ads as a major source of income, we see a number of trends:

Header ads.
Many websites sell advertising space in their header; often this space is located to the side of a logo and above or below a navigation menu. This trend is common across many different types of websites and will likely continue as long as these ads produce solid results for advertisers.

The Washington Post13 actually uses two header ads on article pages. The first is a 300 x 45 banner that sits across from the logo, and below that is a 728 x 90 banner that lies between the logo and the navigation menu.

Screenshot14

Lifehacker15, like other websites in the Gawker16 network, has a large header that allows for a 300 x 250 banner. Notice that the website clearly is designed and laid out to suit this size of ad perfectly.

Screenshot17

Ads above all content.
Instead of having an ad inside, or perhaps beside, the header, some websites place ads completely above everything else on the page, including the header. This puts the ad as high as possible on the page but takes it out of the flow of the content. This minimizes the potential interference of the ad, but it pushes everything else on the page down, and less content will be visible above the fold. This trend is noticeable on a number of news websites.

TechCrunch18 uses a 720 x 90 banner above its header. Only the green border of the body is above this banner.

Screenshot19

The L.A. Times20 also includes a banner above all content, but not on the home page.

Screenshot21

Monster22 places a 728 x 90 banner at the very top of its job search page.

Screenshot23

More ads on secondary pages than on home page.
Some websites, such as the L.A. Times just mentioned, keep the home page more welcoming to visitors and more user-friendly by using the space for things other than advertisements. However, these websites include ads on other pages. This is another common trend on news websites.

The Reader’s Digest home page24 avoids any ads high on the page.

Screenshot25

However, pages of individual articles26 include a 728 x 90 banner above the header, a 300 x 250 banner at the top of the right sidebar and a 135 x 600 skyscraper in the left sidebar, plus some additional ads lower on the page.

Screenshot27

Like Reader’s Digest, Time28 also uses an almost ad-free home page.

Screenshot29

Pages of individual articles30 include a 728 x 90 header banner and a 300 x 250 banner at the top of the sidebar.

Screenshot31

Common banner sizes.
As you browse a number of websites, you notice that banners come in all different proportions, but most of them are standard sizes. The Interactive Advertising Bureau has established standard sizes32 to be used for online ads. While a website owner can sell ads of any dimension, it is usually advisable to stick to the standards because potential advertisers likely already have ads designed for those sizes and would be more likely to buy if spaces of the same sizes were available. Web designers should know the ad dimensions that clients want on their websites.

Blogs commonly use 125 x 125 banners, although many other sizes are used as well. Daily Blog Tips33 is an example of a website with typical blog banner ads. Six 125 x 125 ads are placed in the right sidebar, but the only other ad on the website is a skyscraper lower down in the left sidebar.

Screenshot34

Another common dimension for banners is 300 x 250. Many news websites use ads of this dimension in sidebars. Yahoo35‘s right sidebar contains a 300 x 250 banner right around the fold.

Screenshot36

Digg37 also uses a 300 x 250 banner at the top of its sidebar.

Screenshot38

Best Practices for Designers

1. Design to meet the needs of the client
The ultimate responsibility of the designer is to the client. The designer should advise the client when needed, but ultimately the website needs to please the client. Although the designer may disagree with the client’s approach to using ads on the website, if the client wants it a certain way, that’s how they should get it.

There are many websites that appear to outsiders to have too many advertisements, but without knowing the details of how much income the ads produce and how they affect or don’t affect the audience, it’s impossible to know if it is a good or bad approach for the business.

2. Lay out the website so that ads are a part of the design
The websites that look the most natural and normal with advertisements were designed with them in mind. It’s no accident that a banner fits nicely in a specified area of the sidebar. Incorporate ad slots in the layout to achieve the best-looking website possible. Ads that are thrown in will look out of place and will overpower an otherwise well-designed layout.

The sidebar on ABC News39 is sized just right to contain the 300 x 250 banners used throughout the website.

Screenshot40

3. Consider future needs
You may find yourself in a situation in which you’re designing a website that isn’t particularly ad-heavy at the moment but that could be more dependent on ad revenue in the near future. Many websites start out with few advertisements and then, once the audience is built up, incorporate more ads. Ideally, this would be considered during the design process, and plans would be made for where new ad slots could be placed. Sidebars are generally a good spot to increase the amount of ads without disrupting the layout or the content, but header ads are much more difficult.

It’s generally good practice to discuss long-term plans with clients during the initial process so that situations like this can be avoided. If more ads are to be used in the near future, before a redesign is done, it’s possible to hold some spots with temporary content until they are needed for ads. For example, an area could be used to promote something on the website itself, with that content being removed once ad revenue becomes more important.

4. Consider the impact on visitors
Designers should make an effort to include ad slots that will appeal to advertisers, but visitors also need to be considered. When it comes to ads, a lot of decisions need to be made and judgment taken about what is appropriate and what would be too much. All of these issues need to be looked at in the context of the website in question, and there are rarely black-and-white answers.

What’s Your Opinion?

What’s your take on the impact of advertisements on design? When designing a website or a custom blog theme, how much consideration do you give to advertising?

(al)

Footnotes

  1. 1 http://www.rawstory.com/
  2. 2 http://www.rawstory.com/
  3. 3 http://last.fm
  4. 4 http://problogger.net
  5. 5 http://cnn.com
  6. 6 http://cnn.com
  7. 7 http://www.bloggingtips.com/
  8. 8 http://www.bloggingtips.com/
  9. 9 http://css-tricks.com/
  10. 10 http://css-tricks.com/
  11. 11 http://www.nytimes.com/2008/12/02/business/02markets.html?_r=2&hp
  12. 12 http://www.nytimes.com/2008/12/02/business/02markets.html?_r=2&hp
  13. 13 http://www.washingtonpost.com/wp-dyn/content/article/2008/11/30/AR2008113002217.html
  14. 14 http://www.washingtonpost.com/wp-dyn/content/article/2008/11/30/AR2008113002217.html
  15. 15 http://lifehacker.com/
  16. 16 http://gawker.com/
  17. 17 http://lifehacker.com/
  18. 18 http://techcrunch.com
  19. 19 http://techcrunch.com
  20. 20 http://www.latimes.com/
  21. 21 http://www.latimes.com/
  22. 22 http://monster.com
  23. 23 http://monster.com
  24. 24 http://www.rd.com/
  25. 25 http://www.rd.com/
  26. 26 http://www.rd.com/your-america-inspiring-people-and-stories/a-classroom-of-visiting-scholars/article108212.html
  27. 27 http://www.rd.com/your-america-inspiring-people-and-stories/a-classroom-of-visiting-scholars/article108212.html
  28. 28 http://www.time.com/time/
  29. 29 http://www.time.com/time/
  30. 30 http://www.time.com/time/world/article/0,8599,1862864,00.html
  31. 31 http://www.time.com/time/world/article/0,8599,1862864,00.html
  32. 32 http://www.iab.net/iab_products_and_industry_services/1421/1443/1452
  33. 33 http://dailyblogtips.com
  34. 34 http://dailyblogtips.com
  35. 35 http://yahoo.com
  36. 36 http://yahoo.com
  37. 37 http://digg.com
  38. 38 http://digg.com
  39. 39 http://abcnews.go.com/
  40. 40 http://abcnews.go.com/

↑ Back to topShare on Twitter

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

Advertising
  1. 1

    Three words for Firefox users… Ad Block Plus!

    1
    • 2

      Don’t be silly.

      0
    • 3

      Haha!
      I needed to change the way my brain works to read this.
      my brain automatically ignores any type of ads.
      definitely use ad-blocker! ads are ugly and lowers the
      quality of the web, by greedy greedy men trying to make it ugly.

      -9
  2. 4

    Well, with Ad Block Plus blogs such as Smashing Magazine wouldn’t exist. I hate these ads, but they are the compromise for the high quality we receive – e.g. the quality this post has. Thanks, SM!

    7
  3. 5

    Advertising is getting smarter which is a good thing.

    Smashing Mag does their advertising well as an example:

    * All advertising relates to the field that Smashing Mag is about
    * It’s colourful and attractive, but also discreet
    * It doesn’t compromise the site content
    * And it hopefully makes them enough dollars to keep the quality content coming

    That’s win win for everyone.

    2
  4. 6

    todd g @BuySellAds.com

    December 3, 2008 3:07 pm

    relevant ads add value to the site overall, but don’t do much for the design… but I might be biased ;)

    not every product can spread via word of mouth, and well placed ads can be quite successful.

    0
  5. 7

    I use the sizes from a Yahoo Design patterns PDF I got awhile back.

    I cant find the link on their site, but someone has posted it here

    http://www.scribd.com/doc/4642298/Advertising

    0
  6. 8

    Ad Block is a nice tool but there are sites that won’t allow you to view the content with an ad blocker (NBC for example) This will become a trend and AB+ will become obsolete.

    1
  7. 9

    The things that’s missing for me is ads that are worth seeing, like either GREAT ads, or something cool to play with (with a logo).

    Of course if it’s shoved into a hole with ugliness all around, then ick, but still.

    0
  8. 10

    Atomised: the web design co-operative

    December 3, 2008 3:34 pm

    I find it a real challenge incorporating ads well into a design and balancing the need to keep them subtle and not overpower the design while at the same time making them eyecatching to click. However, we need to learn to accept them especially Google Adsense. I can remember a time when there seemed no way to make money on the web. So many of our favourite sites – Smashing Magazine, Twitter, Facebook, WordPress and the rest just wouldn’t exist without ad money. The web designer owes a lot of work to the possibilities of monetization that exist on the web now. We get hired because of the financial opportunites that exist! And so many of our favourite apps are made possible. Good post.

    0
  9. 11

    I’m wondering how the boxy sponsor type ads that you have on this site or on techcrunch work as far as the advertiser is concerned. They seem to get a little messy and run together which obviously an advertiser wouldn’t want. But at the same time very successful sites use them, i’m wondering how effective they are for advertisers…

    0
  10. 12

    @Atomised where are there ads on twitter?

    0
  11. 13

    Ah, a Blindside fan? Woot! :)

    0
  12. 14

    BongoBox,
    Good point, ads can certainly be useful to visitors and that wasn’t communicated in the article.

    Joel,
    Yes!

    1
  13. 15

    No mention of text ads like Google AdWords? That trend isn’t going away and can (somewhat surprisingly) cause just as much of a design conundrum as a graphical ad. Much of the same advice applies, but making text ads jump out on text-heavy sites (news, blogs, even Facebook) can be rather challenging. Text ads are often seen as more innocuous because of their ability to blend, but they still need to be noticeable to be effective.

    Just waiting for the ASCII art ad… :)

    0
  14. 16

    Good information indeed.. But I think, there needs to be more sites to be added to this list..
    Regards,

    0
  15. 17

    @Amy (comment #13): There already has been an ASCII-art ad. I can’t remember the original link, but a quick Google search pulled-up this blog, which has the picture:

    http://www.coolmarketingthoughts.com/2008/01/18/creative-with-adwords/

    0
  16. 18

    The square ads between the title of a post and the article content like on Smashing are horrible in my opinion. I don’t think it adds any value for the advertisers or the publishers when ads take away from the content. I’m ok if you stick the block ad 1/4 of the way down as some sort of jump to the rest of the content… but the block ad up top is offensive and it leaves a chunk of dead space to the right of the ad.

    1
  17. 19

    really nice post guys!

    0
  18. 20

    Very good post. A nice inside view!

    And I think smash mag does a great job with their advertising.

    keep up the great work!

    0
  19. 21

    Nice article, one thing that hasn’t been touched is the impact of road block or take over ads, that take over the whole of the homepage or the surround/theme of the site. A lot of design goes into this type of advert, as the layout of each site is different. Is that a good or a bad thing for the user?

    Currently the Escapist has one for a game – http://www.escapistmagazine.com/
    LOVEFiLM display’s these nearly every weekend – http://www.lovefilm.com/welcome/home.html
    Another example is Apples campaign from the beginning of the year – VallyWag.

    Are these a good idea, does advertising become more powerful than the website brand they are on?, where does good design come in?

    0
  20. 22

    Atomised: the web design co-operative

    December 4, 2008 12:24 am

    @nb3004 I was looking at my crystal ball at the time! My point was just that these web apps cost money. Twitter loses shedloads of money. I mean Pownce shut down today. Can Twitter not? Just because it’s loved and used doesn’t mean it can continue burning through investor capital forever. Ads will come to Twitter or it will be sold. It’s like a public service at the moment. Dp I see the future?

    0
  21. 23

    to make the ads become a part of the content, agree, but it also needs to be “poped” out from the content in the mean time, in order to finish its given mission “being noticed”…

    0
  22. 24

    This is very good point at all to make article like this. Advertising is more important but to regret I am too much bother with too much clickable images and worst at all is jumping window with Click Add, simply not what I need. The fact is that visitors come to web site, as well they by newspaper book or magazine, in order to get some specific informations. But in less percentage they also like to see advertising add but well composed and not so intriguing to the overal layout. Similar to magazine, add on web site is excellent way to keep the visitors in contact with the manufacturers, supplyers and the other, who can feel their needs. Also this is perfect way to introduce some new products or event. So it is good to have it but again to say, to be properly placed and with to force the visitor to push button like Skip This Add or so on.

    I am not expert in the field so take my opinion with reserve. Iam just user of Interent as many of you and I experss my view as well view of the many peopel with similar vision.

    Best regards,

    Srecko Bradic, Serbia

    Owner- http://www.letletlet-warplanes.com
    Official Illustrator- Aero Journal [France] and SAM Publications [UK]

    -1
  23. 25

    Sorry to say- I make few grammar error in post above but I was not able to change it.

    -1
  24. 26

    Great article. I hate seeing websites with the ad banner above everything else, it looks like they made the design without thinking of ads at all, then said “oh wait, we need an ad” then plopped it above the entire layout.

    0
  25. 27

    I think ads can ad value to a website from a visitor perspective as well as long as they are, as this great article points out, designed to be an integrated part of the overall design of the website and not just scattered around. The other thing that i personally find very important is that the ads featured on a site is in line with the content of the site, and not the mention the perceived quality of the site. Ignoring this will be detrimental not only for return traffic to the site, but also for ad revenue that we all need to keep delivering quality content.

    0
  26. 28

    Particularly, I like the well placed ads… and speacilly the content-relative ads…
    It’s kind of akward felling when you are reading about the India terrorist attack, and you see such “drop 40lbs in 1 week” ad…

    I guess the ad’s companies should research more in how to make the ad by itself more relative to the page content…

    Happy hollidays for all smashing magazine readers!!!!

    =))

    0
  27. 29

    Hi!, Smart post! I just faced the balance issue yesterday, while trying to incorporate ads to my website with minimal impact in my design. I think I have achieved that, what do you think?

    0
  28. 30

    I have a small website for information on the town I live in and a blog.

    Can any one give out some tips on getting started with advertising?

    0
  29. 31

    It’s nice to see some kind of discussion here at smashing, instead of only those ‘nice post!’ comments. But what about wallpaper-ads? Gamespot.com sometimes uses its background together with its header to promote a new game or tv show. Nalden.net only uses its wallpaper as revenue.

    And something else… why are Google image banners always so incredibly ugly?! Some great designed sites are getting totally messed up by some horrible ads about ringtones.

    0
  30. 32

    The biggest polish internet ad provider in his partnership offer has so called “skycrapers” appearing in two versions: 150px or 300px width and 700px height flash objects. To take full advantage of them you can implement up to two on your site (so they can display two different ads at one time). I had to design a portal using that system.

    The thing is that they ARE NOT a constant part of the design – they appear only if there’s an ad campaign targeted for that particular portal audience and their client points you as a possible advertiser. They contact you, ask you whether you want the deal or not and if you agree, skycrapers will be displayed (in random configuration) – which happens occasionally. Because the page layout had a fixed width (not fluid) and is pretty complex in general, you can only imagine how problematic creating support for that was. Why? Because in most of the time THERE is no ads, so the content is to use the whole width given. Meanwhile, the javascript injected can produce 1 or 2 skycrapers at any time (each of them in one of two possible widths).

    No matter whether I liked it or not, I had to use tables in the end ’cause there is no other CROSS-BROWSER option available right now for making horizontal, partially fluid content (stretching both ways in a limited scale). Well.. of course, using divs with auto width could do the trick, but only if there was text only inside, which was totally not the case.

    By giving this example I just wanted to agree upon the ‘best practises’ part – sometimes things are not black and white, there are no simple solutions and no standards applicable, and you gotta meet your client needs first. Hopefully, WCAG partially agrees on possible tables usage in extreme cases (with limited tags and properties amount) and what’s EVEN MORE HOPEFUL, css table model will soon be ok to use to solve my problem. Some nice recent article and discussion about it here: http://nettuts.com/videos/screencasts/everything-you-know-is-wrong/

    0
  31. 33

    Thank you for this brilliantly written case study.

    I am busy designing my first online app.

    I’ve chosen not to display ads on the homepage by fear of losing visitors, but have been spending a lot of time trying to use online real estate for ads in the content pages.

    Thanks – smashing as always !

    0
  32. 34

    heather van de mark

    December 4, 2008 6:31 am

    Agree with some of the other commenters, I really like SM’s layout with their sponsor’s ads, but when it comes to the ads in the content, there’s still something to be desired. Perhaps instead of the box, use a thinner banner above the title, to segment the article from the ad. I don’t like the idea of pushing the ad into the content and needing a content jump–I think it would be distracting b/c most of the article’s have screen shots in them.

    0
  33. 35

    Nick,
    I agree.

    0
  34. 36

    I would argue as a consumer, that oftentimes I find a website more credible if it has ads. Granted, the ads have to be appropriate and relevant to the subject of the site, but the presence of ads on a site often indicates for me credibility on behalf of the website company because an ad agency has invested money in putting their product on a page. I’m not a web designer or even close, but I am a consumer and I think this observation is worth noting.

    0
  35. 37

    you can find some great inspiration here:
    http://www.bannerblog.com.au/

    0
  36. 38

    Great post! I work for a .com that utilizes banner ads on most pages of the site, and this article just drives home a few of the things that we on the design team strive for every day.

    While none of us like having ads on the site, it is crucial to our company’s revenues, so trying to think about how to keep the ads noticeable but not overpowering to the users, while still keeping management/finance happy, is an ongoing challenge.

    0
  37. 39

    I’m surprised Pandora Radio (pandora.com) was not mentioned…. I think the ad system they have is effective and creative at the same time.

    0
  38. 40

    @redwall_hp: Nice! I should have known. :)

    This brings up another point. Novelty ads like ASCII art can sometimes have value beyond whatever they are advertising, whether that value is aesthetic or other. My favorite is the classic game Pong in a banner ad from 1996. I remember seeing the ad at that time and being blown away by it. Couldn’t tell you what it was advertising, but the ad became an ad for itself. Interesting implications for design.

    0
  39. 41

    really good post, guys!

    0
  40. 42

    I definitely agree, you must consider ads during the entire design process if they’re going to be a part of the design at all, present or future. It can be a challenge with some clients to convince them that frontloading the site with ads isn’t the best way to go. I try to explain to them through examples, sites where the ad feels more like part of the page design and how that tends you encourage you to click on it almost as if you were using part of the sites own navigation. Granted this is rarely the case, but it gives them a moment to think, and then I will segue into the site’s credibility, how you don’t want to come off as a spam site, etc…

    Definitely a challenge to integrate Adsense text ads into any design without looking tacked on, or just plain god awful (especially with the ads they pull in!), but for now anyway they’re a part of life, and life will go on…

    0
  41. 43

    “How Do Advertisements Impact the Design of a Website?”

    They make design ugly and get in the way of real content. They are the same as commercials on television: a Nuisance.

    They only thing I hate more than seeing banner ads on a web page is having to create them.

    0
  42. 44

    Being in commercial web development, I’ve come to terms with how ads usually mess up a site’s (otherwise better) flow and (otherwise cleaner and concise) layout.

    What I still have a problem with is that hardly any site owner (ie clients) gets the same stomach ache I get when ads are injected that render the content virtually unusable because of insane flickering, blinking and the likes – I wonder why there isn’t an ad network with a focus on quality, ie ensure the supplied ads adhere to at least some measure of sanity.

    Being a slight epileptic myself I usually look for the print version or sth alike to at least be able to read the content without running the risk of being struck down by a freaking banner ad!

    So my question is: Where is the quality (and, if you will, safety) control? And why aren’t there more clients asking for it? Even if you see the need to finance all or part of a site through ads, why whould you accept those detrimental to the well-being of your users? (not necessarily regarding their health, but also their asthetic sense?)
    In my view this reflects badly on the site quite easily – does noone care? Don’t you want your content to be read(able) and enjoyed? Are less intrusive ads automatically a conundrum? An oxymoronic dream?

    0
  43. 45

    Incorrect.

    Advertisements should not flow with the design. Placing a CocaCola in the hands of a TV star during a television show may help to increase brand recognition, but there is a reason that TV ads are still an annoying break in the middle of the show, and the volume tends to go on full blast during these breaks. Placing ads in a “flowing” manor in your design will not increase visibility. It will only make your design prettier. If you are into painting and graphic art that’s fine, but if you are a real designer, your job is to make everything in your site effective. That means that if the goal of an advertisement is to showcase a brand or offer, then you should be sure to do just that.

    1
  44. 46

    Sorry, I didn’t mean to say they shouldn’t break the flow etc., I get how ads work and have to work. But there is still such a thing as “over the top” – you need to grab attention, you need to be intrusive – but to a point. TV is still a slightly different animal as the whole content area is either program or ad (leaving out the growing amount of indiffentiable conglomerates between the two for simplicity’s sake). If someone screams at you for a minute in an ad, that’s one thing. Once it’s over you go back to the program. With a site layout, the screaming doesn’t stop as it’s usually right next to the content.
    That’s simply my point: ad prostitution is fine with me, but there are (or, should be) limits (no kissing…)
    As I said, I recognize the need, but wonder how rare it is to have clients question the lack of control and whether it adversely diminishes their brand.

    0
  45. 47

    Very interessting Article, I see that advertisement is very important today. But to be honest, I use surf with ad block and noscript in the past months.. but I unblock all my favorite Sites (like SM for example). I know its not the best way, but some pages just go a bit to far with all those ads etc.

    Anyways thx for another highclass article !

    0
  46. 48

    Patrick Gunderson

    December 4, 2008 12:03 pm

    “…and less content will be visible above the fold.”

    Do not try to place everything above the fold. That’s impossible. Instead, try to realize the truth that there is no fold. Only then can you see that it is not your web page that folds, but paper, instead.

    0
  47. 49
  48. 50

    Great article, thanks for the many examples and points of consideration.

    For the people whining about ads – grow up. Advertising is part of business (you’d know that, if you made any real money yourself) and it’s a blessing in the long run because good products are given a chance to thrive, and quality content like SmashingMagazine gets published.

    That’s the case for ANY good content that you enjoy – the people creating it have to eat and pay rent too. Thankfully, blogs such as this deliver relevant ads to products and services we can actually use.

    Thanks and regards,
    Nathan Gilder

    0
  49. 51

    Excellent article! There were so many common sense things covered that just never occurred to me before. Next time a client mentions ads, I’m going to be way more prepared!

    0
  50. 52

    @Nathan
    If this was directed at my question: It is my daily bread after all, so I am very much aware of how bread and money work, thank you. Yet that was not the point. I’m interested in the question whether there might be a “quiet is the new loud”-aspect to this in the foreseeable future, maybe something between (the oversimplified extremes of) screaming banners and paid opinions, ads on a more “wholesome” level – something akin to more properly targeted ads much like the ones you mentioned. There’s probably a community factor to it, and there’s where this is going anyway, it’d just be nice if it weren’t to come down on those extreme types of advertising.
    All I’m saying is I wish we had something better, something all parties concerned would benefit from a little more.

    0
  51. 53

    I just wish somebody would think of the children …

    -1
  52. 54

    Patrick Gunderson

    December 4, 2008 3:52 pm

    @ak
    I’d say there is definitely a “quiet is the new loud” trend in online advertising. I’m a designer at a major site (20 million uniques a month would be disappointing) that relies on advertising for life, and the banners that perform best are those that don’t look or act like banners. There is very pronounced “banner blindness” when compared to relatively still, respectful, clearly messaged and relevant ads.

    Here are the classic 5 questions answered.
    How: The most determinative aspect of CTR is defeating banner blindness. Users are going to look at the entire page unless there is something that explicitly says “BANNER”. That means getting rid of chintzy animations and “Buttony looking” CTAs. Production quality must also be high.
    Who: Context: does what this banner is advertising actually interest the same demographic as my site’s content.
    What: Relevance: is this banner offering the user anything they haven’t seen before.
    Why: Be respectful to the user, don’t try to get in their face. Exclamation marks don’t help, and only make the advertiser look desparate.
    When: users do click on interesting ads… in their own time. saying NOW! doesn’t help.
    Where: that’s the clickthrough.

    0
  53. 55

    Ad Block is a nice tool but there are sites that won’t allow you to view the content with an ad blocker (NBC for example) This will become a trend and AB+ will become obsolete.

    I just checked out the NBC site in FF with AdBlock and I can browse the site (and not see the ads).

    0
  54. 56

    It’s definitely a challenge to integrate adds into a design in a way thay serves both the advertiser and the site’s audience. Things would already be a lot better if most of these ads had better design to begin with… nothing as frustrating as designing a beautiful layout and then having to squeeze in an absolutely badly designed ad, and don’t even get me started on animated ads (beit gif’s or flash).
    I have to agree with John, I have adblock on all the time, it has never prevented me from seeing a site. You can also use an extension like Stylish to filter out unwanted site elements.

    0
  55. 57

    Good Read!!

    I really hate misleading advertisements. I remember the image ads just left of google text ads. That crap uses to make me so mad when I clicked thinking ti was part of the site.

    How about site background ads? Now this kind of advertising is becoming more popular and if done right can look really cool.

    I found some cool examples of this over at DesignerFied Custom site background ads

    0
  56. 58

    What about a blog post about designing ads that convert?

    0
  57. 59

    ak – nope, I wasn’t commenting to your post.

    Ads that don’t look like ads have always pulled better though, which is entertaining to think about considering what most of the mind-drunk ad agencies throw out there.

    Regards
    Nathan Gilder

    0
  58. 60

    Interesting article. I recently designed a site (20 Mile Magazine) that included ads. It an online community magazine. A great deal of thought went into the design layout and ad placement. In the end, we determined that we did not want ads to break the content up and disrupt the user experience in any way. So, basically, the ads frame the page and allow the content to flow. Thus far, it’s been very successful.

    0
  59. 61

    internetanddesign.com

    December 8, 2008 3:30 am

    I think websites are getting lazy with advertisements. Nobody is trying new things. Everybody want save advertisement spots and nobody is creative.

    ~BE CREATIVE!

    0
  60. 62

    I work for a boston web design firm and what I’ve learned is it’s always important (in any good design) to have balance.

    Having too many advertisements on a particular page is not helping anyone. I’m not even sure how effective online advertisements are anymore at gaining reader attention. I seem to have blinders on when I search the web, only looking for the information I need and disregarding all the irrelevant advertisments I see.

    0
  61. 63

    I’m with ak regarding the ad networks that populate their feeds with constantly flashing, loud, obnoxious ads. Sure, it grabs the user’s attention, but many of those ads are SO distracting that it also prevents that user from actually reading the content of the website.

    Unfortunately, those feeds can account for a rather substantial revenue stream, so we’re stuck using them. On my company’s website, we’ve tried to remove the ads from those feeds that we thought were too distracting, only to lose a huge chunk of our revenue. So those crappy ads must be doing SOMETHING right to be able to pay so well.

    0
  62. 64

    Arunkumar Avanathan

    December 8, 2008 9:11 pm

    @Steve Wanless : I found the Ad sizes from Yahoo Design stencil kit, which anyone can download from here . This zip file has a “Advertising.pdf” which gives sizes for all kinds of ad blocks. They also have specifications for other content too.

    Great article SM. Thanks!

    0
  63. 65

    the challange is how to meet contents, commerce, and user behaviour in a single good web design

    0
  64. 66

    Great article! You do a good job explaining the issue and providing useful solutions to think through. Thanks.

    0
  65. 67

    my favorite web ads are on pandora.com, they change the entire background of their site depending on the ad to make it fit in seamlessly with the content, such an awesome idea that I’ve never seen before

    brent

    0
  66. 68

    Very good article. I would say that the big thing here is to include the advertising ideas when designing the site. Also an indication to the developers, if not you, is to tell them how much you will rely on the advertising from the site, and that may give the the clear indication on how important the space, and the flow of the site is. I designed the site with banners in mind right from word go, and limit the ads to fixed areas. I find this gives a good flow. If interested have a look at http://www.tech4law.co.za.

    Fine line between flow, layout and advertising – ads get the money in, but a bad flow and layout will chase the viewers away, with the advertisers right behind them.

    0
  67. 69

    If websites don’t allow ABP, people won’t click the ads because they hav ABP because they hate ads.

    0
  68. 70

    The content you have provided is pretty interesting and useful and I will surely take note of the point you have made in the blog.

    While I was browsing the Internet for ways to boost my website exposure, I read about how effective offline media is for getting additional exposure. Since online media advertising has become so competitive, I thought I will complement the online marketing efforts of my products with offline media advertising like newspaper and magazine advertising. This can be the best way to get a wider coverage for a website and draw additional traffic. I think it is a great marketing strategy to use both online and offline advertising to get more customers.

    I thought this information might be useful for anyone looking for solutions to get me-ore traffic to their website.

    0
  69. 71

    WALSAQ makes it easy to find what every business owner needs: High-quality Ecommerce Design services at the most competitive price. Having a ecommerce website designed doesn’t have to be hard or expensive to accomplish, and WALSAQ proves it time and again, which is why WALSAQ is called the Next Generation of Freelance Services.

    0
  70. 72

    informative stuff… thank you very much.

    -1
  71. 73

    great article. thorough and to the point. fantastic resources as well.

    keep up the great work steven.

    1
  72. 74

    I’m staggered that this has (so far) been the only article I’ve found on this design-critical issue. I’m working on my first web application with integrated advertising and there are no best practice rules or guidelines anywhere on the web. Shame!

    So thank you for this article, and thanks to all those insightful comments which have rounded out the discussion.

    The web application I’m building is text-intensive, and I found that Adwords in a sidebar was not a good strategy. However I tweaked the colour scheme the Adwords content detracted from the user experience. Display ads in the sidebar worked much better. I suspect the same equation probably applies in reverse to sites with strong graphical content: Adwords will probably work well there, while adjacent display ads may be problematic. Someone who’s been down that track might like to comment.

    Cheers,

    ::Leigh

    0
  73. 75

    what about ad 120×60?
    Like at ffffound.com/ and impressonme.com/

    Is it effective?

    0
  74. 76

    OK, I’m only a year plus change late to this party but I just wanted to add a couple points from the agency’s perspective that y’all might find useful. You touch on some of these but please allow me to elaborate:

    *Know your ad specs: if your site decides to cap all ad animation at 15 seconds and/or one loop, then advertisers are much less interested in any of your “below the fold” ad units. Why? Because by the time the viewer (nay, _if_ the viewer) gets to the ad, it’s been more than 15 seconds. The ad animation is already done before they see it. Your designer counterparts at the agency have (hopefully) put in a healthy amount of effort trying to tell an engaging and relevant story through the ad, and if all the viewer sees is the final frame, it’s a compromised impression. Likewise, the agency may have paid really good money for a remarketing ad (visitor hits my client’s site but doesn’t convert, we target the same visitor again with a follow-up ad) but it’s squandered if the ad is never seen. This is why header ads are so popular with advertisers.

    *Know the ad types: a large part of internet display ads are still basic animated banners. But rich media is a substantial portion of the display ad market. How will video ads look? Will they be surrounded by animated clutter which, when combined with the video, will induce epilepsy? How are expanding ads going to behave? Are you consistent in ad placement across the site? If your skyscrapers are on the left for some parts, and on the right for others, the advertiser is going to need to create expanding ads that expand in both directions. We generally won’t drop a unit from a media plan because of this, but it is annoying.

    Likewise, unless you are going to practically guarantee some #$*&^ing amazing results you should not consider non-standard ad sizes. Large campaigns run across dozens if not hundreds of sites, and advertisers already have to run a gauntlet of ad specs for the ostensibly standardized (sic) ad sizes – they’re not likely to look fondly on your custom unit that composes 1% of the ad spend, but consumes 8% of the production budget.

    *Work with the quants to get the ad placement & quantity correct. Sometimes less is more – advertisers pay higher CPMs for sites with a few ad slots than sites that look like painted up animated gif whores. Maybe your aggregate revenue per pageview is better if you go the ad slut route, maybe not. There is an optimal balance but it varies by site. So be prepared to change the quantity and location of ads based on performance data, do A/B tests, etc. Depending on your pageviews, squeezing out an extra $1 overall CPM can be a helluva lot of money.

    0
  75. 77

    If you’ve ever wondered how a screen takeover ad is done from a programming perspective, I recently wrote an article on it…I’d be interested in getting your feedback: http://betaprogrammer.com/content/?p=89

    0
  76. 78

    The fight between advertising versus user experience! The idea is to prevent such a fight from happening at all. Ads can be good if managed correctly and they can ruin user experience if not. ABP is only a way for users to voice their frustrations. It might not be the way the user initially wanted it, but if the publisher keeps pushing and pushing more ads, or more distracting ads, then it’s gone over the edge. We always advise our publisher clients to think and consider these before integrating our AdSpeed ad management solution into their websites.

    0
  77. 79

    great post ,thanks

    0
  78. 80

    I’m a pretty avid trekker and need to admit that I’m anal about my equipment. If there’s one thing that I dislike, it is when my equipment give way. That’s why I always get quality tools to gear myself up and be prepared for most anything the trail throws at me.

    0
  79. 81

    Nurse Anesthetist School

    June 21, 2011 9:55 pm

    I’m not sure why a PA would ever do that. There are some PAs who do anesthesia but not that many because of CRNAs. But if I RN is required at a school then they probably cant. Unless they get an RN. Either way why throw away a great career to receive a less degree, and then go back to school to do something you probably could find a job in if you looked around enough…..

    -1

↑ Back to top