What is a responsive website?

What is a mobile-ready, responsive website and why do you need one?

A few years ago, all websites had text and graphics sized to read on a desktop screen. How convenient. Everybody used a desktop computer to view your website.

However, it’s no secret. You probably already know: people are using their desktop computers less and mobile devices more.

In fact, mobile internet use now far surpasses desktop. According to a recent ComScore worldwide study, people are now using a mobile device for 60% of their time online.

ComScore estimates nearly half of these 1.9 billion mobile users complain about non-responsive websites. Why?

[AdSense-A]

A responsive site changes the size of text and graphics to fit the screen you’re using. A non-responsive site’s text and graphics can be really tiny and unreadable on a mobile screen.

Mobile device makers desperately tried to fix this problem. Sure, you can use your fingers to zoom in and pan around non-responsive web pages. Yet the problem persists.

It’s still much harder to view non-responsive sites. If your website is like this, most people will quickly leave in search of your competitor’s site, which is responsive.

How can you tell if your site is responsive? Try this.

Browse to your site using a desktop computer. Position your mouse on the bottom-right corner of your browser. You’ll see the two-way arrow mouse cursor.

Now drag the mouse to resize your browser window. Try making the window really small. Did your graphics resize so all the pictures fit entirely within your browser window? Did the paragraphs of text on your page shift so that everything is still formatted nicely, and easy to read?

If so, congratulations! You have a responsive website.

If not, you have some work to do. In fact, your online presence and your business may depend on your making some changes.

Google’s profits depend on their top-ranked websites being easy to use. That’s the reason why Google says this:

“Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and only using CSS media queries to decide the rendering on each device.”

So, there you have it, straight from the source. A little technical, but nonetheless clear: your website needs a responsive design.

Google’s comment also provides a great clue about where to start. By doing a search for “CSS” (cascading style sheets) and “media queries”, you’ll soon have fistfuls of advice on making your site responsive.

[AdSense-A]

Google even wrote their own documentation, providing a number of best practices to help you.

If you’re a web designer or have some experience writing code, you might have heard about Bootstrap. A few years ago, web engineers at Twitter spent hundreds of hours creating a standard so that their famous site would be responsive.

For publicity, Twitter decided to give their standards and code libraries away for free. Thus Bootstrap was born. While Bootstrap simplifies the whole process, it does require some technical know-how.

The good new is, many people are already using it. It’s a great place to start when making your site responsive.

Sources:

https://developers.google.com/webmasters/mobile-sites/?hl=en

http://www.comscore.com/Insights/Presentations-and-Whitepapers/2014/The-US-Mobile-App-Report

http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)