Go to Pay4Bugs.com

The Pay4Bugs Blog

Pay4Bugs is the original pay per bug software testing marketplace. Our testers seek out and report problems with your software or website before they cause you to lose sales and customers.

The Golden Rule of Responsive Web Design

Posted by Larry Salibra on · Comments

I know where you are. You're on your phone. You're probably reading this from a link on Twitter or email that a friend sent you.

Our mobile devices increasingly serve as the entry point for new information coming into our digital lives. Computers are reserved for in-depth research and production (aka "work") activities.

Here at Pay4Bugs, we realize that a blog post is often the first impression a user has of our product and our brand. Visitors to our blog arrive via mobile devices just as frequently as they do from a traditional PC. Therefore, it is critical that our blog delivers a first class experience across all device types.

Interesting, you say, but what's this have to do with responsive web design? Responsive Web Design, or RWD, is the technique we use to achieve this goal. RWD gives us the tools to ensure users on all devices have an optimal experience.

For those that don't know, RWD uses CSS3 Media Queries to adjust the style and layout of a page based on the type and width of the visitor's screen.

Want to see an example in real life? Open this post on your desktop and compare it to your phone. Make your browser window wider and narrower and see how the page rearranges itself to fit comfortably within the constraints of the display.

Gone are the days of opening a link from Twitter or sent by a friend only to be redirected to a generic untested, unusable Wordpress mobile plugin generated site or being forced to pinch and zoom your way around a page designed for a 20 inch screen on your 4 inch mobile.

This leads us to the Golden Rule of Responsive Web Design:

What is the same is more important than what is different.

If you think it sounds more like Zen philosophy, than a technical web rule, you're already on the right track to excellent RWD.

RWD is NOT making a mobile version of a website. A mobile version of a site implies different content, different behavior, different features. Mobile versions of sites made sense a few years back before most phones had full-powered web browsers built in.

Different is bad - when a user shares a link to a page on your site, presumably they do so because they want their Twitter follower to click on the link and see the same page they were viewing. Redirecting a user to some "mobile" or "desktop" site is a colossal #fail.

Example of a confusing mobile site.

Chances are they won't be able to find the information the sharer intended and become frustrated. If you're lucky, they might leave with the impression that your site is broken and incompetent, but more likely part thinking your brand is broken and incompetent.

You want a visitor to have the same brand experience, see the same information and have access to the same features, no matter which device they're on.

You want images, and graphics to be sharp and clear without the need to pinching and zooming on every device.

You want your site and its navigation to look and behave as close to the same as possible so that people who've learned how to navigate your site on one device have no problem using it on another.

At core of the Golden Rule of Responsive Web Design is the concept of simplicity. We at Pay4Bugs like simplicity…simple things are easier to test and harder to break. They give our testers more of a challenge because they have to work much harder to find a bug.

When integrating Responsive Web Design principles in your next site focus on making things the same and minimize what's different.

And remember the Golden Rule of Responsive Web Design, "What is the same is more important than what is different."