Fixed and Fluid Website Design: Benefits and Drawbacks
Fixed web design and fluid web design have both proven to be an excellent option for web designers to choose. However, heated debates still rage between designers about which choice is the best. Before the debate rages on, lets take a moment and define exactly what makes a website fixed or fluid.
What is a fixed website?
A fixed website has a layout with a wrapper that has a set or fixed width. The components within it are fixed based upon either a set number of pixels or set percentage of the width. The important factor that must be noted is that the wrapper is completely set and will not change regardless of the resolution that the user is using.
What is a fluid website?
A fluid or liquid website layout is flexible. The components within the layout are based upon percentage widths. This allows the layout to change based on the resolution of the users screen. While there may be a few settings that are fixed such as margins, the general layout is based upon percentages.
Advantages of a Fixed Website
- Ease of Use – Fixed with layouts are easy to use and very easy to customize for the designer.
- Simple Internal Format – Formatting pictures, video, and other inserted content is much easier to do within a fixed layout because the layout is the same with any resolution.
- No Min-Width or Max-Width – Min-width and max-width is not needed for any fixed website design. This holds an additional advantage because min-width and max-width doesn't work on every browser.
Disadvantages of a Fixed Website
- Excessive White Space – If a fixed width layout is viewed on a much larger screen then the white space will dramatically increase. Many designers follow the “Rule of Thirds” to create a feeling of overall balance. With excessive white space, the “Rule of Thirds” will not hold true with larger resolutions.
- Horizontal Scroll Bar – Smaller screens will require the use of a horizontal scroll bar. While this doesn't inherently hurt the website design, it will also never help it.
- Usability – Fixed width layouts will often have a much lower usability score because they are not designed to look perfect with every resolution.
Advantages of a Fluid Website
- User Friendly – Fluid websites are considered to be much more user friendly because they will look great with every resolution.
- Rule of Thirds – The rule of thirds will always be upheld. However the designer, designs the page or site will be displayed on in front of every monitor. This can go a long way in increasing overall usability.
- Horizontal Scroll Bars – While it can seem near impossible, if a website is extremely well designed the horizontal scroll bar can disappear, even on the smallest of screens.
Disadvantages of a Fluid Website
- Difficultly While Designing – It can be difficult to determine how the layout looks on multiple screens because designers often will only check the layout on one or two resolutions. Plus, the overall difficultly is very high when compared to designing a fixed website.
- Set Widths – Inserting photos, videos, etc. can be difficult to format if they need a set width. This is because multiple widths will have to be set to fit well in every different kind of resolution.
- Long Text Lines – It is becoming common knowledge that long lines of text are considered very difficult to read. With a fluid website design, long text lines are a high possibility and can make a website look very unprofessional.
Both forms of website design are acceptable, in fact, are both popular. While there are advantages and disadvantages to both styles, you must pick the one the best suits your designing style and competency.
Screen resolution is streching
Computer screens are getting larger and smaller at the same time. Desktop monitors are growing in size, and netbook monitors are becoming more widespread and smaller. That is large plus on fluid side.
Fluid design is easier
I always liked fluid design more. But I design my websites fixed because it is much easier.
I use only fluid layout. I
I use only fluid layout. I like to see my website spreads on 1920px.
fluid drupal template
I also like fluid more, but use fixed. It is hard to find good fluid drupal template.
It is much easier to do
It is much easier to do fixed, you can easily add images, ads, sidebars, whatever without worrying how does it look like on different screens and constantly checking it.
Lazy web designers
So it seems almost everyone like fluid design more, but fixed is more used because it is easier to design it. Lazy web designers.
The advantages to fluid
The advantages to fluid design are obvious. Fluid design looks good on all resolutions, no horizontal scrolling on smaller resolutions and there is no waste of space on large screens. If you don't want your design to stretch to much ( too long lines of text can be hard to read) you can always use max/min width command.
IE and max width
What about IE and max width? i remember reading somewher that it doesn't work?
simulate min/max width in IE
You can use JavaScript to simulate min/max width in IE.
IE expressions
Better way than using external js file would be to add IE expressions in CSS stylesheet. Follow this link to detailed guide about using IE expressions for min max properties for IE6 - http://www.gunlaug.no/contents/wd_additions_14.html
Hi, Here's another link where
Hi,
Here's another link where you could find out more about IE min/max solutions: http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-a...
If I had to make a choice I
If I had to make a choice I would probably go for a fluid web design, it brings more perspective for the users and that's something website owners should go for. I think it also depends on what web content management solutions we have for that, there are a lot of things to consider and I don't think a direct categorical answer would fit this question.
Post new comment