“Designing CSS Layouts for the Flexible Web”
The web has been a flexible, user-controlled medium from the beginning, and the use of CSS instead of tables for layout makes that flexibility all the more obvious. Yet, so many designers continue to create rigid designs that don’t adapt well to the myriad of user screen resolutions, font sizes, and other unique configurations. In this session, designers will learn what both liquid and elastic layouts are, what types of sites they work well on, and the benefits (and challenges) that they bring. The bulk of the session will teach designers how to design for these types of layouts by presenting numerous visual examples of both real and mocked up web sites. We’ll go over several design conventions that don’t work well for liquid or elastic layouts and show how to transform each to be more flexible-friendly, while still keeping the aesthetics of the site intact. While we won’t have time to cover the technicalities of how to use CSS to actually build the flexible design elements, learning how to design with CSS and flexibility in mind from the beginning will make the later building process a lot less painful. Designers will leave the session with a list of things to watch out for while creating their next design comps, as well as ideas for how to tweak the designs of even their fixed-width layouts to adapt better to user-controlled font sizes and other flexible web conditions.
