7 August 2013

CSS is a designer’s medium

Recently I’ve heard a lot of discussion and seen much consternation around expecting designers to write HTML and CSS. A common concern is the negative impact of splitting focus and energy between two skill sets. While I’m a realist about time and a supporter of specialization, I can’t help but feel a shift in perspective is what’s needed most. Try thinking of it this way: for web designers, design is the skill; CSS is the medium.

When people hear I like to paint, the first question they ask is “What medium do you use?” The second question they ask is “Why don’t you paint with oils?” People react differently based on the medium we choose. An artist who crushes and mixes her own oil pigments instead of using store-bought tubes. An artist who uses the most basic computer painting program to create pixelated masterpieces. An artist who draws photorealistic portraits with cheap ballpoint pens. Medium matters.

A frequent analogy thrown out is the architect. Is it reasonable for an architect to construct the building she designs? Could she possibly know how to wire the electrical, lay the foundation, etc. and could she do them well? Within the scope of HTML and CSS, I find this analogy lopsided in scale. For me, a more fitting analogy is the fashion designer, and the fashion designer’s medium is fabric.

Most fashion designers, like other disciplines, start by sketching an idea on paper. These sketches are usually gestural and exaggerated. They are important because they show the origin and evolution of a thought, allowing for quick visualization of a concept. And while the sketches on their own can be quite stunning and inspirational, they are not a dress and they can not be worn.

A beginning fashion designer likely sews his own designs. This often results from cost efficiency, but provides value no designer would want to miss. Selecting fabrics, working them in your hands, learning and understanding the behavior of the various types: these are benefits only gained through direct experience. The complement to sewing is fitting. The designer sees how the garment fits on a human body and adjusts the design. Flattery, comfort, and movement are all considered. The fitting step is crucial because clothes aren’t meant for a hanger; they are designed to be worn and felt.

As the fashion designer gains more experience and her business grows, she will sew less and direct more. She carries the vision and sets the path for designing entire collections. Designing at such a large scale is difficult, but is supported by years of experience working with fabrics, fitting on various bodies, trial and error, and customer feedback. Plus, you can bet she still regularly has her hands on those fabrics. And although she doesn’t construct the garments herself, she could.

For web designers, CSS is the medium. Sketching, wireframes, and comps are important pieces in the design process and, while often beautiful and inspirational, they are not a website. Writing HTML and CSS makes the design process tactile. The designer can memorize a list of rules all day, but nothing compares to the experience of moving things around and discovering the (sometimes surprising) behavior of the medium. And just like the fashion designer must fit a garment on a real human, so should web designers “fit” their designs in a real browser. After all, each browser wears our designs differently.

With more experience, designers can write less, direct more, and design larger and more complex interfaces. But they should still be touching the HTML and CSS regularly. The capabilities of the medium change and improve each day. More and more can be achieved with less.

CSS is a designer’s medium through which we execute our design expertise. I could list the many benefits I’ve experienced designing with HTML and CSS, but the most succinct reason I’ve seen is from Geoff Teehan in his post Old Dog, New Trick:

It gets designers using their designs sooner. They’ll begin catching issues that were in their designs all along that were impossible to see. The issues are invisible. They need to be felt.

← Back to recent writing list