Responsible Web Design A Pragmatic Approach to Website Design for Multiple Devices www..com
2 Responsible Web Design A Pragmatic Approach to Website Design for Multiple Devices Executive Summary There are different strategies for meeting market demand for suitable content presentation on the wide variety of digital devices in use today. One strategy is to make the web pages responsive so the web page layout changes when the content is accessed with devices of different screen dimensions. Another strategy, practiced by, is to serve adaptive web content that is customized for specific types of devices, taking into account screen size, user controls (touch screen/gesture, mouse, voice controls), and differences in activities (whether reading or searching is dominant, for example). follows the philosophy of adaptive web design by serving content adapted for a publisher s demographics using the best technology for the site requirements, of which page layout is only one dimension. Though uses aspects of responsive web design when appropriate, we believe that at this time responsive web design, even with progressive enhancement, doesn t meet the entire needs of our publishers, for their mobile users in particular. Responsive web design is secondary to responsible web design that starts from the consideration of the publisher s business goals and encompasses the user experience. Some high-level technical descriptions and trends for publishers are covered in this white paper. Publishers of many kinds of content are taking an adaptive approach, to provide optimum user experience. 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 courtesy of Scott Abel, from his webinar March 14.2014 Mobile Devices and the Need for Adaptive Content, https://www.brighttalk.com/webcast/9273/105129, copyright 2014 The Content Wrangler
3 3 The changing landscape of content presentation Trends in mobile use for academic publishers have been upwards over the past two years, reflecting the overall uptick in mobile use, but mobile use is still usually less than 10% of overall content access for journals using s Literatum platform 1. Even tablet use is not strong compared with fullscreen devices (laptop/desktop). So while academic publishers must keep an eye on the trend, they have some time to decide on their strategy for phone and tablet support. The ipad has been the favored tablet device for viewing Literatum sites, followed by Android devices such as Galaxy Tab. There is some evidence that Android has been gaining share of the tablet users, but this varies by market. Phone, tablet and desktop: differences in behavior for journal users Disregarding Literatum sites specifically, and looking at publishers sites widely, academic publishers find that users in-depth reading experience is generally on the desktop devices, while mobile devices are used for more short, focused activities such as grabbing a citation or looking at a new article based on an alert. Tablet behavior depends on the site setup; for repurposed full-screen websites laid out like magazines, the user may swipe through many pages in a manner similar to using a full-screen device, although they may have to scroll or pinch/zoom to see all the content. If the site has been designed to optimize the tablet experience, the horizontal or vertical page layout will adjust to reduce scrolling and zooming, which reduces the need for pinching/zooming. For the vast majority of scholarly content consumers, reading of electronic journals predominantly takes place on computer screens or on printed versions of page facsimiles, not on reading devices. 2 On phones, navigation to get the latest content is the most important feature, as users want to have only a few taps between themselves and the content view they want (whether it is Ahead of Print, the current issue, an alert for an update to an article whose citation they have tracked, or news from the publisher or scholarly organization). Timeliness is the value, and mobile users may like to bookmark content for later reading on a larger device rather than attempt to read full articles on the phone. Content layout via the browser versus from the server The premise of responsive web design (RWD) is that a website can adjust page layout depending on the device on which the site is viewed. RWD can make a single website design work on multiple devices. For different device screen sizes (referred to as viewports ), the user may see one, two or three columns of text, with navigation at the top or side. Each viewport is supported by content tagging and styles that are defined for a given viewport. For example, if there are four major targeted viewports, then the site includes code for all four viewports. When one viewport is used to access the site (browsing online, via ipad or Nook, or on a phone), the code for the others is still within the page being shown. Sometimes content for a different viewport design is hidden from view. 1 Based on internal analysis of Literatum sites. 2 http://scholarlykitchen.sspnet.org/2013/03/19/is-it-time-for-scholarly-journal-publishers-to-begin-distributing-articles-using-epub-3/
4 Pages with columns Page layouts created with responsive design often have breakpoint dimensions, which can be seen by resizing a browser window. As the browser becomes narrower, a layout may snap from 3 columns to 2 columns and the text will reflow. With careful design, the settings for breakpoint dimensions can be set up for viewport dimensions of major devices such as the ipad, Galaxy Tab, Kindle Fire, etc. For phones, the layout snaps to a single column and navigation may be repositioned (floated) to the top of the screen if it was on the side in layouts for other viewports. For the ipad, there may be different layouts for horizontal and vertical orientation of the device in the user s hands. This ability to adjust the page layout depends on utilizing flexible layout grids built with Cascading Style Sheets (CSS). Tablet site designs can be either a repurposing of the full site page design (whether using responsive web design or not) or purpose-built to the viewport, depending on the type of content and the typical users behavior patterns. Even if a tablet page appears to have a different layout in vertical or horizontal view, it may not be using responsive design to achieve that there are sometimes completely separate pages for vertical and horizontal ipad layouts, for example. 3 (This is most common in magazine layouts with a high degree of design styling.) The best responsive designs don t simply juggle content around on the page, but also consider the navigation, display of images and content usage, including bringing more mobilepertinent content to the fore when a design is squeezed into a smartphone-sized screen. 4 One layout doesn t fit all Mobile phone designs, due to their restrictive screen sizes, don t work well with multi-column page layouts. A single linear scrolling view of content is the typical user experience on a phone. If a multicolumn page design is used for mobile phone viewports, there needs to be code to hide some content that would otherwise distract a user from the most direct path to the desired content. Along with the page layout, images may be resized to fit in different column widths using code that checks the viewport to resize images. CSS can also be used to crop an image from one or multiple sides to provide a specific view of the image content for each viewport. Sometimes resizing or cropping doesn t provide the best image resolution for the device. Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor s mobile bandwidth because you don t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image or even no image at all. 5 The same issues apply to video; a single video format might not be great to view on all devices. Building up from mobile design Because of the difficulty of making full-size multi-column page designs work for mobile phones, there is a great emphasis for responsive web design in starting from the mobile phone page design and adding more content, visuals and other aspects of the site for larger viewports. This is called progressive enhancement. 6 Done well, the site that is achieved for the mobile device can provide a great starting point for a full site. 3 See discussion of Alternate layouts for Adobe InDesign software http://helpx.adobe.com/indesign/using/alternate-layouts-liquid-layouts.html#main-pars_header_4 4 http://www.creativebloq.com/web-design/2013-trends-121310199 5 http://msdn.microsoft.com/en-us/magazine/hh653584.aspx 6 http://en.wikipedia.org/wiki/progressive_enhancement
5 presentation of content in different order Content order may need to vary, which is harder to do with responsive CSS than with adaptive coding. Graphic courtesy of Scott Abel The Content Wrangler from webinar https://www.brighttalk. com/webcast/9273/105129 A progressively enhanced responsive site can make mobile delivery its focus. Designers and developers need to understand mobile interactivity as well as user preferences to develop progressive enhancement sites. Thoughtfully adding to the design to create the larger format pages for tables and fullscreen viewports takes time and lots of planning, but it can pay off. Academic publishers, since they typically serve a user population that prefers to read the PDF or full text on a full-screen device, would have difficulty in adopting a progressive enhancement design practice. Often, they extract content from print layouts for use in their web sites and make mobile content then. They already have a desktop site, and it may not be cost effective to redesign their sites from mobile up to full screen. It s a common misconception that responsive page design is easy, but done right, it s a complete rethinking of how users will receive the best experience for each device they use. 7 Adaptive web pages versus responsive web design A responsive page design adjusts when the browser is resized or a different viewport size is used. There are other technologies, which are needed for refining the user experience with enhanced interaction. Writing code specifically for user interactions involves checking the OS of the device, the browser features, and user preferences while providing the content. The enhanced code makes the pages adapt to the user experience, thus this type of site design is called adaptive design (and it requires more specialized development than responsive design). Here is an overview of the differences between adaptive and responsive web design: Adaptive web design (AWD) can use server-side or client-side code to detect the device, and serves separate HTML, using CSS to modify the presentation of a web site based on screen size. Information is pre-selected so that only the optimized assets for the device are downloaded. Multiple page templates are designed specifically for each device. 7 It s not just about layout anymore: a responsive redesign will raise challenges with your current design, development, and publishing processes. http://responsivewebdesign.com/ workshop/
6 AWD uses a lot of code, scripting the interactivity for each device according to its features and functions. Thus it requires more sophisticated developers who know a lot about device functionality such as gestural (tap/swipe) and voice navigation for tablets and mobile phones, as well as mouse cursor movements and clicks for traditional desktop interaction. By contrast, responsive web design (RWD) uses media queries to detect the device, then serves the same web pages to all devices. All assets are downloaded regardless of whether they are used for the device or not. A single set of page templates is used, which includes code to change the page layout depending on the device used. RWD may use some scripting to show/hide parts of the content according to what should be prominent on a device, but it is difficult to optimize scripting for all the different user interactions for mobile, tablet and desktop with this approach, while still maintaining site performance. AWD can be much faster than RWD: we recently completed an analysis of 15 popular responsive e-commerce sites. Among these sites, the home pages loaded an average of 87 resources and 1.9 MB of data. Some responsive pages were as big as 15MB. The numbers are that high because a responsive approach covers all devices. Your user is only using one device, but they have to wait for all of the page elements and resources to load before they can use it. Put simply, performance affects your bottom line. On smartphones, the conversion rate drops by an extra 3.5 percent when users have to wait just one second. By the three second mark, 57 percent of users will have left your site completely. While responsive design is fast becoming the de facto standard, it also creates new challenges for online businesses, including how to handle images, how to optimize mobile performance and often means sites need to be rebuilt from the ground up with a mobile first approach. 8 If you need to choose between your designer and your user, pick the user. From Maximiliano Firtman s webinar, Performance for Responsive Web Design, http://post.oreilly.com/rd/9z1zb5bp37ucclnokoq50fltilk7lrf1qtns8tiqo58 When performance is the goal, the adaptive approach will provide the means, because it will not overload the mobile device with unused CSS code or oversized media assets. There can be tension between competing desires for specific design layouts and what performs the best for users. Experts advise pursuing the best user experience over the page layout. AWD and Literatum for Mobile There are typically three groups of devices and ways of using a publisher s site (desktop, tablet and phone), thus three distinct site templates are ideal. Each template will have page layouts that are best suited to the viewports, plus scripting and CSS which provides the appropriate media assets and interactivity. Designers can reuse many design elements (fonts, colors, logos, UI icons) and page areas (header, footer, navigation, main content, tabs) for all designs. However, the specific way that the pages respond can be coded for the group of devices that a specific template serves. Literatum for Mobile (LfM) is a web app in which the page templates and code are developed to work together for optimum performance on mobile devices. For tablet viewing, Literatum for Mobile customers have a choice of either the full web site page layout or the mobile layout for the user experience (by setting up a configuration). The end-users of the website on a mobile device always gets the option to switch between the tablet/phone (whichever is applicable) and desktop layouts, when LfM is enabled for a given site. 8 http://www.webmonkey.com/2013/05/ the-two-flavors-of-a-one-web-approach-responsive-vs-adaptive/
7 s Literatum platform serves distinct templates optimized for each device. Shown here are (left to right) desktop, tablet, and phone views of a journal page on Taylor & Francis Online. Each layout is customized, taking into account screen size, user controls, and user behavior. Determining the criteria for site design changes Reporting helps publishers understand their users behavior and target their sales and marketing, but it also helps to track trends. Metrics can be tracked for an academic publisher s site on Literatum to see how often users are accessing content from the mobile device or a tablet OS compared to full-screen devices. If the publisher sees a steady increase in mobile use, then the decision to create mobile-optimized delivery can be made. At what point the publisher will see enough shift in user behavior to consider a design change depends entirely on the publisher s business model. Demographic trends in device use are harder to pinpoint, to understand whether the primary user population is shifting the type of device that they use. A publisher may be able to make some deductions based on whether the content is accessed from a college or a research institution. General trends in markets may help, such as the preference for doctors to use ipads 9, when a medical journal is considering design aspects of their content delivery. Tracking Literatum metrics over time may show that use of a specific OS is declining at the same time that use of another is rising, relative to total use. If Android is gaining on Apple, that may call for different design decisions than if tablets overall are gaining use while desktop/laptop use it declining. Each journal is likely to see different trends. Deciding when to change strategy Cost-benefit analysis depends on the features that an academic publisher expects for their full site, and the user interaction with content from different devices. Ideally, the user feels at home on the site with familiar looks and appropriate feel, regardless of which device they use. An academic publisher should be thinking about these aspects of content delivery for the mobile user, tablet user and full-screen user: Are all of the device users getting the content that is best suited to their needs at the moment of access? Is there unnecessary content being delivered to any device users? Is the desired interaction provided according to the input device mouse, keyboard, figure, gesture, voice? 9 http://appleinsider.com/articles/13/05/31/as-medicine-goes-digital-apples-ipad-is-top-choice-among-doctors
Is the user authenticated, recognized and provided with feedback that is appropriate, whichever device is being used? Performance in delivering content, a trusted home for the user these factors are crucial for gaining and retaining users. Maintaining competitive position for content delivery may mean using a native mobile application as long as mobile web browser-based applications can t deliver the best experience by resizing full pages of a website. If a publisher would have to redesign their full site with progressive enhancement and responsive web design features from the bottom up, that may be more costly than building and maintaining a mobile app. while maintaining our focus on performing in support of a publisher s business goals. Our opinion at this time is that responsive web design, even with progressive enhancement, doesn t fully address the needs of our publishers, for their mobile users in particular. Providing an optimized experience will require a responsible web design mobile solution that serves content which adapts to the specific device using the best technology for the site requirements. For more information To find out more about Literatum and Literatum for Mobile, contact info@atypon.com. Conclusion is committed to continually evaluating the technologies and design practices that will work the best for clients on the Literatum and Literatum for Mobile platforms. We will use aspects of responsive web design or any other methods when appropriate, 5201 Great America Parkway Suite 510 Santa Clara CA 95054 USA T +1 408 988 1240 F +1 408 988 1070 330 Seventh Avenue 5th Floor New York NY 10001 USA T +1 212 524 7000 F +1 212 524 7048 2 Hitching Court Blacklands Way Abingdon OX14 1RG United Kingdom T +44 8703 502032 F +44 1235 557987 About delivers innovative solutions that revolutionize the way publishers and media organizations do business. Literatum, s flagship SaaS epublishing platform, provides all of the functionality that professional and scholarly publishers need to compete in the digital world, including advanced search and information discovery, access control, e-commerce, advertising, and reporting. RightSuite, s enterprise access and e-commerce solution, enables publishers and media organizations to monetize their digital content, experiment with new business models, and optimize revenue streams. www.atypon.com Copyright 2014, Systems, Inc.