First Of All, What is Responsive Web Design?
In a nutshell, responsive web design (RWD) is a technique which uses fluid layouts (which "stretch" to as much screen real estate as possible) in addition to the CSS "@media queries," which apply different style sheets (CSS) based on the current screen size of the device. With responsive design, your website will fit virtually any device with a full browser: smartphones, iPad + other tablets (both landscape and portrait modes), and even TVs.
Responsive Web Design: Ultimate List of Advantages and Disadvantages
Responsive design is not a one-size-fits-all solution to mobile.
ADVANTAGES of Responsive Web Design.
- User Experience (UX): Website adjusts to any screen size, making it a good long-term solution to UX with the current plethora of devices (including mobile/tablet hybrids). Hiding elements which aren't crucial for mobile visitors helps to achieve their goals faster.
- Analytics: One complete view for all the traffic. To get insights on the mobile visitors, create a "mobile-only" segment (note that by default, Google Analytics puts all the tablets under "Mobile" segment).
- Sharing/Linking: One URL to accumulate all of the shares, likes, tweets, and inbound links. Contributes to a better user experience as well: have you ever clicked on a link in a tweet just to see a mobile version of a page in your full browser? #badUX
- SEO: Going with the advantage above, one URL accumulates all links, PageRank, Page Authority, etc. However, as Search Engines get smarter at determining the relationships between mobile-optimized pages and desktop pages, this advantage won't matter.
- Development: RWD involves no redirects to take care of, no user-agent targeting.
- Maintenance: Once your website is responsive, there's very little maintenance involved, as opposed to up-keeping a separate mobile site. It is not required to up-keep a user-agent list with all of the up-to-date mobile devices.
- Information Architecture (IA): With a 1-to-1 relationship to the desktop site, mobile mimics the full site's IA, reducing the learning curve to get accustomed to using the mobile version.
DISADVANTAGES of Responsive Web Design.
- User Experience/Load Time: Users need to download unnecessary HTML/CSS code (not a huge deal) and most of the time, images are simply scaled down, NOT resized — negatively impacting the load-time (bigger issue).
- SEO: With RWD, you cannot easily adjust Titles, Descriptions, and Content for the mobile users. Mobile users use different keywords, more likely to use voice search and for some verticals, there can be significant variation (use Google's Keyword Tool, which separates mobile searches from the desktop).
- SEO: As determined by my experiment, Google doesn't rank sites based on the mobile-only content located at the same URLs. If your responsive site targets user-agents to serve certain mobile-only content, it will not be indexed nor used to rank your website.
- Development: The initial development of responsive web design takes more time. It is usually much easier to create RWD from scratch than to convert an existing site.
- Design: Since layouts of RWD are "fluid" (other than two extremes: mobile and a full desktop site), there's less control over how the "in-between" layouts will look and it is time-consuming for designers to show all the possible mockups beforehand.
When Using Responsive Web Design Makes Sense (And Doesn't)
RWD is not a cookie-cutter solution; therefore, it works for some sites better than others.
If your website contains fewer than 50 pages, does not include advanced functionality, and user intent is not significantly different on the mobile devices, chances are, RWD would be a great solution to improve the mobile users' experience
- If your website is fairly simple, without too many different page "types" (e.g. article pages, category pages, browse by pages, etc.), and the user intent is not significantly different on the mobile devices, RWD can be a good solution to improve mobile UX.
- If you have a complex site with a lot of page types, user intent is not significantly different on the mobile and you're planning a redesign, you should at least consider RWD.
- If people have significantly different goals when using your site from mobile devices, chances are, RWD is not for you.
Google has taken an official stand on building smartphone-optimized websites and says that responsive web design is Google's recommended configuration.