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

Readability

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.

Comprehension

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.

Visual Appeal

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

Inconvenience

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.

Mobile

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.

Parabolic Playground

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.

SF/ARTS Editorial

This is a website with a wide column for images, vertical menu bar and four equal columns with content.

Savoura

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.

Advertising Health

Here you will find news and jobs for health advertising agencies at ease: the content is divided into equal vertical blocks.

Med Harbour

This is a three-column layout website with differently sized content sections.

Conclusion

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.

The post The More the Better: Great Multi-Column Layout Websites appeared first on DICKLEUNG DESIGN 2014.