Web Design: fluid, fixed or mixed layout?
When starting a new web site or application, the very first thing that I think about is if I will use a fluid, a fixed or a mixed layout. It's always been a debated issue: there are experienced web designers who think that a fixed layout is best, others who think that a fluid one has a more professional look, and the debate goes on. I don't know what you think - and I'd really like to, so please use the comment section below after reading this post - but I would like to share my thoughts about it, in any case.
As you can see there's not a general rule or unique web safe area for each screen resolution. If you want to create a layout that will suit all visitors, you should probably use the 465x219 combination. However, considering that users with a 640x480 screen resolution are gone (and we don't want to deal with them if they still exist!), we can choose the 625x339 combination. But what happens to a user with a 1280x960 screen resolution? Well, as you may understand, he/she will see your site very small. Using percentage instead of fixed proportion might solve the problem, and thus we are switching from a fixed layout to a fluid layout.
Another possible layout problem might be with images. If we use a fluid layout, images might stay small on big screens, and if we make them fluid as well, they might have a pixelate effect (because of their smaller resolution). To solve that, someone is saving images with high resolution, just to prevent the over stretching, however that means more kb to download and so possible increased waiting time for the user.
What can we do, then?
As you can see, it all seems like a short blanket: you can pull it to cover your shoulders, but it will make your feet freeze; cover your feet, your head will be cold. So, what will be the best solution to the overall problem?
There's no magic trick. In my experience, it is better to evaluate all the above reasoning in the first place. Finding the best layout solution is a problem, but again, it is very important to decide about it before anything else.
What do you think about it? What's your experience? Please use the comment section below!
The web safe area
There are different pros and cons about every single solution. And I believe there are very good articles around the web that explain them thoroughly. In my opinion, the main point is - to put it simply - understanding which is the layout that will be the best for any visitor. As you know, every single user might have a different browser and a different operating system. That means every one of them might experience a web site in a completely different way. Thus the web safe area comes into play: for each possible combination of browser and operating system, it is possible to determine which is the safe area to use in your web design. Designers Toolbox has a page which analyses every of those possible combinations, however let me summarise it for you in the following table:| Resolution | Web Safe Area px | Web Safe Area % |
| 640x480 | 465x219 | 72% x 45% |
| 800x600 | 625x339 | 78% x 56% |
| 1024x768 | 849x507 | 82% x 66% |
| 1280x960 | 1105x699 | 86% x 72% |
| 1600x1200 | 1425x939 | 89% x 78% |
As you can see there's not a general rule or unique web safe area for each screen resolution. If you want to create a layout that will suit all visitors, you should probably use the 465x219 combination. However, considering that users with a 640x480 screen resolution are gone (and we don't want to deal with them if they still exist!), we can choose the 625x339 combination. But what happens to a user with a 1280x960 screen resolution? Well, as you may understand, he/she will see your site very small. Using percentage instead of fixed proportion might solve the problem, and thus we are switching from a fixed layout to a fluid layout.
Are you able to read?
The above explanation has probably made you already understand which is the second issue to consider. And let me say, it is definitely not to be underestimated. When using a fluid layout, the text could fill all the available space and it might became completely unreadable. It is a common mistake - in my opinion - when using a fluid layout: sentences are so long, across the monitor, that you can't really follow the next line.Another possible layout problem might be with images. If we use a fluid layout, images might stay small on big screens, and if we make them fluid as well, they might have a pixelate effect (because of their smaller resolution). To solve that, someone is saving images with high resolution, just to prevent the over stretching, however that means more kb to download and so possible increased waiting time for the user.
What can we do, then?
As you can see, it all seems like a short blanket: you can pull it to cover your shoulders, but it will make your feet freeze; cover your feet, your head will be cold. So, what will be the best solution to the overall problem?
There's no magic trick. In my experience, it is better to evaluate all the above reasoning in the first place. Finding the best layout solution is a problem, but again, it is very important to decide about it before anything else.
My idea
Personally I almost always prefer mixed solutions. In general, I use a fluid layout, however I partly fix the layout with CSS. Using max-width or max-height, we can prevent an overstretching which might cause reading or images issues. I usually divide the web area using the golden ratio (which I will explain in my next article) and somehow try to pre-determine the maximum width of the divided web area. The screen resolutions that I consider are those from 800x600 to 1280x960, trying to create a suitable and usable layout. Considering the other two screen resolutions, 640x480 and 1600x1200, I favour the latter, while I disregard the smaller and almost unused one.What do you think about it? What's your experience? Please use the comment section below!