In its purest form, Responsive Web Design (RWD) is a client-side Web development technique that uses CSS, HTML and JavaScript to dynamically alter a website’s front end across different screen sizes optimized for each device. It’s one giant, all-purpose ball of code sent from the server that unpacks in the browser and renders itself to display on each device.
But how the technique is used and what the word “responsive” means have morphed as quickly as the device landscape around it.
RWD first caught on with Web and mobile developers as a solution for maintaining a single website across devices. Compared to building and managing separate mobile websites based on the different form factors, the idea of one codebase for one responsively designed site housed under one URL is an appealing one.
(Related: Is Responsive Web Design overhyped?)
Though, as with all new technology, developers soon ran into RWD’s limitations.
“From a perception standpoint, people are more mature than they were in 2010,” said Forrester analyst Mark Grannan. “They greeted [RWD] as a silver bullet solution for all of your device needs. Everyone all of a sudden saw the tablet and the smartphone and didn’t know what to do about delivering experiences optimized for those devices. So the idea of not having to create new teams and new systems was welcomed with open arms, but people didn’t understand the full implications of the complexity it would bring.”
That complexity came in the form of performance slowdowns for transactional or data-heavy sites, a lack of flexibility in design across different devices, and the time-consuming development process to completely rewrite an existing website’s code for RWD.
To compensate, the term “responsive” has broadened over time to encompass differing techniques such as Adaptive Web Design, RESS (Responsive Design with Server-Side components), and responsive delivery. These techniques incorporate client-side code, multiple device templates, and cloud-based code transformations that stretch far beyond the scope of RWD. “Responsive” has simply come to describe techniques and technologies in which a unified set of website code produces Web pages optimized for multiple devices based on screen size and device capability. How a site achieves this unified state is becoming less and less important.
“ ‘Responsive’ is coming to mean a single experience across device types,” Grannan said. “Whether or not you design or deliver it with real responsive techniques, whether it’s responsive, adaptive, RESS or something else, will kind of fade away.”
The birth of Responsive Design
On May 25, 2010, Web designer and developer Ethan Marcotte published the seminal article, “Responsive Web Design,” in the online magazine A List Apart, followed by a 2011 book of the same name. He was inspired by the concept of responsive architecture, where a building or structure responds and adapts to its environment.
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience,” Marcotte wrote. “We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design [emphasis Marcotte’s].”
The precise technical definition of RWD is made up of three components: fluid grids, flexible images and media queries. The fluid grids set the width of the Web page based on the dimensions of the device, and, along with the flexible images, automatically adjust and resize based on a device’s screen dimensions when the code unpacks.
“Imagine a three-column layout for a newspaper,” said Ishan Anand, director of new products at cloud-based responsive platform provider Moovweb. “As you continue to shrink that layout smaller and smaller, it doesn’t make sense on a mobile phone to continue to have three columns, even if each of those columns are getting proportionally smaller. At a certain point, it breaks down.”
The third component, a CSS3 feature called a media query, is how the browser identifies its own width. At a certain number of pixels, the media query will identify a device as a tablet or a smartphone and that three-column newspaper layout will consolidate to two or one, reorganizing the content accordingly.
“So you have HTML, CSS and JavaScript as the three pieces that make up a Web page,” Anand said. “With Responsive Web Design, you keep the same HTML and you’re just changing the CSS, but that fundamentally limits your design choices. Sometimes when you’re trying to create a design or an experience for a Web page, you need to actually change the structure of the HTML.”
Responsive Design in dedicated mobile websites
When it comes to mobile development, RWD has traditionally been at odds with the dedicated mobile website, a separate entity from the desktop site usually discernable by the “m” in front of the URL. Yet as the term “responsive” has broadened, so too have possible applications of responsive elements.
The conventional thinking behind choosing a mobile website over RWD is that a dedicated mobile site can handle the performance load of a transactional site such as Facebook.com or Amazon.com, or the data and content-heavy load of a site like ESPN.com. RWD is viewed as better suited to simple public websites or publishing sites where the user is consuming a single workload of content.
Joe Herres, executive vice president of products at SharePoint consulting and mobile product company H3 Solutions, has been outspoken about the limitations of RWD. Yet he sees the possible benefits of incorporating responsive elements, such as a single URL and adaptive templates, into dedicated mobile sites.
“Responsive Design is not the end-all be-all solution of multi-channel delivery of the Web, but it’s useful to implement into any website or Web design,” Herres said. “I think it’s really consolidating the user’s experience. What’s great about responsive is it’s the same URLs, the same place you’re going to, but it’s rendered differently for different form factors.
“Going forward we may see more and more mobile websites using Adaptive Web Design,” he said. “I wouldn’t doubt in the future when I go to Facebook.com on my iPhone, I’m no longer going to see that ‘m.facebook.com.’ It’s still going to be ‘www.facebook.com,’ but it’s going to be adaptive. It’s going to send you mobile-specific renderings. I think we’re moving more into a combination of adaptive and responsive, so that each respective form factor will receive the premium experience without having to degrade for the other.”
The growing umbrella of ‘responsive’
As “responsive” has developed more into an overarching concept than a particular methodology, other techniques have emerged to fill in the gaps where RWD falls short. The earliest example of this is Adaptive Web Design (AWD), popularized in the 2011 book “Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement,” by Aaron Gustafson.
AWD flips the single client-side template approach of RWD on its head. It instead uses a different template for each device, which the server identifies before sending the appropriate template to the client. AWD solves the issue of performance by sending only the code a particular device needs, rather then overloading a smartphone with an entire responsive codebase, including desktop and tablet specifications it won’t need.
“Adaptive design leverages different design back ends so your Web server has all the different experiences, and based on what you can tell about the device when users access the site, you deliver up a specific subset of context,” Forrester’s Grannan said. “The site can tell if I’m coming from an Android versus a desktop browser.”
Another offshoot of RWD is RESS, a technique laid out in a 2011 article by “Mobile First” author Luke Wroblewski, which blends responsive and adaptive techniques. Using RESS, the page is still constructed according to RWD principles, but individual components within the page can be optimized for a specific device by server-side code.
“RESS was designed to deal with these problems of performance that Responsive Web Design was having,” Moovweb’s Anand explained. “With Responsive Web Design, the mobile device is getting the same code as the desktop, even though they’re radically different in network access, memory, CPU and processing power. RESS divides the page into components, and those components are placed together according to Responsive Web Design, but the server might decide to substitute those components out depending on the device.”
On the “responsive” spectrum, RWD sits on one end with its client-side universal template, AWD sits at the other with multiple sever-side templates, and RESS lands in the middle. The server-side properties of AWD and RESS both lend themselves to more customization of the user interface of each device, addressing another limitation of RWD.
Outside of that spectrum, another technique similar to RESS arose to tackle the time- and labor-intensive back-end development process for enterprises. Forrester’s 2014 Enterprise Mobility Survey of 146 U.S. enterprise companies, commissioned by Moovweb, found that more than 70% of cost, time and labor on RWD projects are spent on the back-end re-coding of APIs, middleware and infrastructure.
Responsive delivery (RD), a technique defined and shepherded into the marketplace by Moovweb, transforms an enterprise website’s existing code into mobile HTML5, but does so in a cloud-based platform rather than on the server-side.
“What responsive delivery does, in a nutshell, is it moves [code] transformations to the cloud before they hit the device,” Anand said. “Responsive delivery can be applied to a site that wasn’t designed with mobile in mind. To make your website responsive typically involves a rewrite of the entire site and responsive rewrites are notorious for taking months or years. To solve those problems, responsive delivery just defines a series of transforms to transition the existing site into a responsive one.”
The future of RWD
“Responsive Web Design gets a lot of the credit for catalyzing the discussion around mobility and the right way to go mobile, but invariably we need to refine it,” Anand said. The broadening of the term is a reflection of that. In any of those techniques, responsive delivery, Adaptive Web Design or RESS, you’re still incorporating some of the principles of Responsive Web Design as a starting point, but you’re building upon it to improve it.”
As the boundaries of what “responsive” means have shifted, the concept has begun to move beyond any particular technique. Responsive elements are even finding their way into development tools, as companies such as developer tools vendor Telerik is integrating responsive elements, both responsive and adaptive, to its Kendo UI widgets, implementing flexible layouts and media queries for simpler widgets, and new mobile templates for more complex widgets.
According to Telerik director of product management Brandon Satrom, the decision to go “responsive” was to give developers more flexibility in creating apps or websites for whatever smart device or screen size comes next.
“What if somebody puts a browser on a Galaxy Gear watch?” said Satrom. “What do I do about that? What does it mean that there’s a browser on my Xbox, and how do I support the features and functionality and the fact that somebody may be looking at this on a 65-inch television? You can’t keep a list anymore of all the different screen sizes and form factors and device pixel ratios. You have to start from a position of flexibility.”
RWD is the first step in a still-evolving pursuit of creating optimized environments for an ever-expanding range of devices. Forrester’s Grannan sees responsive as a mindset going forward for both understanding and unifying a user’s experience.
“From an evolutionary standpoint, I’d say we’re absolutely moving away from Ethan Marcotte’s pure vision of Responsive Web Design,” he said. “We’re moving more toward a broader understanding of multi-device and multi-channel experiences, and making those not homogenous but coherent across the spectrum of digital touch points that customers are digesting.”
