What is Responsive Design and Why Should I Care?

One of the recent buzzwords in the world of the web, is “Responsive Design”. This method of design offers a flexible website template which “responds” to the users device and screen size. Essentially, a website will respond to YOUR WEBSITE USERS instead of forcing your usersĀ  to pinch, zoom and scroll sideways!

A Responsive Design template uses flexible CSS rules based on percentages and/or max-width properties to adjust the content to the width of the users screen. All devices will display the same content unless an element has been hidden or overwritten using CSS rules.

Why should you care? Tablet and mobile web browsing will soon overtake PC browsing! The IDC Research Center has predicted that over half of all web users will be browsing on mobile devices by 2015!*

Google likes responsive design & we know that we must appease the Google Gods!

Google’s Michael Wyszomierski, offered these thoughts on why Responsive Design is essential for both SEO and maintenance purposes…

(1) Easier to maintain one site vs many. So having a design that adapts to the device automatically can save time and makes sure you have the same content for everyone. There are many who would argue mobile users don’t want the same content. But the point about maintaining different content basis is a strong one.

(2) Responsive design doesn’t have canonical URL issues and you don’t have to worry about ranking issues, he said.

(3) You don’t have to worry about redirects and he said that “many sites are terrible at managing redirects.” Trust me, he is involved in webmaster relations, so he sees how most sites handle redirects.

Now that you know, lets take a look…

If you are browsing on Firefox, Safari, or Opera re-size your window RIGHT NOW to see the Studio 105 website transform for desktop, tablet, and mobile device widths. For more examples and additional information, check out the following links:

Is it perfect?

Of course not; that would make life too easy! For example, in some cases you don’t want to serve the same image to all devices. Large images equal large files sizes and in return, mobile download times can be excruciatingly long. The solution is to serve alternate images sizes for mobile users to significantly decrease downloads times. The work is all done behind the scenes with specific scripts so the web administrator (that could be us or you) does not have to create additional images.

We don’t want to bore you with additional examples…just let us take care of the technical side!

Want to learn more?


 

References

*Report: Web Surfing on Mobile Devices to Surpass PCs by 2015
**Why Google Likes Responsive Design