Disclosure: I was provided a copy of Flexible Web Design by New Riders publishing. This review has not been altered in any way as a result of that circumstance, and as always contains my honest opinion.
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.
- 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:autoas 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.
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.
Zoe’s publisher, New Riders was generous enough to donate two copies of Flexible Web Design for giveaway, so I’m going to do just that!
If you’re interested in reading Flexible Web Design, just leave a comment below and I’ll choose two winners at random. Winners will need to have a US or Canada based mailing address. Entries will be accepted until Sunday, December 13 11:59pm EST at which time two winners will be randomly chosen.
Surprisingly, I’ve never owned a book on web design. Everything I’ve learned has been via the web and personal experience.
Fluid layouts have always been somewhat of a turn-off for me, stemming mostly I’m guessing from their improper or not-so-polished use. The one site I’ve seen that does fluid (hybrid rather) well is Last.fm. On their artist pages they’ve got a fixed min and max width, with an elastic in-between, but they still manage to keep enough white space to keep the design pleasing.
I would love to win this to see how fluid layouts can take better advantage of today’s wide screens, and still present a manageable screen width.
I can hardly wait to check it out! 🙂
Is there any pdf or ebook downloadable link for this Flexible Web Design? Or I hope I can have this one. I am currently developing and enhancing my skills in web developing and designing. I know this is very a useful tool for me and for all of the readers that will read this book.
I’ve been experimenting with implementing a fluid layout on a site project and have yet to come up with a configuration I’m happy with. I’ll keep my fingers crossed for a free copy but either way its on my list of books to pick up. Thanks for writing up a review.
I’ve done a bit of flexible design here and there, but certainly wouldn’t call myself an expert. Would be curious to see what tips Zoe has. Good review too man.
Nice write up. It sounds like an interesting read and that it offers some good stuff in there. Put me down for one 😉
If I don’t live in the states can I get a soft copy? I love your reviews by the way, I read a couple of books that I’ve found here.
@Bassem Reda: Unfortunately I don’t have any soft copies to distribute, only two physical copies. If you’d be willing to cover the shipping costs, however, you can definitely enter if you live outside the US and Canada.
Nice reveiw. Looks like it would be a good companion to Cederholm’s “Bulletproof web design”.
Hopefully I’ll get the chance to read and compare.
Good honest review. Thanks for reviewing each chapter in detail.
I have never designed a web site with a fluid design, so I’d be interested in the benefits of designing one.
I’m really glad you enjoyed my book, Jonathan! Thanks so much for the detailed review. If anyone wants more info/downloads, check out http://www.flexiblewebbook.com. Bassem Reda, you can buy Flexible Web Design as a PDF e-book, but I don’t want to junk up Jonathan’s comments with the details, so email me through my site if you’d like more info on that.
Thanks for the review, Jonathan. Sounds like a worthwhile read. Sign me up for the contest. 🙂
I hadn’t heard of this book, but after the favorable review, I think I’ll be adding it to my wish list.
I am very interested in learning how to create solid CSS bases on which to put any type of content, and this review put this book high on my wishlist.
This sounds like an awesome book! I’m always super excited about resources to help enhance my design skills. Thanks for sharing.
This sounds like an interesting read. Please add me to the giveaway drawing.
Nice honest review of the book Jonathan. I hadn’t heard of this of this book either until I saw this post. Thanks for the read.
Nice review – I’d like a copy please. 😛
Sounds like a great book…hope I win a copy 🙂
Sounds like a good read. Please put my name into the hat.
Would be super excited to have a copy of this book. Fluid layouts is its own animal and I almost always stick to Fixed. Would love to learn more.
Sounds like a sweet book, thanks for the review/givaway!
Nice book, and great review.
Nice review of a design book!
Looking forward to reading through this book. Seems like a good one.
Yay!! I was just finished bashing my head on the wall because of a mysterious CSS problem, when I saw this article!
This book seems quite great for CSS head-bashers like me 😀
Good review ! Hope I’ll get it!
This book sounds helpful! Would love to win a copy.
The winners have been picked! Congratulations to kcato and Shawn Grimes!