Design Services Manager at UNC Highway Safety Center – author of a couple of books as well.
Flexible design = overall width of layout is not fixed number of pixels (liquid/elastic/hybrid)
Why bother? Why not?
When fixed width makes sense:
* lots of fixed-width content
* known users with known setup
* beginning designer
* just need to get something small and simple up quickly
Benefits of flexible layouts
Design differently! – Not every design comp can be turned into flexible layout, learn what design features are (and are not) flexible friendly
Discussion of how height shouldn’t be fixed – you never know what size font your users are viewing…
Avoid irregular shapes that force a particular height on your text – unless you can tile some portion of the shape
Avoid text matched with images that can’t expand – pick the right images, or mask the image part out so that it can slide along a tile-able background (be sure you use proper CSS to ensure text has enough space to sit in) or use variable cropping (CSS crops the image to make the image look good in a narrower column)
Variable cropping:
div {
width: 50%;
min-height: 100px;
background: url(image.jpg) no-repeat;
}
put this div as empty
or
div {
width: 50%;
min-height: 100px;
overflow: hidden;
}
put image in this div
Blend into background – blend the background into the image to allow image to slide around the div without looking bad
Scalable Images
Liquid image
width: 50%;
Elastic image
width: 20em;
Avoid fixed-width, full width content (images that fill the entire column) – use same solutions as above (variable cropping, scalable images, etc.) or just don’t fill the entire column!
Composite images
use background position property and properly designed images
Scrollbars for large content
overflow property:
div {
overflow: auto;
} – on the *containing* box, not the image itself
Avoid horizontal alignment across columns
Solution – accept misalignment
She then showed us a screenshot and the audience gave reasons why the image would be difficult/impossible to create in a flexible manner. This was followed by a “redesign” of that same site with the ability to create it in a flexible way.
Flexible design inspiration – www.zomigi.com/blog/inspiration-for-flexible-web-design
Q&A
Flash? Can it be resized? Yes, it can be, google for scalable or resizeable flash and you’ll find it.
Text resizing widgits? Should they be used? – no strong opinion, but never used them herself – depends on your users. Put it in and test, check to see if it works!
Font-sizing? She uses biggest text size she can get away with (never below 80% if she can help it) so that those who have learned how to use their browser font resizing tools aren’t punished.
Standardized ID/Class names (a la Eric Meyers) to allow users to create customized stylesheets? Great idea – but do what makes you comfortable about allowing your users to change/alter your designs
Boxy designs – how to avoid, overlapping, perhaps? That’s fine, but make sure you have space below/above to allow text to resize. Check CSS Zen Garden for ideas on non-boxy designs.
Final note – browser zoom capabilities – why bother with flexible layouts? Doesn’t really help it for liquid layouts – makes the text too small to avoid horizontal scrollbars, etc.
How much work do you put into cross-browser support? All browsers should be able to read the content. Test first in FF, then in IE. (checks down to IE 5, but only to confirm readability)
All done – she’s giving away one of her books now – and I got it! A training video from Lynda.com called Web Accessiblity Principles. Sweet!!! (I answered the question of who came up with Faux Columns first – it was Dan Cederholm)
And now I’m talking to Zoe’s mom!!
