Flexible Web Design Book Review

Web design is not easy. Sure, nearly everyone’s a Web designer but only a select few in comparison can do it well. Web design is also complex. There are plenty of layers to spend years studying; it’s a life long discipline. I think that’s one of the major reasons I’m so enamored with Web design; I’ll never run out of something to get better at.

Web design is defined by its medium. There are certain rules, limitations, and quirks all working together to make it what it is. One of the most interesting and defining aspects of the medium is its dynamic nature. Everything changes. I recently finished reading Flexible Web Design – Creating Liquid and Elastic Layouts with CSS by Zoe Mickley Gillenwater which focuses on a very unique aspect of Web design. Deciding to work with the flexible nature of the browser itself is one of the first decisions to make when starting a new project. There is a true art to designing liquid and/or elastic websites, and this book acts as an extremely comprehensive resource on the subject.

Content Summary

Chapter 1: Understanding Flexible Layouts

The introductory chapter walks you through the basic concepts of flexible layouts, to ensure that each reader is comfortable with the material by being on the same page with the author. Zoe takes the time to explain the premise of flexible layouts, and why they’re so important on the Web.

One of my favorite aspects of this chapter is a convention that Zoe carries throughout the book. While focusing on liquid and elastic designs, Zoe makes sure to be super clear that by singing praises to flexible layouts, fixed layouts aren’t bad. I’m really glad she goes the extra mile and reiterates that point throughout the book, as over zealousness (either for or against an opinion) seems to be a bit of a problem in our industry.

Zoe takes the time to explain the fundamental differences between liquid and elastic designs and the ground rules surrounding each.

Chapter 2: How to Design Flexible Layouts

Chapter 2 focuses on design principles by examining some existing implementations. You’re shown what to avoid and why, as well as some really creative solutions for a flexible Web design. I like that Zoe broke down the chapter into various sections regarding how to handle an adaptive design. She talks about fixed heights, irregular shapes, image masking, and plenty more.

This chapter acts as a really great primer for what to expect when going after a liquid or elastic design.

Chapter 3: Preparing Your Design for Construction

Here begin the technical details. You’re shown a wide range of techniques in this chapter, from setting up your comp to tips on nondestructive editing to ensure you’re covering all your bases. I know it’s a bit biased, but it looks like Zoe is also a Fireworks fan, and she takes the time to explain some of the Fireworks-only features which help to make designing a flexible site painless by using Pages.

This chapter also begins the interaction with the recurring project throughout the book, Beechwood Animal Shelter. As I’ve said in previous books, I think this is a great way to solidify the points made in each chapter while learning by example.

Chapter 4: Building Liquid Layout Structures

The technical level takes another leap forward in this chapter as we’re walked through the nitty gritty markup and style of a flexible design. What’s great about this chapter is that Zoe takes a step back to basics and demonstrates the underlying functionality of a flexible design. She walks us through creating liquid columns by using floats and explains plenty of details surrounding the construction. She’s quick to keep in mind the extra work involved in making sure things render properly in Internet Explorer as well.

Zoe does a great job explaining all the technical material in a way that doesn’t turn out to be repetitive and therefore tedious and boring.

Chapter 5: Building Elastic Layout Structures

This chapter is equally technical in nature, but focuses instead on elastic structures instead of liquid. The first part of the chapter acts as a reminder surrounding the differences between a liquid design and elastic design, and quickly moves into marking up and styling the elastic layout referenced in chapter 4. I really like that Zoe keeps other aspects of Web design in her notes as she walks through the process. She touches on outside (and important) items such as source order, which I think is terribly important and valuable.

Chapter 6: Putting Limits on Flexibility

In Chapter 6 we’re introduced to the hybrid layout, one that contains a combination of fixed elements as well as liquid or elastic elements. Even more technical detail is covered in this chapter by discussing how to implement a mixture of these elements into one design for the benefit of the reader. Minimum and maximum widths are introduced into the picture as a method of containment and the pros/cons are discussed as well. Fallback options are also put on the table, such as overflow:auto as well as other ways of dealing with edge cases in flexible Web design.

Chapter 7: Creating Spacing for Text

Typography is very important in Web design, and there is even more emphasis when it comes to flexible layouts. We’re shown how to implement type effectively while retaining the flexible nature of a design. Margin and padding are large topics of this chapter, as they are the main contributors to readability when it comes to element proximity and structure.

Zoe walks us through a myriad of techniques for applying a margin, padding, or combination of the two to various elements in your design to help replicate the static comp. There is a fair bit of technical detail in this chapter as well, such as margin collapsing and the like, but it’s in no way intimidating to comprehend.

Quite a bit of time is spent discussing the book project, as we’re walked through applying what we’ve learned to the project to see it come to the next level.

Chapter 8: Adding Background Images and Color

Backgrounds are a huge part of any Web design, and they’re exponentially more difficult to effectively implement in a flexible design. Chapter 8 discusses various backgrounds including gradients, colors, and imagery. Rounded corners are also covered and it’s great that CSS3 is touched upon when applicable.

We’re also walked through some other background implementations with a specific focus on making them flexible, such as a background element with one curved edge. Faux columns are also brought up, as they’ve become an essential piece for many Web designs, flexible or not. The details behind making faux columns work in a flexible design make up a decent chunk of this chapter.

Again, this chapter closes out with adding backgrounds to the recurring book project website, but goes so far as to include bits of information helping you to better cut the original image from the design comp itself.

Chapter 9: Creating Flexible Images

Images will always be the biggest issue with a flexible Web design. That’s probably one of the main reasons you don’t see more liquid and elastic websites day to day. Zoe discusses scaling images, as well as techniques for hiding and showing parts of images depending on the size of the browser. Image collections are also discussed, including ways to take advantage of a flexible design to display more content on page without cluttering the design.

Summary

I was pleasantly surprised after reading Flexible Web Design – Creating Liquid and Elastic Layouts with CSS by Zoe Mickley Gillenwater. I think the book is a solid resource for modern Web designers both new and experienced. There is a ton of information covered and you’re bound to learn something by reading it.

I was a bit surprised, however, at the end of the book. Chapter 9 continues with the technical closing, applying what was learned to the working example, but seems to abruptly end on the last page, dumping the reader into the index without any sort of closing statement. While definitely not a show stopper of any kind, I would have preferred to have a bit more lead out in the text.