Responsive website design
A report from February 2012, indicates that the smartphone's share in the United states has reached nearly 50%. This number is sure to grow in the coming years, making it time to consider investing in, and fully embracing the mobile user experience. With such a changing landscape, SavorWeb has adapted the practice of Responsive web design. Responsive web design (RWD) is a technique which uses fluid layouts to maximize or minimize the web page to fit within the given screen size. 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. It doesn’t matter that the Galaxy Tab's resolution is different from a Nexus S phone — your site will render beautifully.
Does my website have to be built in such a way?
Responsive design is a relatively new concept, one which many web development companies have yet to adapt to and therefore cannot recommend to their clients. However, since the growth of mobile, it is a practice of growing relevance. Some view it as the best solution to improve the mobile and tablet experience.
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?
- 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).
- 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. Instead, designers usually show wireframes and mockups of the desktop + mobile layouts. When both are approved, RWD is implemented and designers can then show operational layouts of the site in all screen sizes.
