How Do I Make Ads Responsive On Mobile Devices?

By Author: Michael David Wilson
Total Articles: 28
Comment this article

Your visitors view your website through so many types of Internet-enabled devices: desktops, laptops, netbooks, TVs, tablets, smartphones, etc. That means there are different screen dimensions and resolutions to consider. The goal is that your website's content and accompanying ads should display correctly on the majority, if not all, of these devices. To accomplish this task, there are a number of options, including CSS, JavaScript, and device detection. Depending on your ad setup and existing design, you can choose an option that works for your website and your advertiser's ads.

CSS and JavaScript
Most modern smartphones and mobile devices support JavaScript and CSS like a regular laptop/desktop, so this solution is suitable if your target viewers are browsing your site using one of these more modern devices.

To be responsive, you can set the width and height via CSS rules to be relative (i.e. "width:100%;") instead of a fixed pixel number (i.e. "width:728px;"). This might involve adding a wrapper or extend existing CSS rules to apply onto the ad. We also recommend using the JavaScript-based serving code ...
... so that the CSS rules can be inherited down to the ad elements.

To make things simpler, less costly and more standardized, you do not need to code individual CSS rules and write the same JavaScript functions that are very common to many websites. With this in mind, JavaScript/CSS frameworks are designed to address the most common front-end web page setups. We recommend Bootstrap, which is one of the leading frameworks to enable responsive design for your website and ads.

Device Detection
Another approach is to use a gatekeeper, which redirects to mobile website or full site depending on the visitor's device. This gatekeeper can be implemented via your server-side software or via JavaScript as a client-side redirection. Then, you can have control over which ads are displayed via the zones. For example: on you desktop/full website template, you display the full-site zones. On your mobile website template, you display the mobile zones. This solution is suitable if you think JavaScript might not be available on your target devices or if you need more control over which ads to display.

Ad Restriction on Specific Devices
If you have an ad that is designed for a specific type of device, you can apply an ad restriction to only that device so that it is displayed properly. Viewers on other device types will not see this ad. This solution is suitable when the ad format demands it.

Testing a responsive ad placement
It is always a good idea to frequently test if your ads are responsive. You can do this by re-sizing the browser window manually, or by visiting your website using a mobile smartphone and any other devices that are likely used by your website visitors.

AdSpeed Ad Server is a reliable and powerful ad serving and ad management solution that serves your ads, track impressions, clicks, and report ad statistics in real-time. Driven by the changing needs, this Adserver continues to develop more innovative features and to offer a wide-range of advertising services.