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.

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 :)

“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.

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.

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?

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.

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.