Responsive Design Best Practices

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.

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.

1. Responsive web design for all screen sizes

Mobile traffic to websites has been climbing and mobile visitors currently make up the largest percentage of traffic for many websites. While these statistics point to the importance of optimizing for mobile devices, the careful designer understands that 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.

2. Consider context

Too often, responsive web design becomes about little more than “fitting” a site into 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).

3. Make UX decisions based on context

You may think that, since they are on a mobile device, these customers are looking for reviews or directions, but what if they are already at your location? In that case, even though they are on mobile, they clearly do not need directions. The more data you have available to you (device, location, past visits to the site, etc.), the more context is available to inform your UX decisions.

While working on design, talk to the project’s development team to learn what data you can gather during a visitor’s site experience and how that information can better establish context.

4. 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.”

That may sound a bit aggressive, but success with mobile depends on eliminating anything superfluous.

The benefit of using thoughtful reduction is that it will carry over into the larger screen layouts as you accept that those features you removed really aren’t necessary. Getting to this point requires an objective approach and a successful design requires you to remove excess while still being strategic about what stays and what goes.

A Few Tips

 If you can’t establish an argument for why you may need to include something, then it is a great candidate for the discard pile.  Keep what is important, question what remains, and be hardhearted in your decisions to trim the fat from your responsive designs.

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

You may present content one way for certain screens, but different screen sizes may necessitate a change in that presentation to be most effective. An example of this can be seen in blog pages for your site.

At large sizes, each article teaser is presented with the following information:

 Editorial image  Photo of the author  The title of the piece  The author’s name  The date of publication  Blog page - desktop version  Photo credit

But when viewing at smaller sizes, the layout changes a bit, with the editorial image eliminated to save space. Those images, while nice to have, are certainly not critical to the presentation of the content, so as space becomes tighter, it can safely be removed without taking away from the content as a whole.

6. Use 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 well for larger screens will break down completely on other devices. Therefore, when designing a site’s navigation, 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.

You should be as consistent as possible in your navigation, including the labels used on buttons and links and the visual characteristics of those buttons (font choice, color, etc.).

Where you should break away from an insistence on consistency is in how the navigation works or lays out. A fly-out menu that is accessed via hover with a mouse may work perfectly fine for desktop visitors, but it will fall apart on touch screens and at small sizes. For those instances, the navigation you design should have a similar feel, but a different functionality appropriate to where it will be used (e.g. a navigation drawer).

7. 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, 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 greets users. As important as that quality is, you must work to find a balance between rich visuals and overall page performance.

When designing a responsive web page, consider each of the page’s visuals and, once again, be aggressive in removing any that are not necessary.

After you have cut away any images that are not needed, optimize any images that remain for web delivery and use the appropriate image formats, including SVG files when possible. That is a perfect segue into our next point…

8. Use icons where appropriate

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

9. 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.  Some typefaces with thin letterforms may work well at larger or even medium sizes, but lack clarity when they are sized down too small.

 If you must use a typeface with thin letters, make sure that it is readable even at its smallest size or consider substituting a different font for those smallest sizes.  The wider a column of text is, the more line-height (vertical height of each line of text) is required to help users find the start of the next line.  16pt body type is both the default on most browsers and a good place to start for all screen sizes, but it’s not the end-all requirement.  Make headings clearly headings, at least 1.6 times as large as the text they support.  Include adequate contrast on all your site’s copy, including the text versus the background color it is set against and the color of links versus the rest of the site’s content.

10. 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 their information with their fingers.

Input methods for mobile

 When it comes to user input (buttons, forms to be filled out, etc.), err on the side of “fat finger design” by being generous with the size of buttons and clickable areas.  For smartphone viewports, size buttons at roughly 44 points square as recommended by Apple’s iOS Human Guidelines  Test your design with at least five users on the actual devices that will be used to access it.  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 your decisions or showing you where improvements may need to be made.

11. Testing

In addition to your own testing, running usability tests with actual users is another important part of working with your designs in a real-world setting.

Check existing analytics to see the percentage breakdown for users based on devices. Prioritize your tests based upon the breakpoint information. If you’re moderating the tests on-site, it’s also worth purchasing commonly used devices.

If you can spare the resources, it’s worth testing different devices with different users. While this multiplies the number of users required for testing, it is the safest way to prevent bias due to design familiarity. For example, if you’ve designed three breakpoints, testing with 15 users (five per breakpoint) will help you uncover most usability issues.