Pixel imperfect: Serving an online audience with responsive content

Michael Cairns, COO at Publishing Technology

Michael Cairns, COO at Publishing Technology, kicked off the Pixel Imperfect session at Frankfurt Book Fair's Contec conference. He asked what is responsive web design?

In 2010 Ethan Marcotte coined the term in a landmark article on A List Apart. It is not a new idea, but made possible by recent technologies. Responsive web design is about designing systems, and not websites. It forces us to think bigger and put users and how they use content at the centre of the design process.

The Boston Globe site is a good example of responsive design - resize your browser to see how the content reflows. It's worth bearing in mind that Google has a preference for accessible websites with one set of content and one URL.

Gartner reported that enterprise tablet adoption is growing by 50% per year. Mobile is increasingly important. Now is the time to think about what your responsive web design strategy is going to be. Don't forget that libraries subscribe to a huge amount of content

But it is a confusing landscape: not just Apple, but Android, and for now, Blackberry. When you see stats such as the IBM/Tealeaf report that 85% of users expect that a mobile website should be at least as good as the desktop, you have to move forward with responsive design.

Some considerations:

• Do you want or need to be in the App store?
• Do you rely on or make use of device-specific functionality like the camera?
• Do you have a specific functional focus?

Do you have a content focused approach which requires broad device support? Are there frequent content changes and do you need better discoverability via a third party such as Google? Plan with several things in mind: the audience, content and functionality (Cairns stresses the importance of content strategy), capability, and cost process. Context is very important. With the device, what device is typically used? With the location, where is it used? With time or circumstance, what's the experience (e.g. physicians on the ward)?

It's complicated. Apple iOS has 6 different size/resolution combinations. HTC has 12. Even within these platforms there is significant deviation. And it is getting more complicated with the introduction of Microsoft and Asus tablets.

Cairn's advice on how to do RWD right starts with understanding your users and how they access and use your content. Prioritise your content based on the above, then build a site architecture that answers to these priorities. Design a site that provides content for users across device-types and contexts, with grids and typography and images that adapt.

What is responsive web design? It is where you maintain one website that services all devices and screen sizes. It provides complete support for all web pages and features, regardless of the device or screen size. And it enables you to implement changes across all devices.

Michael Kowalski from Contentment, with a cloud

Michael Kowalski, Founder at content editorial start-up Contentment, observed that online increasingly means on a tablet, device or a phone: it's not just about the web any more. There are two new channels, ebook and apps, that are of interest to publishers (as you can make money out of them).

Crucially, there's no standardisation with apps. Kowalski took the last ABC audit figures on the PPA website and crunched the data. He found that in magazines and business media, print is seeing a 10% year on year decline while there is 108% growth on digital.

There's a lot of room for growth in magazines and business media. As a sector, they initially tried a number of techniques to get their content onto devices. First of all they did nothing, taking content, putting it into PDF and then on to the app store. But replicas on phones are rubbish. Then they stuck with the familiar and replicated magazine layout. Now they are going with CSS (and similar) media queries honed on the web that can be used to do responsive content. There are a number of tools that can be used for hybrid apps (native apps with HTML5 inside) including PhoneGap, Trigger.IO and pugpig.

Kowalski believes web publishing killed content design. He asked what happened to creative freedom? What happened to designing around our content? Did we struggle in vain? Can't we have those nice things? Developers think template first, squirt content through it later, separate content from presentation. Designers think that a template is a starting point.

Kowalski believes that you can turn one big problem into many small problems. How do you deal with fixed aspect ratio? You could crop, but do you have rights to do that? You can tag an image as portrait, landscape or squarish, using captions. You can use templates with manual override to adapt to different images or use disclosure (+ sign to open up text).  If you use tables you can convert each row to a mini table on small screens, add paging or disclosure to avoid long scrolling experience. Fonts can be painfully expensive so open source fonts are well worth investigating.

Solve each of these issues one by one, but what about bigger problems? A little bit of print content can go a long way in digital. There are various ways you can pack more content into the same real estate without it becoming too noisy. But content fitting is a hard habit to kick. Responsive design is a big, hard change for print designers. Web designers are your friends. Kowalski closed by urging the room to think more like digital product designers.

What does the user want to do? How can we make it easy for them?