Before and After: Our Non-compatible Design, Fixed

We’ve looked at lots of examples of real web-site designs that do and don’t work with flexible layout techniques. But knowing how to change a non-flexible design element into a flexible one is a step beyond merely recognizing what design elements are problematic for a liquid or elastic site. That’s where our example site comes in. Throughout this book, we’ll be working on creating a web site for the fictional Beechwood Animal Shelter, from designing the comp to putting the finishing touches on the CSS.

Our first step in creating the Beechwood Animal Shelter site will be transforming the first-draft comp (Figure 2.42) of its design into a more flexible-friendly final design. The first-draft comp has a number of design elements that won’t work in a flexible design (you’ll see the relevant areas marked in Figure 2.42):