A different design

Just over three years ago, US-based JSTOR overhauled its user interface to make life easier for mobile users. From here on in, the content of the digital library’s website would adapt to the screen size of a user’s device automatically.

So, rather than wireless device users being re-directed to a separate website to access content, all JSTOR patrons would see the same site, but information would now be reflowed, moved or hidden depending on his or her screen-size. Responsive web design had reached scholarly publishing.

Myriad scholarly publishers have followed suit. Elsevier, Wiley and more have turned to so-called responsive design to ease mobile use on websites, and the trend looks set to continue.

UK-based Semantico supplies digital publishing software to scholarly publishers, and has been an advocate of responsive design from the word go. Owen Priestley, head of design and user experience at the company, was hired nearly three years ago to develop digital designs and has noted the growing need of publishers to accommodate users on a variety of devices, especially smartphones.

‘We’re in such a shifting-sands, fragmented digital landscape in which things move so fast and it’s hard to predict the future,’ he highlights. ‘But we’ve been watching mobile usage rise slowly and steadily, felt a desire to future-proof our content platform, and very early on there was a desire in our business to use responsive design in our websites.’

A case-in-point is Bloomsbury Academic’s Drama Online Library, a collaboration between the publisher and Faber & Faber to produce an online library of the most studied, performed and critically acclaimed plays from the last two millennia. Semantico was tasked with developing the product, keeping in mind that users, such as drama practitioners, could be accessing the website on mobile devices.

‘Bloomsbury had recognised that they wanted this to be at least working on iPads and tablets,’ explains Priestley. ‘The client didn’t have any hard stats but had anecdotal evidence for a need for this.’

Given this, Priestley and colleagues delivered a website with responsive design elements, based on the company’s Scolaris content platform, and including various interactive tools, notes and annotations. Access management was controlled by Semantico’s access and authentication system, SAMS. The online library launched in May 2013, and has since won an ALPSP ‘highly commended’ award for publishing innovation.

‘Thanks to its design, the front-end of our Scolaris platform is very malleable and we’ve been able to convert it easily to different formats,’ explains Priestley. ‘For example, it’s been quite straightforward for us to add responsive frameworks so the design fluidly scales between different-sized screens.’

Taking responsive design a step further, earlier this year, Semantico delivered Wiley’s Royal Marsden Manual of Clinical Nursing Procedures website. This fully-responsive design website is used by nurses to deliver quick answers to questions, be they in waiting rooms, on a ward or in accident and emergency departments.

Clearly a fully-responsive design website delivered the goods this time, but today, the lion’s share of Semantico’s current websites include responsive elements alongside features from a well-established and, some might say, rival design method – adaptive design. So what’s the difference and why use both?

Competing frameworks

Responsive design hinges on the ‘media query’, which became a W3C recommended standard in June 2012. These query features are built into the latest style sheet language, CSS3, which describes the webpage presentation, and determine the size of a user’s device from the browser.

Marry media queries with fluid design grids and flexible images, and suddenly the designer can produce a single website that is automatically rearranged according to the user platform.

For example, small screen users will see content in a single column, while those on larger screens would view the same content via two or more columns. And because these responsive design websites send the same HTML, CSS and JavaScript to every device, the re-arrangement is triggered client-side by the browser.

In contrast, adaptive design is quite different. Here, server-side code detects the device-type, with web developers customising content in different templates for the different platforms. For example, mobile users will only be served up smaller images optimised for their smaller screen size.

As responsive design has evolved, many designers have opted for this method over adaptive design, as content no longer need be ‘quarantined’ into disparate experiences, depending on a user’s device. But in reality, the pros and cons of each are complex, and one design doesn’t fit all.

For example, adaptive design, with its device-optimised templates, can achieve faster loading times than responsive design websites in some instances. However, developing several adaptive design templates can mean relatively high overheads.

And while many adaptive design websites use a single url for all devices, displaying a ‘mobile view’ to those on a wireless device, other such websites detect a mobile device and redirect the user towards a different website configured for, say, the smartphone. The latter approach has sufficed for most mobile devices, but many believe proliferating form-factors demand a different approach.

As Priestley from Semantico puts it: ‘I think designing purely in adaptive now – given the number of specific devices, especially in the Android market – is difficult. You need to have a responsive framework as you can’t design for the increasing number of form-factors; that would be kind of crazy,’ he adds.

Yet, the choice between the two is far from black and white. According to the designer, Semantico uses responsive frameworks for its websites, so designs fluidly scale to screens, but ‘breakpoints’, which are an adaptive design feature, are also used.

These, breakpoints mark the point at which a website re-arranges its layout for the detected screen-size, and if Semantico’s user analytics, say, flag up a significant number of website users browsing via a tablet, then its web developers design to reflect this.

‘Adaptive serves up optimised content, which is something that responsive doesn’t, so when we’re delivering video content, the mobile or tablet user will receive optimised content,’ adds Priestley. ‘Likewise if we start to serve up large images, then we would also think about using an adaptive approach.

‘When you’ve got huge media content, load time can be an issue, so we serve up adaptive-optimised content,” he asserts. “When you code your responsive sites well, load times really aren’t an issue.’

Like Semantico, US-based Silver Chair Information Systems, developer of the SCM6 development platform and associated tools for STM publishing, is seeing the number of mobile users across its clients’ websites rising.

Brian Hubbell, director of user experience at the company, says that up to 20 per cent of traffic comes from mobile phones, with desktops taking at least 75 per cent of access, and tablets constituting the small remainder.

Like others in scholarly publishing, desktops still form the lion’s share of Silverchair’s website use, yet the company has opted for purely responsive design. Given the pros and cons of each design methodology, why opt for this method now?

‘We are being philosophical,’ he says. ‘Mobile numbers have risen in the last couple of years – not overwhelmingly – but figures have doubled, and we now expect the mobile ecosystem to get more and more diverse.’

‘We want to make sure all our users, from medical students to librarians, researchers

and publishers, have a good web experience, and responsive design helps us to expand

in a more scalable way,’ he adds. For example, the company is in the process of redesigning the American Medical Association’s web delivery platform so that its journals, as part of the JAMA Network, are responsive.

It also recently clinched a deal with Oxford University Press to migrate its journals and many online products to a new SCM6 platform. And, pleasingly for Silverchair, all of the websites on its platform have been classed as ‘mobile-friendly’ by Google’s mobile optimisation test.

In April this year, the US Internet technology multinational released a significant update to its algorithm, dubbed ‘mobilegeddon’, in which sites deemed mobile-friendly received higher Google rankings compared to less ‘compliant’ sites. The change was intended to reflect the rise of wireless device use across the internet and, for companies involved in web design, provided a strong indicator that mobile-friendly web design was growing in importance.

But while Google’s nod to mobile access spelt good news for Silverchair, like many in scholarly publishing, the business is aware that responsive design doesn’t yet tick all of the delivery boxes.

For example, the company has used a third-party video distribution network to deliver video files in a playable format on mobile devices, and also uses its application programme interface to transmit data on SCM6 to third-party app developers, for clients.

As Hubbell also points out, imagery – such as the complex tables associated with scholarly articles – simply do not port well to mobile devices. ‘Responsive design has come a long way in the last few years and we’re starting to see solutions, such as the picture element and srcset for delivering responsive imagery,’ he says.

‘There are also a variety of plug-ins out there that you can use to mitigate many of the problems we originally saw with the roll-out of responsive sites,’ he adds. ‘But there is no performance silver bullet; it really comes down to careful planning and execution.’

A bit of both?

US-based Atypon, a provider of content hosting and management platforms for scholarly publishers, believes its has developed an approach that combines the best of both design worlds. In 2011, it launched Literatum for Mobile, based on an adaptive design approach primarily to speed page-loading times.

As Jonathan Hevenstone, senior vice president of business development, asserts: ‘Pages load faster than with responsive web design, as you are sending predefined layouts to different devices... and statistics definitely indicate that users drop off a page that doesn’t load fast enough.’

But, as he adds: ‘The content you are delivering to each device is constrained by a template and we found that many of our publishers’ websites were looking very similar on mobile. This was exactly the opposite of what we have achieved on the desktop in terms of publisher branding and user experience.’

So, instead, the company turned to a methodology called RESS – Responsive with Server Side – pioneered by Luke Wroblewski.

Here, a single set of page templates define an entire website for all devices, but key components within that site have device-class specific implementations, rendered server-side. So, if the server detects, say, a mobile device, it will deliver the page template that has mobile components.

The end result is an adaptive layout at a single URL. And, as Hevenstone highlights: ‘You can optimise the design and source order for a specific class of device before it reaches the browser.’

‘You’re basically doing responsive design, but you’re also optimising certain assets from the server, so clients only receive what they need,’ he adds. ‘The website acts like a responsive site but everything loads faster.’

Using its RESS methodology, Atypon recently launched a new website – Heliyon – on its Literatum platform. Heliyon is Elsevier’s multi-discipline, online-only, open access journal.

‘If you take a look at this website, it has a modern, cutting-edge design, is very graphical and is fully responsive,’ says Hevenstone. ‘And, while we only have internal tests so far, we expect [the website] is going to load faster, than non-RESS responsive sites.’

Like Atypon’s recent websites, Heliyon also uses Literatum’s established web content management system, Page Builder, so its publisher can log on to the site in the browser and change the presentation of content using drag and drop widgets.

‘This is the tool we use to build sites; this is the way that we and our customers can change sites, and now they can also change the default presentation for visitors viewing it on a mobile device,’ adds Hevenstone.

Indeed, Hevenstone believes using RESS-designed websites with this set-up allows publishers to have even more control than they would with a typical responsive design website. And with Heliyon also passing Google’s mobile-optimisation test, Atypon expects to launch more websites, based on this methodology soon.

‘I believe by using RESS, we have really created an intuitive experience that goes beyond anything other designers in our space have been working on,’ says Hevenstone.

‘It takes into account fluid design, responsiveness of the site for mobile devices and fast page loads based on RESS,’ he adds. ‘I think we now have the best user-centric experience.’

But while the industry’s platform and tool providers pursue nuances of these design methodologies, mobile use will, without a doubt, continue to rise and the range of wireless devices will proliferate. And while the jury is out on exactly which methodology will become most widely used, the leaning towards responsive design is already clear.

As Silverchair’s Brian Hubbell puts it: ‘It’s great to see how far responsive design has come and I can only imagine what is left to come.’

‘This is all about the content delivery for everyone,’ he adds. ‘And we’re not going to pare down, or truncate, your experience just because you prefer to read on your mobile phone.’