menu icon MENU

The Return of Full Width Design

Written by Atom Groom

This article was originally published on the Bitovi blog. Archived permanently here.

The return from where?

The truth is that the web has always been fluid and full-width. We started layout with the table element and later the DIV. Either of these elements will fill and expand or contract naturally with the viewport size. Later, it was the web design industry who decided to place fixed widths on these elements. Here are some examples of original full-width layouts.

alt text

The return!

I believe one of the design trends we will see in 2015 will be the return of full-width layout combined with responsive and elastic design. The web is just starting to show hints of this now in 2014 and I think we’re going to see a lot more of it.

Imagine totally fluid, full-width interfaces. Responsive components with beautiful elastic type and media. Bruce Lee nailed this thinking a long time ago by using water as an example:

alt text

“Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend.”

Why is this pattern returning?

Viewports are everywhere and they come in every shape and size. The desktop browser itself has always been flexible with no “set” size. With the release of wearable technology, set dimensions or fixed width containers simply do not make sense any longer. It will become necessary to let the interface design fill the viewport, rather than prepare for thousands of different breakpoints, or even ranges. As a result, full-width design will make a return!

While this might seemingly start out as a trend, I believe that we’re going to see an entire movement toward this type of design. The rise of ditching the fixed width containers and letting everything fill the viewport is upon us.

How do we prepare for this movement?

We start by designing individual user interface components that are fluid and responsive to any viewport size. This way, when we put it all together we know that each component will flex no matter the size of the viewport. Brad Frost has already established this as Atomic Design.

In addition to designing on a component level, we need to also get rid of pixel based font sizes. Using Viewport Percentage Lengths, percentages or Root EMs will help us achieve the “elastic” effect needed when a component flexes. What is even more interesting is that Viewport Percentage Lengths and Root EMs, can also be used on elements!

Let’s look at tabs as an example. Tabs are a common interface component. They look many different ways, but the functionality and interaction remains the same. We see them in cars, websites, and even the table ordering system at Applebee’s. In the example below I have designed for anything from a tiny viewport all the way up to the size of a huge television. Try not to think in terms of a dimension at all really. With this design pattern, it doesn’t matter if this component is placed in a tiny box or in a huge rectangle – it will fit and flex accordingly. Whatever the viewport size, the component just fits. Here’s a quick example:

alt text

Eventually I believe this movement will also reveal how breakpoints might not be needed any longer or used differently. I have started to call this “Viewport Independent Design”. I have seen another term emerging called “Device Independent Design”. The idea of removing breakpoints altogether and either letting content be a block element, floated, or use Flexbox is a hard concept for many to grasp. Nonetheless, it’s something many industry professionals are thinking about because of the limitless amount of viewport sizes.

Another hurdle we are facing is how to conditionally load blocks of content, progressively, based on responsive breakpoints. In this case, breakpoints might be used to load different partial markup views instead of applying CSS.

This is just the start of where we can take this type of thinking. It will require some forward thinking (design and code), especially if we’re designing without breakpoints. Flexbox is already achieving similar concepts.

Finally, I would like to leave you with a few modern full-width examples as inspiration:

As the device landscape gets broader we need to be wise about how we design. Our interfaces, our experiences and even our thinking needs to be like water. Be water, my friends.