Website Layouts For Your Business


When we come to discuss the different options for designing a client’s website, the terms that crop up can leave a person’s head spinning. So, what do we really mean when we say ‘static’, ‘adaptive’, ‘liquid’, and ‘responsive’?


These are all key terms regarding the layout of a website. In particular, how the layout copes with being used in different browsers and on different devices. Each form of layout comes with its own positives and negatives, and as such it is important to think about a business and its audience, when deciding what the best option may be.


A static page layout is fixed, and therefore does not change.


The traditional layout for websites, this was often how websites were built. This changed though around 2010 when mobile devices became much more prominent in, almost integral to, our daily lives. In order to combat this, media queries and responsive design were introduced.



But what is a media query? Put simply, a media query is a function that allows designers to take a style and base it on a number of device properties, such as orientation and screen width, in order to make it flexible across devices. Due to this, a website becomes easy to use and read no matter what size screen you are reading it on.


A static page layout does not use media queries. As such it uses a preset page size, because of this it does not matter what browser or device a viewer uses, it is laid out the same on all.



Although it sounds simple, this approach to layout poses the most problems with the current multi-device nature of today’s audience. This is because each separat device will have a different reaction as to how to best cope with a static page layout. Some browsers that are too narrow will cut part of the page away, leaving you having to scroll sideways each time you reach the edge. And on mobile devices, i.e. an iPhone or iTouch, the site will be scaled down and you would have to zoom in on whatever section you were hoping to read.


Above, we mentioned media queries and these are central to the adaptive page layout. It uses the media queries to detect the width of a browser page and alter the layout as needed.


Similar to the static layout, the adaptive uses a fixed unit (pixels). But rather than just one, as static does, adaptive has several fixed widths up its digital sleeve, as specified by the media queries. It then gets quite mathematical for as various media queries are combined, an algorithm is created to manage the different possibilities. However, through this process the page and its layout will become quite clever – changing its width of the main content container as needed, or from two columns to one if the browser is too narrow, or some sections may even swap places to accommodate the smaller screen space.


If you are converting a static page layout to accommodate mobile devices, then this is a good, quick, and relatively easy option. However, if a device screen is in-between two of the separate preset sizes, there can be either too much space too utilise or not enough.


Whereas both static and adaptive page layouts use fixed units, the liquid page layout uses relative units. This means that where pixels were used in the previous layouts, percentages are used instead. Another relative unit that may be used are ems, where 1em = 100%.


But what’s the difference? Well, pixels (fixed units) measure dimensions that are relative to the screen, whereas ems (relative units) measure dimensions that are relative to the type size.


Whereas the static and adaptive page layouts could never guarantee to fit the screen you were working with (despite adaptive’s use of media queries), the liquid page layout can. Whatever, size your browser or screen is, liquid will fit to it. However, this does mean that the use of columns or the presentation of paragraphs can be become problematic. If a screen or browser is too big, you might find a whole paragraph being presented in a single line. Or, if a screen is too small, a site that utilised two or more columns might become rather squished and over-crowded.


And finally, we have the responsive page layout. This page layout combines the use of media queries and relative units, thereby utilising the best parts of the adaptive and liquid page layouts.


Like the liquid layout, it will flex to the size of the screen or browser being used. However, when a screen reaches the presets defined by the media queries (thereby becoming too wide or narrow for the liquid layout to handle alone), the layout of the site will change to accommodate, as the adaptive layout does. Rather than targeting to fit specific browsers or devices, it looks at the screen size and moulds to fit it in the best way possible.


Whereas, the previous three layouts are created from the desktop first, this approach generally starts by looking at how the layout will be presented on the smallest screen used, often a phone or iPod. The designer will then look at how to expand it, first for tablets, and then desktops.


Because it is often easier to expand for a screen rather than shrink, the responsive page layout often creates a better overall experience. However, it does take more time to develop than either the adaptive or liquid options.


With so many people now relying on mobile devices rather than desktop computers, it is more important to think about how your business utilises the smaller screen and whether your website is truly accessible to the viewer. If your business relies on people being able to access information easily no matter what device they use, or being able to book or order items through their device, then this is the option for you.


We, at The Idea Works, think that the responsive layout is the way forward, engaging with a modern audience who relies much more heavily on mobile devices. As such we have created various responsive websites for clients. One client was Active, whose new website now caters to the viewer on the go, with the ability to access timetables and book classes easily and quickly.


If you would like to come and discuss the layout options for your website, or would like to make your business ready for the mobile generation why not pop in for a chat and a cup of tea. We want to help you move your business forward, making it the best it can possibly be.
– Richard Lumborg


Share Post
No Comments

Post a Comment