Still putting off making your site responsive? These facts will make you reconsider:
- More than a year ago, mobile users surpassed desktop users.
- Over a third of users will switch from an M-dot to a full site if given the chance.
- Users spend more time and money on full sites than M-dots.
- Google said responsive and adaptive sites rank better their M-dot counterparts.
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.
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.Try it for free!
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 use at least 40 points for tappable buttons.
Deconstructing 3 Sites That Do RWD Right
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:
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.
- 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?
Let’s take a look:
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.
With articles advising designers on how to create better mobile experiences, naturally Smashing Magazine follows their own advice.
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.
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.
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.
The mobile security site Lookout knows the limitations of mobile, and doesn’t try to force their desktop UI on it.
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.
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.
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.