Handling Ads In Your Responsive Web Design

When setting up an ad campaign, you usually configure the ad dimensions based on the desktop version of your website. But what happens at smaller screen widths when your responsive design kicks in?

If the ads are in your sidebar, they may just tag along with your sidebar. If you hide the sidebar at lower widths, the ads will be hidden. But if you stack the sidebar under other content, the ads might be too wide for the screen width. At this point, a decision needs to be made about reformatting or perhaps removing the ads altogether.

Let’s consider the first scenario – reformatting the ads. Depending on the agreement you have with the respective ad network, reformatting or resizing the ads may not be an option.

If reformatting is not an option, check with the ad network for an optional size. Be clear you are displaying only one instance of that ad at a time. Meaning, the full desktop ad will be hidden when the smaller ad displays.

The next option is to reformat the ad to a different size. This may require rewriting your copy. But it will depend on how much space your going to allow for the ad. On a mobile device, an ad consuming lots of vertical space won’t provide for a pleasant user experience.

You might decide not to display the ad but still show sidebar content. In the case, you can wrap the ad in a div and give the div a name. Next, find a width range the ad will not work in. Target the ad’s div (through the name we provided for the div) by hiding it.

There is a balance you’ll need to weigh between ad network restrictions and user experience vs revenue. There above are a few important factors to consider when displaying any ads on smaller screens.


Not Sure How To Fit A Responsive Web Design Onto Your Existing Website?

Worried About How Long It Will Take To Find All The Needed Knowledge and Put It Altogether?

You No Longer Have To Worry.

Practical Responsive Web Design is an all in one course that will show you how to fit a responsive web design onto your existing website without sacrificing hours upon hours learning and running down dead ends.

Guru status not required. You'll see step by step how do your website, new or existing, up and running with a responsive web design.

How do you get started? Just click here and let's begin.