Improve Mobile Ad Impact with Responsive Design

5 minute read
Katie Ingram avatar

Responsive Design, mobile apps, mobile advertising
The ResponsiveAds Responsive Design Format

Marketing isn't just about creating a worthwhile customer experience through engagement and conversation, it’s also about how well an ad is received by its targeted audience. This reception is often hindered when the ad isn't correctly displayed on a device's screen; a problem that can be easily fixed through responsive design.

What is Responsive Design?

Before we dive deeper into the problems that ads can have when viewed on different devices, let's first take a look at what responsive design is and how it works.

Internet-enabled devices come in all shapes and sizes. Due to this, not all websites can be viewed in the same way because of how these screens vary from the tiny smartphone to the larger desktop computer. While on most laptops and desktops the screen adjusts content by having users scroll to see anything that’s hidden or including a zoom feature, this can’t always work with mobile. To help with this many website developers have started using a responsive design approach, which is made possible through CSS (cascading style sheets).

Once a device has been identified, CSS can adjust the site's resolution according to that device (or device type), which also eliminates the need for a mobile version of the site.

Responsive Design, Meet Online Advertising

Marketers often run into many problems and issues when launching a new campaign and need to make sure that smaller problems, such asthe visibility of an ad or website isn't one of them. Having less problems means that marketers can concentrate more of their time on the customer and the campaign.

When buying an ad unit, advertisers have to make sure that the ad fits certain dimensions. For example Google’s Adsense lists that a banner ad is 468x60 and a leaderboard ad is 728x90. Many of these dimensions are pre-set and fit poorly into smaller screen sizes, so marketers often have to design a number of similar ads that can fit both desktop and mobile devices.

A solution for this problem is to adapt the responsive design that is being used for websites for ads. Three companies that have responsive design solutions are ResponsiveAds, Google Adsense and Undertone.


ResponsiveAds offers users two responsive tools. The first is Stretch, which helps companies design different kinds of advertisements for placement on the screen such as accordion, linear and backdrop. These ads are then able to, through HTML5, adjust to whatever screen resolution is being used. The second tool, available in a beta format, is called Responsive App Canvas. App Canvas enables marketers to create responsive expanded ads that can be embedded with HTML5 widgets, such as a form or map.

Google AdSense

Instead of developing a brand new tool, Google has updated its AdSense ad code policy so that publishers can modify the code to display ads clearly on any device. Before this change, as was mentioned, Adsense ads were placed into fixed slots. Now by changing its policy, AdSense users can make their ads fit any device through a simple change in the javascript code. The following is a snippet from the Google Adsense policy page that shows how this change is made: 

if (width > 800) {
google_ad_slot = "2345678901";
google_ad_width = 728;
google_ad_height = 90;

Learning Opportunities

Google notes that ads will only adjust to fit a screen's resolution, not changes in a screen's orientation.


Another company that has released a responsive ad product is Undertone with Screenshift. Using what is referred to as an impact ad format, Screenshift was built using Undertone’s Impact Accelerator, a "proprietary new platform that serves as a framework for rapidly developing and launching new cross-screen high impact formats." Therefore, Screenshift not only scales down a webpage and its content, including ads to a particular size, but also converts drag and drop to tap and swipe and gives users the option to add "interactive media" buttons such as a gallery or a Twitter feed.

Unlike the other tools mentioned, Undertone does all of the design and management work for the client. All the client needs to provide are high resolution 2000x1000 images, a layered PSD file that is 1280x1050, a PDF explaining any animations the client wants added, artwork such as a company logo, and 'creative executions' on how the page or ad should look when finished.

Responsive is the Way to Go ... For Now

The response to responsive design ads has been overwhelmingly positive, as many reports have noted it not only improves the look of a website, but can make ad development an easier and more efficient process.

Responsive ads make life a lot easier in a mobile world,” wrote Roey Franco. "One multi-version ad can run on virtually all devices and platforms without a lot of costly production time.”

Responsive ads are also seen as way to improve the customer-business relationship across a platform of different devices.

Responsive-ad creative might help publishers monetize their mobile traffic more successfully than they’re currently managing to, by enabling them to more easily sell cross-platform packages as opposed device-specific media,” wrote Jack Marshall.

While responsive design ads are new and make a good addition to the marketing toolset, this wasn't always the case for the responsive design website model. It remains to be seen what longstanding impact the ads will make, as both mobile standards and advertising formats are always changing. 

About CMSWire

For nearly two decades CMSWire, produced by Simpler Media Group, has been the world's leading community of customer experience professionals.


Today the CMSWire community consists of over 5 million influential customer experience, digital experience and customer service leaders, the majority of whom are based in North America and employed by medium to large organizations. Our sister community, Reworked gathers the world's leading employee experience and digital workplace professionals.

Join the Community

Get the CMSWire Mobile App

Download App Store
Download google play