One Site Fits All: What is Responsive Design? – Part 2: The Drawbacks & Solutions
Responsive Design May Be Awesome, But It Isn’t a Web Design Panacea.
For an introduction to responsive design, see Part One in this series.
In our first article, we discussed the amazing flexibility that responsive design offers. But this flexibility comes with a price that might negatively affect your fastest-growing audiences – mobile and tablet users. While offering a flexible layout, responsive design requires the latest browsers, more code, and large images. In short, responsive layouts can be bandwidth hogs and resource-intensive to render. This affects users on the move, where bandwidth is the scarcest, and where processors lack the raw power of their desktop predecessors.
Before diving into a responsive design workflow, we’ll explore some of responsive design’s shortcomings, and examine some of the current strategies to address them.
One Image Shouldn’t Fit All
The fluid resizing of images, which is one of responsive design’s hallmarks, is also its Achilles heel. Mobile networks are bandwidth constrained, and speed matters more for mobile users on cellular networks than it does for their landline-connected counterparts.
In many cases large desktop images, such as home page banners, are up to 80% larger than the same image optimized for a mobile display. Browser resizing of images is CPU intensive, which causes phones to slow down and consume precious battery resources.
Worse, mobile webkit (Safari Mobile and Android Browsers) will force-download images that were only intended for the desktop version of the site, even if media queries and CSS are used to hide or prevent those image assets from displaying.
Fortunately, there is work being done to solve this problem. Responsive Images is a javascript-based stopgap approach, which delivers mobile-first images as the default, then uses javascript to deliver the larger desktop images. Adaptive Images is an easy to implement server-side solution that detects the visitor’s screen size, then creates, caches and delivers the appropriately sized image. It even detects retina displays, on devices like the new iPad or the iPhone, and can serve high resolution images to just those devices. If serving retina-sized images is your primary concern, check out retina.js, a javascript progressive enhancer which scans image directories for “@2x” images and automatically swaps the low resolution images with high resolution images on the appropriate devices.
As devices and high resolutions screens become commonplace, a long-term, native solution will be necessary. Such a solution has been proposed, but it will require standards organizations and browser makers to get on board before it can be successful. Until then, designers, developers and website owners are left to work through the trade-offs on a case-by-case basis.
Some Devices Don’t Support Media Queries
Media queries – the technology that allowed for the creation of responsive design, in the first place, is not natively supported on several important browsers, including Internet Explorer 8 and older; IE Mobile (Windows Phone 7 and earlier); Blackberry; and some proprietary browsers from phone manufacturers such as Sony Erikson and LG.
As with fluid image resizing, there is a javascript polyfill fix for older versions of desktop Internet Explorer, but Blackberry and IE Mobile browsers are still unsupported.
However, if responsive design is approached from a mobile-first design strategy, this shouldn’t be a problem, since the default stylesheet for the site would be tailored for mobile users, and media queries would then be used to progressively enhance for tablets and desktops. We will discuss the advantages of using a mobile-first design approach in part 3 of this series.
Third-Party Content Often Breaks Responsive Layouts
Careful planning and evaluation needs to take place if your site is heavily reliant on third-party content and widgets – social media plug-ins; iframed content such as outsourced job postings and investor relations sections; or embedded e-commerce widgets. Most third-party widgets are not designed with fluid layouts in mind, and often lack customization options to adapt the layout to a responsive design.
If this is the case with your plugin or outsourced content, there is no easy answer. Solutions vary and may require serving up the iframe-specific content in a static, non-responsive template, or working with vendors to create an adaptive template for their content.
Your agency or content partner can help you navigate these issues as you plan your migration to a responsive design.
Responsive Design Ignores Context
Designing a site specifically for mobile has its advantages, particularly if your user’s context is important to your business. A good mobile site will take advantage of geolocation and a mobile layout to serve up content uniquely suited for users on the go.
An oft-used example is restaurateurs. Desktop visitors may want to learn more about the history and ambiance, read the wine list, view chef bios and see large photos. Mobile users often want directions, easy access to the phone number, and a simple means to read the menu or quickly make reservations.
When considering mobile users, starting from the ground up to build a uniquely mobile solution may be a better strategy than the “one size fits all” approach that responsive design offers.
It ain’t all bad
Responsive design offers a lot of advantages that mostly outweigh the disadvantages. In the next part of this series, we’ll discuss planning and implementation strategies for both new sites and existing sites. In the meantime, if you have an immediate need to discuss how responsive design might work for you, ThoughtMatrix is happy to help. Just contact us.
