What’s next for mobile now that adaptive design has failed?

[Update: This article was written for business readers. Due to an outcry from the responsive design community after this was published, I added the word “web” to the term “adaptive design” to avoid confusion with progressive enhancement, and updated the text to read that Facebook uses “a precursor to” responsive design, even though very techie trades like RWW say that Facebook uses responsive design. Obviously, the outcry has more to do with the content than the terminology, but it’s always good to be pedantic. Read on!]

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":458766,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"A"}']

Analysts commenting on Facebook’s IPO have highlighted a major issue in mobile computing: that it’s incredibly difficult to monetize on mobile devices. Like many other engineering-led cultures, Facebook has embraced adaptive web design, a precursor to also known as responsive design, where essentially the same code can render itself down from a desktop browser to a tablet to a diminutive mobile screen.

Adaptive web design is an elegant solution to the thorny technical problem of having to deliver a content experience on multiple devices. And engineers love more than anything to apply the same hammer to multiple nails.

Unfortunately, users do not agree. Desktop web browsers, tablets, and mobile devices are fundamentally different and are used in very different ways. Across our properties at CBS Interactive, we have experimented with a variety of adaptive and direct designs and are learning the hard way that a one-size-fits-all solution delivers a subpar user experience.

Turn those mobile pages

The app has defined the mobile form factor. Users expect to see menus with only a few relevant options that do not require scrolling, titlebars with back buttons, and do not mind paging through content as long as it loads fast. In contrast, when a full size web page is adapted down to a mobile form factor, it forces a lot of vertical scrolling – even if some components are removed and others are made smaller.

Narrowing a mobile experience down to the essentials of what a user wants while mobile is critical. Tight menus and quick page loads compel users to turn more pages, which is essential in the small mobile form factor that has limited ads. Some ad units on mobile are worth more on mobile than desktop — for example, someone reading a product review on a mobile device in a store is likely contemplating buying that product.

Content publishers can learn a lot from airlines and banks, which are usually technology lagards. The mobile sites of United Airlines and Wells Fargo are tight, focused, and substantially different from their websites.

Tablets are for swiping

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":458766,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"A"}']

The tablet is essentially a magazine form factor, and users have been trained by numerous popular apps ranging from iBook to the New York Times to Flipboard that they should swipe right to left to page through content an a tablet. Users are perfectly happy to swipe through an article that is split into several pages, since this is what they did with magazines.

Rather than adapting a web page down to the tablet form factor and requiring users to scroll vertically, publishers should embrace swiping. Users are not perturbed at all to see a full page interstitial ad stuck into the mix while paging through content, making the tablet extremely monetizable.

Swiping is very difficult to code for mobile web. Fortunately, there are turnkey solutions such as Pressly and OnSwipe that make it easy for simple sites to create swipeable tablet editions. Extensions to jQuery Mobile and Sencha Touch make it easy for programmers to add swiping features to their mobile HTML.

Let websites be websites

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":458766,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"A"}']

Website design is proven, monetizaton techniques work well, and users expect sites to function the way they currently function. There is no pressing need to substantially change how they work.

The trend of “iPadification” of websites is more about adding simplicity and whitespace rather than a complete restructuring of how a website should work. Some types of services, such as Twitter, provide a tablet-like experience on their website. Twitter’s website offers a clean design with white, rounded content areas and no dynamic menus. Users are comfortable scrolling vertically on tablets to see streams, so the same design works well for desktop web and tablet.

It is painful for engineers to have to support three different use cases for three different form factors. However, particularly for content sites, the effort bears worthwhile fruit in terms of mobile monetization.

Peter Yared is the CTO of CBS Interactive and has founded four e-commerce and marketing infrastructure companies that were acquired by Sun, VMware, Webtrends and TigerLogic. You can follow him at @peteryared.

[aditude-amp id="medium3" targeting='{"env":"staging","page_type":"article","post_id":458766,"post_type":"guest","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"A"}']

[Top image credit: Pressly]

Design is determining the winners in everything mobile. The most successful players are focusing on one thing: How to make products, services, and devices as compelling and delightful as possible – visually, and experientially. MobileBeat 2012, July 10-11 in San Francisco , is assembling the most elite minds to debate how UI/UX is transforming every aspect of the mobile economy, and where the opportunities lie. Register here.