Post Image

Best Practices & Examples of Excellent Responsive Design

Jerry Cao
By Jerry Cao on 2nd October, 2015 Updated on 14th September, 2020

Still putting off making your site responsive? These facts will make you reconsider:

image08

Source: “Prioritizing Devices: Testing and Responsive Web Design.” Tom Maslen. Smashing Magazine.

In this article, we’ll explain best practices for responsive design, then deconstruct 4 outstanding examples.

Quick Recap of Responsive Best Practices

1. Flexible everything

As explained in UX Design Trends 2015 & 2016, flexibility is the name of the game for responsive design. Everything must be flexible: layouts, image sizes, text blocks — everything. This malleability, combined with smart use of CSS media queries, gives your site the fluidity it needs to fit inside any container.

2. Modify images

Fluid images are non-negotiable for responsive design — not only for size, but for cropping. On smaller screens, crop some images so they retain their impact. For help on the finer points, Ethan Marcotte gives a thorough tutorial.

3. Use Scalar Vector Graphics (SVGs)

When you can, use SVGs for the best clarity no matter the device. Unlike raster graphics, SVGs alter their resolution based on image paths, not pixels, so they remain the same at any size.

4. Pay attention to breakpoints

You need a minimum of 3 breakpoints (mobile, tablet, and desktop). We recommend 5 breakpoints for the most device flexibility.

image01

For a quick reference guide, check out the responsive design cheatsheet PDF.

Join the world's best designers who use UXPin.

Sign up for a free trial.

5. Consider card interfaces

The card UI pattern can save a lot of headaches since the rectangular shapes act as “content containers” that are easier to shift around.

6. Minimalism matters

A helpful best practice for any site, but especially in RWD. Think of it like trying to fit the same amount of luggage into different sized suitcases — the less luggage you have, the easier it will be. Responsive-friendliness (and performance) is actually part of the reason why minimalist interfaces are so popular nowadays.

7. Design the smallest views first

Designing with the mobile (smartphone) layout first will help you separate the essential elements from the secondary ones. Adding as you scale up is much easier than cutting as you scale down. We give a step-by-step guide to the mobile-first process in our Responsive & Adaptive Web Design.

8. Prioritize and hide content appropriately

Desktop screen sizes offer breathing room that smartphone screens do not. Take advantage of hidden controls like navigation drawers. To reduce the number of elements that require restructuring, try progressive disclosure.

9. Large clickable area for buttons

Fitts’s Law (explained in Interaction Design Best Practices: Book I) states that the larger clickable area in a button, the easier the user can interact with it. This hold extra weight when the button size fluctuates. For mobile-friendly designs, make sure you useat least 40 points for tappable buttons.

Deconstructing 3 Sites That Do RWD Right

  1. The Guardian

The site for the famous British newspaper The Guardian is a great example of mobile-first device consistency.

In keeping with our mobile-first advice, let’s start the analysis with the smallest screen:

Smartphone View

image12

Source: The Guardian

The smartphone view is cohesive and inviting, with all the essential elements presented in a clear visual hierarchy.

  • Right at the top, the necessities are in the banner, with login, search, and the site’s title.
  • Directly below are the most popular navigation categories (home, “US,” “world,” etc.) for easy access. Additional categories are hidden in the hamburger menu (following the principle of progressive disclosure). It’s a fine balance because placing all categories into the hamburger menu limits searchability for the whole interface.
  • The features story, with its enticing image, takes up most of the room, showing that it’s the most important element. And yet, with a quick scroll, the user can access any number of secondary stories. This facilitates browsing, but leaves some control in the hands of the designer.

No space is wasted on the mobile version, too — even the white space opposite the “headlines” title features weather information, a little extra something that’s a nice touch.

Let’s see how this compares to the tablet version below.

Tablet View

image11

  • At the top, the banner remains the same, but the tablet offers more room for additional elements (“jobs” and the country edition), text titles for the icons, and a subheading to the guardian’s logo/brand name to give it extra social proof. The hamburger menu remains, although there are more categories listed than only the most popular.
  • The biggest difference is that the tablet offers a lot more stories to choose from, and breaks the single column organization. This creative use of the card UI pattern allows the designers to assign more priority to certain stories (“L.A. becomes…”) using size, while still keeping the site tidy.
  • The tablet version can even afford an ad at the top. Moreover, the weather data is elaborated, and there’s even room for the full date, a newspaper staple.

All in all, the tablet version feels like a roomier, more luxurious version of the smartphone screen. How does that look next to the desktop version?

Desktop View

Let’s take a look:

image05

The full desktop view reveals the true mastery of the site. What the Guardian does right across all devices is consistency — all three sites deliver the same overall experience. All the versions are scroll-based, all use the same style of cards, all have the same brand banner at the top and the key navigation elements in the same places.

The biggest difference is that the larger screens feature more information, from more available story cards to more complete weather details. The core content, however, is accessible on any device.

The site doesn’t look the same across each device, but it definitely feels the same. Users familiar with only one version will still feel comfortable using another.

2. Smashing Magazine

With articles advising designers on how to create better mobile experiences, naturally Smashing Magazine follows their own advice.

Smartphone View

image04

Source: Smashing Magazine

Smashing Magazine’s content is still readable despite the smaller screens, remaining useful to their readers on the go. They know full well that the users will scroll, so they don’t “rush” with the content. They space out the full title over four lines, plus byline, date, category, and a link to the comments. Notice how they clearly labeled the navigation menu, instead of just making it a hamburger icon.

Smashing Magazine smartly puts faith in their users and designs for usability, which in this case adds to their UX.

Tablet View

image00

Source: Smashing Magazine

Content remains the focus of the page, but the wider view allows for the “Menu” button to expand into a full navigation.

Desktop View

image10

Source: Smashing Magazine

Last, the desktop view has room to put its feet up. Even using the right quarter for ads and burning the left eighth for white space under its navigation, the site still has room to legibly display the article and images therein.

The promo of their categories — crowning the tablet view — now has its own column to the left.

Notice how the crucial information, such as byline and article information, remain more-or-less the same across all three devices. This creates a familiar orientation for regular readers on all devices.

 3. Lookout

The mobile security site Lookout knows the limitations of mobile, and doesn’t try to force their desktop UI on it.

Desktop View

image06

image09
Source: Lookout

For example, their home page features a beautiful hero animation background, that unfortunately would not translate into mobile. Instead, they used a meaningful screenshot — cropped — for their mobile background.

Mobile View

image02

Notice that the other elements remain similar — same text, same layout, same green call-to-action. The mobile header, however, has been reduced to the two essentials: logo and login.

Additional Knowledge

If you found this post helpful, you can learn more about responsive & adaptive design (and other techniques) in the free guide UX Design Trends 2015 & 2016. The ebook explains useful UX methods based on analyzing 71 examples of successful digital design.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you