4.7 Minimum & Maximum Widths for Flexible Layouts
Flexible layouts adjust themselves dynamically to the current width of the browser window. This behavior is normally quite useful, but is sometimes inconvenient. For example, an extremely narrow browser window can make the layout illegible and thus unusable. You should define a lower limit for your elements' width, perhaps oriented to a desktop resolution of 800x600 pixels, to guarantee a legible layout even at that size.
Just as important: an upper limit for the layout's width. If the layout is too wide, copytext appears in very long lines. In extreme cases, paragraphs of several lines become individual lines of text. This is very tiring for readers' eyes, as they must travel a long way before reaching the break at the edge of the page. Even these details can frustrate your site's readers.
Both scenarios can be easily avoided with the CSS properties min-width and max-width.
The YAML framework's basic layout should contain all the width definitions in the container .page_margins, as this encompasses and thus defines all the other elements.
.page_margins {
min-width: 760px;
max-width: 100em;
...
}
This example defines a minimum layout width of 760 pixels. This will work even on a desktop resolution of 800x600 pixels and allows the layout to display in the browser's full-picture mode without creating horizontal scrollbars.
A maximum width is better defined according to the font size, in EM. A value in pixels would create problems when zooming on text, as the layout would not adjust itself for the larger letters. Unintentional line breaks and oddly-placed pictures would result. Basing the layout width on the font size itself easily eliminates this problem: the example below shows a value of 100em.
CSS Support Lacking in Internet Explorer 5.x and 6.0
Again, Internet Explorer makes life harder for us web designers: IE up to and including version 6.0 supports neither min-width nor max-width. Only with Internet Explorer 7.0 did Microsoft finally add these properties, as well as the additional min-height and max-height. This novum as well as the fixed CSS bugs and the greater surfing security is a blessing for web programmers. One can only hope that IE7 spreads quickly.
And yet, the older IE versions cannot be ignored when creating a layout, as IE 6 still rules the browser statistics and will certainly not disappear so quickly, even though its market share is steadily eroded by IE7.
For Internet Explorer 5.x and 6.0, I have prepared two Javascript methods to mimic the min-width and max-width properties for these browsers.
Solution 1: IE Expressions
Internet Explorer allows the web page creator dynamic access to CSS properties with the proprietary property expression(). With help from Javascript, we can quite simply fake the missing CSS properties. Svend Tofte's article max-width in IE offers a general overview of the technique. However, the examples in that article demand Quirks Mode (see DocTypes & Display Modes in Section 2.4). Jeena Paradies invented a Code Variant, which also works in Standard Mode in IE and provides the basis for the solution discussed here.
Important: earlier YAML versions required Internet Explorer be set to Quirks Mode for this method: no more!
The JS expressions should be built into the patch files, so that only IE is forced to load the required code. Below is an excerpt, as used in the layout examples in the download package:
/**
* min-width/max-width workaround for IE5.x & IE6
*
* @workaround
* @affected IE 5.x/Win, IE6
* @css-for IE 5.x/Win, IE6
* @valid no
*/
* html .page_margins {
/* Fallback if JavaScript is disabled */
width: 80em;
/* JS-Expression for min-/max-width simulation */
width: expression( ... );
}
Note 1: the doubled request for the current viewport size is indeed necessary, as IE 6.0 in Standard Mode reaches .clientWidth in a different way than in IE 5.x, which is generally in Quirks Mode.
Note 2: You don't have to create the JS-Expression by hand for your individual layout. The YAML Builder will help you by creating all necessary code dynamically depending on your layout settings.
In all provided layout examples implements a minimum layout width of 740 pixels. The maximum width is based on the font size. The current font size of the body element must be determined and then compared with the value 80em.
The fallback solution for those surfing without Javascript is to define width: 80em before the expression() appears in the code.
Solution 2: External Javascript "minmax.js"
The Javascript file minmax.js from doxdesk.com is included in the YAML download package, in the js/javascript folder. This file can be integrated into the web page's head and mimics the full functionality of the min-width, max-width, min-height, and max-height -- by evaluating the CSS definitions and adjusting IE's rendering accordingly.
This script, when linked via Conditional Comments (<link href="css/patches/patch_3col.css" rel="stylesheet" type="text/css" />), is only loaded by those browsers which need it: IE versions 5.x and 6.0. Internet Explorer 7 no longer requires this script, as it interprets the standard CSS properties.
<head>
...
<!--[if lte IE 7]>
<link href="../css/patches/patch_3col_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/minmax.js"></script>
<![endif]-->
</head>
That was it -- no more work is necessary. Watch the effect of the Javascript on the test page minmax_js.html.
/examples/08_special_interest/minmax_js.html
Note: This Javascript does have a notable disadvantage: it is only loaded after the page has been fully rendered. That means that a too-small or too-large browser window will first show the page without the min-width or max-width adjustments, and will only adjust the layout after a few tenths of a second. The page will visibly "jump", and this can be rather annoying while surfing a website. Please test this effect before adding the script.
