Nobody will be surprised to learn that mobile access is on track to outpace desktop access. Tablet sales have been outpacing desktop sales since Q4 2012, and soon more people will access the Internet using smartphones and tablets than with a desktop or laptop PC. Publishers realize this, and for several years the industry has been working frantically to optimize content for mobile devices.
Recently I was doing some research on the challenges libraries face when providing mobile access to their patrons and I discovered that some academic libraries devote entire sections of their websites to helping users access different resources on mobile devices. They read like a rogues gallery of publishers’ experiments in mobile strategy—apps for iPhone, apps for Android, apps for tablets, mobile-optimized websites. Each involves different hoops to jump through for access—paid apps, free apps that require subscriptions, mobile device pairing, etc. There are some great apps listed on these pages, even a few I’ve worked on; but without pointing fingers, it got me thinking about the various problems and limitations in the mobile solutions publishers have tried so far.
Presently, publishers are asking users to access the same content in very different ways depending on what device readers are using to access the internet. They are investing in mobile solutions one platform at a time, which is especially true for native apps but also applies to many of the mobile sites publishers have built, optimized for one device over another. It is expensive supporting all of these different solutions, particularly if only to serve the existing subscriber base: new costs but no new revenue.
Beyond apps, scholarly publishers have experimented with mobile websites, stripped down and optimized for the “mobile use case.” A recent survey from IBM revealed this surprising result: users want mobile to be AT LEAST AS GOOD as the desktop website. This is supported by the “View Full Site” button, a recommended best practice for those stripped down mobile websites. We’ve all seen that button, and importantly, most of us have had occasion to click it.
The other big challenge faced by publishers is the pace of change in the device space, which is accelerating. Apple’s iOS devices are now offered in six different size/resolution combinations. The current best-selling smart phone produced by Samsung for Android comes in Mini, standard and Mega. HTC alone has 12 different screen size/resolution combinations. And the lines between devices are blurring. The Samsung S4 Mega phone is not much smaller than the new iPad Mini. An iPad fitted with a keyboard is no smaller than my laptop and the Microsoft Surface tablet ships with a keyboard. The new Asus Taichi laptop even has a second touchscreen interface on the lid.
I would argue that what publishers need to support their subscription-based products is not a ‘mobile’ strategy, but to completely rethink their ONLINE strategy and the way they deliver front-end web experiences. The solution that web designers are turning to is an approach called responsive design. We delved deeper into this topic recently at the SSP Annual Meeting in San Francisco during the session I moderated, Serving an Online Audience with Responsive Design.
So what is responsive web design? It is a web design approach that allows publishers to maintain one site that serves all devices and screen sizes and is rapidly becoming an industry best practice. It provides complete support for (almost) all web pages and features, regardless of device or screen size with fluid, flexible layouts. And it allows publishers to implement changes across all devices. Coined in 2010 by Ethan Marcotte in a landmark article on A List Apart, responsive web design is made possible by recent technologies, specifically HTML5, CSS3 and media queries. We have also blogged recently about another emerging best practice in HTML5-based web apps; but a responsive design solution optimizes the user experience across an entire website.
The best way to understand responsive design is to see it in action. The Boston Globe made waves in web design circles a few years back when they implemented a responsive website. When opening the Globe’s site in your browser and then slowly reducing the size of the window, you will notice that the text and images adjust size and reflow in a fluid layout. As you cross a certain line (to tablet or smart phone size), you will see more dramatic changes as the big horizontal menu is replaced with a more compact version. The designers define “breakpoints” at specific screen sizes and swap elements to suit smaller devices and touchscreens. Mashable and JSTOR are also useful examples.
Responsive design from the ground up can help publishers reach the broadest possible audience with a fully optimized site. Publishers often get hung up on their expectations for “pixel-perfect” design, which is rooted in the print medium. Fluid, responsive design means letting go of some of that control to which they have become accustomed and, like the Sage according to the Tao Te Ching, “accepts the ebb and flow of things, nurtures them, but does not own them.” If the rounded corners don’t work in IE7, it’s okay. Really.
As Bruce Lee said, “when you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle.” So should be your online strategy.
Toby Plewak is Product Strategist for Ingenta’s pub2web platform.