Variable-width solutions take advantage of the flexibility and adaptability of screen size, browser size, font size, and cross-platform differences.
A purely variable-width solution would have the page structure completely dependent on percentages and relative sizes of the elements within the page.
In general, variable width is a tough solution to choose. There are several ways in which it can go wrong. A major problem occurs when the browser width is set too narrowly, and the user ends up seeing one or two word per line.
On the flip side, really wide monitors can have lines of text equally long. This can prohibit the user from easily finding the beginning of the next line. Additionally, you have very little control over the layout of page elements within the page.
If your design calls for having graphical elements aligned to more than just the body (i.e., there are strict relationships between graphical items), this will be a hard pill to swallow. On the positive side, this layout method makes the best use of the user’s browser dimensions and can maximize the use of space to display the most information possible.
There are a few things you want to watch for when designing variable width solutions. At a small width text areas may suffer.
When pages resize, they tend to maintain the width of your images, and the bulk of the resizing will occur in your text region. Be sure to check this to ensure that your text is still legible.
Develop flexible foreground graphics that don’t rely on positioning against the background or to one another (this is a design problem that is unique to the Web and is a fun challenge for any web designer).
Remember to thoroughly test your pages by adjusting the font sizes and browser height and width, “Pre-Launch and Post-Launch”; however, you should be implementing some of these tests early on).
No Comments so far ↓
There are no comments yet...Kick things off by filling out the form below.