CSS effect: space images out to match text height

Posted by & filed under Tutorials.

I’ve been on my soapbox a lot lately, so I decided it was time to step down for a bit and do a nice, non-controversial CSS tutorial. Wouldn’t you agree?

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.

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.
(more…)

Nicole Sullivan speaking about OOCSS at the CSS Summit

Posted by & filed under Announcements.

The CSS Summit on July 18 now has its final speaker: Nicole Sullivan! She’ll be speaking about Object Oriented CSS (OOCSS), a topic she first addressed at Web Directions North and which is getting a lot of praise and attention. I personally am really excited to see her presentation and learn more about OOCSS.

Registration for The CSS Summit is still just $139 for an individual and $439 for a meeting room (meaning, you can get a bunch of people together in one place and all attend the conference) through July 3. Use the code CSSZOEMG when registering to get $25 off. A percentage of the proceeds will go to the Children’s Organ Transplant Association.

Why browser zoom shouldn’t kill flexible layouts

Posted by & filed under Articles.

Now that all the major browsers include the ability to zoom the entire page layout, rather than just increase text size, are liquid and elastic layouts obsolete? Can’t we just use fixed-width layouts and let the user zoom them if needed? The answer to that question depends on whether browser zoom solves all of the same problems than liquid and elastic layouts solve, and I don’t think it does.

Don’t get me wrong—it’s great that browsers have added this zoom ability. It’s yet another tool to give users more control to view web pages in a way that is most easy and enjoyable for them. But liquid and elastic layouts still offer a lot of benefits, as does plain old text resizing. Let’s go through the flexible layout benefits one by one and see if browser zooming on fixed-width layouts can deliver just as well.
(more…)

Speaking, near and far

Posted by & filed under Announcements.

I have a few new speaking engagements to tell you about.

First, I’m participating in the “virtual” conference called The CSS Summit on July 18. Since this conference is entirely online, everyone from across the globe can attend. There are some great speakers lined up. I’ll be giving a very similar talk as the one I did at the most recent Voices That Matter: Web Design Conference, so if you’ve downloaded those slides and now want the notes and audio to go with them, this is your chance!

Registration for The CSS Summit is just 139 bucks for an individual and 439 for a meeting room. Use the code CSSZOEMG when registering to get $25 off. A percentage of the proceeds from every Summit will go to charity, and this time around the recipient will be the Children’s Organ Transplant Association.

Much closer to home, I’m speaking at the UNC Webmasters meeting on June 4 (tomorrow!) in Chapel Hill, NC. If you’re affiliated with UNC, please stop by and introduce yourself! Again, it’s a similar presentation to the one I did at Voices That Matter, but much more informal and Q&A oriented.

Finally, I’ll be speaking at a Carolina Adobe User Group meeting later this month. I’ll have more details about that soon.