Visco-elastic design
17th April 2007 by Liam McGee
Liquid designs (where the design ‘flows’ into whatever window width it finds itself in) can cause problems when resized as column widths cannot increase in ratio with the text base size. This results in broken layouts at large text sizes. We use x3 as a rule of thumb — increasing the base font size to 300% shouldn’t break the design. Users who require magnification above this level are likely to be using separate screen-magnification software and will handle it in a different way.
The advantage of elastic layouts (i.e. where the overall width of the design is a ratio to the base font size) is that the design is much less likely to break on font size increase — it introduces horizontal scrolling, but that’s far more acceptable than making the design unreadable. The down-side is that you don’t take advantage of the screen real-estate provided by full-size windows on larger monitors, as you really have to design to a content width of 780-ish px (i.e. allow for users with 600×800 resolution monitors).
Visco-elastic design is what we call a method to overcome this problem with elastic layouts — it’s a set of several elastic layouts optimised for different window-width ranges. The detection of of the window width is performed by javascript and the appropriate style is presented (ideally you would cookie the preference so that the appropriate stylesheet was presented immediately). You would present the simplest (i.e. the narrowest) style by default, with more complex, multi-columnar layouts presented if window width is sufficient.
It’s definitely one for perfectionists, but it’s an interesting solution to an annoying problem.