• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 2. How to Design Flexible Layout... > Design Principles for Flexible Layou...

Design Principles for Flexible Layouts

There are a number of guidelines for flexible designs that you can simply memorize and always keep in mind when designing your own layouts. Many of these are not only applicable to creating liquid and elastic layouts, but also to creating fixed-width layouts that you want to make more adaptive to user preferences such as font size. They’re a good primer to designing for the unique strengths of the medium—that is, specifically for the web, rather than for print.

Many of you don’t get to design your own layouts, but instead have graphic designers—most of whom don’t know how to actually build web pages, at least not with CSS—creating the design comps that you then turn into real pages. This isn’t an ideal scenario, because it’s really important that the designer understand how the eventual product will be created to be able to successfully design something that’s compatible. If your designer knows how to make CSS layouts but simply chooses not to because the two of you have a good division of labor going on, you probably won’t run into many problems. But if you’re working with designers who aren’t also (X)HTML and CSS developers, you’ve probably experienced a lot of frustration in trying to translate their work to the web. These graphic designers would be the ones to benefit the most from this chapter (maybe you can leave a copy of this book on their desks, with a nice big bookmark in this chapter), but you can also use it to your own advantage. Many of the problematic design features you’ll see demonstrated here don’t require much change to work with flexible layouts—it’s just a matter of knowing what that change should be.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint