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