Table of Contents
What is Responsive Web Design?
Responsive web design (often abbreviated to RWD) is an approach to web design in which a designer intends to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Google has officially recommended RWD as their preferred method  for building mobile websites. If you have a website or a blog, it is time that you seriously consider switching to a responsive design instead of maintaining a separate mobile-friendly (or tablet-friendly) website.
Single Design, Multiple Screens
If you are new to the concept of Responsive Web Design (RWD), here’s a quick guide that should answer most of the common questions that you may have around this technique. Let’s get started.
Why should I switch my website to Responsive Design?
Before the concept of RWD, we used to make different website for each devices like smartphone, tablet, kindle etc. Responsive website looks great of the desktop screen but the same may not be true when your site is viewed on a smartphone, 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.
What are the advantages of switching to RWD?
With Responsive Design, you have to create one design which will automatically be adjusted on the screen size of the mobile device or any other device. This approach offers plenty of advantages:
- It save time as you don’t have to maintain separate websites for desktops and mobile phones.
- From SEO point of view, Responsive Design is good because it will have a single URL and thus Google juice is preserved. All the users will get same URL and same content also you don’t have to worry about situations where some sites link to your mobile site while other link to your desktop site.
- It save money as you don’t have to spend money on making different webite for desktops and mobile phones.
- You will get a consolidated data of mobile and desktop users in your Google Analytics reports
- Since the mobile and desktop versions of your web pages will no longer have different URLs, you will also get the consolidated social sharing stats (Facebook Likes, Tweets, +1′s)
- Its easy to maintain the Responsive Designs, 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.
How should I start with Responsive Design?
Responsive Design doesn’t require any programming skill, its pure HTML and CSS. You just have to create simple rules in CSS that change style based on the screen-size of the user’s device.
For example, you can write a rule that says if a user’s screen-size is less than 320 pixels, don’t show the sidebar or if the screen size is greater than 1920 pixels (widescreen desktop), increase the width of sidebar by 50px. Here are the same rules translated to code:
@media screen and (max-width:320px) {
.sidebar { display: none }
}
@media screen and (min-width:1920px) {
body { font-size: 15px }
}
What is CSS media queries?
A media query consists of a media type and at least one expression that limits the style sheets’ scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
How do I check, whether the design is Responsive Design or not?
That’s very easy. Open the website in any desktop browser and resize the browser. If the website’s layout changes as you resize the browser, the design is responsive. You can also use these online tools to compare the different layouts of a page in the same tab.
Can you share examples of some good websites that are responsive?
That are quite a few but I have collected few of them. you can check the Responsive Collection. You should also check out mediaqueri.es, a curated gallery of websites that use Responsive Design.
If I go with the Responsive Design approach, will my website work in older browsers?
Yes . Responsive Web Design uses CSS3 media-queries and HTML5 (for better semantics) that are supported in all the major latest browser except older versions of IE. However, there are JavaScript based solutions – respond.js  and modernizr for example – that bring the power of CSS3 and HTML5  to older browsers including IE6.
Does Responsive Design play nicely with advertising networks like Google AdSense?
If you using ads on your website, you should carefully choose the formats because wide units  (like the 728×60 pixel leaderboard) may not fit on a 320px mobile screen. I prefer using standard rectangular units (like 300×250) on my blog  since they easily fit on smartphone screens and widescreen desktops.
There are thousands of mobile devices. What screen resolutions should my responsive website support?
Open your Google Analytics dashboard and choose Audience -> Technology -> Browser & OS. Now switch to the Screen Resolution tab in the report and see the resolution of mobile devices that people are using to browser your site.
I would recom mend setting break points for at least the following viewports in your CSS3 Mediaqueries  – 320px (iPhone landscape), 480 px (iPhone portrait), 600px (Android Tablets), 768px (iPad + ~Galaxy Tabs) and 1024px (iPad landscape and desktops).
How do I get started with Responsive Web Design? Any good tutorials?
First, read this article by  Ethan Marcotte and you can follow this tutorial How to convert PSD to Responsive Website.
I hope after reading this article you will be quiet confident to start making your first Responsive Website.
