Website Layouts, what is my options? #websitelayout

Website layout options
Let’s take a look at different ways you can put a website together

As usual there are some things to consider first, because these options will affect the website all the way to the end. What are they?

  • Responsiveness
  • Website goals
  • Feel & experience

Starting with the DOM

DOM is the abbreviation for Document Object Model and lies right at the base of each HTML document. The DOM are much more involved but for now that is all you have to know. Well formatted documents/pages that complies to the API (application programming interface) has objects. These objects consist of a mixture, text blocks, tables, images, div’s and more.

Three basic ways to create or specify these objects are known as static, liquid or adaptive, where the use of all three in conjunction provides responsive layout. This have to do with, what happens to your objects or elements on your page at the time when the viewport’s dimensions becomes altered. Easy!


In short, a responsive website is not really any more a question, all new sites should be able to adapt to show on all new available viewport sizes. Flow through your site plays a big part in how you will be able to convert visitors and measure KPI’s. When taking that into consideration it becomes clear that your layout will accommodate different features. Different layouts give a different feel to the end product, and some layouts favor certain intentions better than others.

Single Landing Page

As the name suggests, with this layout everything fits. This is good to use if you want to have control and determine the users first impression. Single page layouts often present minimal information not to overwhelm visitors. it is crucial to convey the right message in a way that will entice the visitor to continue through your site. This type of layout works well for portfolio type sites.

DOT Parallax lands on a responsive single page. It has a trick up the sleeve though. A parallax effect were used on this site, and the moment you scroll everything starts to happen.

See this site in action here:

click on the thumbnail to see the full image.

Longform Layout

In some cases you want to drive a specific point home or your content is limited, then a longform layout can give the best results. The goal is to make sure your visitor understand the purpose of your site with a clear call to action and then deliver the resat of the content in support of your CTA.

Click here to see a live sample:

Click here to see a sample of a full width layout website.
Click here to see a sample of a full width layout website.

Full Width Layout

Often the full width layout will be used to fake responsiveness. Simply using a liquid layout with a single column of information down the center does not qualify as responsive, unless it is. That’s confusing, but I am sure you will understand what I am trying to say. Full width sites works nice in situations where you want to use big photos. Full width templates often don’t use widgets.

Click here to see a live sample:

Click on the thumbnail to see the full view.

Center Column Layout

This is a great way to present content that depends on the use text. It is a proven fact that articles reads easier if the text are presented in a more narrow style. The layout can still contain multiple columns but only spans a certain maximum width. The content also presents better when aligned to the center.

Click here to see a live sample:

I am sure there are many more layout options, but these are the samples I will be showing you now, and most likely will add some more at a later stage. Do you have any suggestions or questions about website layouts? Feel free to ask me or leave a comment below.

Renier van den Berg
Working alone, providing digital services to businesses in different sectors, comes with an advantage. I get to see the similarities in businesses operating in different sectors and will gladly help you to implement the right digital strategies and applications to save money and generate more business leads.