Grow your CSS skills. Land your dream job.

Less Ridiculous Standard Ad Sizes

Published by Chris Coyier

I recently said that I thought the current "standard" pixel dimensions for ads are ridiculous. 728x90? 88 x 31? Wha? I have a new idea: ad sizes that make sense.

Let's start with a basic building block. 125x125 is very popular, already a current "standard", and supported by a wide variety of ad networks. So if we start there, and chose a reasonable gutter size (10px), we can build a whole system of ad sizes that make sense.

Using just this block and the 10px gutters we can get a whole bunch of rational sizes:

125x125 260x125 395x125 530x125 665x125 800x125
125x260 260x260 395x260 530x260 665x260 800x260
125x395 260x395 395x395 530x395 665x395 800x395
125x530 260x530 395x530 530x530 665x530 800x530
125x665 260x665 395x665 530x665 665x665 800x665
125x800 260x800 395x800 530x800 665x800 800x800

Our 125px building block is also divisible by 5, making 25px.

So, we can substitute and multiple of 25 (e.g. 25px, 50px, 75px, 100px, 200px, etc) for heights as needed. Need more of a button size: how about 125x25px?

 

Any thoughts?

If I were to build a new site that incorporated ad sizes, I'd definitely do this (or something very similar), rather than try to "accommodate" old ridiculous sizes like 728px that have nothing to do with anything. And besides, if an advertiser can't be troubled to make an ad to a specific and rational size, we probably aren't going to be a good match anyway.

Comments

  1. Great idea! Like your ad size definition.

  2. Certainly a nice idea i like the 260×260 size, however i think having too many choices would make people crazy . And a huge head ache for advertisers.
    Maybe its just me but i think too many choices are as bad as having none.

  3. Eddy
    Permalink to comment#

    You make a valid point, but you are making the same mistake, your ad sizes only work for you. Any other designer that doesn’t use 125×125 or 10 pixel gutters will have the same problem. If I would have seen “665×395″ without knowing how you got to it, I would also go “whaa?”. Maybe the thought behind the standard sizes was to offer as many different options as possible, so designers can go from there. Your suggested standards would only offer the option to go for a 125px grid with 10px gutters.

    • I’m not buying it. Having ad sizes with no relationship to each other doesn’t do anyone any good. And they don’t “only work for me”, the 125 building block I chose because of it’s commonality not it’s rarity. And no matter what size you choose, it’s not going to be perfect for everyone this second. That’s why it’s a standard. You pick what you think the best choice is and call that the standard and let people build around it.

      I have no delusions that this is going to be some new standard. I’m just saying if it was, it would be less ridiculous.

    • Well said Chris!

    • Matt
      Permalink to comment#

      Absolutely, and if I do say so myself, the tables era really did leave us in a state of ruin when referring to ad sizes.

    • Permalink to comment#

      The ‘standard’ ad sizes come from what was convenient on the big boys web sites in the days before and during the dotcom boom. No basis in any sort of logical design decision things happened too fast back then. The IAB sizes (http://www.iab.net/iab_products_and_industry_services/1421/1443/1452) are an attempt to impose some order on the future based on the common mistakes of the past.

      As an engineer in the digital ad/media space I would love to see some more logical thought go into fixing the current sized. But I doubt it will happen. The creative houses are used to making these sizes and without a lot of clout the media developers will not have much success getting them changed. In the mobile ad world, the fact that there are so many screen sizes and resolutions is still causing an issue… creative makes have to balance between making 200 different version of the ad with server the highest quality ad the media can provide.

      As I said I would love to see a new “standard” that made sense and the Googles of the world supporting it. But I don’t see it happening, I think we are stuck with the “organically grown” standard we have…

    • Permalink to comment#

      @Beggs: Not necessarily stuck. For example, a “standard” 728×90 ad can fit in a more rational 750×100 block, until 750×100 becomes the new standard. It’s like the pica system for print, where 25px (or 250px or whatever) becomes the new unit.

      Also take into account mobile browsing and what that can do to upend the current standard.

  4. Permalink to comment#

    Completely agree, I work for a company where I have to produce ads such as 728×90 and 120×600 for numerous things and they are horrendous resolutions to work in.

    The web has been evolving for years, time for a new set of ‘standard’ ad dimensions.

  5. I agree that we need a new “standard” ad size, and basing it off the now-prolific 125×125 ad probably isn’t a bad way to go. I always hate trying to fit 125×125 ads in the same sidebar as, say, a 300×250.

    But Eddy makes a valid point: your 260×260 suggestion works assuming a specific gutter size on a specific smaller-ad size, and that’s just trading one awkward system for another.

    Some sites do request non-standard ad sizes — Antonio at Woorkup (previously Woork) has used one-off sizes for years. But you have to have a very strong brand before you can pull that off!

    • It’s definitely easier to pull off in the “web design” niche. The advertisers in this space probably have a designer or team of designers to handle stuff like that.

  6. I think you are on the right track, seems like advertising space is still stuck on the banner methodology, instead of a more modular approach.

  7. “And besides, if an advertiser can’t be troubled to make an ad to a specific and rational size, we probably aren’t going to be a good match anyway.”

    Probably not, not when he can find millions of existing sites that accomodate the sizes he has already.

    They might be weird, but these sizes have been set in stone for years for precisely that reason, to take the hassle out of matching the advertiser’s creative with the publisher’s available ad slots and vice versa.

    the 125×125 is probably the most stupid of all, given that there is an even more widely used 120×600 ‘skyscraper’ format that could happily sit in the same column.

    When big brands buy ad slots they do it across hundreds, maybe thousands of sites, design your site to another standard and you’ll just be missed off the list.

    • I just think if an advertiser cares so little about your site that they can’t go through the few minutes it would take to make their existing ad design fit into a graphic for your site, then:

      #1) They don’t care enough about their own product/service

      #2) They don’t care enough about my site

      … and so it’s not a good match.

      I can see the point about a site buying ad space across hundreds of sites and wanting to streamline that process though. Hence, “standardization”.

    • I agree with Chris fully. 125×125 is perfect.

    • Permalink to comment#

      Advertisers don’t see your site unless you are a household word. The media buying agencies present the advertisers with a demographic breakdown of the users of the site(s) that they think will be best. And as Stephen implies, they are more likely to include your site if they don’t have to pay the creative makers more money to cut a special size.

  8. Great article! It would be better with theese sizes.

  9. Permalink to comment#

    check my design blog you gonna love it:)

    http://vasare.wordpress.com

    • Really? Blatant link spamming?

      I mean, I could see maybe if you had ads displayed at the sizes mentioned above, but your link has nothing to do with this conversation. :P

  10. Ade
    Permalink to comment#

    Considering most things in computing are calculated in binary or hexadecimal, including screen resolutions, I wonder why ad banners wouldn’t use the same system? (& other webby stuff :P). Your 125×125 would then be 128×128. You could have 32px or 64px as the minimal size, other dimensions would be 96, 256, 512, 768.

    • Poster
      Permalink to comment#

      So far, this is the best idea among the bunch…. I loved the idea as I read the initial article, but using a binary system to keep things ‘in check’ with the rest of the computing world just feels, well… natural, I guess.

  11. I think there should be a 160×160. That way its easy to chop up a wide skyscrapper into squares. PS- IAB recently updated and added 2 sizes.

    http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

  12. My theory is the the original ad “standards” were invented by Microsoft. Who else would come up with such a senseless system?

    • Permalink to comment#

      Yeah! Good point John. Microsoft’s ideas and standards are usually stupid and not very well thought out, and it seems that us as developers have to pay the price when designing and coding sites to conform to the ‘Microsoft’ way of doing things on the web.

  13. Permalink to comment#

    Makes a lot of sense to me. I always thought the weirdest thing about the ‘standard’ sizes was that the square is 125 while some of the other sizes are 120 width or height, so you can’t even mix the two. How’d that happen?

  14. Chris. This totally makes sense. This could be the 960grid for the add world =)

  15. BTW – Nice Footer Design!

  16. Permalink to comment#

    I can understand a lot your frustrations, but I would also point out that exchanging the ungainly sizing conventions we currently have for ones based off the conventional blog sidebar is in my opinion just pushing the problem into the medium term, instead of addressing the core issue.

    The core issue being: static display sizes generally. Making dynamic generation work would not be easy (or cheap) but it would dramatically improve upon the existing (and pretty widely agreed) crappy paradigm. Allowing for far more seamless and integrated advertising models.

  17. Mateus
    Permalink to comment#

    Tottaly agreed!

  18. Permalink to comment#

    Boolean!
    Never understood the retard standard but hopefully it’ll change; good work!

  19. Much better standard, Chris!
    I agree the current one is a bit stupid; really should be changed and fast!

  20. I personally like seeing ads as a whole (300×250 for example) instead of it being “chopped up.”

    I like your idea though, and you would earn more money from it too but that ends up slowing down the page if you imagine have two chopped up ad blocks on the page, that could be 6-12 http requests!

    Also when it comes to flash ads, these resolutions are perfect and sometimes even too small to work with (that’s why there’s the “hover to expand” type ads).

    People just need to be more careful when choosing placement and number of ads on a site. I am seeing a lot of sites simply putting a huge 728×90 ad above their template, which places content lower or “below the fold.” It’s really ugly in my opinion.

    • Permalink to comment#

      The ads are most likely not even on the same server so the primary site css-tricks.com would not suffer those penalties.

      Besides, the problem you are describing is obviously related to the ad-servers, perhaps they should optimize their code some more?

      The best thing with this article is the introduction of more logical sizes for ads. I have a hard time understanding why dimensions such as 468×60 px were chosen as standard.

  21. mikemick
    Permalink to comment#

    What if instead of creating sizes, we created aspect ratios. So your 125×125 would be a 1:1 aspect ratio. Then you might have a double tall aspect ratio 2:1, and so on. The original ads are sent to the ad agency at a max size. Then the website chooses which aspect ratio to use, and determines the size based on their website’s needs. It creates/caches the resized image kindof like a timthumb script. So if I wanted a 100×100, I could just choose the 1:1 aspect ratio, and then have it process a 100×100 size.

    Benefits seem to be less headaches for ad designers. Create a few different aspect ratio ads, and service infinite resolutions.

    I understand that people might want to create a different type of add for a small square, than they would for a large square. Maybe there are sizing thresholds. Once it exceeds a certain size, a different source ad is used, or whatever.

    • Permalink to comment#

      This is interesting. I was extremely skeptical until I saw the part about ‘sizing thresholds’. It needs some more research, but I think this could work.

    • Poster
      Permalink to comment#

      Well, now… I thought the binary solution made more sense, till I got here… this makes even *more* sense. I wonder what sensical joys await me further down this page…

  22. mikemick
    Permalink to comment#

    Actually, I think I just repeated JoeP’s suggestion

    • Permalink to comment#

      You said it better than JoeP. I didn’t understand what he was trying to say at first.

  23. Nice, I’m already employing something similar on my site. I currently have a 260×125 ad on my sidebar. This is great, we should standardize these.

  24. I completely agree with you, Chris. I’ve seen these ad sizes being used everywhere, namely in design related blogs, etc. Envato makes great use of these sizes, as do you.

    Nice post, hope to see this taking off even more soon!

  25. Lovely idea

  26. Jim
    Permalink to comment#

    I was glad that the IABC reduced their collection of standard ad sizes to less than ten after realizing that 80% of ad revenues came from just a few ad sizes. They’re still rather arbitrary as far as size goes. I’d rather they adopt something like you’ve put forward. IABC could state that W, X, Y and Z are the “basic ads” but anything that fits into grid system A is okay but not as universally used.

  27. Well – I like it a lot – however, I would have to say you would need a vertical gutter for deviding the 125 base block into buttons or smaller ad’s. I would say 3px would be good, so you could have 5 22×125 or 1 47X125 and 1 72×125 (and so on and so on..)

  28. Permalink to comment#

    The idea is great. And i agree that ad basis should fit 960px grids, be it 16-columns or whatever

  29. I absolutely agree. Have you seen some of the 728 X 90 sized ads people put into their headers and footers? Ridiculous! I have been using this technique for a year or so now. It all just stays clean. Great article, Chris.

  30. Great post, and I agree wholeheartedly.

    This made it into my moleskine :)

  31. I agree but the hard part is making it work… for all but the biggest sites, the ad networks call the shots, not the webmaster.

  32. I think the history of the 728 block relates to the once-common 800×600 screen resolution. Someone could confirm this by opening IE3 at 800×600 with standard margins and scrollbar width.

    Because smaller ads were not constrained by available screen real estate logical dimensions were chosen.

    I agree that revising sizes would be good, but I suggest that an even better approach would be an ad server that tweaked ad sizes on the fly based on the available space on the client site. Ads could even be produced as HTML fragments with in-line CSS.

    Just a thought.

    ::Leigh

  33. RCH
    Permalink to comment#

    I agree for a new standar, but I’m not sure about 125px module. If we’re trying to make a new standar we need to use some standar size and proportions in the global layout. 960º gred system, Blueprint and others where 125px is not supported, are good parameters.

  34. Permalink to comment#

    Yes man ,this should be great for standard.

    Google adds sizes, make no sense to me!

    You can’t fit those in to design.It looks weird most of the time!

  35. Your redesign is a great idea, designwise.

    How do you propose to get it adopted by the web advertising industry, the hundreds of advertising agencies serving that industry, and the thousands of major corporations with web sites designed around the admittedly idiotic current set of banner ad sizes?

    I look forward to your solution.

  36. 125x seems to be the new standard even though nobody is really saying so? most new sites use that now as a base regardless of 10px or 20px gutter. I think trying to push a 160 instead of 125 as standard is a little late to the game at this point – but the math does play good on it

  37. Matt
    Permalink to comment#

    I would prefer to see the dimensions from 960.gs/demo.html used: 60, 140, 220, 300… The ratio idea has some merit as well.

    • This is originally exactly what I was thinking, until I realized that you’re using the 12 col grid, and I the 16. In that case the only beneficial sizes are 940, 460, and 220px. All other sizes are only usable by one or the other.

      Additionally, that doesn’t account for any possible padding or column borders, which can vary wildly from site to site. That’s a good starting point however.

  38. Chris, great idea. The current standard ad sizes can’t really work with each other and who knows what did the people that made them thought they are doing.

    Why not start a website like iab.net but with these new ad sizes? I believe a lot of people would support it and eventually those new sizes will become the true standard sizes.

  39. Permalink to comment#

    I totally agree! Great article, Chris. Interestingly enough, your Elegant Themes advertisement is 390px wide not 395px. Just a fun observation-no personal attack intended.

    Thanks for sharing.

  40. I agree. The idea of building the banner from building blocks are great. The original sizes of 728 was also defined at a time when screen resolutions was smaller.

  41. Forget HTML 5; Ads 2.0 is the future.

  42. I agree. We should have an international standard for ad sizes that make sense. The one in use today is not compatible with grid designs.

  43. As for me, I hate 468×60. I make flash-banners and I know, how hard is to make such dimension beautiful and clickable.
    I vote for 300×250. It’s the best .

  44. Richard R
    Permalink to comment#

    I couldn’t agree more! For years now I have often wondered why on earth people use such strange dimensions for their ad’s. These strange sizes have been adopted by so many ad networks they have become the standard. But WHY? Who thought up theses sizes? I might be wrong but I suspect these current standard sizes were used by someone big like Google (example) because they fitted neatly into their website and eventually to avoid having to re-design an ad people just stuck with this.
    Like you, I think it’s time we change this. For me I would also prefer the ad sizes you mention. Sizes which have some kind of symmetry so they can fit neatly into any layout.
    Surely a symmetrical ad like the sizes you describe would out preform the current standard because common sense tells me the ads would blend into a layout better, look more professional and ultimately be more pleasing to the eye.
    Also, by adopting your sizes an advertiser could have one vector image that could be used for all symmetrical scales. Granted this could be done with the current dimensions but with the new sizes it would be easier to design around.

  45. Permalink to comment#

    Wow, Chris,
    You really stirred it up with this post. I personally couldn’t agree with you more.
    As far as mass adoption, I don’t think it is as hard as a lot of people think. The current set of dimensions we now have, were set by a large advertising networks(read Adsense). If we (you) could somehow persuade them or perhaps BuySell ads to adopt these new dimensions. I think you would be off and running. Advertisers would be forced to comply.
    thanks for all your hard work!

  46. Permalink to comment#

    I agree with Tim’s
    Well – I like it a lot – however, I would have to say you would need a vertical gutter for deviding the 125 base block into buttons or smaller ad’s. I would say 3px would be good, so you could have 5 22×125 or 1 47X125 and 1 72×125 (and so on and so on..)

  47. Stephane
    Permalink to comment#

    BTW, I’m surprise at how many people seem lost as to where these sizes came from, the simple answer is that the biggest websites in the early years of the web all had different ad size, they did different size to try to steal the ad revenu from each other. Other people simply started to use the most popular sizes, many sizes are not that much use these days like the half banner (234×60) but are still in the IAB recommended format. We should ask the IAB to reduce the number of sizes before trying to create new ones.

    • Permalink to comment#

      I agree!
      I think the keep it simple approach has gone out the window!

      2010 might be the year where standards are revised and re-factored and the old standards abolished if not used or impractical.

  48. Permalink to comment#

    This would be way too good of an idea to ever be logically doable. at least not to those at IAB anyways.

    Definitely good idea, and will try to adopt this into my work. Maybe if enough people do it, it will be the new standard.

    This one is great, using a prime number even.
    88 x 31 IMU Micro Button

    Makes perfect sense to me…. :P

  49. Totally agree
    some of the current standard dimensions are ridiculous.
    but using numbers like 0 or 5 (125,260,800,… etc) is easier and reasonable

  50. Reminds me of the old newspaper system for buying display ads measured in “Column inches”.

  51. Permalink to comment#

    @Chris Hi, I’m thinking of designing my next site based on 125×125 squares. i love something about the organization and symmetry of squares, it makes my brain happy. I was thinking of making a site of 935×530 or 665? Also, Gutters or no gutters? I think if I used a bunch of gutters it could be a cool effect, but I’m not a web design expert, so will I have a problem with all the http requests? Can I keep the image size low enough where this could be ok? Any thoughts? Thanks, Lon

  52. Ant
    Permalink to comment#

    0 × 0 advertisements are best… because adblock rules.

  53. Permalink to comment#

    Nice idea! But wouldn’t it be even better to use 60 (or 960 for that matter) and chop it down to pieces? Like 10, 12,15, 20, 30 (or 480, 320, 240, 192, 160 etc.) and all

  54. I agree. Many ad sizes are ridiculous. Using 125 as a building block is a good idea. For longer banner ads 530×75 or 530×50 could work and still follow the format.

  55. Permalink to comment#

    When I do my ad management system I will probably have 100×100 pixel ad-blocks in the sidebar and then two or three larger rectangle ad-blocks separating a blog post.

    What do you think?

  56. Permalink to comment#

    Although widely adopted by WP blog sites, 125 x 125 is one of the most awkward ad units of them all. It doesn’t fit any of the conventional 960px grid systems and, worse still, it is an odd number.

    It certainly doesn’t provide a healthy starting point on which to base a whole system of ad sizes.

    Either way, it’s a moot point, because no one is going to be changing from the current standard any time soon. Be happy if your publishers support the universal ad package and suck up the various odd ball sizes other less mainstream sites come up with on a whim.

  57. Steve
    Permalink to comment#

    IAB decisions are driven by numbers, and I’m not referring to number of pixels.

    It’s all about the number of advertisers, number of agencies, number of clicks and…. most importantly, number of $$$s related to any particular size or shape.

    Great suggestions, though.

  58. Permalink to comment#

    You are totally right.

    This should become the new standard, I suggest website designers start working according to this logic.

  59. Css came to demolish the rigid layouts, so why do you want to come with ad blocks? Why not defining a price per square pixel of Advertising on web?

  60. Johnny
    Permalink to comment#

    I’m surprised there has been so little mention of “shape” in this discussion. I would suggest that we try and keep some of the lessons of the print world, and keep the same ratios as for standard ISO paper sizes. (A0 through the familiar A4 and A5, and beyond – not the silly sizes Used in the USA) These have a standard ratio of length/width, and each size is half of the next size, so you could be certain that any standard width (or height as may be) will work – maybe for a single vertical ad, or for two horizontal ads in the same place.
    This would naturally tend towards the ideas mentioned above of using ‘binary’ sizing: 64px, 128px etc, though the other idea would be to use base12, as it is even more flexible – can be divided by 2,3,4 or 6 not just the 2,4,8 for base 16

  61. Let’s go metric with it: Set “em” as the base size, then we can have 2 deca-em by 2 deca-em (20em by 20em) square ads, and so on. Ems scale, and the metric system supposedly is the only way of measuring things that makes sense (if you believe all the ridicule of America’s systems or lack thereof)… So there ya go. :)

    Seriously, though, I’d love to see standardized sizes that work well together. Good standards get adopted rather quickly assuming one or two “big names” pick up on it. Just look at the proliferation of the RSS image or the Share icon or any of a number of other ideas.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".