Handcrafted CSS Workshop

On Monday I joined nearly a hundred web geeks in historic Salem for a full day of markup and style at the Handcrafted CSS Workshop, hosted by Dan Cederholm and Ethan Marcotte.

Dan and Ethan are both excellent writers with presentation skills to boot. So when I heard they were hosting a full-day workshop, I pounced on the opportunity.

The subject of the workshop was based on their recently published book, Handcrafted CSS. The concept of craftsmanship is an intriguing one, found in the Shaker design philosophy:

If something is both useful and necessary and you can recognize and eliminate what is not essential, then go ahead and make it as beautifully as you can. —Shaker Quotes

On perfection and compromise

This philosophy pervaded the workshop. Likewise, the book and accompanying videos encourage us to find the intersection of art and utility. If you didn’t make it to the workshop, I highly recommend picking up the video edition of the book. Dan expands on the bulletproof essentials of craftsmanship on the web, starting the video by stating,

Being a good craftsman on the web requires continually asking questions…

But continually asking questions isn’t something limited to web design. This is a remarkable trait of a perfectionist. Being curious and always asking the question, “what happens if…” is crucial to being able to predict and deal with worst-case scenarios. He also teaches that a good craftsman also understands and embraces compromise, which reminds me something Greg Storey once pointed out about Dan. A perfectionist knows when to bust out the duct tape and get the job done.

The workshop

The venue, the Hawthorne Hotel, was great. They provided us with breakfast, lunch, snacks, and sufficient coffee to tug along a room full of web folks all day. I enjoyed the format of the conference, which was similar to An Event Apart. Each session was buffered with ample time to mingle with attendee’s.

Some people mentioned the workshop could have been longer (i.e. 2 days), but I disagree, a full day was just right for me. My only suggestion would be to do it frequently, and as a road show. Though I’d be satiated by more frequent Markup & Style Society meetings, too.

I’ve read their books, and I’ve been following both of their work for years, but I was still pleasantly surprised with the content of the workshop. It was fresh and built on the foundations they’ve laid. Like many presentations, there’s always more to the slides and projects within than meets the eye. When someone is explaining their work and retelling the story you get a different perspective of their process.

Teaching and speaking

When talking about markup and style, it’s so easy to present dry slides full of code. However, both of them did an excellent job of giving granular details about the code and still keeping it lively enough to hold even my attention; I’m distracted by anything shiny or—let’s go ride bikes!

Sorry, where was I? Specifically, Ethan’s example of a table-based calendar for New York Magazine was outstanding. I never thought I’d say it, but that was one sexy table. I like how he eased into the example, providing context to his circumstances and built the case line upon line. By the end, he used more table-related elements than I’d guess most people would know what to do with. It was inspiring to say the least.

I asked Ethan where he got his inspiration to try things with <colgroup>, he said it was one of those “3AM experiments” which made perfect sense. Beautiful accidents frequently take place after midnight.

Handcrafted sketches & business cards

Since May of this year, I’ve been experimenting with sketchnotes. The sketches from the workshop turned out great, maybe the best ones yet. I’m not the first to do sketchnotes, Mike Rohde originally inspired me to get my hands dirty with sketchnotes. Hat tip to you, good sir!

Another ongoing experiment is my hand-painted business cards. Around the same time I started sketchnoting, I decided I would use gouache (a creamy watercolor paint) and markers to make my business cards (seen below). I’m considering ways to include this visual style into my upcoming self-branding project.

Markup & Style Society T-shirt

I designed a T-shirt for the Markup & Style Society using acrylic paint and an American Apparel tri-blend shirt. My hopes were to encourage Dan & Ethan to organize another meeting. (Take your time guys, you’ve been busy as hell.)

The ampersand is Sky sans, and “Forsooth” is Hoefler Text. I’m hoping get them printed at some point, with permission of course. So stay tuned! Thanks for reading.