Did you know that over half of all web pages views come from mobile devices? Crazy, right? This mobile revolution has created the need for a new kind of website. A website that “responds” to the device you are viewing the site from. This is where the idea of responsive web design comes in. Responsive web design is an approach that is made up of a mix of flexible grids and layouts, images and intelligent use of CSS media queries. When the user switches from desktop to their smartphone, the website automatically resizes to accommodate for resolution, image size, and scripting abilities.
Sounds like a good thing, since it lets one set of content serve multiple platforms. But there are trade-offs and situations where responsive web design just doesn’t work well.
Responsive Web Design Pros
- It works pretty well for “static,” informative web sites that present information for viewing, such a company website, etc. It greatly simplifies updates – a change made in a single place is automatically implemented across all versions.
- It eliminates having to duplicate content for different devices and having different code for devices (desktop vs. mobile), except as noted below. However, using a good Content Management System (CMS) with true mobile vs. desktop layouts helps eliminate the duplicate content issue.
- It’s good for SEO – Google and other search engines love and promote it because they have all data on a single page for their search engines.
Responsive Web Design Cons
- It does not work well for sites that require a lot of navigation, input or interaction, such as web apps and particularly eCommerce solutions.
- Skinning an eCommerce solution to look different on different devices just does not yield good conversion rates (customers browsing items / customers actually buying). Why? Mobile shoppers shop very differently than desktop users. A few examples are:
- Mobile shoppers are happy to browse items by just clicking on navigation items.
- With touch gestures they can view a lot more data quickly, with a swipe.
- They don’t want to type. Typing is hard to do on most mobile devices and prone to errors.
- The experience they want is: find the item, buy it, and leave. They are typically shopping on their phones while doing something else, like waiting in a doctor’s office, or in the car to pick up their kids, etc.)
- Are the time savings real? From a developer’s view, RWD sounds great, because it means less development. However, experience has shown it often takes more time to implement a good responsive design than separate layouts for desktop and mobile devices.
- It removes a lot of Graphic Design control. Without extensive work by developers, the layout of the page can change significantly by device – think screen size affecting how much data is shown on a screen, what is above or below the “fold” (off screen), etc. Lots of good designers, agencies, etc. know how to market content on websites, and they take great consideration into what is displayed on a page. Using responsive design, you are rarely guaranteed exactly what will be shown.
- As mentioned above, you have expanded style sheets and code for devices. This means, in essence, that you still have multiple code streams to maintain for different devices.