10 Rules of Best Practice for Responsive Design | Lancaster Web Design

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. Responsive Design: 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

“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.

If you look back to Maeda’s quote, he says “when in doubt, just remove.” This is because it is often clear which elements must be included in a design.

If you have to think about it and establish an argument for why you may need to include something for some edge case, then it is a great candidate for the discard pile.
Keep what is important, question what remains, and be merciless in your decisions to trim the fat from your responsive designs.

4. Prioritize Content Differently

Moving from multiple columns for larger screen displays to a single column layout for very small screens is a typical trait of responsive sites, but layout changes do not stop with columns. Different content on your site will require different layout approaches.

Take something like article teasers, for instance. You may present that content one way for certain screens, but different screen sizes may necessitate a change in that presentation to be most effective.

5. Scalable Navigation

Navigation is one of the most challenging aspects of a responsive website to design effectively, especially when you are dealing with very large, deep menus.

What works perfectly well for larger screens will break down completely on other devices. This is why, when designing a site’s nav, you are not looking for a consistent navigation experience across every different screen site or major layout versions of your responsive site. Instead, you are focusing on creating clear, user friendly navigation every step of the way – even if the exact way that navigation is accessed differs from one screen to another.

6. Image Quality Versus Download Speed

The average web page rings up at a whopping 2.1 MB in size.

One of the biggest culprits in size is images. As website design trends move toward gigantic, screen spanning images (explained in Web Design Trends 2015 & 2016), the file size of pages will only grow. As designers, we want these images to look their best, especially when they are the primary visual that greet users. As important as that quality is, you must work to find a balance between rich visuals and overall page performance.

7. Use Icons Where Appropriate

Used correctly, icons can improve a responsive web design in a number of ways. Well designed, appropriate iconography help replace lengthy bursts of text, which is especially helpful on smaller screens where space is at a premium.

8. Pay Attention to Font Sizes

Typography is an important part of web design – responsive or not. But when designing responsive sites, you must take special care that your type design choices change along with other aspects of your layout. When choosing a typeface, be sure that your selection works well and maintains the overall feel you want whether you scale it larger or smaller.

9. Think About Input Methods

Different devices means different input methods.

Desktop users are likely using a mouse and a keyboard to navigate your site and enter information. This is a very different experience from someone who is using a touch screen device to input all of their information with their fingers.

10. Test Your Design on Actual Devices

Planning how your design will scale for different sizes is an important part of designing for those devices, but you cannot stop at that theoretical approach.

Being able to interact with your design on real devices will show you how it really works, either confirming the decisions you made or showing you where improvements may need to be made.