Recent Entries

  • When band logos go bad
  • Left 4 Dead, finally a shooter I can enjoy
  • Gaming can help libraries help themselves
  • One more plastic guitar…and then some
  • The Twitter election
  • Bringing the arcade games back
  • Recent comments

    On the Twitter

      Older (Random) Entries

      Subscribe

      Search

      Links to Leave On

      Go to Front page

      Backgrounds advertising

      One of the lessons I’ve had to learn over the past six months has been one about money. About how to generate money with a web site. Prior, all my web development and design skills have been focused without worry about creating revenue. Frankly, that’s the ideal situation anyone can be in - getting to do what they like, improving their game without needing to meet any financial quotas. My only measurement for success was whether or not people liked it. Unfortunately, that’s had to monetize and even when you do, no one believes you.

      Advertisements are the pimples of web sites. Every designer hates them - except maybe ad designers - and they just get in the way of something that could be great. But in that same stroke, they pose a challenge that makes designing fun. It’s like if as a painter you got a canvas with a square hole in it and you couldn’t repair it. You just have to figure out a way to make it work.

      It’s generally accepted that banner ads on web sites do not work. They’re ugly, stereotypical, and aren’t seen by most web site visitors. And I don’t mean they’re not seen due to ad blockers, but they’re not seen because we’ve all been trained to ignore rectangles at the top of pages and squares in the middle. We’ve adapted. And there in lies the second challenge.

      Banner ads aren’t going away anytime soon regardless how uneffective they are, mostly because we can’t find a better way to generate money on an otherwise free web site. So over a very short time I’ve had to turn up my creative juices and apply them to advertisement techniques. But since my creativeness in that area is still in its infancy, I did what anyone else would do - I copied.

      One method of “different” web advertising that I’ve come to be a fan of is full background advertising. This technique is when the background of an entire web site is bought by a single sponsor. If you frequent Pandora or GameSpot you have probably seen this method. Frankly I think it’s a great idea, both from generating revenue and from the designer’s point of view.

      From a sales standpoint its seemingly easy to sell. The client gets more than a wimpy banner ad and gets the “entire” home page to themselves. From the designers side, it keeps the advertisement out of the main content and puts in the background where it can sit nicely and not effect anything else. Also, more often than not, this type of background is fixed, so it doesn’t move when you scroll around the page. This keeps the client’s logo in one spot all the time. With a banner at the top when people scroll it goes off screen. Fixed positioning is much sweeter.

      We’re toying with the idea of full background advertisements at work now and trying to find flaws and reasons to not use them. I’m not against them, per se, but a good designer will always try to find why something won’t work before they figure out how to make it work properly. Technically this method is easy, visually it can be very challenging, especially if the client drives/creates the background. Fortunately, since all sites are different and most clients don’t have their own ad design department, I’ll end up making most of the backgrounds - which is fine because that insures it looks good to me and fits in visually with the rest of site.

      The down side to all of this is that it is easy for it to go south and fast. If the background and site integration is not done carefully then the whole production ends up looking cheap and ruining what would otherwise me a good user experience when they visit. Both of those hurt the client and my web site, a lose-lose situation.

      So far the only real downside to the method is screen resolution - or web site width, depending on how you look at it. If your site is wide to fill a standard 1024×768 screen then there isn’t much free background space on the left or right of your page. If your site is narrower and you align your site to the left side of the screen, you can have a couple hundred pixels of width for your background image. Of course, those that have larger than 1024 displays will see even more, but 1024 is still the sweet spot majority for most visitors - at least from my experience.

      Another consideration is where the real banners ads are placed. In the case of the sites I’m over there is a tall ad - called a skyscraper - and most of our sites are left-justified. In the case where the skyscraper ad is on the right of the site the design becomes very lopsided. Since the client who bought the skyscraper also bought the background, their logo/designs are then all focused on the right side, making it feel very heavy. While this might be good for the client, it’s bad for the site as it is distracting. I’ve come to the conclusion that such a technique is best if the skyscraper is on the left side of your page — of course, alternatively, you just don’t have skyscrapers and go for more wider and square ads.

      One thing that I’ve found that GameSpot has done many times before is integrate the wide banner ads with the background ad. They’ll line both designs up so there is a seamless blend from background to banner and back. Very cool and very striking, but also very complicated to pull off well.

      Another downside to the method is the filesize of the background image. To cover your range of resolution possibilities, your background image has to be very wide and tall, sometimes 1600 wide or more. This can lead to a big image file that has to be downloaded, thus increasing the time it takes to load the entire page. Some backgrounds I’ve found weigh as much as 100k, which is a lot. I try to keep all images on a site less than 40k, the smaller the better, because their combined size adds up fast. In order to keep these background files small you have to really drop the quality of the image. This kind of sucks but is a fair trade-off, I suppose. If you design the background properly you can degrade the quality and it won’t look too awful. Sites like Pandora can get away with even bigger backgrounds because their site is made up of only two things; the background and the music player. They can afford to have a 200k background because even with that size the total ends up being less than most sites without a big background.

      It’s a interesting advertising method that I suspect works better than traditional banner ads because it’s bigger and not something visitors are expecting so they notice it, even if only briefly. But getting such a technique to work successfully looks to be balancing act between design, web practicality, and random user resolutions.

      4 Comments

      1. Big G from September 18th, 2007 at 9:52 pm

        I’ve noticed myspace.com has also started using the background ad technique.

        I’m not sure how I feel about it yet. I still tend to ignore them. I suppose I will admit that it gets my attention much better than a banner ad.

        G+

      2. Brian from September 19th, 2007 at 4:36 pm

        Frankly, I don’t consider myspace a litmus test if something works or not. There is so much other eye/ear garbage there that it’s hard to say what gets your attention and what doesn’t.

        On sites that integrate the background with ads it looks really nice.

      3. Jen from September 19th, 2007 at 7:24 pm

        Myspace is a mess. Those background ads look tacky and cheap.

      4. Ross Gaylen from February 6th, 2008 at 7:18 pm

        The background image is great for accomplishing branding and virtual product placement, but won’t be as effective for tracking direct response to the message (unless you can make the background an active and trackable link, or promote a background-specific unique URL in the image.)

      Leave a Comment