Fluid Vs Fixed Width Design

With the coming device zombie apocalypse it's no surprise that many people working in the industry are both excited and yet daunted by the future. There are plenty of things to get our heads around, not least screen size.

Since about 2005, fixed width designs have become pretty much the standard on the web. Some people are questioning whether this remains a valid approach. Whether we like it or not web designers are going to have to learn to let go of a little control as their designs will be seen in a multitude of different screen sizes. It's for this reason that there has been a resurgence in "fluid" design. In a nutshell these are designs where the text fits the width of the screen without the need for a horizontal scroll bar.

Responsive Web Design

In his seminal book, "Responsive Web Design", Ethan Marcotte gives a useful calculation: "Result = Target/Context". Put simply this formula allows us to design something in pixels and then work out percentages for that design. These percentages will always remain relative to the original proportions. For example if a 50px div was inside a 100px container we could use the formula to work out that the inner div is 50% of its container. If that container's width grew the inner div would always grow in proportion to it.

Throw in some media queries and we have a powerful tool to create websites capable of adapting to their screen width.

It's never that simple

There are two major issues that you will come across when working in this way. Firstly you'll always run into problems when mixing pixels with percentages. For example if you had two containers that are 50% and add a 1px border their combined width will be above 100%. There are a few solutions but all have drawbacks. The only 100% no problem solution is adding extra mark-up which is something we always try to avoid as un-semantic code can be difficult to maintain and becomes bloated.

The next problem is the way that browsers round percentages. How wide should a browser make a 14.8689890% div? Should it round up or down? I've found that IE6 and IE7 will always round up causing floats to collapse. One way around this is to use a negative right margin but it’s a nasty hack. It also appears that Opera would always round down and doesn't even accept fractions for percentage widths. So the above would be 14%. The more of these containers that you have the more the effect is compounded. This will make your website look vastly different in this browser. Should websites look the same in every browser? I don't think so and I'm not the only one but this creates yet another judgement call to make.

Time and money

Fluid layouts are difficult, need more testing, have more potential to break to the point of being hard to read and therefore cost more time and money to develop. Does this outweigh the advantages gained? As in most questions that relate to web design the answer is: "It Depends". There are no easy answers and a decision needs to be based on a project by project basis. It could well be that if from the outset your project needs multi platform delivery (full blown website, something for tablets and something pared back for mobile phones), then creating a fully responsive and fluid website may well work out cheaper than creating three separate websites. It would certainly be more cost effective to maintain.

It's worth noting that there are alternatives to responsive design that still use media queries but keep the advantages of a fixed width. This could keep some of the bugs that are specific to fluid design under control. Again, depending on the project you may find that this may be more or less work, especially if you need to add more media queries due to the lack of fluid text.

I'd also at this point like to mention this CST website. This website has been retro-fitted to be fluid below a certain width meaning that if you are visiting this on a phone you should be seeing a more appropriate layout and design for your device. This means that the website is "adaptive" rather than what Ethan Marcotte defines "responsive". Retrofitting is an option but its far less time consuming to think about responsive/fluid first. If you are already following the rules of progressive enhancement you could see desktop as the enhancement and take a mobile first approach.

Are we finally embracing the web as a different medium to print?

We've said this for ages: "The web isn't print". But why do we use so many design principles from the print world? One of my favourite sayings is "A wise man learns by the mistakes of others, a fool by his own". While that seems a little harsh, It would be foolish to throw away hundreds of years of best practice from the print world simply because "The web isn't print". Having said that, in print you have one major constant that you do not have on the web - the size of the canvas. Most design decisions are based on knowing this constant and therefore a design can be made "outside in" by subdividing the canvas.

On the web, content will always be seen in many containers or devices. Fixed width websites no longer make as much sense as when we could (almost) safely assume that our website would be viewed on a desktop monitor. I'm not saying that they don't have their place, I just feel that we need to be aware of their problems.

As an aside, while researching possible solutions to the above problems, I kept coming across solutions given in 2001-2003. It's strange that we seem to have come full circle. After all, many of these points John Allsop was talking about almost a decade ago.