TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

SxSW Panel Notes

March 17, 2005

A few follow-ups from the panels I was involved in at SxSW 2005.

Another great year of South by Southwest has come and gone. More great people, more great conversations, and more great barbecue.

“More Hi-Fi Design with CSS” was the first panel I was involved with. Christopher Schmitt, Molly Holzschlag, Dan Cederholm, Douglas Bowman and myself spent an hour talking about the sort of things you’d expect us to talk about. (It has been documented elsewhere, I should add.) Chris kicked the panel off with the introductions, and then turned it over to the rest of us.

Molly was a new addition to last year’s similar lineup, and started things nicely with a foundation talk about the basics of structure and semantics, and how that sets the stage for our Hi Fi stylin’.

Dan continued with a look at what he calls “Bulletproof CSS”, which consists of making sure your design continues to work under circumstances like missing images, missing CSS, and different font sizes.

My own portion of the presentation was a look at how CSS fits into the typical designer’s workflow. Things like the disparity between code and GUI, browser bugs, and a few final pointers for design concepts to further study.

Doug then examined the technique he never got around to presenting at last year’s SxSW, and concluded with a story from the Wired News redesign feedback a few years ago.

What was particularly interesting about the panel this year was what happened despite the lack of collaboration ahead of time. With only basic outlines of what each other was planning on discussing, there was some nice synergy happening between sub-points in all of our presentations.

Now, for what those of you who were there are likely hoping I’d get to — the slides I used. I need to load this link with a couple of disclaimers. The presentation was built for a controlled environment, so instead of tailoring it for the general web audience, it is much more effective within that controlled environment. The download is large because the files are large. It may be slow because it’s meant to run on my computer. It won’t render in anything but top-notch browsers. It’s meant to be contained within a 1024x768 window, no shorter or wider. It’s too slow in Firefox on a Powerbook, it had to be presented in Safari. (This may not hold true for a Pentium 4, but I have no way of knowing).

So, with that out of the way, here it is. There’s also a 1.3MB ZIP file of the entire thing. Please link to this article, instead of directly to either the slideshow or the ZIP file — it’s important to have the context of the disclaimers before viewing in any old web browser. (not to mention the bandwidth issue).

To move back and forth between slides, use Accesskeys z and x. Or, move the mouse down toward the bottom of the center of the window for a pop-up menu. I’ll let you figure out what’s going on there, the source tells all. I just want to send a big thanks to Jeremy Keith for building the initial script that I modified to pull this one together.

The second panel, “Web Design 2010”, was more of a group conversation than a presentation. John Allsopp played the role of power moderator (eschewing the puny on-stage mics for a wireless that let him get down and gesticulate at the same level as the audience, demonstrating what Doug and Joe and I knew from our experience at WE04: he’s one of the most entertaining speakers in the industry). The rest of the panel consisted of myself, Jon Hicks, Eris Free, and the omnipresent Mr. Bowman.

We tackled six questions, discussing amongst ourselves and the audience (and disagreeing with each other quite often too). Our pre-discussion for this panel was largely conducted on a WordPress weblog I set up for the purpose, which was opened to the audience for questions and is now open to everyone for reading and continued discussion. (The URI is now permanent, so link away).

In all, the two panels I participated in were just the tiniest slice of a fraction of the entire event. It was that good. Maybe I’ll get a chance to write up the rest of the event. Maybe.

geeky says:
March 17, 01h

I saw both panels you were in, and I enjoyed them both. Web Design 2010 was one of my favorites of the whole conference. You guys did a great job, and it was nice to finally put a face with the website :)

March 17, 01h

I had heard about your presentation being cool, but I couldn’t have imagined anything like that! Absolutely beautiful, I must say.

I wanted to go to SXSW, I am even in Austin, however how am I supposed to get there? I can’t drive, and being sick certainly doesn’t help.

Wow. No wonder you’re famous.

March 17, 03h

“As you said, graphic designers think visually while CSS is a language.”

True, but this exposes the difference between web designers and graphic designers �” web designers think visually but can translate their thoughts into code. Graphic designers want software to do it for them.

Breton Slivka says:
March 17, 11h

JD, I believe adobe imageready cs already does something very similar to what you describe. I think the main problem is that I don’t think it is “semantic” as such. You still end up with a website which is essentially just a sliced up image.

A good CSS gui design tool would need to take a drastically different approach to truly be successful, I think.

JD says:
March 17, 12h

I am really annoyed with the fact that I could not attend SXSW. :(

Btw, your presentation looked absolutely *beautiful*.

As you said, graphic designers think visually while CSS is a language. How about Macromedia expanding Fireworks so that once you design a layout in Fireworks, it will generate valid XHTML document using CSS for layout? [And the generated CSS will take care of including all the appropriate hacks for different browsers?] To specify layout, you first create slices like you normally do, and then you assign slices as various ‘div’s (and other semantic elements) and Fireworks does the rest. It is difficult but not impossible. Program may not be able to deal with all layout but even if it success rate for creating layout is 70% it will be great. What do you think?


March 18, 01h

What’s up with Eris’ name? Everybody is linking to her as “Eris Free”, which is her domain name. But her site says this:

Name: Eris L. Stassi

Hopkins says:
March 18, 02h

CSS and validation do seem to make up a large portion of the latest dreamweaver product, so I agree that its a shame fireworks doesn’t follow suite.

Tobias Bergius says:
March 18, 02h

Neat slide …
I had to launch Mozilla to get it working, for some reason, though. Firefox 1.0.2 didn’t like it.

March 18, 06h

I was only able to see the video clip: and the slide show you provided here.

I am curious what you had to say about design being a visual process and CSS a language and how it fits within the web design model of seperating presentation, content, and structure.

I am a graduate student teaching web design and I am faced with this very issue. How do you teach graphic designers web design? I can’t teach them to design with CSS because its not a visual design enviornment and WYSIWYG editors do not render CSS layouts correctly. So I will have to teach them to layout with tables and use visual properties that add presentation to their documents.

Its good to see these issues being address. Discussion of these models and concepts seem to be taboo within some web design circles, namely… the css-discuss mailing list by Eric Meyers, where any discussion other than how to technically achieve results is prohibited. So its refreshing to see designers talking about this now.

March 18, 12h

Awesome! While there was no way I could get to SXSW, this brings a few pieces that much closer.
To JD: The problem with a graphic tool generating markup is that it will generate the markup within the context of the graphic. This means that in the end, the final product will remain an image (and subject to the constraints of the image).

Perhaps some day, you can associate an XHTML document with an image, mark DIV areas (and associate them) and let it generate makrup based on this information. Of course, if such an application already did this, I think we would be seeing a lot more XHTML/CSS in the world.

Eris says:
March 20, 07h

Scott, I actually opted to go with “Eris Free” for the conference (its on my badge) because I didn’t think anyone would really recognize me as “Eris Stassi”.

John Y. says:
March 21, 10h

The hi-fi design panel was good stuff. I wish I could’ve been at the second one as well, but you conflicted with “Typography on the Web.” Stupid conflicts.

March 22, 09h

Thanks for the inspiration. You mentioned typography in the presentation. Since I wasn’t there, can you give some recommendations for resources on that topic?