Flexible Web Design

Creating Liquid and Elastic Layouts with CSS

Learn how to design and build attractive web sites that maximize usability and accessibility, adapt to changing amounts of content, and hold up under a variety of user preferences.

Liquid or fluid layouts change width based on the user’s unique device viewing size. Elastic layouts change width based on the user’s unique text size. Both types of flexible design offer clear benefits to users, who can view sites at sizes that work for their needs, but they can pose challenges to web designers who are used to perfect pixel control. Still, when planned and constructed correctly, flexible layouts can be visually appealing and reasonably easy to build. And the concepts and techniques of flexible web design can benefit fixed-width CSS designs too, as designers learn how to design for the inherent flexibility of the web, instead of the rigid qualities of print media or grid-based layouts.

Using standards-compliant and cross-browser compatible (X)HTML and CSS, in Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, designers will learn:

  • The benefits of flexible layouts
  • When to choose a liquid, elastic, or hybrid design
  • How to design and slice graphic comps in a way that makes flexible design achievable
  • How to build liquid and elastic layouts from scratch
  • How to create flexible background graphics and scalable content images
  • When and how to limit the degree of flexibility in a web page

Who should read this book?

Flexible Web Design is meant for professional web designers who already have experience creating web sites from scratch but want to improve their CSS layout skills. Even if you intend to continue designing fixed-width sites primarily, you'll learn how to design your comps and build your pages in a way that makes them more adaptable to the user-controlled nature of the web.

This book will be especially helpful to former print designers or web designers used to table-based layout who still struggle to produce pure CSS layouts. It will teach you how to think in the CSS mindset so that designing for CSS becomes natural and you no longer find yourself fighting against inappropriate comps when it comes time to actually build the pages.

About the author

Zoe Mickley Gillenwater is an experienced web designer, project manager, and technical author, active in the web standards community. She is the author of the lynda.com video training title Web Accessibility Principles as well as dozens of articles and tutorials on CSS, Dreamweaver, and accessibility at the web development training site Community MX. Zoe serves on the Adobe Task Force of the Web Standards Project and is a moderator of the popular css-discuss mailing list. Learn more about Zoe at her blog zomigi.com.