From the BlogSubscribe Now

Responsive Web and Advertising clash

In a recent Digiday article about how the New York magazine online edition is moving towards responsive web design, they describe some of the challenges faced by this school of thought.

As some of you know Responsive Web design is a school of thought that says you should design your web pages in a flexible layout that allows devices with various screen sizes access your site in a somewhat similar fashion.

For instance, you want your website to be usable to the person using a 4 inch iPhone and to the person using a 30 inch desktop monitor. One person would be using their thumb to navigate and the other is using a mouse and keyboard. In the past you would have had to design two different websites but these days you can’t accomodate for every screen size with a custom site, you need to make your layout flexible via the CSS.

I think the majority of online advertisers have no idea what is about to happen to their ads. So let me give you a bit of preview.

  • Currently most ad units are standardized sizes, the IAB standard units of 728 x 90, 300 x 250,  468 x 60 and 160 x 600 etc.
  • These ad units are quite rigid meaning that if the screen is bigger the ads dont get bigger, and if the screen is smaller they don’t really scale down well. The buttons may be too small for a thumb to press or the text might be too hard to read for an average user. They are really optimized for desktop viewing.
  • In recent years mobile advertisers have introduced mobile specific ad units but these too are quite rigid in their design.
  • From a reporting perspective, if your ad unit shows on a small screen but is unreadable, it still counts as an impression. This is a waste of your ad budget.
  • Right now most publishers don’t use ad tags that have operating system detection or device detection. Using a tag like this would help determine what ad unit can be seen given the screen size.
  • Your beloved retargeting campaigns may not work. As more ad networks are allowing cross device pixeling, you are not guaranteed your retargeted ad unit will look correct on the smaller screen.

Some publishers are taking steps to make their websites respond well to the large variations in device size but they need to take steps to monetize this inventory in a comparable manner to their desktop viewers.

As more and more people access the web via their phone or tablet, it will be increasingly important to create responsive ads that scale well and are easy to click on with a thumb or mouse.

Some tips to help make your ads perform better on mobile:

  • Ask your ad network you use, what happens to my ad when a mobile user sees it? Is it possible to show them a different creative size?
  • Test your ad unit on multiple devices. Make sure it is easy to click and make sure the landing page is easy to use regardless of the device.
  • If you don’t have ad units that scale down well, ask the ad network to block those impressions from your campaign. This may cut into your campaign quite a bit but at least you know the user experience is consistent.
  • Ask them if they offer click to call services based on the device. For instance if you are a hotel and a person sees your ad on a smart phone, why not just ask the person to call instead of going to a web page?
  • Use more text based ads which tend to scale a bit better.
  • Do not use Flash ad units. iOS devices do not support flash at all and it renders inconsistently on other mobile devices.
  • Check your analytics data to see what type of devices are accessing your ad specific URLs to get a better idea of the screen sizes
  • Talk with your ad designer to see what they know about responsive web.
  • Check with your webmaster to ensure you are collecting analytics data on your visitors.

Responsive Web Design for Lead Generation

If you have reviewed your Google Analytics account lately you will notice that a large portion of your users are now accessing your campaigns via mobile devices such as phones and tablets.

If you have been in the lead generation industry for a while, your pages are most likely not coded correctly to render well on these devices.  Imagine if 30-40% of your visitors are not seeing your webpages the way they were originally designed.

What would that do to your conversion rate?

You know your media prices are going up, your compliance costs are going up, and all of a sudden your conversion rates are dropping. Margin is being crushed because he overall market is changing how they consume data.

Time to invest some time in learning Responsive Web Design.

Responsive web is essentially a CSS sheet on steroids. It plans for a variety of devices and platforms so your actual site renders in a very user friendly way every time.

Do you need to consider all browsers and devices? No. Start by looking at your Google Analytics data to see how your current users are coming in. Prioritize those first.

Some good examples of responsive web design can be found here. 

As you can see from these examples, this is for basic web information. It alters placement of navigation, sizes of images etc. However, in many lead generation situations this is not optimal.

Being in online marketing we need to do more testing with actual consumers about how a resized form may convert.

For instance – take a look at this form – 

The form on the left is a screenshot from a 13 inch laptop screen using Safari and the pic on the right is the same page on an Android phone using Chome.

The page resizes to the phone screen but all the text resizes at the same rate. Much of it is too small to read without zooming.

In a better case scenario, the drop down menu would be much larger on the phone screen, text larger and the call to action button larger. I would also recommend testing the page on an actual Android device for both right and left hand users. The placement of the button for a right thumb could help conversion dramatically.

I would also get rid of the orange bar and potentially rework how the large number “1” is displayed. The goal is to make the page as light weight as possible so it loads fast on a slower mobile connection.

Lastly I would rework the BBB and Verisign logos to be more influential on the mobile page. With such little copy and virtually no branding you want to assure the user their info is safe.

Key takeaways –

1) Look at your visitor data for each campaign to see what type of devices your users most commonly using.

2) Test pages on real devices to see how they look and feel. Optimize for the thumb as the main input, not a mouse.

3) Augment your CSS to detect and serve pages according to the device or OS.