Responsive Web design has become the preferred method for developing websites with a multi-device friendly approach. Recommend by Google and embraced by some of the largest sites on the Web today, quality responsive websites are equal parts development and design efforts.

In this article, we will look at 10 responsive design best practices for the careful designer.

1. Plan Small…and Big

One of the driving factors in the success of responsive web design has been the ability to create better experiences for users on mobile devices.

While the importance of this benefit cannot be overstated, the problem arises when designers think about responsive design as only a small screen solution. The truth is that responsive web design has benefits for all screen sizes, including very large displays.

For the past few years, mobile traffic to websites has been climbing and today mobile visitors make up the largest percentage of traffic for many websites. While these statistics point to the importance of optimizing for mobile devices, this should not be done at the expense of larger desktop screens. There are still many people visiting websites with those larger screens (including many users who are jumping between devices at different times of their day) and the careful designer understands that improved support for small screens does not mean pulling back the attention they pay to very large ones.

When designing a web experience, you should take the “Mobile First” approach. Follow the advice in UX Design Trends 2015 & 2016: write down all the content categories, rank them in terms of priority, then lay them out in the smallest viewport first. Add elements as necessary when you move to larger viewports (like tablet or desktop). For example, if you’re using the collaborative design app UXPin, that means creating your first prototype on the 320px breakpoint.

Consider larger screen sizes as well, and also the sizes between popular breakpoints. Remember that new devices are being introduced into the market every day (there are currently 24,093 distinct Android devices on the market), so the breakpoints that may be popular today may not be so in the near future, and sizes that are not even on our radar now may become critically important down the road. By focusing on both popular breakpoints and the gaps between them, you can design an experience with true scalability.

Scale your design up to even the largest possible sizes and make use of the expanded screen real estate that you have available to you.

2. Consider Context

Too often, responsive Web design becomes about little more than “fitting” a site onto different screens. A single column layout scales up to span multiple columns as the screen size grows, eventually ending at whatever the widest supported screen size will be.

The “fit-to-size” process makes sense from a purely layout scalability standpoint, but it ignores the actual content that is being presented in that layout (and it fails to consider context).

Think about a website for a restaurant. Obviously you want that site’s layout to fit well on a mobile screens. Context, however, goes beyond just that requirement to consider what content may be most relevant for visitors using those devices.

3. Practice Thoughtful Reduction

In his book, “The Laws of Simplicity”, designer John Maeda introduces the concept of “thoughtful reduction.” He says:

“When in doubt, just remove. But be careful of what you remove.”

The statement may sound extremely aggressive, but an important aspect of that aforementioned “Mobile First” approach is to focus on only the content or features most important to people and to eliminate anything that is extraneous.

Going through this process for mobile will hopefully then carry over into the larger screen layouts as you accept that those features that you removed really aren’t necessary in those instances either. Getting to this point requires that aggressive approach to deleting elements from the page. The successful designer must learn how to be merciless in this regard while still being strategic about what stays and what goes.

To read the full original article CLICK HERE