Pixel-perfect web design is something we take seriously at Stampede. Our web designers will typically come out with three viewport variants for a single design; desktop, tablet and mobile. From there, it is up to the web developers to slice the working file PSDs so it can be used in HTML & CSS development.

No longer a trend, all websites must be built for responsive in today’s times. For those who aren’t familiar with this term, responsive design is how elements and contents in a website are optimized to automatically fit (both visual and usability) in the user’s device that is accessing the website.

But is responsive the only methodology that can be applied, and shouldn’t there be other approaches that can achieve the same goal of developing a modern website? We’ve been discussing this at Stampede for a while and have come out with a number of reviewed approaches that could fulfill this conundrum. Here are some of our findings that we are going to share with our readers.

Types of Layouts

Knowing and understanding the different layouts is an important step as it sets a mutual understanding with the team. This affects the designers, developers, project managers and clients. Let’s take a look on each of the layouts in detail.

• Static
• Liquid (fluid)
• Adaptive
• Responsive

You can also check out this link for demos to show a visual understanding of each layout. Use the dropdown that’s located on the top-right of the page for more selections.

Static Layout

A static page layout (or “Fixed” layout) uses a preset page size and does not change based on the browser width. In other words, if the page has a set width of 960 pixels, it will stay like that no matter what. This is how web pages were traditionally built for many years until modern influences like media queries and responsive design were introduced around the start of the 2010s.

Different devices will treat a static page layout in various ways, so the rendered page could be slightly unpredictable. For example, on a desktop browser, if the window is too small horizontally, then the page will be cut off and horizontal scroll bars will be displayed. On a mobile device like an iPhone, the page will be scaled automatically, allowing the user to zoom in on points of interest (provided that no metatags override this default behavior).

Static Layout Demo!

Liquid Layout

A liquid page layout (sometimes called “fluid” or “fluid width”) uses relative units instead of fixed units. Typically a liquid layout will use percentages instead of pixels, but any relative unit of measurement will work, such as em.

A liquid layout often will fill the width of the page, no matter what the width of the browser might be. Liquid layouts don’t require as much thought as a responsive design, but there are some major drawbacks at very large or very small browser widths. If the browser is very wide, some content might be stretched too far. On large screens, a single paragraph might run across the page on a single line. Conversely, a multi-column layout on a small screen could be too crowded for the content.

Liquid Layout Demo!

Adaptive Layout

An adaptive page layout uses CSS media queries to detect the width of the browser and alter the layout accordingly. Adaptive layouts will use fixed unit like pixels, just like a static layout, but the difference is that there are essentially multiple fixed widths defined by specific media queries.

A media query is an expression of logic, and when used in combination with other media queries, they form a basic algorithm. So for example, an adaptive page layout might say something like, “If the browser 500 pixels wide, set the main content container to be 400 pixels wide. If the browser is 1000 pixels wide, then set the main content container to be 960 pixels wide.” Beyond the main content container, other parts of the page might change in width, swap places, or be removed. For example, a two column layout might become a single column layout if the browser is too narrow.

Adaptive layouts are a good stop-gap solution if a legacy static layout needs to be converted to support mobile devices. They also typically require less development time than a responsive layout. The major drawback is that device widths in-between the explicit breakpoints are often less than ideal, with either too much space or not enough space.

Adaptive Layout Demo!

Responsive Layout

A responsive page layout uses both relative units and media queries, ostensibly combining the ideas of a liquid layout and an adaptive layout. As the browser increases or decreases in width, a responsive layout will flex just like a liquid layout. However, if the browser goes beyond certain widths defined by media query breakpoints, then the layout will change more dramatically to accommodate a wide or narrow width.

Typically responsive designs are built using a mobile-first approach. That means the mobile layout is designed first, and then as the browser becomes wider on tablets and desktops. The designer will find ways to expand the mobile layout. This tends to create better experiences overall, because it’s easier to expand a design than to try and simplify a large layout for mobile screens.

Responsive Layout Demo!

These are brief explanations on what each of the layouts can do. At Stampede, we usually build websites using Responsive Layouts as it is the most flexible and compatible compared to all the other layouts.

Thanks for reading, we really hope that this article can help you decide on which layout can best serve your website’s needs. We’ve also covered Back to Basics with CSS Layouts, which teaches you the CSS fundamentals that are used in any website’s layout without the use of a framework. If you have any questions or comments, do drop a question and we’ll answer it the best we can.