Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry

Coding vs. Design

June 05, 2003

Why coding and design don’t mix, and news of two new Zen Garden submissions.

Time for a breather, I think.

The focus on browsers lately has been good for thinking about what’s important for users and developers, and what lies ahead, but you can only prattle on so much before realizing it’s just an intellectual discussion. While the technology may change, it’s only a means to an end and what really counts is how you use it. Moving on to another subject near and dear to my heart: design.

I recently did an interview for zlog in which I stated that coding is counter–intuitive to a designer (and I just noticed that Ronan has a new one posted with Ben Hammersley — I’m in good company.)

Scott Steffens posted a thoughtful response to the interview that bears consideration. He argues that the designer is the best person to plan the layout and interaction, and one of his strongest points is that a designer who doesn’t know the code can’t possibly know what is or isn’’t possible to achieve.

I believe to a certain degree, he’s right. When designing for a technological medium, you have to consider the technology and make sure you understand its strengths and limitations.

This holds true for any medium — if you paint a picture with oil paints, you study concepts like fat over lean and get used to working with malleable paint that doesn’t dry for days or weeks. If you don’t know any of this going in, and all you’ve used in the past are watercolours, you will quickly get frustrated in your efforts. The result won’t be pretty. Different methods of creation have their strengths and weaknesses, you need to know what they are before you can use them effectively.

But the problem, jumping back to the coding focus, is when you start adapting your layout to fit a design you know you can code. The tools are getting in the way of your creativity.

Consider old–school table layouts. The laborious process of chopping up images for each cell, then tediously aligning them row by row and adding up colspans and the like is a very mechanical process. Tools are available that allow a designer to accomplish almost anything they need to with these methods. A good handle on the code will only improve this process, and while there are surely layouts that cannot be handled effectively through these automatic tools, for many purposes they get you 80 or 90% of the way there.

The remaining few percent is what will distinguish a good web designer from a pixel–jockey. The former understands relative font sizing, window scaling, and clean code. The latter cares more about the visuals and can satisfactorily call their work complete without ever having to touch that last 10%. Some will say that’s good enough, others will deride them for leaving the job unfinished.

Currently no such choice exists for CSS–based design. Which, some argue, is a good thing because it prevents those who fall into the latter category from mucking with it too seriously. Which, I’d argue, is precisely why a project like the Zen Garden was necessary, to show the latter category what they’re missing out on.

Having a visual CSS editor isn’t going to make the world a better place. It will enable people who code improperly to continue doing so. It still won’t make better designers of the coders using CSS now. But it will make life easier for people who wish to have it both ways. §

And speaking of design, do not miss the two excellent new Zen Garden submissions: “Wrapped in Burlap” by John Simons and “What Lies Beneath” by Micheal Pick. You may remember Mike’s previous submission, “Dead or Alive”. These two designs are phenomenally creative examples of how radically different the same designer can approach the same problem. There’s some incredible talent in this one, and if you’re in the New York area, do peruse his portfolio. §

Reader Comments

Stv. says:
June 06, 01h

You know, I’m all for designers NOT getting their hands dirty with the CSS. Why? well, I’m a terrible designer (e.g.: my personal site). But I’m excellent coder. I’ve also lots of experience in taking a designer’s cherished Illustrator/Photoshop file and recreating faithfully in the web medium. So for purely selfish reasons, in that I get paid to do such things, I don’t want designers to do that part. On the other hand, having worked with designers with little-to-no web-design experience, it can be frustrating to try and explain to them the rules, or paradigms of the web, as a medium. What’s more important, it seems to be, is that a designer understand the medium, rather than know how to translate it out. I don’t expect a print designer to know the intricate details of printing - that’s for the printer to know. I do expect a designer to know how color-choice might affect that, etc. Same thing for the web.
The other side of it is specialization: the web is now a mature enough platform that people can specialize in what they do. Each specialist needs to know a fair amount about the platform they work in, but not the details of what the other specialists do.

Lea says:
June 06, 03h

I totally agree w/ Stv. However, the sad thing is that some (or a lot, depending on who you speak to) employers demand a designer/coder package in one person, not understanding it takes two different schools of thought of each. As this a comic illustrates. I think some people can pull it off just fine (Dave here being one of them), but I think the best case is to have designers design, and coders code.

Dave S. says:
June 06, 03h

Andy, thanks! Glad to hear you’re enjoying it, and I’m sure I speak for the submitters as well.

Eric, I’d beg to differ. The logic behind creating a chopped-up table from Fireworks is linear. You divide the design into rows and columns, and chop away. Software can handle that. If you’ve ever tried to build a more complex CSS layout, things like tiling background images, overlays, and other assorted niceties are anything but linear. It takes a human brain to see a design and decide the best method to break down images, and I just don’t see software duplicating that process. I may be wrong. I’d like to be wrong. But we’ll see.

Steve, I work with the same kind of designers. Conversely, I’m a web designer that only deals with print from time to time, so I try to keep that in perspective when I talk to them. I understand the limitations of spot and process colour, but I sure don’t know all the technical bits and reasons why things have to happen the way they do. I just assume print designers are coming at the web with the same sketchy knowledge. I try to be as receptive to suggestion as possible when printing, since it’s assumed the people I deal with know more than I do. The hope is that they’d extend me the same courtesy. Sometimes it happens, other times…. well. Here’s how it goes when that happens.

Mike says:
June 06, 04h

I don’t expect a print designer to know the intricate details of printing - that’s for the printer to know.

On the contrary - print designers know quite a bit about the printing process, even though the same divide exists between printers and designers as exists between coders and designers. Print is one of those things where there’s a million tricks - if you know them, you’re golden, but missing one can cost you in time and money - I know guys who have a solid five years print experience and they’re considered beginners.

I’m like Dave, where I’ve ended up doing more web than print. I love print, but the opportunities haven’t come up as much, and its a tough market to crack for the reason I mention above.

I think it’s a Very Good Thing to know the limits of your medium, no matter what it is - the trick is to forget the limits for the creative process and remember them for the execution process.

forgetfoo says:
June 06, 07h

i just wanted to say that this is both a great read and a terrific website you have here, dave! was just checking out the latest css-designs on the Zen Garden and cant believe some of the sweet designz all of you guyz have created….. wow.

i usually dont comment on a whim, but i really wanted to simply drop a quick line….

Andy says:
June 06, 08h

I am increasingly amazed and impressed at the talent shown through CSS Zen Garden in both design and artwork. For someone like me, who would love to design and create such a page, lacks the necessary skills (and talent :) ) in creating the graphics for the design.
I liked to say well done to all those artists that submitted designs and that I am slightly envious of their talent and skill.

Keep up the good work!

Eric says:
June 06, 11h

THere is no reason someone couldn’t make a WYSIWYG page editor that used only CSS. In fact it would probably be easier than writing an editor to make pages the old way. However, it’s not about designing/coding pages, its about designing/coding sites. Sites are no longer just directories full of pages, they are conherent applications and effective use of CSS is a big part of it.

June 09, 04h

the sad thing is that some … employers demand a designer/coder package in one person, not understanding it takes two different schools of thought of each.

A candidate that excells in both disciplines will obviously provide the employer with the best designer – one who can design for the medium. Another design field, landscape architecture, mixes design with botany, two otherwise unrelated fields. I wouldn’t hire someone to design a city park unless they were experts in design AND plants. Just like the printing comment – I would question the credentials of a print designer who doesn’t know the intricate details of printing.

But in this subject, as with most things, it’s a matter of degrees.