7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. UX

A Beginner's Guide to Designing Ad-Friendly Websites

Read Time: 8 mins

Advertising has always been big business and, these days, the Internet plays a massively important role. By 2011, advertising revenue on the Internet surpassed that of cable television in the United States and, the following year, estimates put US Internet advertising revenues at $36.57 billion.

With many profit-generating sites relying on advertising income, appeasing advertisers is an important affair. However, overload a site with ad space and you'll turn visitors away, thus dashing hopes of fruitful relationships with advertisers and potential profit. Establishing an equilibrium between your users and your advertisers is the key to designing an ad-friendly site and, in this article, we're going to take a look at some of the concerns and best practices for making one.

Understanding Ads

Understanding the advertising business is probably one of the biggest obstacles to manufacturing a well-designed site that's optimised to attract advertising, although it's pretty straightforward.

Advertisers may buy ad space for a number of reasons — much like any web design project, the specific goals and requirements can differ drastically between campaigns — but it's generally to gain exposure for their cause. The more potential there is for an ad to be seen and/or interacted with by a certain number of users, or a specific demographic, the more demand exists and the more money the site can charge to offer advertisers the privilege of working with them. A leaderboard ad on the front of The New York Times is going to attract more advertising interest and call for higher prices than a 100 x 100px box on the bottom of the third page of an individual's niche blog.

Banner advertising used on The New York Times website.Banner advertising used on The New York Times website.Banner advertising used on The New York Times website.
Banner advertising used on The New York Times website.

It's also important to understand which metrics are being used to track the success of an ad, and this isn't something we can give a universal answer to. Some ads will be sold based on how many people are likely to see them, while others may be priced based on how many users click through. Therefore it's important to take the content of this article with a pinch of salt. Always consider how the site will be selling advertisements to design around that fact, although most what we talk about is near-universally applicable.

Considering advertising throughout the design process is vital; there can be significant repercussions for just slapping in some ad space at the last minute. When the majority of the site's revenue will come from advertising, the users are the product you're marketing and turning them away with obnoxious and over-saturated advertising starts to diminish the value of what you're selling. Therefore, taking a moment to consider how advertising will fit into your design is crucial for the future existence of an equilibrium between happy advertisers and satisfied users.


Adverts come in all different sizes and can take up a significant amount of real estate within your design. There's no rule dictating that you must use standard ad sizes in your design, but adopting commonly used dimensions ensure a seamless process for potential advertisers to run a campaign within your design.

The Interactive Advertising Bureau have established the most common set of advertising dimensions on the web and it's highly recommended you use these sizes. These dimensions range significantly in size from large, page-wide billboards, to smaller rectangles, so the available catalogue should not hinder your design too much.

IAB Ad SizesIAB Ad SizesIAB Ad Sizes

Arguably, especially in recent years, there's another dimension of sorts that may need to be considered too. You may choose to offer smaller ads that are allowed to expand over your content when actioned by a user. Since this naturally covers other elements on the page, considering where to position more important content so it isn't impacted too badly by expanding ads is important.

The user experience thses ads offer is a touchy subject, so be very aware of the level of intrusion these ads offer.

The proliferation of huge expanding banner ads on major websites has made me very adept at one thing: learning where the close button is.


Positioning your available ad space is perhaps even more important than choosing its size. Advertisers won't value space hidden away nearer the bottom of the page, so selecting a position that requires zero to minimal scrolling to view is always a good idea.

Likewise, since most of your users will be visiting your site for your content, positioning ad space nearer to, or even inside, the page content is likely to increase interaction and increase value to advertisers.

Saying that, it's vital to take extra care when working with advertisements inside your core content so that they are both well distinguished from the rest of your content — for a variety of reasons and, in some cases, legally required — and don't occur too frequently to annoy the user.

Twitter's integration of Promoted Tweets is a prime example of how advertising can be well engineered into content while providing minimal interruption. Not everyone's happy about their presence, and this is the perpetual dilemma faced bay advertisers and designers.

Promoted TweetsPromoted TweetsPromoted Tweets

Likewise, Google displays its ads in search results right alongside the core, unsponsored listings with similar styles allowing for the flow of the page to be uninterrupted, yet feature advertising in multiple locations.

Google adsGoogle adsGoogle ads

Your choice of positioning for ads can also be influenced by established layout theories, such as the F-layouts and Z-layouts. Defined by evidence of how users read and interact with a page, these layout theories can help to guide the placement of your ad spaces so they are in the optimum areas for visibility. Of course, this should come with as little obstruction to easy viewing of the core content as possible, but it's something to keep in mind.

Many sites opt to feature an ad at the top of a sidebar, in the second "line" of the Z, between user's scanning a title and getting to the actual content.Many sites opt to feature an ad at the top of a sidebar, in the second "line" of the Z, between user's scanning a title and getting to the actual content.Many sites opt to feature an ad at the top of a sidebar, in the second "line" of the Z, between user's scanning a title and getting to the actual content.

Many sites opt to feature an ad at the top of a sidebar, in the second "line" of the Z, between user's scanning a title and getting to the actual content. On the other hand, sites like The Washington Post use the F-Layout theory to display a smaller ad at the most visible part of the page, with larger ads in areas that users are less immediately drawn to.

F-Layout adsF-Layout adsF-Layout ads

When accommodating multiple advertisements on a single page, spacing is another area to investigate. Some designs opt to bundle together smaller ads into a single area of their page, while others use larger ads but in different location. Bundling ads together might keep the ads a convenient distance away from the content in a way users enjoy, but that can have detrimental effects on how advertisers see your site and, once again, finding the right balance is a project-specific consideration.

It's really important, at this stage, to understand from where your ads are being delivered. If you're delivering ads from a network such as Google AdSense, there are sometimes strict placement guidelines which can limit your freedom of positioning. It's imperative you make yourself fully aware of any such guidelines to avoid any trouble down the line.


You'd think more ad space equals more money, but over-saturating your design with too many ads can have the opposite effect. If a user is being bombarded with advertising they're probably going to get annoyed and potentially leave the site with no intent to return.

As a general rule of thumb, when your users are looking for something, you should keep ads to a minimum in order to keep them on your site for longer, rather than pushing them to leave.

On pages such as your homepage and search result listings, consider minimising the use of ads and focus instead getting your users to the content they want. When they're settled into the site and have the content they want, it's time to start showing them a bit more advertising.

TIME homepageTIME homepageTIME homepage

While ads on your front page might garner more impressions, hiding what the users came to see in the first place within a sea of commercials will do nothing to make them more comfortable and likely to interact.

For example, TIME's website features only one ad on the homepage, dedicating the rest to navigation. Upon opening an individual story, however, that number is increased and new ads above the content appear. Likewise, YouTube uses video interstitial and sidebar adverts on individual videos but their homepage only features one, clearly distinguished banner.

Interstitials … immediately present rich HTML5 experiences or "web apps" at natural app transition points such as launch, video pre-roll or game level load.


Final Thoughts

Creating an effective, ad-friendly design is all about producing the perfect balance between having your ads seen and recognised by users, without encroaching on the content they came to your site to see. By making careful decisions when it comes to the size, positioning and frequency of ads, this can be a simple process and an important improvement in the financial success of a design.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.