Responsive Web Design
According to .net magazine, Responsive Design is #2 on the list of the “15 Top Web Design and Development Trends For 2012”.1 It seems that more and more people are jumping on the responsive web design (RWD) bandwagon without fully understanding what it entails. In fact, many believe it to be their only mobile solution. While is this not necessarily the case, it certainly is a powerful tool for creating adaptive user-experiences across all mobile platforms.
What Is Responsive Web Design?
So, what is responsive web design (RWD)? Responsive web design (RWD) is a growing technology used by web developers employing Cascading Style Sheets 3 (CSS3) media queries with a fluid grid-based system, which enables content to be rendered adaptively to any viewing environment. The effect is that, “users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.”2 In other words, responsive web design (RWD) uses CSS3 to display content in a layout that adapts to the device rendering the content. With responsive web design (RWD), the amount of content displayed and the layout it is displayed in will vary from device to device.
Why Does Everyone Want Responsive Web Design?
With the proliferation of handheld devices including smart phones and tablets, and the growing trend in mobile web browsing, developers are beginning to pay more attention to mobile solutions for their sites, and rightfully so. In the past year, the percentage of global webpage views from mobile devices has nearly doubled. From May 2011 to May 2012, the percentage of global webpage views from mobile devices has grown from 5.8% to 10.1%.3 It seems that responsive web design (RWD) has become the end-all be-all solution to address the increase in mobile traffic as well as the continuously growing diversity of mobile devices. The question becomes, “Does your site really need responsive web design (RWD)? Or does it need a complete mobile solution?” By the way, “What’s the difference?”
Mobile Solution & Responsive Web Design
Mobile device visitors have a specific task in mind: Seamlessly viewing content on a handheld device. This should be accomplished as quickly and effortlessly as possible. Far less content is needed on a mobile device than the desktop version of a site. By simply using responsive web design (RWD) to deliver sites to mobile devices, only the visual aspect of the mobile puzzle is solved. With responsive web design (RWD), the content is rendered in an easy to navigate fashion with a minimum degree of resizing or scrolling. Responsive web design (RWD) does not strip out or serve any less data when rendering content. Instead, a site requires a combination of tools to obtain a full and complete mobile solution. A complete mobile solution can include, not only responsive web design (RWD), but also tools such as progressive enhancement, analysis of site analytics, and performance enhancements, among many other tools.
So Do I Need Responsive Web Design?
The answer is “yes and no.” Every site is different, which in turn means every website's mobile solution is different. A complete mobile solution for a site may or may not include responsive web design (RWD), depending on what the site needs to accomplish. Let’s look at two examples.
For example someone visiting the AMC Theatres website on a mobile device would be looking for show times and locations. The AMC Theatres website does a great job targeting its mobile audience by delivering a minimal version of its website that has the functionality its mobile audience needs. In comparison to its desktop version of the site, if only a responsive web design (RWD) approach were taken, much more data would be delivered to the mobile device, which may have functional and user-experience implications.
AMC Theatres (Mobile)
AMC Theatres (Desktop)
Yslow Data for AMC Theatres
In contrast to the AMC Theatres website, the Dexcom Store website benefits from responsive web design (RWD). The desktop version of the site is already a very lean website that serves one major function, placing an order for a product. A substantial amount of the same content is delivered to a mobile visitor in a format that makes it easier to place an order from their mobile device.
Dexcom Store (Mobile)
Dexcome Store (Desktop)
Yslow Data for Dexcom Store
Responsive web design (RWD) is rapidly growing into a trend that is being used as an end-all-be-all solution to mobile content delivery, when it should be a “use-only-when-necessary” tool in a wide arsenal of mobile strategies that comprise a complete mobile solution. In the end, what good are the aesthetics of a site, if a user cannot quickly complete a task they want to perform on a handheld or mobile device.