As we have mentioned innumerable times, by 2014, smartphones and tablets will overtake PC and laptop as the leading web brosing devices. There are also this information, that after ten years of upwards trends, PC and Laptop market will see a decline in sales for the first time in 2014. What are these news tellign you? That it is high time to make your site ready for tablets and smartphones.

People are using smart devices increasingly. A whopping 45% adults from USA own a smartphone. 31% of USA adults use tablets and iPads. In fact even normal phones are losing out to smartphones nowadays. Tablet market is growing equally fast.

The problem is many if you stick to traditional web desgin process. How can you manage so many different devices? How can align the site for so many different viewing space? All these devices come with different screen sizes. These sites also must be ready for innumerable web browsers those are coming with these devices. These sites must be ready to perform well for all the different operating systems for these devices. And yes, like you are guessing by now, it is impossible, at least till you stick to traditional web design plans.

If you open your webmaster tool and check for the traffics which are coming in from different smartphones and tablets, handheld devices in short, you might be in queue for a shock. You need to go to the ‘Audience’ tab in Google Analytics and then select ‘Mobile’ to see this traffic. You can go even deeper and check the exact devices they are using to reach your site.

Fortunately, there is a way. Like a blessing there exists a technology which can help you negotiate with these problems. It is called Responsive Web Design or RWD as it is known.

Responsive web design uses a very clever trick called CSS media queries so that it can adjust the page depending on the screen dimensions, orientation, colours, so on and so forth. In short, the web page realigns its elements according to the device which is fetching it for display.

How to know if a site is responsive or not? It is simple, simply open the page and resize your web browser randomly. If the elements change its positions and realign themselves then the site is responsive. If they stay same and instead sliders appear near the border of the web browser then the site is static and not responsive. 

Advantages of Responsive Web Design

• There is no redesigning of the site needed. View it from the 27 inch Mac monitor and view it using the 4 inch screen of your Android phone, it appears to be the same.
• As all HTML elements including fonts are optimized for each device, this is really the best screen real estate utilisation.
• As one site can act for all the devices, there is really no need to redirect mobile users to another version of the site. Earlier we used to send mobile users to the mobile version of the site, like m.example.com for example.com

How To get a Responsive Theme 

Responsive web templates are everywhere nowadays. You can download them for free from many sites like hongkiat.com. If you have a WordPress site, which is the most popular CMS right now, you can easily download a free template from many of the template hosting sites. There are paid versions as well which are way more attractive, more customizable ande feature rich. All you need is to customize it a bit using your logos, images and contents and you are a proud owner of a responsive WordPress site.

There are even arguments that responsive web design might not be the ultimate solution and people are voicing their concerns about this. But frankly, with every major site going responsive and performing so brilliantly, these arguments dont hold much value. Check for example Washington Post’s, the newspaper, site. This brilliantly done responsive site can adapt to any device and still show the major headlines properly at the top. There is no need to do sideways sliding.

However, you should be concerned about responsive web design. Suppose, you download a web template which is responsive. Then when you customize the design, you need to take into care the factor this new design and the new elements must be inserted properly and coded. Else one wrongly placed element can ruin the whole template. So make sure that the designer who is handling your template is having enough knowledge of responsive web design and can code it.

With a properly responsive site, you can win this mobile battle which is going on for a couple of years now. You can win this once you know how to prioritize your elements for mobile viewing using responsive web design.