Left Aligned Websites And Proper Use Of Space In Design
In 2016 year, designers no longer focus on one form-factor during the work on the interface. For instance, if you create a website it doesn’t mean that you need to focus only on one type of screens. Design thinking become broader in cases of creating websites and applications. Now, we need to take into account wide desktop screens as well as mobile and tablet screens.
I’ve already written about solid user experience concept for different platforms in one of the previous articles. And here I want to add that we need to design in a bit different way taking into account several form-factors. However, in this article, I want to focus on left-aligned websites paradigm…
In what cases can we use this type of web interfaces and how can we change it to fit on mobile screens? And the main question why should we use this type of design? We’ll get back to details of left-aligned paradigm as soon as we’ll see what do we have in common use. Let’s take a look what we have and then compare it with left-aligned websites.
“Always center the layout. When working with a fixed width design, be sure to at least center the wrapper div to maintain a sense of balance. Otherwise, for users with large screen resolutions, the entire layout will be tucked away in the corner."
Of course, we have a big advantage when we use fixed width. It’s easier for the design and development. Also, we can avoid a bunch of mistakes that can emerge on different screen resolutions. But we have a bad thing here…
Completely fixed layout will not work for mobile devices. On small monitors or if you resize your browser below 800 pixels wide, you will have to scroll left and right in order to view all the content. And as a rule, you’ll have a font size that will not be readable on screens with a smaller resolution. So, in addition to scroll everywhere you’ll need to zoom it.
I know that for some of my readers it’s not a new science. But I just want to put a period on this and move on next types of layouts. It’s easier to compare something when you have enough examples in a review.
The problem of this design is that we need to think about related sizes of an interface for different resolutions. Which is not good for user experience in many cases…
For instance, when your website has items that are placement-sensitive. Imagine that some words in one column need to match up with either picture in another column or other words. In this case, I’d recommend you to use fixed width layout.
When you use an elastic or liquid layout, you have less control over the appearance of your page.
A portfolio website might be better to create with the fixed-width layout so that you have more control over the design of case studies. Especially, in a case when you work on a package for the content of case studies. For example, you can have the intro with hand lettering or even hero video. And you want to present your work in a good way and non-standard position or view of products… to make your work more outstanding.
You can find a lot of examples on Behance. A lot of case studies there were created as artworks. In many cases, it’s interesting to look at that kind of case studies than just a simple description text and screenshots or photos of something.
But take a look at another example with fixed width that uses less than 1000px on a big resolution…
Looks unbalanced. And in many places, I have a feeling of emptiness.
However, Apple is an exception and they have their own purposes to do like this. And this approach works for them.
Let’s take a look at the centrefold of Vogue magazine. Of course, it’s a different medium and a size of paper is usually fixed, but the space used more wisely than in cases that I described above. And the ratio of centrefold here is similar to 16:9 that we use for desktops, laptops and landscape orientation on tablets.
Perhaps, we should as ourselves how can we apply this approach in the digital environment.
Let’s take a look at other mediums that we have. Do street banners and similar advertising places don’t use a full space? Ok, it’s more about marketing… But, still, we can use empty space properly. In the same time-space that we use for design shouldn’t be overwhelmed. And elements shouldn’t compete for much to not make people crazy about it.
This kind of design looking good on desktop and mobile screens as well. Typically responsive designs are built using a mobile-first approach. Often, it’s easier to expand design on larger screens than adapt a large layout for smaller screens. This approach is commonly used for applications that should be accessible from different devices.
Now, let’s take a look at…
Pros And Cons Of Left-Aligned Design
You can use space of wide screens properly. Especially desktop screens with proportion 16:9 which is commonly used nowadays.
If you put navigation on the left side you can free up the top area and your content starts from the very top. As a result, you have more space in height. Sometimes this approach increases conversion. Or it's just give more info before people even start to interact with the interface.
The main problem of left-aligned interfaces is a lot of free space on the right side of screens. We face with this problem when we don’t use space properly.
Also, if your target audience includes Arabian and other countries where people read from right to left — simply, they’ll not understand your design. So, you probably need to create a right-aligned version for them.
When Left-Aligned Design Is Appropriate
Since design paradigm with cards become more and more popular it make sense to think about left-aligned design and use space on the right side for cards with content or catalogue items. Also, we can have different levels of a menu on the left side in several columns. And on each next level (column) go deeper and get more detailed info.
Adapting This Type Of Design For Mobile Screens
Simply you can re-arrange blocks in they way that they will work for portrait orientation screens (vertical view).
One thing that is logically and intuitively right is that we need to make a design in a way when every pixel works for us. Think about it from another point of view. We can burn white pixels on the sides of screens or we can place there information that will work for us. Of course, we still need to think about prioritisation of the information on a screen and avoid any type of mess. This will take us more time and resources to design things right taking into account concept that I’m describing in this article. But it worth it…
You can successfully re-arrange information on the screen and make your interface more outstanding. Because if to be honest I didn’t find much good examples that use this design paradigm.
As you can see we don’t have the only one answer to a question which design layout we need to use. We have several facts and experience that we can use in making a right decision for a specific project. So, we should be wise here and understand all pros and cons of different approaches.