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?
- 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.
See this site in action here: davidoldtailor.co.za
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: mapautoparts.co.za
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: southeymphela.co.za
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: davision.co.za
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.