responsive web design


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 ...

White Paper

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 effectively 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 ineffective. 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 Difficult to optimize individual experiences Heavy, slow-loading pages Requires front-end rebuild Difficult to iterate often

| RESPONSIVE WEB DESIGN

All code in one place Only one URL per page Responds to changing screen sizes

01

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 fixed 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 five years ago, when creating a mobile page meant basically just designing for one device - the iPhone. Today the iPhone alone has three different 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 different screen resolutions. What has evolved is the prioritization of the ability to deliver to different 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 first 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 significant 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 difficult 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

02

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 fluid grids, flexible 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 specific 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 specified, relative proportions. And as the screen narrows, the elements can be displayed in a different 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 fluid grids, the elements will be pushed too closely together. With fluid 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 fluid 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 fixed, pixel-based dimensions. This allows the heights and widths of images meant for larger desktop screens to be readily scaled down to fit 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, different 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

03

RESPONSIVE WEB DESIGN NOT A SILVER BULLET Responsive Web Design certainly solves many challenges related to displaying a web page on a variety of screens. It allows for one set of HTML code, a single URL and a response to changing screen sizes. However it is by no means a perfect solution. In fact, it has a number of drawbacks. First of all, an existing site’s HTML and CSS typically have to be completely rewritten. This in turn has a broad impact on the JavaScript and other front end features. Essentially, the entire front end of a website has to be torn down and rebuilt from scratch. Furthermore, studies have shown that creating a responsively designed web page can take up to twice as long as normal and over 70% of the cost, time and effort is spent on the back end2. Responsive websites may have a single code base, but a purely responsive site still has to account for three or more different screen sizes (desktop, tablet, smartphone). In comparison to developing a site designed for just one screen size, this can be very time consuming and expensive.

70%

reduction in back end cost

On top of difficulties with architecture and development, a responsive website can suffer 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 suffers, 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 fit 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

04

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 significant 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 traffic. 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 first” responsive sites. However, this approach can lead to overly simplified 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-specific experience differentiators. 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 undifferentiated experiences across devices is an acute disadvantage, as it does not allow companies to cater to and leverage the differences in user behavior based on device type.

1sec8onds

Study found responsive retail sites take 18 seconds to load

Responsive Web Design was first 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-specific 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 benefits would need to build their own from scratch, which is prohibitively difficult and costly. | RESPONSIVE WEB DESIGN

05

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 fluid 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

65%

Increase in site speed using Moovweb

65%

responsive counterparts. Moovweb, for example, was able to apply various adaptive performance optimization techniques via their cloud platform to reduce a site’s average load time and increase the speed by 65%. Furthermore, adaptive solutions do not require developers to rewrite all of their front end code. Instead, developers are able to leverage their existing infrastructure, using standard web technologies such as CSS, HTML5 and JavaScript, to build new front end experiences and enhance existing ones. As a result, mobile experiences can be launched in weeks rather than months. And the desktop and mobile experiences are automatically kept in sync, in real time. Lastly, unlike responsive solutions, adaptive solutions allow developers to iterate continuously for experience testing. For example, with mobile solutions like the Moovweb platform, companies can learn quickly from their visitors, testing everything from design changes to the introduction of a completely different flow. And they can segment their users, creating and delivering tailored experiences to segments of their users, based on attributes such as device type, language, cookies, query parameters and location. As a result of the limitations of RWD and the advantages of the adaptive approach, many leading companies have turned to adaptive solutions. In fact, only 8%4 of the U.S. IR 100 companies are using purely CSS responsive techniques. Amazon’s website, for example, is both adaptive and responsive. It uses traditional responsive techniques such as media queries to resize page elements. But it uses adaptive techniques for mobile, employing a different HTML code to deliver distinct experiences to desktop and mobile devices.

| RESPONSIVE WEB DESIGN

07

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 offering 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 significant 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-fix-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

08

Recommend Documents
frustrated user. Statistics show that most users don't convert when using small screen devices which ... Code HTML/CSS templates. 6-7 ... Wordpress Integration.

for windows view website on mobile emulator ios app development tutorial for ... application development with php iphone app development tutorial xcode 4.3.

garden design godfather John Brookes and English. Gardening School .... Myers was asked to design the Bowes-Lyon Rose Garden at RHS Garden Wisley.

Version 1.5 of Catalyst Theme introduced Responsive Design functionality to the ..... please visit the Catalyst Theme Cheat Sheet Blog where you can leave your ...

Photoshop template ... Chapter 3: Enhancing the Portfolio Website with CSS3 ..... calculating the percentage of the width for each column, determining the correct ... we are going to use in this book, has been extended to the WordPress theme.

24 hours download professional web design awards mobile web application template download iphone dev team greenpois0n iphone development companies ...

web client,price web design work,iphone developer jobs in pune for freshers,iphone development .... guide,best web app design 2011,webkit mobile devices,iphone dev team 2013,iphone app development kit ... bar,iphone dev team 3.1 2,responsive website

companies and products mentioned in this book by the appropriate use of capitals. However ... Sang Shin's HTML5 Mobile Development Cookbook. When he's ...

Tags: learn responsive web design-- iphone application development wikipedia, ... beginners,junior ios developer salary london,online mobile web browser ...