We are reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn more.

The Five Golden Rules Of Responsive Web Design

It was in May 2010, when Ethan Marcotte started the hype of responsive web design.

He wrote an article of the same name for A List Apart and now it has become well accepted in the industry.

Five Golden Rules of Responsive Web Design

Let’s talk about the rules.

1. Design with real content

Oftentimes, many web designers tend to use a dummy text like Lorem Ipsum to complete their design.
But they frequently end up messing the design when the client provides them with twice as much real content.

To make a responsive web design successful, you need to have a good idea of the content that will be placed on the live site.

If you have the content, it will be easy for you to build content reference wireframes, a method of using basic rectangular blocks to make a layout of your main templates.

With this strategy, you will have a good idea on where to place the navigation, sub-navigation, footer, and secondary modules on the main body of the page.

2. Design “in-browser”

Minimize the use of flat visuals and Photoshop comps because they look too good and looks like a work of art. The key here is to design the site in the channel in which the site will be displayed and present it in the browser.

Don’t forget to demonstrate the site on how it looks on different devices. So how does this strategy benefit you?

Mainly, this reduces the development time of building the site. For instance, if you have 15 Photoshop comps and you are displaying it in three different devices like laptop, tablet and mobile, and you need to alter one design element, take link navigation for example.

This could take you 45 pages to change one design element. Surely, this won’t be a good idea for you. But when designing “in-browser”, it will be simple to make updates across all your pages.

3. Develop a pattern library

Pattern library is becoming an important output for responsive web design. It works by defining each of the common UX patterns used throughout your site, exposing notes and code snippets.

Breaking the site into patterns makes it easy to find those bits of markup because all the elements that are on the site are on one place.

In addition, with the use of pattern library, it makes device testing convenient because everything is on one page.

Interesting Reads:

4. Make it universally usable

Along with the numerous smartphones and tablets with different screen sizes and input types, there are also tons of possible circumstances of how a user could be using your website.

To make sure that your design works pretty well in different situations you need to design it universally. Here are some important considerations when designing a responsive website:

  • Design with a slightly oversized hit areas to have an enjoyable desktop experience while keeping a simple and mobile friendly experience.
  • Ensure a good jump links, drop-down, and the off-canvas method.
  • Surfaces any major Call-to-actions near the top of the screens, wit supporting content beneath.

5. Keep performance in mind

When designing a website it is always keep in mind to give a good user experience. When we say good user experience, it means the users doesn’t need to wait for a long period of time for the site to load, or going crazy navigating their way through your website.

Bad user experience usually end up hurting your website and your lead generation. But websites with good performance will more likely give enjoyable user experience.

When designing a website, keep in mind of the following:

  • Make information easy to find
  • Offer easy navigation (follow the 3-click rule, it should not take more than 3 clicks for the audience to get into the right information.
  • Speak directly to your target audience
  • Avoid confusing layouts


Indeed the world of web design has changed dramatically today. As you can see, user experience has become the darling of the business community.

Keeping a strong user-centric design does not stop in creating perfect color scheme or stunning typography.

There is always something new to learn about in the world of responsive web design.