Separating ads from content in all browsers

Written by Adrian Holovaty on July 29, 2003


Maintain a clear separation between editorial and advertising content ("Extras") on our restaurant guide detail pages -- in all browsers, not just modern, graphical ones.


  1. Offset the Extras box graphically by using a different color -- yellow instead of gray.
  2. Require the words "Brought to you by."
  3. Use the word "Advertising" in the title attribute for every link in the Extras box.
  4. Place horizontal rules before and after the ad, to designate the separation explicitly for non-graphical browsers. Hide these <hr>s with display: none in the style sheet for graphical browsers.


Posted by john on July 29, 2003, at 5:29 a.m.:


I can't see how that's 'clearly' advertising (or as I like to call it: 'paid') content... it surely doesn't look like it was 'paid' to me.

Posted by Adrian on July 29, 2003, at 5:36 a.m.:

Thanks for the comment, John. How could it be improved?

Posted by Dave S. on July 29, 2003, at 6:50 a.m.:

Part of the problem is the yellow. My LCD has an odd gamma, and from my normal viewing angle it's virtually white; not very clear that it's advertising. Good idea on the HR's for non-CSS browsers though.

Posted by john on July 29, 2003, at 7:15 a.m.:


if the goal is to denote 'paid content' versus 'non-paid content' (what use ad sales guys call editorial content) then I'd say you've got to call it "Advertisement" or "Advertorial" or "Special Advertising Section" or something that has the same connotation as the words "paid advertising".

That being said, I don't know that these two pieces of content really need to be broken apart in the case that you're using as an example. Both piece of content are quite relevent to the user, and the 'paid advertisement' isn't something that'll likely cause any complaints at all from users (other than the "I don't have quicktime installed, please give it to me in WMV" complaints). I doubt that any user/reader clicking that link will ever think "whoa, you didn't tell me that was an ad".

I think that trying to maintain the church and state line between paid content and unpaid content on the web is what's holding a lot of newspapers back from succeeding in this world of advertising supported web ventures...

another caveat though, is that while that one link might be paid for by an advertiser, if you continue to offer VR panoramas as a 'sold link' / 'sold promotional' opportunity to your advertisers, and become successful with it (to the point where +50% of your restaurants are doing it for the first year it's available... when you raise the prices and some of them cancel, you'll be faced with losing content that's very valuable (possibly) to your readers, and you might end up having to give away that content for free in the end... just a thought.

I honestly don't think that the 'paid content' and 'unpaid' content has to be all that seperate... though I'll also say that's an argument I'm not winning on a daily basis either...

Posted by prawnFresh on July 29, 2003, at 5:06 p.m.:

In relation to Dave S' problem about the yellow background, I have noticed a very similar thing. I do a lot of design work on a 17" LCD monitor, but also have an old PC (IE5) with a standard CRT monitor; yellow colours always seem to be the worst for losing impact! Plus we should never try and convey information based on colour, it's an accessibility no-no.

It's a toughie!

Posted by Mark I. on July 29, 2003, at 5:33 p.m.:

I applaud the move, but found myself wondering whether the sections in the right sidebar ("Search restaurants", "Foodways blog", etc.) weren't advertising too, because of the use of a similar color for the sidebar section title backgrounds.

Posted by Farah on July 30, 2003, at 9:42 a.m.:

I thought it was content.

Instead of calling it 'Extras' why not call it 'Sponsored Extras'? It implies that is is paid content, but doesn't go as far as saying it is a blatant advertising message (I don't really think of a VR panorama of the cafe as an ad anyway).

Posted by Jon Gales on August 3, 2003, at 6:01 p.m.:

I think having "brought to you by" is pretty clear that it's a paid advertisement. Maybe it's just because I'm part of the MTV generation... A lot programs begin/end with "Brought to you by XYZ". Even the NFL.

As for using color, since it's not the only difference it's ok. If it was the same as regular content besides the slight yellow tint (on an LCD too), that would be a no no. But it goes to second mile and says "brought to you by".

Notice that this is similar to the way Google does advertising on its site. It labels the column "Sponsored Links", but then goes ahead and shades the background of the ads to have them stand out.

Posted by Jeff Croft on August 14, 2003, at 4:04 a.m.:

Interesting discussion. Great points, Adrian!

BTW, it's nice to see someone nearby interested in Web Standards and CSS -- I'm in Topeka.


Posted by Dean on August 14, 2003, at 11:41 p.m.:

I feel that the separation is justified through the "brought to you by" statement. Somone was right in saying that it is more of a service than advertising thus needing less separation only because it can be of potentially greater value to the reader as something in addition to the listing that can improve the experience of viewing the listing. It's not something that demands their attention at discount prices. I feel that the area is set well aside the content and established as something that is in addition to the normal listing as well.

That being said there needs to always be some sort of separation regardless of end value to the reader. There should be no surprises...ethically, I mean. The style of this site appears to let one use unconventional naming to declare locations as advertising versus a main newspaper web site. Simply put, the line between what is advertising and what is content is pretty obvious in most standard editions of an online newspaper web site. That same line can be bent, a little, in your if done correctly. Is that a good thing or a bad thing?


Comments have been turned off for this page.