Responsible Design A Pragmatic Approach to Website Design

For Multiple Devices

Jonathan Hevenstone

Senior VP, Business Development

Atypon

STM Annual US Spring Conference

May 1, 2014

Desktops and printed PDFs are still king

but mobile is on the rise

Graphic: IDG Global Solutions

Most researchers still read e-journals on computers or printouts but they are

increasingly using devices to grab a citation, do a search, or go from an alert to a

new article.

Publishers should present their content

optimally for each device

Screenshots: Taylor & Francis Online, powered by Atypon’s Literatum

Desktop Tablet Phone

Compare these three views of a journal page from Taylor & Francis Online, which is

powered by Atypon’s Literatum platform. Literatum serves a unique layout that adapts

for each device and the way it is used.

Two web design approaches to consider

Graphic: Digital Broadcasters “Responsive Web Design vs Adaptive Web Design

vs Separate Mobile Sites”

1

With Responsive Web Design, the layout changes according to the device’s screen size.

2

Two web design approaches to consider

Graphic: Digital Broadcasters “Responsive Web Design vs Adaptive Web Design

vs Separate Mobile Sites”

Adaptive web design takes into account the device’s screen size, user controls

(ie. mouse vs touch vs voice) and differences in activities (ie. whether users are

more likely to be reading or searching).

There is a lot of talk about

Responsive Web Design

Graphic: IDG Global Solutions

Adaptive Web Design? Not so much

Graphic: IDG Global Solutions

But what’s the difference?

And which approach is better?

Responsive Web Design

RWD can make a single site design work on multiple devices

Graphic: The Boston Globe December 10, 2011

Desktop Tablet Phone

But one layout doesn’t fit all

Content order may need to vary, which is harder

to do with responsive CSS than with adaptive coding

Graphic: Scott Abel, thecontentwrangler.com

Webinar: “Mobile Devices and the Need for Adaptive Content” March 10, 2014

Elevating Responsive Web Design

with “progressive enhancement”

Start with the smallest page design and then add more elements for

larger viewports.

Progressive enhancement requires lots of time and planning.

“It’s not just about layout anymore: a

responsive redesign will raise challenges with

your current design, development, and

publishing processes.”

- responsivewebdesign.com

Progressive enhancement gets even more challenging

when you come to scholarly publishing, where users

prefer PDFs or full text on a large screen.

Atypon primarily follows an adaptive

approach, though we use responsive web

design when appropriate.

“Adaptive content automatically responds

to the screen size and orientation of

any device, but goes further by

displaying relevant content that takes

full advantage of the specific

capabilities of the device being used.”

Charles Cooper

The Language of Content Strategy

Graphic: Scott Abel, thecontentwrangler.com

Webinar: “Mobile Devices and the Need for Adaptive Content” March 10, 2014

Graphic: Skyrocket Blog, October 23, 2013

“If you need to choose

between your designer and

your user, pick the user”

Literatum for Mobile: AWD in Action

Screenshots: Taylor & Francis Online, tablet mode

Mobile access to Literatum-powered websites

on Android and iOS phones and tablets

We recommend a pragmatic approach

Mobile access to Literatum-powered websites

on Android and iOS phones and tablets

Graphic: Blue Polo Interactive

We leverage Adaptive Web Design principally but we also use aspects of

Responsive Web Design or any other method when appropriate.

Stay focused on delivering the best possible experience to the end user.

Think “Responsible Web Design” and take into account the user’s

full range of needs

Deciding when to change your strategy

Graphic: Eyemaginetech Blog, “Free Mobile Strategies Guide for Catalogers” Nov 7, 2013

Consider the following:

1.Are all users getting the

content that is best suited

to their needs at the

moment of access?

2.Is unnecessary content

being delivered to any users?

3.Are you providing the right interaction for the user’s “input device”?

4.Is the user authenticated, recognized, and provided with feedback

that is appropriate, whichever device is being used?

Thank You

About your speaker:

Jonathan Hevenstone

Senior VP, Business Development

Atypon

Social Media: @Atypon on Twitter