Responsive web design: our 6-layout approach!

This is the second article in our series on responsive web design. In our previous article, “ Responsive web design: that is having 1 site for desktop and 1 for mobile, right?”,  I shared a bit about the history of web design and I emphasized the importance of adopting a responsive approach to web design. In this article, you’ll discover why we decided to design for 6 different layouts. Also, you’ll find out what sort of changes to expect to make sure a design adapts smoothly to the screen it needs to render on.

But first things first. Before we are ready to dive in, I need you to know what a breakpoint is.

So, what is a breakpoint in web design?

I checked my dictionary first. It stated: “a convenient point at which to make a change, interruption, etc”. In daily life, examples of breakpoint are, for instance: the way our life changes after graduating from high school, after marriage or after the birth of our first child. In the context of web design, it refers to the point where the content needs to start rendering differently so that your user continues to get a pleasant user experience.

What will change at these breakpoints?

Some breakpoints will initiate just one minor tweak, while other breakpoints will make the content render drastically different. But what sort of changes are we looking at? Let me give you an overview and some best practises.

• Content structure – Web pages with a clear visual hierarchy and a predictable structure help users scan your content and find what they are looking for. Clearly structured content also helps to make content appear in the order that is optimal for the device. By creating a clear content structure, from the beginning, we make sure that, for instance, a multi-column layout for desktop, renders the columns in the right order on a smartphone. Clearly structuring content helps to make sure elements easily adjust to the screen the content needs to render on. 

• Navigation – Navigating a website using a touch screen on a 2 inch wide smartwatch screen is a totally different experience from navigating that same site on a 42 inch television using your remote control. To ensure a pleasant user experience on both, as well as every other device, we need to make sure your websites’ navigation adjusts  accordingly. And meets your branding guidelines regarding font and color scheme at the same time.
• Ergonomic use of touch elements – It’s one thing to distinguish layouts optimized for navigation using a mouse and navigation for touch screens. But imagine browsing your favorite online store using a touch screen on a compact sized smartphone in portrait orientation for a moment. And using a touch screen of a 10 inch tablet in landscape orientation. You expect a different layout for each of those, right? While you would use your thumbs on the phone, you probably wouldn’t on your tablet. And because we don’t want you to get your hands or wrists hurt over the long run, we position navigational elements differently.Navigational element that automatically adjust to the style of navigation the decides uses substantially improves user experience.

• Hover states – Unlike mouse operated devices, elements with hyperlinks on touch screens won’t change color when your finger gets nearby. Maybe at some point in the future they will, but we’re not quite there yet. Research shows that micro animations like these help users navigate a site more easily, and we will make sure they work smoothly wherever useful.
• Fonts – Have you ever squinted when trying to read something on your phone? A responsive website does not only adjust the font size, but also the line height and the maximum number of characters per line. And while the font size may be the same for a wider and a more narrow column, we may need to adjust the line height at some point to reduce strain your the eyes. Getting fonts to resize proportionally does not lead to the best user experience. Let me explain that by using an example. Imagine, for instance, that for a 1000 pixel screen, optimal font size for paragraph copy is 10px. This is not true, but it makes doing the math easier.  One would assume that, on a 800px screen, the optimal font size would be 80%, or 8px, and on a 600px screen, it would be 6px. Using this approach would save hours of manual coding to specify font sizes. Unfortunately the results oftentimes are disappointing. In some cases copy will render to large and in other cases to small. I always suggest to keep font sizes between 10 and 64px. No matter the screen size, sentences of 12-14 words long (70-80 characters) are easiest on the readers eyes. Lastly, another important thing to take into account is the font weight. If you decide to use a lightweight font, it may render well when using a larger font size, but may lose its crispness when rendered smaller. And your visitors don’t care for squinting either. So, please, test your site extensively.
• Margins – The right amount of whitespace brings a lot of peace and quiet to a design. Designs for larger screens definitely benefit from larger margins. In designs for smaller screens, however, wider margins may cause columns to render too narrow. Again, this is something to watch out for when testing your website.
• Icons – Icons help user to capture the essence of a content element quickly and easily. It does need to adjust to fit well within the element and balance with the design, though.
• Tables & charts – You’ll find numerous types and styles of tables and charts on websites. They help understand information at a quick glance. It’s important to take the purpose of the table or chart into account and then decide how to get it to render in an user friendly way. Some may need alternating background colors, some need to be scrollable. For charts, sometimes it helps to select another type of chart to give all users a pleasant user experience.To make a table easily accessible in smaller screen sizes as well, we may need to change the table layout

Two kinds of breakpoints

As stated before, some breakpoints initiate minor tweaks while other breakpoints totally alther a layout. Let me explain the difference in a bit more detail:.

Major breakpoints

• Involve structural changes that create an entirely different layout;
• May change the number of columns;
• May make sidebars appear or disappear;
• May change the order of elements;
• May change the navigation style, for instance from a top bar to a  hamburger menu;

Minor breakpoints

• Are also called optimization points;
• No major shifts of elements;
• Design tweaks like adjustments in font size, line height, and whitespace.

Why 6 different layouts?

At Level Level, we are passionate about creating websites that provide all users with an optimal interactive experience. So that all your visitors will  find what they need and accomplish their goals quickly and effortlessly.

In my opinion, design should support content and not the other way around. Design needs to get content to adjust for an optimal experience, no matter the screen size. From tiny smartwatches to humongous television screens. Within this range, we need an average of 6 breakpoints, some major, some minor, to ensure a pleasant user experience for every visitor.

We take several factors into account when we decide where to introduce major and minor breakpoints:

• How does user navigate through the site? Using a mouse? A remote control? Fingers on a touch screen?
• At what distance is the screen from a user? In their hands? At arm’s length? At larger distance, such as when browsing on a television?
• Is a hand held device held in portrait or at landscape orientation?

Is it possible to make do with less breakpoints? Yes, absolutely. Will using less breakpoints cut back your expenses? That too. We know from experience, though, that this comes at with a different sort of expensemost of the time: lower engagement and conversion rates. And I strongly recommend you to take that into account when you are investing in your online exposure.

What’s next

Discover our 5 proven principles for responsive web design in the next article of this series. They were developed by our design team and keep us laser focused on creating the best user experience reasonably possible.