Skip to: Navigation | Content | Sidebar | Footer


Full Archives

IE Slowdown = Standardization

March 31

Think about it.

What makes CSS development so aggravating? Inconsistency across the browsers.

Which are the worst offenders? Older browsers, and Internet Explorer.

What's happening in today's browser market? Absolutely everything is making leaps and bounds in improving its CSS support, except Internet Explorer.

The install base is slowly but steadily moving away from 5.0 browsers. One day we'll reach the point where we don't have to officially support them anymore, and can give them the NN4 treatment. Not today, not tomorrow, maybe not in the next 2 years. But it's coming.

Given every other browser's improvement, this is what we'll enjoy one day (assuming production-site-ready CSS, and not bleeding edge)—testing against the standard, and testing against IE. That's two, instead of today's 5, 8, 12, or 23.

Internet Explorer's slowdown is a nuisance for sure, but it's hardly tragic. Thanks to progressive enhancement and MOSe, the web will become segregated between the haves, who get to experience the high-end visual effects and extra usability tweaks, and the have-nots who get plain vanilla content with a far simpler style.

It's a shame that the latter category is so large, but welcome to the next ten years.

Permalink › | 27 comments

Standards-Based Education

March 26

In a former coal town on the western Canadian coast, nestled in a protected harbour which makes the surrounding area a boater's paradise, inaccessible from mainland North America save for an hour and a half ferry ride, I received one of the most encouraging signs in a while that standards-based web design is really catching on.

I had the absolute pleasure of spending a leisurely hour ferrying across the Georgia Straight one morning earlier this week to Malaspina University-College on Vancouver Island, then running an afternoon workshop with Jim Rutherford's Digital Media class. And I'll say this about the experience—it's positively uplifting to hear that there are instructors out there who have shelved old-school design methods in favour of standards-based design, and are seeing their students respond in an overwhelmingly positive way.

New this year, the course syllabus has started to heavily promote standards-based design, and as the semester draws to a close it's proved so successful that a complete 3-credit web standards class is in the works for next year, as well as a heavy bias in this direction across the rest of the course.

This is just fantastic news. I haven't had my finger on education's pulse in a while but I mistakenly assumed it's as bad out there as you'd expect. Instead we have shining examples like Malaspina leading the way, and molding their students for a better web of tomorrow.

It was an honour to go and talk to a class who I suspect could have shown me a few new CSS tricks. (And look at their portfolios, wow.)

Permalink › | no comments

March 23
too many OS X windows

Those aren't Post-Its. That's Simon Willison's Exposé setup. God bless OS X.

Permalink › | 22 comments

The Price of Theft

March 19

The relative ease of stealing someone else's CSS-based design has been at the top of my radar over the past few weeks. I really don't have the time to write the analysis I'd like to, but suffice it to say that nobody wants this issue to go away more than me, and no one realizes yet how much of a problem this is going to become over the next few months/years.

What I want to draw your attention to is that, due to a few reasons revolving around re-use of his design, Andy Budd has asked me to remove his popular 'sub:lime' design from the CSS Zen Garden, the former #046. I have complied.

Andy's feelings surrounding re-use of his work have been voiced by more than one contributor, and while many are open about allowing others to modify their base design, some are not. There definitely seems to be a price to the success we're enjoying, and because there are so many contributors, each one is going to have a different attitude toward paying that price. Which is to be expected, but I have no idea how to cope when I'm caught squarely in the middle.

I'm not at all happy that this was necessary though. It's the start of a slippery slope, and it's going to cause me to re-write submission requirements yet again. I've been very sensitive toward each designer's needs throughout all this, but I now understand quite a bit better why contest organizers and media promoters require participants to sign waivers.

There's a balance here, but I'm having trouble finding it. The Garden has to be open, which means a small percentage of bad eggs will abuse that openness. The designer's rights have to be protected, but I don't think it's quite fair to the rest of us for one to ride the success for a while and back out when it gets messy.

Lest we all walk away from this with a bitter taste in our mouths, I'd like to note that while I am incredibly disappointed in those re-using his work in commercial situations, I'm not angry at Andy himself. He has made a decision for his own work that, given the terms when he submitted, I guess he's allowed to make.

But I would like to encourage him and others to realize three things. A more restrictive license won't stop any of this from happening, since those who set out to rip off others' work will do it regardless of copyright. And running away from the problem isn't the solution, because when you're producing design work, it will get ripped off sooner or later. Trying to hide it under lock and key deprives the rightful audience, it takes money out of your pocket (how can you make a living off of design work that nobody sees?) and it leads to the scary groupthink of the music industry. A slippery slope indeed.

Finally, the group of people seeing a design who then decide to steal it are really rather small. Don't be fooled by the blind spot—for every 1 person who steals your work, 15 or 90 or 700 others have seen it and been inspired to create new and fresh work of their own. You may not ever hear from them, but they're out there, and they're the ones who suffer for it.

Don't let the bastards bring you down. They can steal one of your works, but they can't steal your soul. Keep on creating because there's only one you, and the world is dimmer without your creative energy.

Permalink › | no comments

Hi-Fi Design with CSS

March 18

And at last, the transcript of Monday's panel from SXSW 2004. Enjoy!

See, the way I see it, CSS is about font control. You can manipulate things like your leading, text color, and font face. That's about all it gets you. Well... The old school method of thinking (old school being as late as last year for some, though I'm thinking more of 1998-era methods) was that CSS was useful for typography, and that's about it. I was guilty of that mindset myself for years. In fact, it was embarrassingly recent that I realized that hey, you know, this stuff can do a whole lot more. I'm a graphic designer, image is important to me. I need things to look just right . I'd been hacking with tables and spacer GIFs for years, so I knew the mechanisms of that inside out, and all of us who had to put up with that way of building earned a badge of honour as far as I'm concerned. But I also think it's the finality of those methods that's holding the web of today back. See, once you get comfortable in a way of thinking, you rely on it. I knew how to build a complex set of tables to hold a site together across all the popular browsers; I had no idea how to achieve the same in CSS for the longest time. That was a stumbling block for me, because when you have a deadline you go with what you know. And that's going to keep holding back those learning CSS. But let me tell you, once you get over that hump, it's pretty cool stuff. There's no question about it, this is the future of web design. I'm not going to bother going into a huge list of points about why you should use it, plenty of others can and will do the convincing for you. Suffice it to say it's becoming more common on large commercial sites, and the visual appeal of the new work being built in CSS these days is unrivaled. But that's today. The problem I saw in 2003 was that we really didn't have many example sites. A few major commercial sites like ESPN.com and Wired.com (thanks to Doug, of course) had taken the plunge, and this was absoluetely great for business examples. And they were both well-designed, but they weren't the sort of visually inspiring artisitic free-form sort of work that designers could really latch on to. Something to realize about us freaky artist types is that when we're looking for inspiration, we really don't care about things like usability and successful business targets and fast download times, and all the sorts of things you just HAVE to do when building commercial sites. That's work. We want play! And when it came to CSS, there wasn't much play around at the time. So I got to thinking. What if there were a site that did all that, and demonstrated the flexibility of CSS, and also highlighted the benefits of using it, things like accessibility and degradability and so on? And, you know, what if, by the same token, it were to be approached as a collaborative effort so it's not just one designer's ego-stroking, but a community effort that displayed the multiple takes on a single source document by a bunch of talented people? Well, we all know what happened then. Enter the Zen Garden . I've been maintaining this site for almost a year now, and I've seen some phenomenal design work added. The basic idea here, of course, is that I've built a very simply marked-up XHTML document and that every submitter has used this exact same file as the source code, and contributed only a CSS file with a set of images to radically change the design. Take a look through these next examples—[1] [2] [3] [4]—and keep in mind that the only thing changing between each design is the CSS. I guarantee that's all that's changing too, because I've made it physically impossible for each submitter to alter the XHTML. Let's think about this for a second. These examples are all using the same base XHTML. And because I did most of the legwork when building that markup last year, every single one of these designs, and the other 200 hundred odd on the site, are highly accessible. They work just fine in older browsers and mobile devices and some screen readers because the presentational layer, that is, the CSS and images that go along with it, it's not being served up to devices that can't handle that. All they see is unstyled markup . What you're seeing here is of course, is the bare bones XHTML without any CSS applied. It's ugly. No one wants to look at this for very long. Thanks to the plethora of designs on the Garden, we don't have to. What's really struck me about some of the work being submitted is the wild variation between individual approaches. It's inevitable that when you ask two designers to submit their interpretations of a single theme, you'll get four or five responses. In this case that's more like hundreds and hundreds of responses, but you get what I mean. There are a couple I'm particularly fond of, but of course my tastes vary as much as anyone's—what's nice is that there are so many to choose from. Not So Minimal, Dan Rubin (Shared anecdote about pushing minimalism, process for improving Dan's [beautiful, but too minimal] original design) Door to My Garden, Patrick Lauke (oh man, that's nice. Interesting effect - fixed position background.) Blood Lust, one of mine (Want to clear the air about this one. I like it, most don't, went for Futurist style/patterned GIF dithering... it does it for me) Maya, Bernd Willenberg (oh, you haven't seen this one yet have you? Sneak preview! See? You got your money's worth) (further note: will have this one added soon) This is Cereal, Shaun Inman (great theme, well-executed, and cool menus [which won't work in IE of course]) Oceans Apart, Ryan Sims (oh, how I wish this were one of mine. wow.) So on that note, here's what I want you to take away from this. If you're a designer who hasn't explored advanced CSS yet for one reason or another, do! The world's moving in this direction, and it makes for happy clients. You might be surprised at how much quicker a site can come together. If you're a designer just learning how to build with CSS now, don't worry. It gets easier. It's a tricky thing to learn, but once you have it down, the days spent cursing browsers that don't cooperate get fewer and far between. I promise! If you're a designer who's been using it for a while, uh, where's your Zen Garden design, huh? I'm waiting. If you're a company working with a designer who doesn't use CSS, ask them to start! If you're a company working with a designer who does CSS, you're probably not paying them enough. (Just kidding. Or am I?) Anyway. The benefits of using CSS are being proven time and again. It's a great tool in a designer's toolbox, it's available now, and once more start getting their mind around it, we're going to see some more amazing work. Can't wait to see the Zen Garden this time next year. ]]>

Permalink › | 31 comments

CSS: The Good, the Bad, the Ugly

March 15

I took pretty aggressive notes during the panel that came after mine. Enjoy!

(You can tell I was paying more attention to the two people who were talking about things I hadn't heard much about before; less notes from their portions. Both were very good.)

Tantek Çelik Good CSS: standards Bad CSS: abuses, misuses, amazing screwups (tables poorly mixed with css) Ugly CSS: necessary: hacks, workarounds, wishes they never existed CSS2.1 is now a W3C Candidate Recommendation: this is big news. CSS2? forget it. 2.1 incorporates changes, errata, adds the colour orange. CSS2.1 reflects reality of current implementations CSS validator updates, updates for validating against CSS3 coming up: dozen CSS3 modules, and as they get published, pieces are being implemented Tantek: I'm best known for opening Pandora's box for CSS hacks (thanks to the Box Model Hack). It was necessary, had no idea it would propogate as far as it did. Philosophy: avoid hacks if at all possible. Problem is that it builds a mystical voodoo magic around code. Good for movies, not good for work/tech. (DS: Good point.) Given that, if you can't avoid them, the fewer you can use the better. (gave examples) Further hacks are from content, the better. Hacks in CSS, they come and go—in markup, they're there forever. ( ie. they belong in the CSS, not the markup, if you have to use them) Idea: Build content clean, build CSS clean, import separate hack stylesheet (isolate problems today, remove them tomorrow when they're not needed) Should have known better, but despite it all, introduced new hacks between last year's SXSW and this year - IE5Win. SprintPCS used it 40 days after introduction. Incredible. (DS: band pass , I think?) Eric Meyer Here to point out errors that people fall victim to, but to help (not to make you feel bad!) (explained favelets that he'd later use, ran through a couple—turning on borders for tables, inline style, un-ALTed images, and font tags among others, to visually demonstrate bad markup) (DS: clever idea.) Showed LockerGnome redesign. Highlighted tables, missing alt text overuse of classes. Ouch Showed new working draft , ran bookmarklets, much better job. Showed WWW Conference. Not created by W3C, created by committee. been doing it for a decade. Turned on tables—plenty of them. Turned on alt highlighting—not many ALT attributes BAD alt text on some elements Some font elements. bold element, inside font element, inside inline style element. Yikes. doesn't come close to validating didn't bring it up to laugh at them, "ha ha, what a bunch of jerks" showed difference between old one and new quick revision ny himself—page weight dropped 60% (had to admit: bashing low-hanging fruit) debunked a few arguments—code is not religion. most important thing is that it's about the content. Doing it this way allows good accessibility to more devices. Douglas Bowman Image replacement - in the beginning, it was good. We all believed it was good. (listed benefits) Shows original FIR example, explains origins of FIR (Fahrner) View source, simple h2 element and span Why not use images? Listed reasons Downfall: inaccessible to certain screen readers. Can't count on display: none; Alternatives: Phark , Gilder/Levin (touched on CSS on, images off, showed example) Experimental techniques good, push web dev forward. Keeps W3C on its toes, feedback loop for screenreader manufacturers, want it to work. CSS3 has a good new method. Generated content. New 'reader' media type (thanks Joe ) Avoid use of original FIR—officially deprecated as of today Keep in mind appropriateness Inspiration, or RipOffation? Discussing ease of CSS ripoffs, viewing source + it's how we learn + view source, shows you how to build for the web, want it to continue - Design theft becoming increasing problem - all design in one file, you grab that, you're set. Showed examples Ran out of time; didn't get to discuss dual hover method. Look for it on stopdesign.com Brian Alvey publishing system (SiliconAlley maybe?) in 1997—used WYSIWYG control, basically using Word on a web page, nice. source produced is kind of crappy IE had control all along Mozilla just caught up, now adds its own tool. if you're in IE-based one, it adds garbage markup when page is sent to a server, it's easy to strip out and convert something Mozilla's handling is a nightmare. Span span span. Who's building a CMS on these tools that spits out valid markup? Not many. A few. They're going to heaven. listing different types of controls (Java-based best, but worse to load), Flash doesn't count (not truly WYSIWYG) easier to use other people's - if you know enough you can customize them Kimberly Blessing Met Tantek through W3C group, who wondered what the hell is AOL doing here? many web developers in AOL, representing what we all do with CSS target latest and greatest, but have to worry about user with Mac OS 9 on a version of AOL they no longer support. to support that wide list, you need to use hacks interested in moving forward examples: different types of search results are displayed with different styles (cited Zen Garden, whoo-hoo) walked through marking up a featured piece of content (simple: an h3, an img, a few p's, and some ul + li combos) showed a grid, placement of blocks of content not sure I understand it, but it looks very cool, and totally database-driven showed different layouts given the CMS, all CSS-driven flexible design given different types of content/features ]]>

Permalink › | 11 comments

SXSW 2004

March 13

To spare those not here this year, I'll contain my entire SXSW experience in this post and just keep updating it. Chronological, with the most recent events up top. I expect it to get lengthy and full of photos, so you'll have to pardon the cut, but I'm sure you know what to do.

I feel so blog.

Thursday Officially back at work. Pictures are forthcoming, if and when I ever get time to figure out how to format them. This will be the last update to this post in lieu of those. A list of people I met. Many are doing it, so what's one more? If you're not on here and I had a conversation with you, whoops! Let me know. Adam Greenfield Alex Bischoff Anders Pearson Anil Dash Anitra Pavka Brian Alvey Christopher Schmitt Cory Doctorow D. Keith Robinson Dan Cederholm Doug Bowman Eric Meyer Ethan Marcotte Heather Hesketh Ian Lloyd James Craig James McNally Jason Fried Jay Allen Jeff Veen Jeremy Flint Jish Mukerji John Halcyon Styn Joi Ito Josh Williams June Cohen Kevin Cheng Kimberly Blessing Lance Arthur Leonard Lin Matt Haughey Matt May Matt Mullenweg Michael Schmidt Molly Holzschlag Nick Bradbury Nick Finck Nikolai Nolan Paul Bausch Sam Ruby Simon Willison Stephen Grainer Steve Champeon Tantek Çelik Tom Chi Wendy Chisholm Wednesday Well, technically I'm writing this on Thursday due to a long plane ride and being far too tired to think about writing on the plane. Tuesday evening saw a bunch of people gather at the bar in the lobby of the Hilton, then break up into groups as we headed to a Mexican restaurant called 'Gueros' en masse. Being a local Texas boy, Matt had his car and drove us there, and later to Bruce Sterling's SXSW closer party. Plenty of highlights from the evening. Cliched by now, but there's a brand new mirror shot somewhere out there... (my own were blocked by a fuzzy hat, sadly) I met Cory , only because he thought I was Ev (who I suspect I bear a passing resemblance too, if [as it was] it's dark, and if [as I was] I'm wearing a Blogger T-shirt). Jay is the guy to hang around when the beer runs out. When you leave your iBook in someone else's hotel room, make sure they don't leave the party before you... Yesterday was a travelling day. Coffee with Molly in the morning, shared a cab to the airport (and ended up stiffing the driver of my earlier cab by 5 bucks due to circumstances beyond my conrol, though he was very gracious about it. That's Texas hospitality for you, what a treat). Combining cab rides and airport waiting, it took about 8 hours to get back. That would have been far worse if not for a cheerful and helpful United employee in Austin. Instead of being routed through Chicago again, she stuck me on a trip passing through Denver. Despite the one hour delay on the last leg of that trip, I still arrived in Vancouver 2 hours before scheduled landing time of the original plan, and from the sounds of it, at least 3 additional hours more than I would have been delayed going through Chicago. So I'm back, and it's good to be home. But it was so great to be in Austin. SXSW isn't a conference, it's a party. That's what it felt like; moving from one party to another every day for four days. Wandering down the street and meeting up with a group of people heading in one direction, taking off with them for a few hours and meeting yet another group heading in another direction, and hopping from event to event the whole time is really a wild experience. When you pack that many people who know or are aware of each other into such a confined space of a few city blocks, there's really no choice but to have one hell of a time. I'd love to know how this year's SXSW compared to past years, if any veterans want to share their thoughts. If this wasn't one of the best ever, I've been missing out big time. Tuesday 2:10pm —It's starting to wind down. A few have left already, and we're in the final stages of the panels. (sitting in Jonathan Abrams' keynote at the moment) Last night were the parties. The Death of WebMonkey party kicked off the night, which segued nicely into the Blogger party, which I left to grab some food with the OK/Cancel guys , who are even funnier in real life. Moved on to a continuation of the WebMonkey party in another venue, and ended the night way too late. WaSP meetup this morning bright and early thanks to Ian's way-too-early flight out, where I got a killer shot of Simon's prolific Exposé use. To be posted later, along with plenty of other photos (no way to concentrate on processing those at the moment, which explains the lack so far.) Monday 4:19pm —The panel is done! Load off my mind, though thanks to my excellent fellow panelists it was very well received. When talking to a crowd, my tendency is to digress a little too much; the notes format I used today was perfect for me, even though I wasn't convinced ahead of time it would work. In fact, my notes ended up being a mini-essay, so the chances of them showing up on here some time over the course of the next few days is rather good. Update on the past few days—awards ceremony led into the Fray Cafe, and I'm pretty darned sorry I missed that. Preparation for the panel trumped it unfortunately. Bright and early the four of us panelists wandered over to Chris and Dan's hotel for a quick head-to-head last minute discussion and a bite, over to the conference centre to speak, and when 10am rolled around it was all us. If anyone took notes, let me know and I'll link 'em up. Otherwise expect the afore-mentioned follow up in due time. Stuck around for Tantek, Eric, Doug, Brian Alvey and Kimberly Blessing . " CSS Design: The Good, the Bad, and the Ugly " went very well, and I ended up with a plethora of notes that, also, will be posted in due time. Somebody please tell me the Top Ten Rejected Panel Names is online somewhere! Lunch with Molly, Eric, and Chris at a great ol' Texas BBQ house. Coffee in the Hilton after, as mentioned below. Off to an interview at the moment, then the Death of WebMonkey party. Onwards! 2:47pm —Downtime. The last 24 hours have been very much a blur. But in a good way, of course. Somewhat of a summary, while I have the chance. Where did we leave off... after the moblog panel if I recall? So I tried to sit in on the 'Monetizing the Blogosphere' panel by the weblogsinc.com crew, but ended up ducking out to prepare. The cafe in the Hilton is proving quite the CSS geek hangout; met Tantek and Eric here on Saturday, been back three or four times since, and now we're hanging around in a post-panel lull. We being Chris, Doug, Dan, Eric and I. So the awards, you say? Yeah, about that. Wow. I'm not sure what can be said, I'm still a bit shocked. I walked home with Best of Show? What? Really? Me? Surreal. Very surreal. I'm sure my acceptance speech was glib, but it was unexpected and unprepared so I'll take this moment to thank God, my parents, the Academy, and Jill from makeup. Very honoured, very touched. I won Best Canadian Weblog at the Bloggies too. Very cool! Carole Guevin had to grab my arm and usher me into the trade show area to issue an acceptance speech since I wasn't even around at the time; whoops! I guess if a tech weblog like this one can win best in the country, that says something about the country itself eh? (gratuitous eh. Topical humour...) Sunday 9:40pm —Should be out celebrating, but self-imposed confinment to the hotel so I can Get The Damn Panel Finished before tomorrow morning has effectively clipped those wings. Celebrating why? Because the Zen Garden took Best Developer's Resource! And BEST OF SHOW! Pinch me. Tonight, we work. Tomorrow, we drink like men. 4:53pm —Rendezvous is a very cool thing . Caught one panel on Moblogging this morning. Not that it wasn't interesting stuff, but I managed to tune out and get some work done. Tried for a second one, but ditched it in favour of working on the panel presentation. More highlights of the day so far: lunch with Ian and Ethan , grabbing Jamba Juice with Dan , discussing CSS ripoffs with Doug , and now a moment of peace. SXSW Awards are tonight, followed by the Fray Cafe immediately afterward. I'm really looking forward to the latter. More later this evening. 11:35am —In Moblog Nation: You Can Take It With You until 12:30pm. Catch me on Rendezvous or email me if you want to get lunch then. 9:50am —Sitting in the hotel madly preparing what I should have been madly preparing at least a week ago. In the meantime, I forgot to post the notes from Veen's panel! There were three speakers and a moderator, but I found Veen himself most absorbing. This is only a fragment, but you get the idea. No surprises here, all good stuff. early web, as told to designers: forget typography, you can make it, you know, bold and italic. that's about it. images are pretty crap (low compression/color) take a square, 800x600, that's your screen. maybe veen doesn't care about the bad designers anymore, doesn't work with them old designers shaken out by the crash, new designers are making it now "Must be great Jeff, that you can do that" says the skeptic, wistfully business case: good design accessibility standards he works from wireframe, with designer, to bring it to browser designer: "we won't be able to get that menu to float, with good semantics" designer: "we're going to need captions for tables and images, you write them or I?" this is being spoken *by visual designers*?! they know/expect how differently they look different OS'es and browsers know about degradability (some joke about Netscape, missed it...) Taking things for granted that are very good things, very web-spirited Simple markup, easier to maintain, less cost to serve, work cross-platform work better in Google, more accessible for everyone on the web easy to make a business case for this doesn't care about accessibiltiy, cares about good design when good design is practiced like a craft, accessibility just comes out of it case studies: wired news, stop design question: what browsers? NN4? showed Wired with upgrade notice, that's a good way around it cinnamon.nl, showed skip nav link, tried opening in JAWS, no luck (network error) (DS: pronouncing WCAG as "wuh-kag" is really awkward) veen: sprintpcs.com—shown in NN4, some tables for layout how do you get from an old-school huge enterprise site, to where you need to be veen: most complete redesigns are disasters (disruptive to users, not on time) all for incremental design unless it's so bad you have to start from scratch chisholm: prioritize; start from the top, most important issues, then pick off low-hanging fruit 12:30am —I tried. I honestly did. When you're the only one with an iBook whipped out amongst a group of 11 people or more, you just can't get much writing done. Back at the hotel and finally have a chance to write up all this. There's absolutely no way I can even summarize today, let alone the experiences. For my own future record, here's a rough and skin-deep order: registration, wandering 6th alone, running into Bausch and Haughey , having breakfast at the Mexican greasy spoon, wandering to Kick , seeing familiar faces, wandering to the café in the Hilton and meeting the faces behind the names that I've been talking to for ages. I owe Ethan an Americano. Having lunch, discussing Atkins, hosting, and secret projects. Quick jaunt to the hotel to pick up le iBook. Mad dash back to catch Veen 's panel. IM'ing Ethan from two rows back. Meeting Molly . Getting on Anil 's case about MT 3.0. Getting answers! Getting drinks and appies with a lot of now-familar names and faces. Meeting even more at the combined css-discuss/WaSP/webdesign-l/whatever meetup. Moving to the SXSW welcoming party. I'm sorry, but the dancing girls and the Spanish accents and the serious thundering passion of what was supposed to be a cheeseball opening act made my night. Still laughing. Wandering to the Omni. No one there. Took the chance to catch up, but only for a bit; Nick Finck and the Clip 'N Seal guy and I ended up finishing the evening over Chinese food. Back in hotel. Here's just a big old list of some of the other cool people I've met so far, because it's impossible to keep track of when and how, and it probably won't matter at the end of the weekend anyway. The people are important, not the details. Jeff Veen , Molly Holzschlag , Nick Finck , D. Keith Robinson , Anil Dash , Ian Lloyd , Josh Williams , Carole Guevin , Brian Alvey , Jason Calacanis , Michael Schimdt , Adam Greenfield , Nick Finck , Simon Willison , Sam Ruby , Leonard Lin , James Craig , Christopher Schmitt , uh, and a whole lot more. <link rel="met"> indeed. Everyone is exactly as I imagined them. I have another 3 days here with these great people. Wow. Best $185,000CDN I ever spent. Saturday 3:30pm —Made it. At the panel, random chance had me sit down beside, straight from Aus, Ian Lloyd . What luck! 3:05pm —Running, running to catch Veen's panel. More soon. Things are finally starting to go right. 3:00pm —Recovered finally. Still on west coast time, so getting up at 10am here was early for me, but I'm falling behind. Ran to the conference center, spent about 10 minutes standing around feeling completely lost. Info booth? Thank you, tell me what the hell I'm doing please. Got it sorted after false starts and confusion (as if there's any other way). Grabbed a badge, so the next challenge was breakfast. Running on steam at this point, hadn't had a meal in 20 hours. Wandered 6th St/Ave., wasn't feeling the love. Bumped into Matt Haughey and Paul Bausch , found a greasy spoon Mexican eatery and got fed. Problem solved. I owe Matt a meal. ("Canadian money is no good here?" Who knew!?) Wandered down to the Kick game. Baseball with a big ass rubber ball I guess? Never really figured it out. Matt Mullenweg and Ethan Marcotte and I took off and met up with the CSS crew madly constructing their panels, of which I should have been a part due to my complete lack of preparation but wasn't due to my leaving the iBook back at the hotel. Saw Doug Bowman again, and met for the first time Eric Meyer , Tantek Çelik , Christopher Schmitt and Anitra Pavka . Had lunch with 'em all. Friday 2:00am, Austin —Here. Checked in. Going to bed. Adjusted for time, that makes 17 hours and a single meal all day. Does not bode well for attitude tomorrow. On the bright side, ran into some other folk attending and even managed to score a ride from the airport. Thanks Andrew and Allison ! 5:00pm, Chicago —For future reference: entirely inadequate amount of tray space for an iBook when the person in front of you reclines. In Chicago. Waiting for layover. Catching up. No wireless. Nothing much to do. Another update on the ground in Austin. You can't possibly imagine what I'd give for a Vancouver Airport restroom right about now. Not that they're that clean, but… 9:15am, Vancouver —I cleared customs. That's a good sign. I'm typing offline in the US Departures terminal in Vancouver at the moment. Wireless is available, but it's not free, and I'm already paying the company (Telus) for some of my residential services. Thanks, but no thanks. The trip takes me to Chicago this afternoon, where I change planes for Austin after a three hour layover. Which means the entire day is shot. There weren't many better options, either — when your choices are Chicago, Atlanta, or Seattle and Denver for layovers, you take what you can get. James Craig says it's going to rain all weekend. I live in Vancouver, the Seattle of Canada. This isn't going to be a problem. So far I've spent the past hour catching up on my news feeds and email. My new (old) find for this week: NetNewsWire . I finally bit the bullet and picked up a real aggregator, instead of relying on the blo.gs notification service. It served me well, but I won't be going back. The upshot to all this has been that I grabbed my feeds this morning before I left, and have enjoyed reading all of you offline. Cheap thrills. My long-standing problem with newsreaders has been synchronization; when you work on two computers, keeping track of what you've read over what you haven't makes it too much of a pain. When you're primarily using only a single system, problem solved. There are server-side aggregators that take care of that, but I never bothered. Off to get some real work done. Another update in Chicago. ]]>

Permalink › | no comments

CSS Problem-Solving

March 10

After spending an hour debugging CSS with Tim Bray this morning, it occurs to me that the most valuable skill to possess in the maddeningly complex minefield of today's browser landscape isn't, in fact, knowing which browsers do what to which properties. It's problem-solving.

Browsers are the wild card in CSS. If everything worked according to spec, the development process (once you've figured out the complexities of the box and float models) would be relatively straightforward. But we're not living in that perfect world, and most of the time what they do isn't quite so important as how you cope with what they actually do.

To that end, the CSS Crib Sheet was meant to aid the process of debugging, and it covers a few points, but I realized this morning that there are some tricks I use to diagnose a problem that don't show up on any resource guides. I figured I'd share.

Turn on borders.
One of the biggest problems I've faced is visualizing what exactly is happening, and why. Is that extra space a margin, or some padding? Is it the margin of the parent element, or the child? Is it even caused by either of the two elements, or something else? By applying an arbitrary bright-coloured and obvious border (#F00, #0F0, and #00F) to each element, parent and child(ren), the boxes reveal their constraints and spacing a lot more obviously. Background colours often help too.
Check your selectors.
Likewise, using the border trick or background colours to highlight the element you think you're working on can save a lot of frustration. Due to cascading and inheritance, your selector may not actually be applied properly. Do something to check when in doubt; make the element obvious by making it ugly. If the change doesn't take effect, then the selector is your cuplrit.
Adjust values.
Font size too small in Mozilla, but fine in IE? Bump it up a bit. Even the slightest bit helps. Going from 0.9em to 0.91em can make a world of difference. Similarily, adjusting margin and padding to wild values that you have no intention of keeping can often make a difference in how something renders, and frequently will squeeze out the root problem through process of elimination. You can always set them back after you've solved it.
Hide selective elements.
Speaking of process of elimination, how do you know that the element you're working with is the problem? Try hiding surrounding elements, and leaving parent elements (all the way up the chain, as far as the body itself if necessary) as unstyled as possible. Comment them out, don't delete them, because you'll need them later. Sometimes widths and heights and floats and margins and so on can interact in ways that you don't expect. Reduce and isolate the problem as much as you can, to make sure other elements aren't having a deleterious effect.
Get rid of unneeded CSS.
If you have dummy properties that aren't contributing to the net styling, comment 'em out. Remove all possible variables by reducing your declarations to the bare minimum needed for the effect you're trying to achieve. Sometimes things you wouldn't suspect will be at fault.
Set your margins to 0.
When in doubt, specifically set the margins of your element(s) to 0. You can't always rely on a browser's default values.
Validate.
Good lord, nothing is going to work if you have improperly nested and unclosed elements! Always make sure your (X)HTML is kosher before even starting to think about your styling.

These are but a few; there are more I'll write up as I use them. Feel free to comment with your own problem-solving techniques. (This could very well end up an offshoot resource the way the Crib Sheet did.)

Remember, the key is to highlight the behaviour. Why the browser is displaying a quirky behaviour doesn't always make sense, but if you can work around the problem just by quick testing, it doesn't necessarily have to.

Permalink › | 42 comments

Publishing, Coffee, Contracts

March 8

Welcome to mezzoblue expanded, a fresh Monday afternoon edition featuring commentary on items in the news that would have otherwise been relegated to sidebar status. (Because some days are more reflective than others.)

Craig Saila points to a lengthy but good read this morning by Vin Crosbie at Online Journalism Review which may be considered alarmist for the newspaper industry, but advocates practices have long been in use amongst the geek crowd. In particular, Vin outlines a personalization strategy for big media that makes a connection between declining sales over the past four decades and the ever-forward march of technology. Newspapers, he argues, haven't kept pace, especially given the variety of news outlets. Even the web isn't proving a saving grace as the readership numbers are fairly consistent with the dead tree versions. Younger generations are less inclined to read newspapers, and the web isn't drawing them in. So personalization is the solution. The more technically savvy figured this out long ago, and thanks to NetNewsWire and FeedDemon among others, we've had the tools to make it a reality. I used to check in with cnn.com, my local papers (or rather, their web equivalent) and a few other news sources daily. Used to, but I've since moved to more specialized news sources that align with my interests, and I'm not alone. Newspapers have always been content aggregators; the content is no longer behind lock and key, so alternative solutions are cropping up. More content becomes available for consumption every day thanks to RSS/Atom. A newspaper's role in this century is to bring this technology to the masses, or to die. § Coffee is the fuel that powers the web, as far as I'm concerned. In light of that, good news this morning— it's healthy , according to Italian dietician Chiara Trombetti. Anti-oxidants and tannin found in stronger brews are good for the heart and arteries, it's good for the liver, and of course the caffiene boosts circulation. So put a mug on as you work your way through the rest of this, and stock up on the teeth whitening strips, because if you take this advice to heart you're going to need them. § This is the punchline: The sales representative kindly agreed to remove the clause when I pointed out that it wasn't really sensible for us to 'mortgage' our company and all its intellectual property, and all its future, yet-to-be-created intellectual property, just to obtain telephone services worth under $500 a month. This is the post . Excerpted from Martin Ertl's new weblog Boilerplate , dedicted to "elegant drafting in contracts". § First it was Dan Cederholm's new ' Markup and Style Handbook ', and announced today were Eric Meyer's two new books. Forthcoming: a second edition to the O'Reilly-published " Cascading Style Sheets: The Definitive Guide ", and a sequel to the now-classic " Eric Meyer on CSS " titled, appropriately, "More Eric Meyer on CSS". Congratulations to the both of you, looking forward to all three. § Finally, a story from my weekend. So, can you explain to us, in layman's terms so that we might even understand, what it is exactly that you do? Well, gee Uncle C., I've been trying to that for years with only a limited degree of success, but here's an example that might work. Think about the billboards, brochures, TV commercials, and businesss signs that you see daily. Somebody has obviously been paid to create them, so try to imagine taking those principles, squishing the production into a little box, and delivering the whole package on a screen. But that's the first half. Now for another analogy: think about your car's dashboard. Somebody has spent a lot of time thinking about the various dials and controls, how they look, how they feel, and how easy they are to grab without taking your eyes off the road. I do that, but again, for things that only show up on screen. So, then, what exactly are you going to be talking about at this conference in Texas next week? Specifically, this technology called CSS which.... oh, hey, we're out of gravy. I'll be right back. § ]]>

Permalink › | 13 comments

A List Apart

March 5

My first article for A List Apart was published this morning. "CSS Sprites: Image Slicing's Kiss of Death" is an investigation of a new technique that has been formulating for the last six months or so.

The CSS Sprite method enables rollovers, buttons, and dynamic image maps on a simple HTML unordered list. By dropping all :link and :hover state images into a single image file, IE flicker can be avoided and download times should be quicker. Not to mention the time saved by not exporting a few dozen sliced images. Have a look, and feel free to discuss the article in the ALA forum.

Interestingly, it seems like my better ideas have about a six month incubation period. The Zen Garden began in late October, 2002, and launched in May of 2003. I extended Pixy's preload method for a set of style-switching buttons on mozilla.org in September last year (which were cut, obviously), but didn't quite put all the pieces together until just the past few weeks.

Two quick technical notes. First, before someone calls it out, the example image uses graphics from Super Mario Brothers. The original Nintendo Entertainment System used a completely different sprite mapping technique than the basic summary in the article, which saw all graphics broken down into 8 pixel by 8 pixel chunks. So the analogy doesn't stand up to close scrutiny, but ALA isn't exactly the place to discuss obsolete tile mapping systems...

Second, though it's obvious to most, I didn't make it that clear in the article that the advantage to this approach is that the containing block can be placed anywhere in your document flow that you'd place an inline item. Yesterday's post on positioning explains this a bit better.

Permalink › | no comments

Positioning and the Cascade

March 4

Two quick CSS tricks that I've been relying on more and more lately:

  1. Applying positioning to a parent element, to allow absolute positioning of a child element within the parent.
  2. Context-sensitive elements. Chaining classes by applying two or three or more to the highest parent element possible allows cascading down to deep child elements.
Positioning Something I've only recently wrapped my mind around is that if you position a parent element by using absolute or relative positioning, you can absolutely position any child elements from the edges of the parent. Too abstract? Try this: apply position: relative to a <div> , without supplying a top or left value. Then apply position: absolute; to the <p> s inside it, with top and left values. Sort of like this: #parent { position: relative; height: 200px; } #parent p.first { position: absolute; top: 20px; left: 200px; } #parent p.second { position: absolute; top: 40px; left: 150px; } Why's that useful? Instead of the <p> elements starting from the top left of the browser window, they start from the top left of the containing #parent . You get the benefits of absolute positioning with none of the mess of fixed elements. Especially useful for fixed-width pages that are centered. Like this one. Here's an example: position: absolute; top: 45px; left: 250px; font: 8px silkscreen, verdana, sans-serif; line-height: 2; position: absolute; top: 120px; left: 10px; font: normal italic 14px georgia, serif; text-transform: lowercase; position: absolute; top: 0; left: -100px; font: bold 36px helvetica, arial, sans-serif; color: #7895BD; line-height: 0.8; width: 100em; position: absolute; top: 20px; left: 30px; width: 120px; font: 9px verdana, sans-serif; line-height: 1.5; color: #324F70; More on this trick tomorrow. § Cascading This one is a bit harder to explain, but the basic mechanism works like this. You can apply a bunch of classes to a single element. The higher up the element is in the document tree, the more each class can control. By applying them to a top-level element like <body> , you give yourself a bunch of different ways to get at the elements contained within. (Ryan Carver explains it in a bit more detail .) <body class="weblog homePage blue"> Using this example code, you can reference deep elements with fairly simple selectors, and customize items based on which page they sit on. For example, let's say you change the blue class in the above code to red . One simple class change in the body tag, and you can change the colour of your entire site by referencing each child element: .red h1, .red h2 {color: red;} .red #sidebar {color: red;} Of course, if you don't want red, you can go green: .green h1, .green h2 {color: green;} .green #sidebar {color: green;} The power starts becoming apparent when you set up a style sheet with a bunch of variations like this, and changing between each is as easy as modifying a class. Similarily, we could hook into the weblog class and style pages that are specifically weblog content differently from those pages with, say, static or permanent classes. And we can combine both colour switching and page-sensitivity on the same site. There are really interesting implications from this, particularly from a code viewpoint. Instead of littering your source with inline scripts, a simple body class switch is all that's needed. By passing a few variables on to the page (and you can almost view each of these classes as variables, incidentally) you have some incredibly flexible control over how the page is rendered. Still exploring this one. More coming in the next few months as various projects launch. § ]]>

Permalink › | 37 comments

Transitional Layouts, Publicity

March 2

Lockergnome's regression, continuing the Zen Garden Notification Service, and hey, how about that, Dan Cederholm has a new book out.

Via Matt Mullenweg : You might recall the somewhat-simplistic design of our site before we dove head-first into Cascading Style Sheets. Despite its shortcomings and lack of finesse, the sucker worked - and we had few complaints. Pay attention, as we're about to tuck a tail between our collective legs... and trade in modern conveniences for compatibility. Lockergnome.com is about to become less confusing as it goes back to more a basic code structure. We're going to unbury the menus and options and chalk up the past few months to experience. (Source: Lockergnome ) While the wording leaves a lot of unanswered questions, one is led to believe that Mr. Pirillo has either a) decided to throw the new CSS-based Lockergnome design out the window for an older table-based solution for unclear 'compatibility' issues, or b) decided to throw the new fancy Lockergnome design out the window for a simpler site architecture. Speculation is meaningless until we see the results, and there's nothing wrong with adjusting site architecture to suit your needs. But if the first choice appears to be a valid option to the Lockergnome crew, may I humbly suggest a transitional (hybrid) layout that relies on a table for page layout, and CSS for the rest? Long-time readers shouldn't be surprised about this piece of advocacy: it's still about using what works, today. While there is almost nothing that can be done with tables that can't be done with CSS, possessing the simple knowledge that it's possible is not enough. Skills needed to produce these layouts come only after a significant time investment in learning the techniques, and sometimes that time isn't available. Standards are a continuum; everyone starts somewhere. How far you go is entirely up to you. § Continuuing the Zen Garden Notification Service, the following publications have featured screenshots of the following Zen Garden designs recently: § LinuxFormat (UK) — Feb 2004 edition "This is Cereal" — Shaun Inman PIXELmag (Aus.) — Jan. 2004 edition "mnemonic" — Dave Shea "zenlightenment" — Lance Leonard "prêt-à-porter" — Minz Meyer "HoriZental" — Clément Hardouin "First Summary" — Cornelia Lange "ZenGrounds" — Andrea Piernock "Postage Paid" — Mike Stenhouse "Entomology" — Jon Hicks "Dusk" — Jon Hicks CSS Praxis (Germany) "tranquille" — Dave Shea "sub:lime" — Andy Budd "si6" — Shaun Inman "Calm & Smooth" — Cornelia Lange "I Dream in Colour" — Jeff Bilen In other publishing news, the book I contributed to, Cascading Style Sheets: Separating Content from Presentation is at long last available to order. My promo copies showed up last night, and things are looking good. The bulk of the book was written by Owen Briggs , Steve Champeon , Eric Costello , and Matt Patterson . My part, and the part of a few other names you may recognize ( Dan Rubin , Mike Pick , and more) are smaller case studies, near the end of the book. I have yet to read the rest of it, but from all indications it appears to be a pretty comprehensive reference to working with CSS. § Hey, look what else is available for pre-order. § ]]>

Permalink › | no comments