The More the Better: Great Multi-Column Layout Websites
Web design is a playground of innovation and when a new worthy feature appears, it usually grows into the soil firmly. This happened with multi-column layout, too. It was adopted to web design once and now we see how fast it is developing and how often it is used by modern designers.
The only question about the concept of multi-column content arrangement is whether it is as good as it seems to be or not. In this post, you will find both benefits and drawbacks of this layout style, and after we sum everything up, you are going to have a finished image of this design technique in your head.
What is a Multi-Column Layout?
A website can be designed with a single- or multi-column layout. The difference is observed visually quite clearly: it can be a website with an edge-to-edge content area, i.e. with a single column layout, or the design may be broken into parts, as we call them, columns. It is done to boost the readability of the text and provide users with an easy-to-perceive text web page. The most prominent example of how to implement this feature is a newspaper. That is why, many-column sites are referred to as newspaper web design style.
Advantages of Multi-Column Layout Websites
Two, three or even more columns of the content are easy to realize on any website. When the text is divided into short (I would even say narrow) sections, it is more convenient to read it. Plus, it boosts the reading speed greatly.
Shorter lines increase the quality of perception, so far as users can go back to the last line they were reading before they distracted their attention from it to a picture or advertisement placed on the other page side.
Love it or hate it, websites with multi-column layout look much better than one-column designs. It allows you to make a separate column for text, ads, banners, gallery, testimonials, contacts, etc. And, you probably know how important appearance of a website is.
Disadvantages of Multi-Column Layout Websites
Unfortunately, many-column layout sites cause discomfort for many users. This is explained by the page height. For example, the web page is divided into equal and accurate columns, but the page height is so big that users need to scroll for reading. Then, of course it is irritating to scroll down to read the first column and then scroll upwards to read the second one. This actually differs on digital pages from printed newspapers, where readers can spread out a paper to see all the columns at once. Solution: regulate the page height, avoid scrolling.
Responsive design is a must today, and you can’t ignore it just because you want your website to have a multi-column layout. It is obvious, that many text columns will be impossible to read on a phone or tablet. Solution: you should design a mobile version of your site just absolutely opposite to your desktop version. Make it a single-column layout for phones, a two-column design for tablets and three-column website for big screens. Keep these proportions and you will have no problems.
Examples of Cool Multi-Column Layout Design
Now you are ready for the inspiration part of the article, where cool examples of multi-column layout are showcased. Enjoy!
Gewissheit Vision Website
This is an exhibition website for the 350th Francke Foundation anniversary. It is a plain white design with a multi-column layout.
Only the Best
This lifestyle blog website has an elegant website design with a great content arrangement.
Sports Website Design
Here is a varicolored website theme with a multi-column layout. Thereby, one section is for the text articles, while two others are mainly for media.
Data Project Site
The content sections are separated by chain lines on this minimal website design.
Lago di Garda Hotel
This hotel website has a menu side bar, which is the first column on the layout. The other columns include the photo gallery, the reservation box and one more media section.
Harvard Law Review
This website with a green geometrical pattern on the background uses an accurate two-column text arrangement.
Here we see an original way to make a multi-column layout website. The columns are asymmetrical with both text and images.
Brittany Ester Photography
This is a portfolio website on white background. The content is organized in two columns: one is for text and the other one for a sliding photo gallery.
Los Angeles Times
This is a classic newspaper style website design for the online newspaper edition.
This is a website with a wide column for images, vertical menu bar and four equal columns with content.
This website with a nice washed background texture has a multi-column layout arranged well on each page.
Computer Repair Website Design
This theme has a three-column layout with one section being yellow and serving as an additional menu bar.
Ivica Duricova Webpage
This minimalistic website is a two-column design with one showcasing a large author’s image and the other containing text information about her books.
Romain Bonvallet Portfolio
A two-column layout website with one static section and the other one with scrolling option.
The Web Showroom
This website demonstrates the text information in four columns. They are easy to read.
Kennis Voor Collecties
This website has four differently colored columns for the content. This organization brings clarity to the site and makes it more readable.
Hip Hip Hooray
This website has three colorful ribbons with content, i.e. columns with text and images.
Here you will find news and jobs for health advertising agencies at ease: the content is divided into equal vertical blocks.
This is a three-column layout website with differently sized content sections.
Multi-column layout websites are good-looking and they are very user-friendly - the collection I have gathered for you shows this perfectly. The elementary conditions of a high-quality many-column layout are the right page height, the column width, the column gap (space between columns), colors, fonts, responsiveness.
Do you like the appearance of multi-column site design? Have you created any such sites? Please leave your opinions and links in the comments section below.