2. How to Design Flexible Layouts

Creating flexible layouts isn’t just a matter of what CSS to use. You need to start out with a design comp or mockup that can be successfully turned into a liquid or elastic layout. Not every design can. Since design comps are static images, not changeable web pages, many designers fall into the trap of designing graphic elements that can work at only one size, or with a particular font size, or only if they appear at a certain point on the screen. When you learn how to stop designing in this way and start thinking in terms of the eventual flexible CSS, you’ll have a much easier time creating flexible layouts that are attractive and robust enough to stand up to several different user scenarios. In this chapter, you’ll learn how to identify design features that are—and are not—flexible-friendly, as well as how to change those that aren’t—sometimes only slightly—to work in a liquid or elastic layout. We’ll also start to work directly on the pages of the example site that we’ll be building throughout the book.