that has the best of RWD without the limitations that RWD imposes. CONS. All code in ... Developers and designers have known for a number of years that ... sive and difficult to keep features on the separate smartphone or tablet sites on par ...
RESPONSIVE WEB DESIGN
Topics Discussed : Responsive Web Design Multiple Screen Sizes Responsive Web Design Not a Silver Bullet Adaptive Solutions
EXECUTIVE SUMMARY Over the last 5 years, we have seen a fundamental shift toward mobile. The market share of personal computing platforms held by Windows has dropped from 90% of personal computing devices1 to 24%. And this shift is not just a temporary spike. It’s a turning point in the way users are accessing the web. Companies which are not eﬀectively engaging their customers on mobile today will soon fail to fundamentally understand their customers. Today more than ever, a solid mobile strategy is imperative.
Responsive Web Design A critical component of every enterprise’s mobile strategy is the decision about which techniques should be used to deliver their mobile experiences. Early approaches for delivering to mobile proved to be costly and ineﬀective. Companies thus began turning to the still-popular technique of Responsive Web Design (RWD). The value of RWD is that it makes it easier to leverage a single set of content and code to deliver mobile experiences across many devices. This white paper will dig into RWD, discuss the pros and cons of this approach, and propose a next generation approach that has the best of RWD without the limitations that RWD imposes.
PROS CONS Diﬃcult to optimize individual experiences Heavy, slow-loading pages Requires front-end rebuild Diﬃcult to iterate often
| RESPONSIVE WEB DESIGN
All code in one place Only one URL per page Responds to changing screen sizes
MULTIPLE SCREEN SIZES The Challenge of Multiple Devices In the early days of the internet, web designers adhered to print-based best practices of design, restricting their website designs to ﬁxed widths and sizes. They simply designed with the resolution of the common monitor in mind, the desktop. The idea of creating a web page with one or two dominant screen sizes worked as recently as ﬁve years ago, when creating a mobile page meant basically just designing for one device - the iPhone. Today the iPhone alone has three diﬀerent screen resolutions and Android runs on an ever-growing array of devices. The challenge of multiple screens is not new. Developers and designers have known for a number of years that ideally they should create pages for a number of diﬀerent screen resolutions. What has evolved is the prioritization of the ability to deliver to diﬀerent screen sizes - from something good to have to a must-have. And RWD is at least a partial solution to the multiple screen challenge. We’ll take a more in-depth look in a moment, but ﬁrst let’s take a look at the solutions that were designed to address the issue. Initially companies attempted to solve the multiple screen size issue by building siloed mobile sites. This means that in addition to their desktop sites, they built separate smartphone sites and tablet sites. The problem with this solution is it required a signiﬁcant amount of rewriting of the existing code. Everything on the front end had to be redeveloped from scratch. In addition to requiring code rewriting, trying to solve the multiple screen size issue with siloed builds led to stack fragmentation, also known as the “splinternet.” As the features of the companies with siloed builds’ desktop sites evolved, it became increasingly expensive and diﬃcult to keep features on the separate smartphone or tablet sites on par with those of the desktop site. It quickly became apparent that maintaining separate, distinct applications and front ends for each silo was needlessly complex and expensive. Thus, a movement called One Web, which was part philosophy and part development strategy, arose. The key objective of One Web was to simplify the management of an organization’s web assets by reusing as much of the existing assets as possible to deliver experiences to all devices.
| RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Responsive Web Design (RWD) was created as a way of applying the One Web philosophy. Using a single URL and single HTML code for all devices, RWD eliminates the need to create and maintain multiple sets of code. It leverages ﬂuid grids, ﬂexible images and media queries to deliver experiences to desktop and mobile devices from a single code base. Fluid grids allow the elements on a desktop site to be realigned to remain legible when delivered to smaller mobile screens. Fluid grids are divided into a speciﬁc number of columns. The elements within each grid are designed using proportional widths and heights rather than pixels. So whenever the screen size is changed, the size of the elements changes by speciﬁed, relative proportions. And as the screen narrows, the elements can be displayed in a diﬀerent arrangement on the page. For example, let’s imagine a screen with three elements, side by side. Now picture trying to narrow down the screen. Initially the elements will all be legible. But as you continue to narrow the screen, if the page was not designed using ﬂuid grids, the elements will be pushed too closely together. With ﬂuid grids, designers can insert breakpoints, so that once the screen narrows past a certain size, the elements on the page are stacked, displayed vertically rather than horizontally. The ﬂuid grid system thus allows the same code to be used for a wider desktop screen and virtually any smaller mobile screen.
Flexible images are sized in relative units rather than ﬁxed, pixel-based dimensions. This allows the heights and widths of images meant for larger desktop screens to be readily scaled down to ﬁt smaller mobile screens. This is key for RWD, as this technique delivers the same images to mobile devices as to desktop. Media queries are the third key element of responsive design. They query the browser to detect its characteristics, typically the width of the browser window. Based on the width, diﬀerent CSS style rules are then applied to tailor the content to each browser. Again because RWD delivers the same content to both desktop and mobile, being able to account for characteristics of the browser and device like width, resolution and orientation is critical. | RESPONSIVE WEB DESIGN
reduction in back end cost
On top of diﬃculties with architecture and development, a responsive website can suﬀer from many user experience drawbacks and lower performance. First, let’s look at the performance issues. RWD delivers the same code to all devices. This means that a site using RWD sends the same amount of information to desktop as it does to a smartphone. As a result, the performance of an RWD site suﬀers, and the mobile user experience is compromised.
For example, a 100 KB image on the desktop site might be scaled down to be half the width and half the height on a mobile device and thus ﬁt on the smaller screen. But with RWD, the size of image would remain 100 KB. The delivery of the same content to all devices often means responsively designed sites have increased load times.
| RESPONSIVE WEB DESIGN
In fact, a June 2014 study by Keynote and Internet Retailer3 examined 12 responsive sites and found that page load times on smartphones were 18 seconds. This is signiﬁcant because 40% of users abandon a site if it takes longer than 3 seconds to load. A number of issues contribute to the lower performance of RWD sites on mobile devices, including too many images, too many resource requests and images that are perfectly sized for desktop but too large for mobile. Moovweb examined performance-related factors like page size and number of requests for both RWD sites and mobile optimized sites in their State of Mobile study4 of the top 100,000 websites by traﬃc. What they found for responsive sites is that mobile users received pages that were 109% of the size of those delivered to desktop. And responsive sites featured 102% of the requests of the desktop experience. So responsive sites were actually delivering heavier, slower loading pages to mobile than to desktop, resulting in higher load times and an inferior user experience.
Responsive sites were actually delivering heavier, slower loading pages to mobile than to desktop, resulting in higher load times and an inferior user experience.
The performance issues associated with RWD have come to the spotlight once again recently, but it’s not a new problem. In the past, some developers tried to address performance issues by creating “mobile ﬁrst” responsive sites. However, this approach can lead to overly simpliﬁed sites. While the mobile site may not be too large or send too many requests, the tablet and desktop sites may end up with less robust features or lacking device-speciﬁc experience diﬀerentiators. For a relatively simple site like a blog or an online magazine, or content-driven sites like newspapers, delivering the exact same experience to each device isn’t a huge problem. After all, users are visiting such sites to read and consume content, regardless of whether they’re on a desktop, tablet, or smartphone. For other sites, however, having undiﬀerentiated experiences across devices is an acute disadvantage, as it does not allow companies to cater to and leverage the diﬀerences in user behavior based on device type.
Study found responsive retail sites take 18 seconds to load
Responsive Web Design was ﬁrst adopted with gusto because it held the promise of being the development strategy for applying a One Web philosophy. But there are constraints and limitations to this approach, and in trying to solve an old problem, it introduced a whole new set of challenges.
To address some of these challenges, a new technique which leveraged the core principles behind RWD was born - RWD + Server Side Components (RESS). RESS delivers pages with some responsive content which is adaptable to screen variation, as well as device-speciﬁc content, which is pre-selected by the server. Unlike RWD, which delivers all of the content to every device, RESS leverages server-side capabilities to selectively deliver content to the user, based on device. This solves some of the performance issues related to client-side solutions like RWD and allows for some tailoring of experiences by device type. However, RESS still requires a front end rebuild. And with all its promise, there is no standard platform for implementing RESS. So anyone looking to take advantage of all of its beneﬁts would need to build their own from scratch, which is prohibitively diﬃcult and costly. | RESPONSIVE WEB DESIGN
In a mobile experience created using a purely responsive technique like RWD, the store locator feature might get pushed down toward the bottom of the page, as the ﬂuid grid responds to the narrower mobile screen. As the order of the page elements cannot be changed with RWD, there is nothing a developer can do to easily move the store locator feature back up toward the top of the page. Adaptive solutions, on the other hand, allow developers to change the structure of the HTML. Unlike with responsive solutions, the order of the elements on the page can be changed. This makes it possible to more thoroughly optimize the experiences by device. For example, the store locator feature can be moved from the bottom of the mobile screen to a more prominent position near the top, to better align with mobile users’ priorities. Adaptive solutions also solve many of the performance issues5 of RWD. For example, they allow sites to deliver mobile optimized images, send fewer asset requests, and reduce the time it takes for the browser to start rendering the page by optimizing the sequence of requests dynamically in the cloud. As a result, adaptive sites are higher performing than their
Increase in site speed using Moovweb
| RESPONSIVE WEB DESIGN
CONCLUSION It’s time to move beyond RWD. Simply improving the mobile user interface without making improvements to the user experience is no longer enough. As internet users become increasingly reliant on their mobile devices, they expect seamless experiences across devices, with high performing mobile experiences that are fully on par with those of desktop. Many companies - about 2/3 of the top 100,000 sites on the web - are already using responsive techniques to improve the mobile UI4. But most companies have yet to take the next step in the path to oﬀering fully optimized mobile experiences.
2/3 of the top 100,000 sites are mobile friendly, but only 17% are mobile optimized
Those companies which move beyond mere UI improvements to also optimize the mobile user experience today will become the mobile leaders of tomorrow. It’s a phenomenon we’ve already seen with the 17% of the web’s top 100,000 sites4 which are further along the mobile maturity curve than the rest. Using platforms like Moovweb, they have been able to frequently test and continuously improve their mobile experiences to be at the forefront of mobile. Given the evolving sophistication of mobile users and the already signiﬁcant gains made by mobile leaders, it is imperative for enterprises wishing to remain competitive to upgrade their mobile strategy, to leave RWD behind and start delivering fully optimized mobile experiences. 1 This is including mobile devices in the total of personal computing devices. 2 Forrester Research, Inc: http://www.moovweb.com/wp/forrester 3 Internet Retailer: http://www.internetretailer.com/2014/06/02/ugly-truth-about-responsive-design-and-how-ﬁx-it 4 Moovweb’s State of the Mobile Web research: http://www.moovweb.com/webinars/where-do-you-stand 5 Moovweb: http://www.moovweb.com/webinars/improve-performance
| RESPONSIVE WEB DESIGN