In my previous articles, I  explained why responsive web design should be based on a 6-layout approach, rather than merely a design for desktop and one for mobile.

Now is time to explain how our design team at Level Level’s approaches responsiveness. To ensure every design decision is a step towards an optimal user experience,  we defined 5 proven principles that guide every single design decision:

1. Focus on screens,  not on devices

There are way to many unique devices to distinguish on a per device basis. Differentiating per category no longer works, either, as some devices that supposedly fit in a category, no longer do so. Some phones are larger than a small tablet and some desktop screens are larger than a TV screen. Therefore, we design for small, middle, large and extra large screens.

2. Put the same effort in designing for smaller & larger screens

Every user, no matter the size of screen they use, deserves a pleasant user experience. We therefore take ample time to design for small, middle, large and extra large screens alike.

We take full advantage of the all the space a larger screen offers,  we make your content fit comfortably on a tiny screen. We take care of hierarchy of content, good quality photos in several sizes, optimal line heights,  icon sizes, table layouts, etc.

You will note the difference in your engagement and conversion rates.

3. Use content-based breakpoint rather than device-based ones

Long copy, short copy, video, photo, graphs, making your content render optimally in all screens is a challenge. One we happen to be passionate about. And since, we believe design should support content, and not the other way around, we learned from experience that breakpoints are determined based on content render better than breakpoints determined by  device.

Between a 240px micro-screen width to a 2000px wide desktop or television screen, there is an average of 6 different breakpoints​ to take in consideration while designing.

When deciding on ​breakpoints, we start with designing for the smallest screen. As screen width increases, we make the design expand accordingly. This way we optimize breakpoints based on content and we keep the breakpoints needed at a minimum.

4. Don’t hide content

Not even a long time ago, it was common to assume that users of mobiledevices were in a rush and were looking for different information than when sitting behind their desktop screens. That notion changed. Thank goodness. Because, people use mobile devices everywhere:  while commuting, at work, when hanging out with friends, or simply while relaxing on the couch.

An increasing number of users access the same content from different devices. At the same time, there is a substantial, and still growing number of people that use their mobile phone as the only used source of internet connection. Many people in developing countries, but also people on lower incomes in, for instance, the US don’t have a fixed internet connection at home but but do have a smartphone with either a 3g or 4g internet connection. Don’t overlook the the potential of this group.

We now know people want full access to all content and all services on their mobile devices. While we can’t guess what content someone is looking for based on the device they are using, we can determine how to present the content in a way that helps users find what they need as easily and effortlessly as possible. So that is what we focus on.

5. Test, test & test some more

Not everything that looks pretty in a design, works just as beautifully in real life. Tests with real users bring up unexpected UX issues. We recommend performing at least some basic user testing before releasing a website.  After all, a new website could make or break your reputation, right? At Level Level, we consider it such a key factor in the success of the online presence of our clients, that we are busy creating an in-house test room.

What’s next?

Would you like to be among the first to experience our test room? Would you like one of our designers to do an user experience quick scan for you? Or would you love to bounce off some ideas you have for a project? We’re game! Give us a call, schedule an appointment and let’s have coffee. And don’t hesitate to bring a friend.