Responsive Design Will Save Mobile Advertising

• Comment (1)
• Recommend (1)
• Tweet
• 

In recent months, an old concept called responsive design, traditionally understood as a way for publishers to address different screen sizes, has re-emerged as a hot topic. The concept was popularized in the early 2000s with John Allsopp’s piece A Dao of Web Design, an ambitious manifesto that implored designers to make Web site layouts fit dynamically to various screen widths.

In recent months, specifically with the launch of the new iPad complete with retina support, it is becoming clear that responsive design may potentially address the much greater problem of delivering attractive creative without overtaxing mobile carrier networks.

The development of retina-screen Macs, in particular, underscores the need to keep design consistent for all devices. However, the pressure to deliver higher and higher-resolution content and advertising over mobile networks often means compromises in terms of speed, cost to the consumer and customization for brands, agencies and publishers.

Content is more attractive and engaging than ever, but the ads are not yet keeping pace across mobile inventory. It’s no wonder that analyst Mary Meeker’s report on mobile eCPMs has thrown cold water on IPOs, demonstrating that mobile advertising is not generating the same level of revenue traditionally seen in desktop advertising.

Responsive design is a more valuable solution for scaling monetization than it is for scaling publishing content. For ads to be effective and carry higher eCPMs, a higher percentage of them should be interactive -- both in terms of dynamic, always above-the-fold placements and in terms of functionality so that the advertiser does not need to manage conversion functionality outside of the ad unit.

Responsive design can solve the problem of larger, interactive ads being loaded over mobile networks. Creating one intelligent tag that responds to the size of the screen minimizes the number of images loaded within the ad package. Using Web fonts for text and icons and even logos allows for scaling to retina quality by removing even more of the image files traditionally contained in photoshop designs.

CSS can be used for buttons and ads with dynamic backgrounds so that the only images required are those that are absolutely necessary -- e.g., the product, people, or highly complex designs. In an ideal world, support for SVG (scalable vector graphics) would be better on mobile so images could be scaled even further, but that tactic is not yet ready for prime time on iOS, Android and Windows devices.

As an unwritten rule, creatives usually strive for pixel-perfect ads. On mobile networks, pixel-perfect is a challenge that requires either bypassing mobile networks through caching ads or by getting rid of pixels altogether as a principle of design. The need for images in advertising has greatly diminished following the popularity of using colors, masking and shading in backgrounds and text. By using percents instead of pixels, one can make text and backgrounds in ads scale up and down without losing resolution or requiring multiple versions of creative.  

To better understand this concept, take a look at this example using your new iPad, iPhone 4 or 4S smartphone and zoom in on the screen as far as it will go. Another way to understand the difference between image quality versus CSS and text is to visit Facebook.com on the same devices and take note of the clarity of the text but the blurriness of the Facebook when zooming in. Most Web images and advertisements are set to 72 dpi rather than the standard 300 dpi for print; even if Web designers were to move to 300 dpi, images would choke up the mobile network so badly that users would likely never see the ad creative even when using Wi-Fi.

Contents may shift. Getting the creative work onto a mobile device is only part of the battle. Because mobile is a dynamic medium, it is important to be flexible and deal with movement. Half of all tablet users hold the device one way while the other half holds it another, so ads must be viewable in both portrait and landscape. In addition, smartphones and 7-inch tablets have varying screen sizes and therefore require adjustments to the sizes of banners and panels. Simply applying colors and fonts well goes a long way toward making mobile and tablet ads scale beautifully.

Mobile marketing exists to allow brands to travel with consumers so that communication is open anytime and anywhere. The standards of how to effectively deliver great creative exist, but the urgency of making advertisements available over weak mobile networks, make it imperative that we embrace the next of level of sophistication in design.

• Comment (1)
• Recommend (1)
• Tweet
• 

1 comment on "Responsive Design Will Save Mobile Advertising".

1. Kelly Dechiaro from Chiaro Designs
   

   commented on: June 29, 2012 at 2:05 p.m.
   I am a big supporter of web fonts and agree that they are a good solution, however, there are serious implications for licensing and added costs from foundries when live type on the web is involved.

Leave a Comment