Meeting you

I’m excited to meet you guys! Please come up and introduce yourselves. Hooray for new friends! To find me, follow me on Twitter. I haven’t yet figured out which app to use for planning my schedule. (That’s one of the overwhelming things. More on that later.)

Book giveaway

I’m going to have a few copies of my book, Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, to give away. Want one? Find me and tell me why you want to learn about flexible design. iPad is an acceptable one word answer. Then presto, the book (if I haven’t given them all away yet) is yours!

I’ll probably also have flyers with a discount code for buying Flexible Web Design. Hopefully.

My panel

I’m presenting in the CSS3 Design with HTML5 workshop at 3:30 on Saturday in Ballroom F, with Christopher Schmitt and Stephanie Sullivan. Come check it out. As long as you’re not going to heckle me and post mean things on Twitter, that is.

Halp! I’m a noob!

Ok, now the overwhelming stuff. I have no idea how this SXSW thing works. If anyone has any essential tips, or links to articles with tips, I will love you forever. Some of the questions that are going through my mind:

• How many business cards should I take with me?
• Which of the myriad scheduling apps should I use?
• What are the best iPhone apps to help me through? (Note: I don’t have an iPhone, just an iPod Touch. Don’t hate me.)
• Which are the best events and parties to go to for schmoozing?
• Which are the best parties to go to for having fun? (Note: I don’t drink. But I still like to have fun.)
• What do women typically wear during the day? What about to parties at night?
• Where can I eat good food for cheap?
• Does Austin have any good bakeries, and if so, how can I get my hands on some delicious cookies? (This is always my first question when traveling. I always try to find the nearest bakery to my hotel. Sadly, most cities do not have bakeries up to my standards. At least, not cookie bakeries.)

Ok, that’s enough for now. Again, come meet me, see my panel, hang out.

Of course, 140 characters couldn’t capture his whole opinion on the subject, so he wrote a blog post followup. I strongly recommend reading it. I really agree with it.

Also, he later tweeted: “My new opinion, based on insight from commenters: You DON’T need to know how to write HTML/CSS. But in many scenarios it can be useful.”

I agree with this too, for the reasons explained well by Mark Boulton. A web designer doesn’t necessarily need to know how to write actual HTML and CSS. But she does need to know about the limitations imposed by browsers, the strengths and weaknesses of the medium. Writing HTML/CSS can make understanding and designing around these limitations a lot easier. But you can come to this understanding without learning HTML/CSS first.

Basically, my opinion is still the same as it was when I wrote Should web designers build their own pages? back in June 2008. Check that article out for my full opinion—including my very own architect analogy! (Seemingly a must whenever debating this topic.)

Design inspiration

It’s always helpful to look at existing liquid and elastic sites to get inspiration for how to design your own. I’ve pulled together several sources of flexible design inspiration in a couple former blog posts on my site:

• Inspiration for flexible web design
• The liquid web site motherload

Templates

Even if you don’t read my book, you can download the example and exercise files from the book’s companion site. They essentially give you several liquid and elastic layout templates or starter pages that you can use to build your own liquid and elastic sites.

Here are some other layout templates:

• Matthew James Taylor’s liquid and elastic layouts
• Layout Gala liquid layouts
• IronMyers liquid layouts
• CSS-Tricks liquid layouts (see “Layout Packs” third on page)
• Dynamic Drive CSS liquid layouts
• ThemeForest’s liquid fully-designed templates
• WordPress flexible themes

Here are some frameworks and grid systems that allow you to make liquid and/or elastic layouts:

• Fluid Grid framework
• Fluid Grid System framework
• Fluid 960 Grid System
• aplus elastic grid
• Elastic framework (elastic and liquid)
• Emastic framework (elastic and liquid)
• YUI Grids CSS (liquid)
• YAML framework (elastic and liquid)
• The 1kb CSS Grid can be adapted for liquid layouts (see description halfway through this article)

Articles

Here are some general articles on the what and why of flexible layouts:

• Sample of Chapter 1: Understanding Flexible Layouts (PDF, from Flexible Web Design book)
• Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? (Smashing Magazine)
• CSS Layouts: The Fixed. The Fluid. The Elastic. (Beast-Blog.com)
• Why browser zoom shouldn’t kill flexible layouts
• Elastic layout – wrong term? (AlastairC)
• Accessible layouts (AlastairC)
• Where Have All the Flexible Designs Gone? (Sitepoint)
• Flexible Layouts: Challenge For The Future (Smashing Magazine)
• Elastic Design (A List Apart)
• Fixtorati (Adactio)
• Liquid layouts using CSS – the joy, the pain, the tears (presentation at Web Essentials 05)

Understanding min-width and max-width is essential to working with flexible layouts:

• Sitepoint’s CSS reference on min-width and max-width
• Add min-width and max-width Support in Internet Explorer 6 (PDF, from Flexible Web Design book)

Understanding line lengths is also essential. Although popular belief is that there’s a narrow band of line lengths that are ideal for everyone’s reading comfort, the (limited) research that’s been done on on-screen reading suggests that there is a much larger range of effective line lengths, and that there is a difference between preference and efficacy. Age, disability, reading level, native language, leading, and other factors can all impact which line lengths are most effective for specific individuals in specific situations. See these articles for details:

• The Line Length Misconception (Viget Advance)
• Reading Onscreen: The Effects of Line Length on Performance (usability.gov)
• The Effects of Line Length on Reading Online News (SURL Usability News)
• The Effects of Line Length on Children and Adults’ Online Reading Performance (SURL Usability News)
• Optimal Line Length: Research Supporting How Line Length Affects Usability (webusability.com)
• Reading Text Online (UI Design Newsletter)
• Line-length is not different than any other user preference (CSSing)

Tutorials

Here are tutorials on creating multiple-column liquid and elastic layouts:

• Liquid layouts the easy way (Max Design)
• CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns (excerpt from CSS Mastery on webreference.com)
• Fixed or fluid width? Elastic! (456 Berea Street)
• Creating Elastic Layouts with the em Unit (Community MX)
• The Incredible Em & Elastic Layouts with CSS (Jon Tan)
• Fluid Grids (A List Apart)
• Five simple steps to designing grid systems — Part 5 (on liquid grids, by Mark Boulton)
• CSS Floats to Display Columns in Any Order (Christopher Schmitt)
• Changingman layout (updated) (also a template, from For a Beautiful Web)
• Intricate Fluid Layouts in Three Easy Steps (24 Ways)
• In Search of the Holy Grail (A List Apart)
• Creating Liquid Layouts with Negative Margins (A List Apart)
• The Definitive Guide to Using Negative Margins (Smashing Magazine)
• Get Refreshed: Liquid Layouts With Simpler CSS and Without A Semantic Mess (Mindfly)
• Multi-Column Layouts Climb Out of the Box (A List Apart)
• Fluid elastic design (Boagworld)
• Using the Liquid CSS Layouts in Dreamweaver CS4 (excerpt from Mastering CSS with Dreamweaver CS4 on peachpit.com)
• Flexible equal height columns (SocialGeek)
• Vertical Centering with CSS (Andrew Valums)

Creating successful flexible pages is about more than just the layout; you have to make sure the content inside the layout can be flexible too. Here are tutorials on making content, backgrounds, and other effects work with flexible layouts:

• Creating Liquid Faux Columns (Community MX)
• Elastic Faux Columns (Nick Cowie)
• Smart Columns w/ CSS & jQuery (Soh Tanaka)
• Equidistant Objects with CSS (CSS-Tricks)
• Sample of Chapter 9: Creating Flexible Images (PDF, from Flexible Web Design book)
• Foreground images that scale with the layout (pure CSS solution)
• Quick Tip – Resizing Images Based On Browser Window Size (JavaScript solution, from Build Internet!)
• Creating sliding composite images
• CSS effect: space images out to match text height
• Hiding and revealing portions of images
• Stretchy Images with HTML and CSS (Sitepoint)
• Fluid searchbox (outbreak)

This should keep you busy for a while, no? I hope this will be the start of some lovely liquid and elastic designs for you, folks! Drop me a line if you have one you want to show off; I love seeing other people’s great work.

Digg this article if you enjoyed it. Thanks!

Although @font-face, the CSS method for embedding and using any font in a web page, now enjoys rather good browser support, it still has some limitations that keep people from using it. Chief among these is the fact that the license of most fonts, even free ones, do not allow re-distribution over the web using @font-face. Because of this, a number of services and technologies are springing up that provide alternate ways to get non-standard fonts into your pages. I was unable to find any place that listed all of the major @font-face alternatives, so I decided to do my own roundup to provide the basic info on each.

This roundup of alternatives is not meant to discourage the use of @font-face. In the spirit of progressive enhancement, I wholeheartedly think it’s ready to use (with the right fonts, of course). But, in case you are unable or unwilling to use a pure @font-face solution, or you’re just curious what your other options are, here’s are the most popular services and techniques out there for you right now.

Note: This a rapidly evolving area of web design. These solutions are going to change and more are going to be added. I will try to keep this page updated as things change, but if any of the changes are so big that it makes the most sense to just create a new page, I’ll do that instead. Either way, I’ll post a note here indicating where the latest updates are.

Font Embedding Services

These services all make use of @font-face, but make implementation easier by helping you work around the browser differences. They also all get around the legal issue of font embedding by providing you with a set of fonts that are licensed for this type of use and impossible or difficult for end users to steal.

Typekit

Status

Open to all.

Method

Subscription to a font library from multiple foundries by month or year. JavaScript used to connect your site with remote font library. You customize CSS to work with the selectors and tags you need, as well as create a font stack to be used as a fallback if @font-face is not supported, but the CSS is in the JavaScript, not your own sheet. sIFR and Cufón will also be used as fallbacks.

Pricing

Freemium. Free “Trial” account gives access to smallest number of fonts and can be used on one web site. “Personal” account for $24.99/year, “Portfolio” account for $49.99/year, and “Corporate” account for $49.99/month increase limits on fonts, bandwidth, and number of sites.

More Info

• First impressions of Typekit
• Getting Started with Typekit
• First Ten Minutes with TypeKit
• A Few Thoughts on TypeKit

Fontdeck

Status

In development. Sign up on home page to get details when they become available.

Method

Supposedly similar to Typekit’s, but details unknown. Font library will be from multiple foundries.

Pricing

Unknown.

Kernest

Status

Open to all.

Method

A la carte font selection from multiple foundries. Select fonts you want to use and paste generated CSS into your style sheet. No JavaScript involved.

Pricing

Pay yearly subscription for each font individually, per domain. Many fonts free.

More Info

• Using new fonts from Kernest on Blogger
• The importance of knowing Kernest: Pretty high. Your move, TypeKit.
• An Interview With Kernest’s Garrick Van Buren

Typotheque

Status

Open to all.

Method

Fonts come only from the Typotheque foundry. Select fonts you want to use and paste generated CSS into your style sheet. No JavaScript involved.

Pricing

Pay one-time fee for each font individually. Buying installable print version of font for full-price (including access to web version) or web-only version for 20% of full font price. Extra charges for bandwidth over 500 MB.

More Info

• Testing Typotheque @font-face embedding
• Multi-Lingual Fonts with Typotheque and Font Face
• Beta-testing Typotheque’s Font Embedding Technology

Font Replacement Techniques

These techniques do not make use of @font-face, but instead use scripting and/or Flash to display fonts that are not on the user’s system. All of these techniques are free and open to all to use. None of them directly address the licensing issue, but none of them link directly to ready-to-use fonts, so copyright legality is not clear-cut.

sIFR (Scalable Inman Flash Replacement)

Embed your font in a Flash SWF file. JavaScript converts chosen text on the page to Flash text, which can be selected and resized. Some styling handled in CSS and some in JavaScript. Rather difficult to set up.

More Info

• sIFR Generator
• sIFRvault
• Implant sIFR3 – A Healthy Alternative to Browser Text
• How To Implement sIFR3 Into Your Website
• cufón and sIFR (A Visual Comparison)
• Cufon vs sIFR vs FLIR
• Text replacement comparison
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

Cufón

Convert your font to a proprietary JavaScript format and link to it and the main Cufón script. Specify CSS normally. Uses the HTML5 canvas element or VML to draw text. Contrary to popular belief, text selection is possible, you just can’t see the selection.

More Info

• The Easiest Way to Use Any Font You Wish
• Exploring Cufón, a sIFR alternative for font embedding
• Combining Cufón and @font-face
• cufón and sIFR (A Visual Comparison)
• Cufon vs sIFR vs FLIR
• Cufón vs. Typeface.js, which one is better?
• Text replacement comparison
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

typeface.js

Same idea as Cufón, but somewhat lower performance and quality. Convert your font to a proprietary JavaScript format and link to it and the main typeface.js JavaScript library. Specify CSS normally. Uses the HTML5 canvas element or VML to draw text.

TypeSelect is based on an older version of typeface.js, but now that typeface.js supports text selection, it seems to be redundant.

More Info

• Cufón vs. Typeface.js, which one is better?
• Text replacement comparison
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

FLIR (Facelift Image Replacement)

Uses PHP and JavaScript on a regular font file that you upload to your web server to dynamically generate images.

More Info

• Install FLIR – Typography Solution For The Web
• How To Use Any Font You Wish With FLIR
• Cufon vs sIFR vs FLIR
• Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
• Rich Typography Options for the Web

PIR (PHP Image Replacement)

Uses PHP and jQuery on a regular font file that you upload to your web server to dynamically generate images.

FontJazz

Convert your font to an image containing each character in a specific size and color. A generated JavaScript for the font displays the appropriate character for each word.

More Resources

There are a ton of general articles and web sites out there about @font-face, font embedding services, font replacement methods, the politics of web fonts, and more. Here are just a few that I think are particularly helpful.

• Webfonts.info wiki
• Beautiful fonts with @font-face
• The Font-as-Service
• Why webfont services are the future of fonts on the web
• The direction forward with web fonts
• Designing with @font-face delivery services
• Web Fonts Panorama – September, 2009
• WOFF, the web standard for type
• Typography for the Web—NY Web Standards Meetup
• Rich Typography On The Web: Techniques and Tools

Luckily, I ran into a large source of free handwriting fonts called Fonts for Peas, part of the kevin & amanda blog. These are fonts that are meant to be used for scrapbooking, family blogs, and the like, so most of them are pretty cutesy. But, with 333 to currently choose from, you’re bound to find a few that you could use. All of the handwriting fonts are based on actual handwriting samples that readers of the blog send in, so they’re pretty diverse. I downloaded a couple dozen myself and am excited to try them in my logo comps.

Jane Austen quotations set in Pea Bandit, Pea Mystie Caps, and Pea Anderson.

Mixed in with the handwriting fonts are a few hand-drawn symbol fonts that would make nice icons. There’s also another section of the site called Free Scrapbook Fonts that currently has over 100 decorative fonts to choose from.

Now, I know these aren’t very high quality fonts, in terms of kerning and metrics and ligatures and all those things that make a professional font a professional font. But, I think many of them will work in small doses, especially if you’re going to be manually kerning and tweaking them yourself.

These fonts are free for personal use, and you can use them for free commercially if you display a button linking back to the site. If you don’t want to do this, you can buy a single-font license for $10. (That’s what I’ll be doing if I end up using a font in the logo I’m working on.) Read all the details in the terms of use.

I’m not an early adopter of technology unless it is really going to make my life easier or happier. I’m also not one to give up on something old, if it’s working for me, just because there is something newer and trendier out there. And, I’m not a fan of clutter—virtual kinds as well as physical. I have ADD tendencies, so I have to be careful to not overwhelm myself with too much “stuff.”

I started hearing about Twitter in 2007. At the time, I didn’t see any need to be on there. There weren’t that many people on there that I would have wanted to keep up with. I didn’t and don’t have the time to get caught up in people’s personal, day-to-day lives—just give me my practical articles and tutorials and I’ll be on my way. Blogs could do this for me (and still can), and they kept me plenty busy/overwhelmed as it was. Also, I was working as an in-house designer, so I didn’t need to be marketing myself very heavily either. (Plus, Twitter wasn’t this totally essential marketing tool back then.)

Now, 2008 would have been a good time for me to get on Twitter and network, since I was working on Flexible Web Design and needed to get my name out there more. But, 2008 was seriously the busiest year of my life. I was working a full-time job, writing a book, renovating my kitchen, setting up a nursery, moving/re-setting up my home office, preparing to become a first-time mom, and being pregnant and tired. Twitter would not have helped me accomplish any of these important tasks I had going on last year. So I didn’t do it. It’s as simple as that.

Now that the book is done and I’m working freelance, I have more time for Twitter as well as more need to use it. I’m going to keep my tweets mainly focused on professional things, stuff related to design, as a supplement to this blog. So I hope you’ll follow me. And I hope you’ll forgive me for taking so long to jump on the bandwagon.

Designing CSS Layouts for the Flexible Web (PDF, 5.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.

There’s a little CSS in the presentation, but if you want more in-depth tutorials on the techniques alluded to in the presentation, I’ve written up many of them on this blog:

• Foreground images that scale with the layout
• Hiding and revealing portions of images
• Creating sliding composite images
• Space images out to match text height

But, if $179 is still too steep for you, I’m giving away one free admission! To win, just post a comment saying what you most want to learn about  right now (in general, not necessarily a topic that is being covered tomorrow at the Summit). I’ll pick one commenter at random at 6 pm EDT tonight, so make sure you post your comment by then.

Nomensa is a web agency specializing in accessibility and usability. Their own site is a nice example of a liquid design, and I’ve had it bookmarked for a while, but I finally got a chance to check out the sites in their portfolio. There are dozens and dozens of them, and almost all of them are liquid. (They also have a few elastic ones, and a few fixed-width.) Unfortunately, Nomensa doesn’t provide links to all of their work, but only a select few as case studies. But, you can google the names of the non-case-study clients, and you’ll find that most of these sites are liquid as well.

Now, I grant you, many of the sites are not terribly stylish. But they still are really useful to look at to get ideas for how to handle content and layout in liquid layouts. You could easily use the same techniques they’re using with a bit more spit and polish added.

Here are a few of the most well done liquid sites from Nomensa’s portfolio:

Barcham Online

The header using seven images of tree foliage that expand and contract to fill the available space is very clever and attractive. Also check out the feature boxes on the home page and the thumbnail gallery under Our Trees. It’s notable that this is an e-commerce site, which you don’t often see liquid.

Broads Authority

I’m not in love with the overall look and feel of this site, but I appreciate the unique layout of the home page. The main image on the home page that has a text box below, which moves down as the text in the adjacent columns grows, revealing more of the image above, is very well done.

Preston City Council

Another unique home page layout and neat use of “variable cropping” on the main photo. Be sure to check out the Gallery under Get Involved, as well as all the little feature boxes and things on the inner pages.

Macmillan Cancer Support

This site is notable for the large amount of information that it organizes into liquid rounded corner boxes throughout the site, without everything becoming chaotic and unbalanced at different viewport widths.

Business Startup Community

Again, not a very attractive site, but I’m bookmarking it simply for the treatment of the three tabs on the inner sections of the site.

I’ll be sure to stop by Nomensa’s portfolio periodically to see what new work they are featuring and gather ideas for solving problems in my own work. I should have mentioned in my flexible web design inspiration post that a great place to find liquid and elastic sites is within the portfolios of agencies or designers who themselves have liquid or elastic sites. Nomensa is now on this list for me.

The inspiration for this tutorial came from the “Who we are” page on the Clearleft site. Try resizing the text—only the text, not the whole page—and notice how the photos move farther apart and closer together. They always stay aligned with the names they go with, and the overall height of the photo block never gets too far off the height of the block of text to the left. So, the design always appears balanced.

The images remain the same size but change their spacing as the text size changes.

I love this effect; it’s a very clever way to fill up the entire available space with images without having to actually scale the images. It’s basically another take on what I call sliding composite images. There are an unlimited number of ways to create sliding composite images—background positioning, absolute positioning, margins, etc—but I wanted to share one way to accomplish the particular effect shown on the Clearleft site. Luckily, it’s really quite simple.

Here’s my version of the effect. Try resizing your browser window and text size to see the flowers move farther apart and closer together.

And here’s how I did it…

The markup and images

I start with a definition list for the markup of the list of flowers beside the images. (You could also use an unordered list combined with headings, paragraphs, and/or spans. Use whatever makes the most sense, semantically, for your content.) The definition list is contained in its own div, which follows another div containing a few paragraphs of text. I’ve got them both in a wrapper div to prevent float drop.

<div id="wrapper">
	<div id="description">
		<h1>The amazing five-flowered vine</h1>
		...
	</div>
	<div id="flowers">
		<dl id="flowers-list">
			<dt><img src="images/flower1.png" ... id="flower1">Raspberry Lily</dt>
			<dd>Rare and exotic</dd>
			<dt><img src="images/flower2.png" ... id="flower2">Seaside Daisy</dt>
			<dd>A native of the North Carolina Atlantic coast</dd>
			<dt><img src="images/flower3.png" ... id="flower3">Orange Starflower</dt>
			<dd>Dimunitive but intensely colored and scented</dd>
			<dt><img src="images/flower4.png" ... id="flower4">Lagoon Pansy</dt>
			<dd>The largest of all native pansy breeds</dd>
			<dt><img src="images/flower5.png" ... id="flower5">Sunbeam Peony</dt>
			<dd>Pleasant to behold but poisonous to ingest</dd>
		</dl>
	</div>
</div>

I’ve used img elements in the HTML for two reasons: that’s how they did it on the Clearleft site, which I’m trying to emulate, and I think my images are content, not decoration, in this case. You could accomplish the same effect using background images, of course, if that made better sense for your particular content.

The CSS

To get the block of descriptive text sitting to the left of the list of flowers, I floated both divs.

#description {
	float: left;
	width: 44%;
	margin-right: 2%;
	}
#flowers {
	float: left;
	width: 53%;
	}

I wanted to create the appearance that my five flowers were all attached to a single stem, so as they changed in distance from each other they would still appear connected. I created an image of a stem with leaves and tiled this up and down the flowers div, 59 pixels away from the left side. I also added a border at the bottom of the flowers div in the same color as the stem to act as grass.

#flowers {
	float: left;
	width: 53%;
	border-bottom: 10px solid #6EAB23;
	background: url(images/stem.png) repeat-y 59px 0;
	}

If I wanted to get fancier, I could have created a background image of grass, applied this to the flowers div, and applied the repeating stem background image to the definition list inside the div instead. But this was just a demo!

I applied a hefty amount of left padding to the flowers definition list to keep its text from overlapping the stem background image, as well as create room for the where I would eventually move the individual flower images. I also zeroed out the default margin on the dl, dt, and dd elements, and added some bottom margin to the dd elements to space the text out and again make room for the flowers.

#flowers-list {
	margin: 0;
	padding-left: 220px;
	}
#flowers dt, #flowers dd {
	margin: 0;
	}
#flowers dd {
	margin-bottom: 1em;
	}

Now it was finally time to move the flowers into place using absolute positioning. I set position: relative on the flowers div so it would act as the point of reference for the individual flowers.

#flowers {
	position: relative;
	float: left;
	width: 53%;
	border-bottom: 10px solid #6EAB23;
	background: url(images/stem.png) repeat-y 59px 0;
	}
#flowers img {
	position: absolute;
	}

Now I just had to direct each flower to how far away from the left side of the div I wanted it to appear. This varied for each flower based on whether I wanted it to appear on the left or ride side of the stem, as well as on the width of the flower image. Here are the values I used.

#flower1, #flower3, #flower4 {
	left: 101px;
	}
#flower2 {
	left: 0;
	}
#flower5 {
	left: 31px;
	}

Because I didn’t change any of the top or bottom values for the flower images, just their left values, each stays aligned with its accompanying name and description along its top edge, no matter how large or small the text size or window size is.

The flowers vary in their spacing along the height of the stem in order to stay aligned with the text.

Check out the finished demo again and play around with it. The block of text on the left always stays roughly the same height as the list of flowers on the right, so this is a great example of how you can make your web page flexible and still keep the design balanced at different font sizes and window sizes. Here, I’ve used a liquid width on the overall page, as on the Clearleft site, simply because that makes the difference in the spacing of the images more dramatic and easy to see for demo purposes. But you could just as easily use this effect on a fixed-width or elastic wrapper in order to keep images aligned with variable text sizes. You could also use this effect horizontally instead of vertically to fill up the entire width of a div or window with fixed-width images, giving you more leeway to make the overall width flexible.

There’s really no fancy or complicated CSS in use here, but it produces a fun effect that makes your design a lot more adaptable to the myriad of user configurations on the web.

A note about IE 6

I know that there are some problems with my demo page in IE 6—lack of support for alpha-transparent PNGs and float drop at small window sizes due to auto-expansion of divs to fit large content—but they’re not related to the actual effect that this tutorial sets out to teach, so I’ve chosen not to include their fixes in this tutorial. In your own pages using this effect, you may never run into these problems—or you may run into more. But the CSS for the effect itself doesn’t require any tweaking for IE 6.