Fixed or Floating Layout
The advances in browsers support for stylesheet commands now means that the need to use tables to try to force a page to appear the way that you want has now gone the way of the dinosaurs. Those who continue to use tables for layout (something that they were never intended to do in the first place) are as right as those who believe the Earth is flat. The Earth is relatively flat provided that you only look at a part of it and you can use tables for layout provided that you only want a simple layout and don't care that a growing percentage of visitors are using alternate devices to view web pages that your table layout can't handle.
Let's assue that the tables versus stylesheets for layout is well and truly over as stylesheets which were designed for layoing out pages are the clear winner when it comes to anything beyond the most basic of page layouts. That then leads us into the next challenging question that people need to answer when designing their pages - "Should you use a fixed or floating layout for your page design?"
This question is far more interesting because there are pros and cons to both approaches. Let's start by considering how big a viewable area that people are likely to be using to view your web page.
- People using web readers will listen to your web page rather than seeing it so the fixed or floating argument doesn't really apply to them. What is most important for these visitors is that your content appear sequentially in the page in ar order that makes sense - something that is impossible with most table layouts. There is a separate media type that can be specified to provide stylesheet commands that affect the way that the page is read out.
- Those using PDAs and mobile phones to view your web page only have a very small screen to view it in. This screen will only be a few hundred pixels in each direction at most. If you use a fixed layout for your web page that is wider than their screens then they may not be able to use your page properly. Fortunately there is a separate media type for these devices as well to allow you to define a different layout for your page for when it is viewed in these devices.
- Printers put the web page onto paper that has a fixed width. There are two different paper sizes in common use with the standard A4 being slightly narrower than the US size. The size of the margins that the various printers use along the sides of the printed content vary from printer to printer but we can reasonably expect that content somewhere between 700 and 760 pixels wide will fit across the paper without wasting too much space. Of course we have a separate media type to use for printed output as well.
- Most of our visitors (and the ones that table layouts cater exclusively to) are using a computer to view the web page on a computer screen. The resolution to which these screens can be set varies. 640x480 and lower resolutions have just about fallen completely out of use for computers and screen sizes that small now usually indicate that it is a phone or PDA screen rather than a computer. 800x600 is still popular for older people who have trouble seeing smaller text and also with computers in public places such as libraries. Most others use a resolution of 1024x768 or higher. Of course the resolution of the screen is completely irrelevant since computer screens usually display fixed toolbars, the browser itself displays menu and toolbars, and not everyone has their browser taking up all the available space on the screen in any case.
The one thing that we can determine from this is that there is no one fixed width layout that will satisfy the needs of all of the visitors to our web page. Does this mean that a floating layout is the way to go? Not necessarily.
The problem with a floating layout is that at least some of the content of our web page has a fixed width (eg. images). Such fixed width items will place a lower limit on how narrow that the page can go. If we have content that needs to be displayed in a predefined position relative to other content then this too may limit how narrow our page content can get. Such restrictions may make your page unsuitable for viewing in a PDA (unless you drop the image or resize it). It may also make your page unusable ifpeople viewing it on a computer make their browser window too narrow for your page content to fit properly.
Another problem can occur if your visitors are using really high screen resolutions as if your layout becomes too wide and short it can be just as difficult to work as if it becomes too narrow and tall. You may have items on the page that only make proper sense when they appear directly above or below other items. In any case a line of text that is too short or too long is harder to read.
some people argue that if someone opens up their browser so that the page is thousands of pixels wide then that is because they want it that way and that you should let them see your page speead out across the full width like they want. Others prefer that the page not be stretched too far out of shape in either direction regardless of how their visitor has their browser set.
Another aspect that needs to be considered at this point is that if your visitors really prefer to see your web page laid out a particular way then they can easily change the dimensions of their browser window (if they have it set smaller than full screen) or define their own stylesheet commands to override yours. If they really want pages stretched out of shape to fill the full width of their screen then they can use stylesheet commands to force your page to appear that way.
Further to this your visitors can also use their own stylesheet commands or browser settings to override your choice of font sizes for the text content of your page. If you have set up fixed sized areas to display your text based on the font size that you have selected then either their smaller font selection will result in blank space in your layout or their larger font selection will mean that your text overflows its container.
As you can see there are arguments in favour of both fixed and floating page layouts for web pages. Each has its advantages and disadvantages (and there are too many to list here). of course rather than using either a fixed or floating layout you can use a compromise between the two. By specifying the right combination of stylesheet commands you can specify a minimum and maximum width for your web page and allow the width of the page to float between the two. For example at the time of writing this the web pages on this site are designed to use a minimum width of 570 pixels and a maximum width of 850 pixels. The browser will display the page to fill 96% of the available width in the browser window provided that the content does not end up becoming narrower or wider than those limits in which case the limit size will apply. In my opinion this hybrid design approach achieves more of the advantages and less of the disadvantages of either of the two approaches that it combines together.
