5.1 Tools
In addition to the YAML framework itself and the sample layouts, the download package provides you with further tools in the tools/ folder to make your work even easier.
Dynamically Generated Dummy Text
js/ftod.js
This compact Javascript tool generates dummy text (Lorem ipsum...) within any DIV container. Two dynamically added text links can add or remove the paragraphs.
The script is used in various layout samples in the examples/ folder of the download package. The use of the script is quite simple. Link it in the web page header:
<script type="text/javascript" src="your_path/ftod.js"> </script>
Immediately below, we configure the tool to define which areas of the page should be filled with the dummy text. These HTML elements need unique IDs so the script can find them.
In the layout samples, these are the containers #col1_content to #col3_content of the three content columns of the basic layout.
<script type="text/javascript">
window.onload=function(){ AddFillerLink( "col1_content", "col2_content", "col3_content"); }
</script>
Dreamweaver Styles
Dreamweaver is one of the most popular software tools for professional web design on the market. However, it still has problems up to Version 7 with the WYSIWYG display of YAML-based layouts.
Dreamweaver MX 2004 (V7.0)
tools/dreamweaver_7/base_dw7.css
Conveniently, Dreamweaver does provide for alternative stylesheets just for drafting new pages in WYSIWYG mode. These stylesheets are only used in the editor, and can compensate for Dreamweaver's difficulty in displaying sophisticated CSS layouts.
For Dreamweaver MX 2004, you will find an alternative base stylesheet base_dw7.css in the tools/dreamweaver_7/ folder, which comments out the problematic declarations. Instructions for use with Dreamweaver are included in the file readme.txt.
Dreamweaver 8
The current version has further improved the display quality in the editor's WYSIWYG mode, so that there's usually no need for any special adjustments of the CSS components. The only known problem currently is with the processing of the @media rules: Dreamweaver may overwrite the screen rules with those for print.
Should this happen, it is usually easiest to hide the print stylesheets from the editor. The file readme.txt in the tools/dreamweaver_8/ folder describes the necessary steps.
5.2 Tips on Designing Flexible Layouts
In closing, a few more things to note when developing flexible layouts.
Dealing with Large Elements
It is important to fully understand the functioning of a column layout using floats. The static column #col3 "flows around" the two float columns #col1 and #col2 (even if this is not obvious in the layout).
Background: Internet Explorer is the only browser that still has problems dealing with elements which are too wide for the static #col3. In this case, the entire #col3 is shoved below the float columns -- or even hidden entirely. The layout is destroyed, and the web page is barely usable. Various solutions for this problem are available in Section 3.5.2.
All other modern browsers allow the too-wide elements to merely overflow into the neighboring columns: the layout remains intact. Web designers must watch out for this problem, especially in flexible layouts, as even a minimum layout width must guarantee content enough space in its container.
Small Screens
Flexible layouts adjust themselves to the width available. The formatting (margins, sizes) of all content elements should orient themselves to a sensible minimum width.
An often-used lower limit for screen display is the SVGA resolution of 800x600 pixels. This resolution leaves a viewport of usable space of circa 760 pixels, as vertical scrollbars and even window borders themselves reduce the available space. This is important to note, as horizontal scrollbars should be avoided if at all possible.
All content elements (headings, tables, forms, graphics) should be created to fit into this minimum width, so that the layout is displayed without errors or overlapping.
For even smaller resolutions (like on PDAs and other mobile devices), a new stylesheet can be quite handy -- made accessible only via the CSS rule @media handheld. Linearized columns are better suited to tiny displays: the containers will then appear one after the other, just as in the print stylesheet.
Flexible Side Columns
The width of the static column #col3 in flexible layouts normally results automatically from the total width of the browser window minus the widths of the displaying float columns. Should the float columns #col1 or #col2 also require flexible widths, they should be measured in EM or percent.
Yet when using EM for float columns, please note: the float columns always extend themselves toward the static column #col3. If the user zooms in on the text, #col3 will eventually become too narrow to read, as the font size in each container increases, and the width of the float containers increases proportionally to the font size as it is oriented to EM. The float columns force #col3 to become narrower and narrower as they expand.
As a consequence, I recommend percentage values for flexible float columns. The proportions will then remain constant, independent of font and window size.
