How to optimize web page width
Summary: One approach for optimizing a web page layout to make it look nice on both smaller and bigger screens.
When it comes to web page width, web designers choose between two basic options: fixed width and liquid (AKA dynamic, stretch, etc) width. Either option has a number of pros and cons, but it looks like the fixed width approach is more prevalent. And this irritates the heck out of me! I just hate having to scroll up and down when navigating a web page half of which content is empty. I do not use small computing devices, but I suspect that people, who view fixed width web pages on 10"-screen netbooks, also do not enjoy scrolling left and right.
 |  |
| Fixed layout | Liquid layout |
Dynamic web page layouts maximize the use of screen real estate and minimize scrolling, but they have one drawback: many liquid pages look weird on bigger (24"+) monitors. And just as wide-line paragraphs are difficult to read, really wide web pages are difficult to use.
A few years ago, when 15"-19" monitors used to be the norm and the spread between the small and big monitors was not as big, this was not such a big problem. Now, with cheap large (21"+) monitors and small devices (like 10"-screen netbooks) gaining popularity, it is more difficult to optimize a web page for different screen sizes. So how do you design a web page layout to make it look nice on both 10" and 24" screen?
I have an idea, but before I get to it, let me summarize and justify my goals.
- Goal #1: No wasted space.
White space is generally good, but only until it starts causing unnecessary hassles. For example, it makes no sense to force the user to scroll vertically on a page with 40% of blank content (on the left and right sides). - Goal #2. Reduce scrolling.
Vertical scrolling is bad, but horizontal scrolling is worse. There should be no need to scroll horizontally when viewing a page on 12"+ screen. Of course, depending on the displayed content, there may be exceptions (e.g. a grid is more likely to require horizontal scrolling than say textual content). Vertical scrolling should be required only when there is no wasted white space. - Goal #3: Trim content width when page is too wide.
Wide page is normally good, but not too wide. There is a threashold, after which each page width increase will reduce its readability.
When designing a web page layout, use liquid (dynamic) width until a certain threashold is reached (the threashold would depend on the type of the page); when the width of the browser window exceeds the value of this threashold, switch the page layout to fixed width.This approach offers the best of both worlds: it minimizes wasted space and scrolling on small and medium size screens, and it improves page readability on larger screens. It also does not require to resize the browser window on a bigger screen to make the page smaller.
Now, how do you actually implement this layout? I'm not particularly strong in CSS and web design, so I was not even sure if it was possible. Fortunately, it is. The answer came from user PortageMonkey, who responded to my question at StackOverflow. To make it work, you just need to define the maximum width of the container holding your web page content (normally, a <DIV> or <TABLE> element) using the max-width CSS selector. The max-width selector is supported by all major browsers, except IE 6 (and earlier). To make this functionality work on IE 6, use IE dynamic properties to set up the page width, such as in the following example, which limits the width of an element to 600 pixels:
width: expression(document.body.clientWidth > 600 ? "600px": "auto");
Here is the complete example:<html>
<head>
<style>
div#content
{
max-width: 600px;
width: expression(document.body.clientWidth > 600 ? "600px": "auto" );
border: red 1px solid;
}
div#wrapper {width: auto; border: blue 1px solid;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.[...]</div>
</div>
</body>
</html>
If you save this page on a local drive and try to open it in IE, you will notice an ActiveX warning that gets displayed because the CSS style section uses the expression property. If you do not allow blocked content, the page will not work as expected. Fortunately, the warning appears only when you try to open local files (via the file:/// protocol), so it should not be an issue.<head>
<style>
div#content
{
max-width: 600px;
width: expression(document.body.clientWidth > 600 ? "600px": "auto" );
border: red 1px solid;
}
div#wrapper {width: auto; border: blue 1px solid;}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.[...]</div>
</div>
</body>
</html>
This is what the content of a page would look like when the width is below the maximum (the inline images are adjusted, so they appear to have the same width, although they are not [compare the text displayed on each line]; to see the original, click the image):
And once you increase the width beyond the threashold, the content will stay within the maximum width boundary:
When using this approach, simply adjust the value of the maximum width to the size that is most appropriate for your application.See also:
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? by Kayla Knight
it is very nice
ReplyDeleteThank You
for sharing..........