Responsive web design: our 5 proven principles.

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. Improving usability through user-centric design and using design principles is often regarded as a positive signal for search engines.

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. This way we fill the viewport with a user-friendly web page.

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. This includes a range of devices from smart-watches to mobile phones, laptop screens and TV’s.

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.

Using media queries

Media queries make it possible to define the breakpoints you want on a pixel level.

Example CSS media query:

@media only screen and ( min-width: 600px ) {}

You can also define a max-width, but this is not required for a proper responsive website.

Fluid grids and different screen sizes

Within a fluid grid, the developer typically uses percentages to define the layout elements, instead of pixels. This way the content on the page is adaptive to the size of various devices.

This can work well on smaller screens, but complicates the design process for bigger devices. On bigger devices flexible images that scale to very wide screens may be required. These larger images typically hurt loading times and may not provide the best user experience.

On bigger screens, you may also want improve readability with fluid typography that scales based on available screen space. The font-size should also adapt to the user resizing their window. This can be achieved by using relative units.

4. Don’t hide content

Not even a long time ago, it was common to assume that users of mobile devices 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, 4g or 5g internet connection. Don’t overlook the the potential of this group.

Performance optimization

Mobile users particularly benefit from begin thoughtful about performance in your website design.

Design choices such as using flexible layouts vs grid layouts can make optimizing your website for different screen sizes more difficult.

Using built-in browser functionality such as lazy-loading, source-sets for images, and preloading fonts for custom typography can improve responsiveness of your website. Many frameworks and content management systems have built-in compatibility for these best practices.

On these points UX design definitely intersects with web development and performance. Performance is a somewhat important ranking factor in SEO.

Mobile-first design

We now know people want full access to all content and all services on their mobile devices. This is called a mobile-first approach. 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.