Pros And Cons Of 6 CSS Layout Patterns: Part 2

Posted: 28 Apr 2011 05:30 AM PDT

Last time we began talking about some different css layout patterns. We looked at fixed-width, fluid/liquid, elastic, and hybrid designs. Today we’ll look at the 2 layouts we didn’t include last time, responsive, and fluid/elastic grids.

I’ll then offer some additional thoughts about which layout you might choose for a project.

6 CSS Layouts

As a reminder and to once again make sure we’re talking about the same thing, here are the quick definitions for each layout.

Fixed-Width — Overall width is fixed with absolute measurements (px). They’re a solution to the lack of control designing for the web.
Fluid/Liquid — Overall width is set in proportion to the browser window (%). They’re a solution to multiple resolutions.
Elastic — Overall width is set in proportion to some design element, usually font-size (em). They’re a solution to the control issues with fluid designs
Hybrid — Using a combination of fixed and either fluid or elastic design elements. They’re a solution to the cons of all 3 layouts above.
Responsive — Using different stylesheets based on possible ranges of widths of the audience. They’re a solution to the multiple devices and resolutions of our audience.
Fluid/Elastic Grids — A type of elastic layout that makes use of a grid. They’re a solution to maintaining order inside a dynamic container.

Responsive Layouts

The idea behind responsive layouts is to have the design respond to various conditions that your visitor controls. Different devices, different browsers, different resolutions, are all potentially something the design might respond to.

In order to develop a responsive layout you need to use either browser detection or media queries to serve different stylesheets to different device, browser, or screen resolution.

Pros:

Greater control over a variety of dynamic conditions
Design for key points and allow fluidity between key points
Can serve device specific, browser specific, resolution specific, etc stylesheets

Cons:

Requires some kind of browser detection (javascript or mediaqueries) and multiple stylesheets
Might be serving unoptimized images for smaller screens
More work developing different layouts for different devices, etc.

Responsive design really goes further than layout alone.

It allows us to not include certain functionality for a device that can’t support that functionality or even include different content based on the device or browser.

Fluid/Elastic Grids

Grids can be used with any of the css layouts we’ve been talking about. Where the width of the layout is fixed, the grid can be developed with pixel perfection.

We often think of grids as rigid and static structures we build upon so it’s no surprise to see them used with fixed-width layouts.

In truth, a grid can be based on proportions and as long as relative proportions are maintained our grid both functions and allows for changes in absolute dimensions.

When a proportional grids is tied to something internal we can apply that gird to an elastic layout. When the proportion is tied to something external we can apply the grid to a fluid or liquid layout. The former will likely lead to the better design.

Pros:

Greater control of design elements
Proportions easily maintained
Design is always relative to itself with elastic grid

Cons:

Hard to develop
Lots of math
Design is relative to something external with fluid grid

A couple of years ago Ethan Marcotte put forth the idea of creating fluid grids. Ethan’s fluid grids are essentially elastic layouts as they use relative measurements based on something internal to the design.

Grids can also work with hybrid layouts through mixed measurements. For example columns set in a relative measurement like %, while the gutters between columns are set in an absolute measurement like px. You might set one part of a grid to be rigid and static while allowing other areas of the grid to scale.

Thoughts About Which Layout To Use

Which layout should you use? It’s really up to you. No single layout is automatically the best. Each can be the right solution depending on the problem. It’s up to you to know the strengths and weaknesses of each design layout and choose appropriately.

Fixed Width

When time or budget are in short supply you may want to stick with a fixed-width layout. It’s the easiest to develop well, gives you the most control over the design, and is the safest option.

It’s still a very workable solution to the range of devices and resolutions we use. It struggles at the end points of different ranges of widths. As long as your audience veers toward the middle (like most do) a fixed-width site can work well.

Fixed width layouts can be developed equally well using measurements based on something either internal or external to the design.

Fixed layouts works best for more advanced visual layouts (heavier graphics, more complex). Use them when precision in positioning is needed or you require a design more predictable across browsers and devices.

Flexible Width

What makes flexible layouts flexible is the use of relative measurements. When relative to something external like the browser window the design is fluid or liquid. When the relative to something internal like font size, the design is elastic.

Measuring to something internal makes more sense to me as the better approach. The design stays in harmony with its intention. It’s proportions remain true to the design.

Designing relative to the browsers is the most flexible, but it can be too flexible as it becomes difficult to maintain control over the position of elements in the layout. While the site will work regardless of the available window space, it’s unlikely to look ideal to more than a few people.

In general flexible layouts are more in tune with nature of digital design.

Part of the challenge of designing for the web is the inability to predict or guarantee how someone will view your site. Flexibility is a key component of the medium and it suggests that flexible design will ultimately prove to dominate over fixed design.

I’d suggest elastic layouts are preferable to fluid layouts.

Fluid layouts are more time consuming and less predictable, but offer the most freedom to visitors. They’ll work best if you allow that your site doesn’t need to look exactly the same to everyone on every device under every condition.

Elastic layouts are more predictable than fluid layouts and more flexible than fixed layouts. They bring some of the best of both sides, but are the hardest to develop in terms of time, cost, and skill. You have control over proportions while allowing absolute dimensions to be flexible.

Hybrid

Hybrid layouts are custom solutions for custom designs. They allow you to decide where control is necessary and where flexibility is preferred. Hybrids can bring different combinations of the best of both fixed and flexible layouts.

Part of the layout can be fixed or flexible depending on how much control is desired. The more distinct parts you need to control, the more time you’ll need to spend planning how your layout will function.

I’ve always found a fluid background a nice complement to a fixed width design. While they don’t truly make a design flexible, they do create the perception of a fluid design. They seem fluid even when they aren’t.

Responsive

The idea of developing sites that respond to the medium makes a lot of sense in the multi-device world we live in. You can’t control how your audience comes to your site or make them use a browser or your choosing.

Still there aren’t an endless variety of ways someone will visit your site. The reality is there are a handful of different ranges most people will fall into.

You create several designs, each to work well with one range of device, browser, resolution, etc. and then respond by serving the correct one for each device.

Responsive design isn’t limited to layout. They can be used to serve different content, functionality, or experience to different people on different devices.

It’s the flavor of the moment and with good reason. However in the end it’s browser and object detection. If history is a teacher developers will push toward standards over detection and device makers will become more consistent in how they render websites.

Then a whole new generation of devices will become popular and we’ll go back to detection methods to serve each, before everything gets back to being consistent and standards are once again pushed to the forefront.

Summary

The next website you develop will likely be one of the 6 types we’ve been discussing these last couple of posts. Each layout has its strengths and weaknesses and it makes sense to learn how to code for each type.

Fixed Width — least expensive, simplest to develop, most control over visual design
Fluid/Liquid — Most flexible, everything relative to browser window (external to design)
Elastic — Flexible, everything relative to part of the design, usually font size (internal to design)
Hybrid — Can be both flexible and static. Different hybrid layouts can lean toward either.
Responsive — Best when site needs to work well across a range of known devices, browsers, etc.
Fliud/Elastic Grids — Offers a way to maintain order inside a flexible container.

If you’re interested let me know in the comments and I can put together some boilerplate code for some of the above or at least offer more details about how to construct each layout with html and css.