960px or 760px? All this being said, most designers choose a fixed width of either 960 or 760 pixels . A layout 960 pixels wide looks good for users with a 1024x768 resolution or above, with a bit of room for margins. For designers who want to accommodate the approximately 10% of users with a 800x600 screen resolution, the 760-pixel-wide layout works well, and is still suitable for larger screens.
Always Center the Layout When working with a fixed width design, be sure to at least center the wrapper div to maintain a sense of balance (margin: 0 auto; usually does the trick). Otherwise, for users with large screen resolutions, the entire layout will be tucked away in the corner.
4. Fluid Web Page Design Designers may not use fluid page designs for various reasons, but the layout’s benefits are often overlooked. Below are pros and cons to think about when considering fluid web page design.
Pros Fluid web page design can be more user-friendly, because it adjusts to the user’s set up. The amount of extra white space is similar between all browsers and screen resolutions, which can be more visually appealing. If designed well, a fluid layout can eliminate horizontal scroll bars in smaller screen resolutions. Cons The designer has less control over what the user sees and may overlook problems because the layout looks fine on their specific screen resolution. Images, video and other types of content with set widths may need to be set at multiple widths to accommodate different screen resolutions. With incredibly large screen resolutions, a lack of content may create excess white space that can diminish aesthetic appeal. Examples of Fluid Page Design Below are two designs that use percentage widths to accommodate different screen resolutions. The first example in each set alters the width of the content according to screen width, while the second screenshot uses varying widths for the white space.
5. Getting Fluid Web Page Design To Work Even though fluid layouts can present a few problems, some of those problems can be overcome with a few tricks.
Use Simple Design The less a fluid Web design depends on graphics and difficult techniques , the easier it will be to create and maintain. It will also be more compatible with alternate screen resolutions. With cleaner code and design, compatibility problems are more easily prevented, found and dealt with.
Smashing Magazine, for example, uses a fluid Web page layout, and to make it simple only the top black-and-orange navigation bar expands, depending on the user’s situation. Otherwise, the content area expands and contracts as needed, and smart use of CSS covers situations in which the sidebar and internal content could clash.
Min-width and Max-width Two CSS properties, min-width and max-width, can be used to create a fixed width if the user’s screen is too small or too big for the layout to be usable. In this case, the layout gets a scroll bar and functions essentially as a fixed-width layout. Look over W3Schools’ pages on the min-width and max-width CSS properties below for more details:
“I go back and forth on this issue. We use a fixed width at case.edu because:Liquid is more complicated, and we distribute templated designs to users of varying skills who might easily break a liquid layout . (They’re actually regular HTML files rather than Dreamweaver templates.) We want to ensure our maintainers don’t build pages with line lengths that are too long and thus harder to read. We try to limit the space available because people have a tendency of filling up whatever space is available . If they have large monitors they could really overcrowd a page not realize how messy it gets on smaller displays. Comment by madr on Where Have All the Flexible Designs Gone?
Two more good points are made here about using fixed-width layouts:
“Banners and ads are usually made with images and Flash movies , making it harder to do an elastic or flexible design. I have worked in the newspaper world for a year and a half, and the ads really are a holy cow in these areas. So are article images, for which an elastic layout would make the viewing area too big for the top image.Every browser but Safari 3 and below (Safari 4 is coming), Firefox 2 and below and IE6 and below (which are to be viewed as obsolete/deprecated soon) have support for page zoom instead of text resizing , making the time to accomplish a flexible and elastic design hard to justify since the majority of the visitors won’t even notice it.”
Comment by jphilapy on Where Have All the Flexible Designs Gone?
Two good points in support of fluid-width layouts:
“Flexible sites can be made to work at many resolutions. There is no need for heated debates or research about user screen sizes. Besides, screen resolution statistics are a myth; few people run their browser full-screen and many have toolbars, sidebars, or other widgets that use valuable screen estate.Mobile phones, such as the iPhone, and games consoles are becoming viable alternatives for web browsing. In general, these devices have smaller resolutions and can benefit from flexible web designs.”
Comment by Calrion on About Fluid- and Fixed-Width Layouts
Clear case for using elastic designs:
“I think the ‘elastic’ layout is the best option. Fluid to a point , then fixed to ensure lines of text, etc., don’t become ridiculously long.I’m a Windows user, and I maximize.
Mostly, I maximize because I can get the best look at whatever app I’m using, and because I generally have large amounts of detritus on my desktop. Additionally, maximizing my browser (Firefox) allows the maximum space for interface elements, specifically the links toolbar and tabbed area.
In terms of usability, fluid is probably best for savvy users , as their browser width is in control. For less experienced users, elastic is probably best , as it will automatically stop itself from becoming too wide.”
Comment by Georg on About Fluid- and Fixed-Width Layouts
An explanation of how one designer uses a mix of all three to get the best results:
“Fluid main part, fixed sidebars and (maybe) some elastic parts is my preferred layout method. I always keep text areas within 600px max-width though, and hack IE/win.Using min/max for the whole page, so it’ll stay within 600 - 1200px and centers above. The same hacks for IE/win.
Testing everything on 600 to 2400 wide screens, and leave the rest to each visitor. Text lines will not get too wide (600px max), and the page doesn’t break too early under stress.
Most comments I get are that visitors don’t notice anything that really disturbs them , and that it makes easy read. Guess that means that it’s a working compromise .
Your site works fine for me, so I’ll call it a good compromise. My old eyes say the text is a bit too small, so I zoom it to 200% in Opera on a 1280 screen. No problems whatsoever.”
Further Resources You may also be interested in these extra references:
