Speaking of AEA, the good people at AIGA released another podcast interview with Jeffrey Zeldman. Rumor has it they’ll have one coming soon starring Our Man Stan, and there might even be another from yours truly. Grab hold of their podcast feed if you’re interested in any of that, or in hearing from other designers in the future.
(One week to go. Woo hoo!)
Update: Jason’s interview is now available.
Quite suddenly, workshops and seminars seem to be all the rage, don’t they? The Carson Workshops schedule keeps growing, and the shows selling out. They recently announced a Web applications summit in London that frankly sounds amazing. UIE recently announced a six-city roadshow, and seats are already selling. Clear:left is sponsoring a one-day show on Ajax programming starring the indominitable Jeremy Keith. And then of course there’s my personal favorite, An Event Apart, which sold out six weeks before the Philadelphia event (which is, yikes, now only a week away!) and is soon to visit other cities. Keep an eye on the AEA RSS feed to get the latest on those cities, by the way.
Look over all the workshops’ line-ups, and you see a lot of big names and smart people standing on stages (or at least in front of rooms) talking about some truly important and interesting topics. A determined workshop-goer could run him- or herself quite ragged trying to catch even half the shows, given their geographic dispersion and temporal proximity. It’s almost a shame, because every one of them sounds really, really interesting. Have I said the word “interesting” enough times yet?
But really, the most interesting part to me is not that these seminars are being announced, but that they’re generating such strong interest—that they’re selling out. It’s another indicator, and a very clear one, that the industry is well and truly recovering.
Addendum: just to add a little bit more support to what I said, 37signals announced their overhauled Basecamp seminar, The Getting Real Workshop, and sold all fifty seats in twelve hours. Whoa.
After a lovely Sunday morning breakfast at the Farmers Market in Los Angeles, Kat, Carolyn, and I strolled through The Grove to check the sights and pick up a gift card for some friends. As we neared the center of the main drag, Carolyn suddenly pointed and shrieked delightedly, “Daddy!”
She was pointing directly at the large white logo in the middle of the silver façade of the Apple Store.
I’m thinking that maybe I need to spend a little less time on my PowerBook.
For those of you who’ve always wanted to hear me talk very quickly over a phone connection: AIGA has put up a podcast of me talking with Liz Danzico about design, code, and An Event Apart. At the end of last week, they published a similar interview clip of The Zeldman. There are more interview clips to come from each of us in the next three weeks, so keep an eye on the AIGA site or their feed.
Originally these weren’t quite podcasts because they weren’t part of a feed, and thus had no enclosure to download through your aggregator. AIGA has fixed that now, and you can grab the AIGA podcast feed via the Podcast directory page. Or, if you want, go to the previously-linked individual resource pages and download the MP3 files directly. Either one works for me.
This afternoon, I spotted the following sitting in a driving rain on a street corner half a block away from our house.
Uh…
During last week’s workshop in Chicago, I was asked to discuss Alex Robinson’s One True Layout. This presented a bit of a challenge, since the article and its contents are rather new. While I’ve read through it all and grasped the main points, I wasn’t entirely sure I grasped the nuances. For that matter, I’m still not entirely certain that I do. And I tend to be wary of speaking about things I don’t fully understand. Still, the audience was interested, so I took the plunge, figuring that I could stick to the bits I knew relatively well.
The Any Order Columns seem straightforward enough, once you get that it’s using margins to shift elements around. The Equal Height Columns aren’t really, perhaps more properly being called “Extremely Tall But Clipped Columns”, but they simulate the job well enough to count. And then there is the case of Vertical Grids, which I’m still pondering.
But as an illustration of why I say I’m not sure I grasp all the nuances, it was literally while presenting on this topic during the workshop that I hit on an extension of Any Order Columns (AOC) that allows for AOC to be used with columns of mixed width measures. It came in response to a question about that very thing. I’d been showing how to do AOC with columns sized with consistent units, like all with percentage widths or all with pixel widths. But, an attendee asked, what if you wanted to have one column with an em width and another with percentages?
Say, for example, you wanted the first and second blocks (to use the terminology from Alex’s examples) to be the center and right columns, respectively, and the third block as the leftmost column. Furthermore, suppose you want the left column to be 10em wide, the center column 40em wide with 1em ‘gutters’, and the right column to be 200 pixels wide. I’m using pixels because it’s a commonly-used unit, but if it makes you feel better, assume there are Flickr images there or something similar in that column.
All right. So we have to move the third block leftwards by 40em of center width, 2em of gutters, 10em of the space it will occupy, and 200 pixels of the rightmost column—the second block. That’s 52em + 200px, which is exactly the sort of thing CSS doesn’t allow for a variety of reasons, some more reasonable than others. IE/Win allows expressions, but only with a proprietary value syntax that nobody else supports. And it potentially could be done with JavaScript, which would require pulling some font-size information in order to compute various em widths.
Or… we could relatively position a float, using the float’s margin to handle one of the measures, and the relative positioning to handle the other. So you start like this:
#block3 {float: left; margin-left: -200px;}
That will get the third block to sit right on top of the second. That’s taken care of the 200 pixels, but what about getting it the rest of the way? Add the following:
#block3 {float: left; margin-left: -200px;
position: relative; left: -52em;}
This puts the third block right where we want it.
There’s one exception: IE5/Mac, which doesn’t pay attention to the relative positioning when the element’s been floated. So far as I’ve been able to discern, this is the one reduction of browser support from Alex’s original AOC.
With a little bit of math, you can make this work so long as the elements to the left of the shifted column use no more than three different units in their sizing. To handle two types of units, you could do something like this:
#block1, #block2, #block3 {float: left;}
#block1 {width: 35em; padding: 0 20px; margin-left: 9em;}
#block2 {width: 12em; padding: 0 15px 1em 5px;}
#block3 {width: 8em; padding: 0 0.5em;
margin-left: -60px; position: relative; left: -56em;}
(code example with browser workarounds)
This approach would permit the ability to drop in pixel-sized decorations, like separators or drop shadows or whatever, while preserving em-width column contents in order to scale with font sizes.
Now suppose you have a mixture of all three unit types, which is a case I didn’t tackle in the workshop. I might even have said it wasn’t possible to handle, but if I did say that, I was wrong. With the addition of a negative right margin on the second column, we can handle all three units, as seen here:
#block1, #block2, #block3 {float: left;}
#block1 {width: 50%; margin-left: 11em; margin-right: 1em;}
#block2 {width: 200px; margin-right: -200px;}
#block3 {width: 10em; margin-left: -50%;
position: relative; left: -12em;}
(code example with browser workarounds)
Note that I’m not saying that you’d necessarily want to mix fixed-width columns with fluid-width columns. Doing so is a potentially volatile mix when using CSS-driven design, and this technique doesn’t make it any more or less volatile. If you want to do it, though, this is a powerful approach.
In the examples to which I pointed, I came across some intermittent appearances of the double-margin float bug in IE5.5/Win, though oddly not in IE6/Win. I didn’t try to work around these inconsistencies beyond using the display: inline hack from Alex’s original examples, but I’m sure they’re surmountable. It’s probably as good a case as any for using conditional comments to serve up fixes to pre-IE6 versions of IE/Win.
You may have noticed that, if the browser window is reduced in width, the columns start dropping in the two-unit example. That’s something that could likely be handled with a sufficiently wide container, although doing that risks the dread horizontal scrollbar. You’d get the same scrollbar with either older CSS layout approaches or with table-driven design, though.
I suspect there are even more combinations and nuances to be found in the AOC technique, and still more in the column and grid ideas Alex has laid out. Hopefully I’ve made a good start here. For any omissions or inaccuracies there may have been in my Chicago presentation, I hope the attendees and organizers will accept my apologies.
Recently, Alex Robinson published an article titled “In Search of the One True Layout“, and it basically turns the conventional wisdom about what CSS layouts can and can’t accomplish on its ear.
One of the article’s primary aims is nothing less than enabling multi-column layout using no extra markup (beyond a div to enclose each column’s content) and allowing the columns to be in any document source order. Impossible? No. It appears to have done just that in all current browsers, and several non-current browsers as well.
Assuming this technique stands up over time, and I see little to no reason why it would not, this is a truly major development (and that’s an understatement). There is a problem in recent versions of Gecko-based browsers which you can read about in Bugzilla entry 312777. The problem has been fixed in very recent builds, but the question is whether or not the fix will make it into Firefox 1.5. In comment 40 of that entry, one of the engineers indicates that having web developers put in their thoughts on the importance of this fix would be welcome.
Now, we don’t want to create a stampede here. However, if you have a Bugzilla account and your assessment of the importance of the bug varies from the comments posted, or you have something new to add to the comments, then by all means contribute.
Getting back to Alex’s article, it also tackles the desire for equal-height columns in a tableless design environment. Then, just to pile it on, Alex knocks out a way to create vertical grids without tables. Later on, he ties it all together into one neat, shiny package.
So that’s basically killing three long-standing frustrations of standards-oriented design with one stone. Any one of them is notable in its own right; put the three together, and I’m pretty much emerald green with envy over here. It might just be time for me to consider hanging up my spurs, folks, ’cause it looks like there’s a new sheriff in town. And he’s packin’.