Modern Web Engineerinng

[munem15-4873]

Part of the Solution: Flexible Everything


A few years ago, when flexible layouts were almost a "luxury" for websites,
the only things that were flexible in a design were the layout columns
(structural elements) and the text. Images could easily break layouts, and
even flexible structural elements broke a layout's form when pushed
enough. Flexible designs weren't really that flexible; they could give or take
a few hundred pixels, but they often couldn't adjust from a large computer
screen to a netbook.

Now we can make things more flexible. Images can be automatically
adjusted, and we have workarounds so that layouts never break (although
they may become squished and illegible in the process). While it's not a
complete fix, the solution gives us far more options. It's perfect for devices
that switch from portrait orientation to landscape in an instant or for when
users switch from a large computer screen to an iPad.

In Ethan Marcotte's article, he created a sample Web design that features
this better flexible layout:
The entire design is a lovely mix of fluid grids, fluid images and smart markup
where needed. Creating fluid grids is fairly common practice, and there
are a number of techniques for creating fluid images:
• Hiding and Revealing Portions of Images
• Creating Sliding Composite Images
• Foreground Images That Scale With the Layout
For more information on creating fluid websites, be sure to look at the
book "Flexible Web Design: Creating Liquid and Elastic Layouts with CSS"
by Zoe Mickley Gillenwater, and download the sample chapter "Creating
Flexible Images." In addition, Zoe provides the following extensive list of  tutorials, resources, inspiration and best practices on creating flexible grids
and layouts: "Essential Resources for Creating Liquid and Elastic Layouts."
While from a technical perspective this is all easily possible, it's not just
about plugging these features in and being done.

Source:  Smashing eBook􁴹Modern Web Design and Development