Responsive Web Design

Do you really need to serve your “mobile” visitors a different layout based on your current content ?

Short answer: YES

 

Why you need Responsive Web Design?

Your website looks great of the desktop screen but the same may not be true when your site is viewed on a smart phone, a tablet or an e-reader (like the Kindle). Once you make the design responsive, the website will look good (and readable) on all screens and not just the desktop.

So .. what is the responsive web design ?

Responsive Web Design

Responsive Web Design

Responsive Web design is the approach that suggests the design and development should respond to the user’s behavior and environment based on screen size and platform . The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS 3 media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

 

Responsive Web Design approach offers plenty of advantages:

  • It save time and money as you don’t have to maintain separate websites for desktops and mobile phones.
  • Responsive Design is good for your website’s SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don’t have to worry about situations where some sites link to your mobile site while other link to your desktop site.
  • Your Google Analytics reports will paint a better picture of your site’s usage since the data from mobile and desktop users will be consolidated.
  • The same will be true for the social sharing stats (Facebook Likes, Tweets ) since the mobile and desktop versions of your web pages will no longer have different URLs.
  • Responsive Designs are easier to maintain as they  do not involve any server-side components. You just have to modify the underlying  CSS of a page to change its appearance (or layout) on a particular device.
  • The earlier design methods looked at user agent strings to determine the mobile device name and the browser that is making the request. That was less accurate and with the number of devices and mobile browsers expanding every day, that matrix is very difficult to maintain. Responsive Design doesn’t care about user agents.