Voices That Matter: Web Design Conference 2009

Posted by & filed under Announcements.

I just gave my talk Designing CSS Layouts for the Flexible Web here in San Francisco for the Voices That Matter: Web Design Conference. I was asked to give the same presentation I gave last year, but of course I had to do a little bit of updating and improving. So, here are the new and improved slides for your downloading pleasure:

Designing CSS Layouts for the Flexible Web (PDF, 5 mb)

Yes, it’s a big file—there are a lot of graphics in the PowerPoint. But I didn’t want to compress it very much and have all those graphics look distorted, since examining the graphics is the main point of the presentation.

If you’re ready to get beyond the graphics and start working on the actual CSS techniques alluded to in the presentation, I’ve written up many of them on this blog:

Creating sliding composite images

Posted by & filed under Tutorials.

This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

I’ve already written about how to make images literally scale and how to use variable cropping on images. But perhaps you don’t want either end of your image dynamically cropped off—there may be important content on each side that you want to always keep in view. And perhaps you don’t want to scale the entire image, because although this would keep the entire width of the image always visible, it would also change the vertical space the image takes up, which might not work for your design. This is the perfect time to try using what I call a composite image.
(more…)

Hiding and revealing portions of images

Posted by & filed under Tutorials.

This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

I’ve already written about how to make images literally scale, but another way to change the amount of screen area an image takes up is to dynamically change how much of the image is shown at any given time. The image itself doesn’t change in size—the amount of space in which it’s allowed to show does, and the rest of the image just remains hidden outside of that space. I call this “variable cropping.”

You can create a variable cropping effect with either background or foreground images. Both look the same, but each is specially suited to different situations.
(more…)

Foreground images that scale with the layout

Posted by & filed under Tutorials.

This tutorial is slightly adapted from Chapter 9 of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS. You can download most of Chapter 9 for free as a PDF at the Flexible Web Design companion site, as well as download the HTML, CSS and image files that go along with this tutorial.

Since the area available for an image to display within a flexible layout changes on the fly, your images may need to as well. While fixed-width images can work within flexible layouts—as long as they’re not too large, or you have matching minimum widths in place—there are lots of ways you can dynamically change the screen area that an image takes up.

One way to dynamically alter the footprint of an image is to make it literally scale, based on either the text size or the changing dimensions of its parent element. Both are elegant effects that are deceptively simple to create.
(more…)

Updated flexible design inspiration

Posted by & filed under Announcements, Inspiration.

I just updated my post on sites to explore for liquid and elastic web design inspiration. Web sites are constantly being redesigned and added to, of course, so I intend to keep updating the original post periodically. Please check it out, and post in the comments there if you have other resources you think we should all know about.