The the generic word "layout" identifies how box contents should be arranged in relation to the available space.
We can talk about the layout of any box within a web page, but the pourpose of this article is to circumscribe the discussion to the overall layout of a web page.
In any web page we can identify a box which seems to wrap around all the page's contents. We should call this box "main container" because by analyzing this box we can identify the web page layout.
When we talk about "web page layout" then we mean how the page's main container behave responding to the viewport's behaviour.
The web page's viewport is the portion of the browser's window available to page's contents to be rendered.
There are two main families of web page layouts - boxed layouts and fluid layouts - with which we identify two radical different approaches in using viewport's available space.
We can also mix those main families to obtain many different hybrid layouts whom combine properties from both original families.
This is the most common web page layout because it's quite simple to deal with. It's main property is the fixed dimension of the main container which make possible to set very precise dimensions for images, columns and other UI components.
{% highlight html linenos %}
// HTML
<div class="container">
<div class="content">Box A</div>
<div class="content">Box B</div>
</div>
{% endhighlight %}
{% highlight css linenos %}
// CSS
.container {
width: 800px;
margin: auto;
}
.content {
width: 100%; /* optional */
}
{% endhighlight %}
The most of the time this layout appear to be a paper centered to the browser's viewport. The content's background contrasts that much with the overall background and very often a border is visible.
It is easy to identify this layout when you try to resize your browser's window:
content's width persists while outer horizontal margins change.
A boxed layout is very often used for web sites and landing pages, mostly because dimensions inside the content wrapper never change so it is possible to cut out very articulated graphics into slices and put all toghether inside an nested HTML structure.
In a fluid layout content'ss dimensions follow the viewport dimensions. Contents fill all available horizontal space and adapt from very little to very large viewport sizes.
This is the layout of web apps and mobile web sites.
A web app - like GMail - needs to display a lot of things: menus, panels, informations boxes, contents so it needs all the available space to be exploited in a very clever way.
On the other side a mobile web site needs to display very simple contents to a very narrow screen so it also needs all available space to be used the best possible way.
{% highlight html linenos %}
// HTML
<div class="container">
<div>Box A</div>
<div>Box B</div>
</div>
<div class="container">
<div>Box C</div>
<div>Box D</div>
</div>
{% endhighlight %}
{% highlight css linenos %}
// CSS
.container {
width: auto;
margin-left: 50px;
margin-right: 50px;
}
{% endhighlight %}
In above code we use some containers which spread to all available horizontal space but for a fixed margin. Then we can use those containers to implement some left/right columns with float or flexbox (not implemented into this example code).
A fluid layout is quite difficult to implement in a web page who's target is the desktop enviroment because very large text contents are quite difficult to read. When a text box becomes too large then the page usability should decrease to the point which it is impossible to read the page!
Most of the time this layout is implemented with CSS Media Queries to better respond to many different device sizes.
This is called Responsive Design.
This is probably the most implemented hybrid layout which is used today by literally millions of websites.
It's pourpose is to create the illusion of a fluid layout but preserving the "easy of use" of a boxed layout.
It fits very well a web page which should be vertically split into many areas, each area to be a fluid box wich contains the boxed layout's container.
- there should be many "main containers"
- main container has dynamic width (filling the viewport)
- each main container has an inner wrapper wich has boxed layout properties
{% highlight html linenos %}
// HTML
<div class="container">
<div class="content">Box A</div>
</div>
<div class="container">
<div class="content">Box B</div>
</div>
{% endhighlight %}
{% highlight html linenos %}
// CSS
.container {
width: auto;
}
.content {
width: 800px;
margin: auto;
}
{% endhighlight %}
We have talked about "media queries" which is a CSS strategy to apply conditional styles to page's content boxes.
This tecnology applies to the web page layout problem very well because allow you to create a page structure behave fluid on little screen sizes but then become boxed on big screens (this is only an example of many possible responsive behaviours).
This is called a responsive layout because it's behaviour (so it's name) depends on viewport's dimension.
Almost every modern web site and web apps implement this strategy/technology to allow all kind of users to enjoy the best possible user experience with the page.
