Should web designers build their own pages?

There’s a recent debate in the web design blog world about whether web designers—those who create the actual visual designs in Fireworks or Photoshop—must or should know HTML and CSS. I suppose the actual thrust of the debate is whether it’s necessary or desirable to use Fireworks/Photoshop at all as part of the web design process—but I’d like to focus on this little sub-debate of designers knowing how to write HTML and CSS. Is it necessary?

My answer in a nutshell: Ideally, yes.

I’ve been lucky enough to always design the pages that I build. I’ve worked at a design agency, as part of in-house design teams, and freelance, but never have I had a separate designer create comps to then hand off to me to build.

I call myself lucky in this regard because even though I’ve never experienced this design process firsthand, I’ve seen how frustrating it can be for other web designers. (Note that I said “can,” not “is.”) When the visual designer doesn’t know how to actually build web pages, he or she frequently designs in elements that just don’t work well on the web. Either they’re things that cannot be built with HTML and CSS—such as elements that depend on an exact font size—or they’re things that can be done but are either difficult or unwise to implement, due to current best practices in the areas of standards, usability or accessibility.

It’s been my experience that the more experience a designer has actually building web pages, the more successful he or she is in designing interfaces and graphic elements that work well with its strengths and constraints. That doesn’t mean that every designer should build his or her own pages; it’s fine to have a division of labor, and I’m sure it’s actually the smartest process in many teams. Nor does it mean that the designer has to be an advanced HTML or CSS developer. It simply means that the designer ought to have some idea how to build the page if he or she really had to.

Mark Boulton argues in his post “Design isn’t about tools” that “knowing how to build things in HTML/CSS limits your creativity.” I see his point and think it’s a really good one. We all have to be careful to not just keep designing things the same tired way because we’re used to building things a certain way. It can be a really positive, fun experience to drop a print designer into your comfy design nest to force you to consider new design possibilities, even if you can’t use them exactly as-is on the web.

But at the same time, it’s unrealistic to think that you can design without the constraint of any tools. At the Voices That Matter conference I was just at, Jason Cranford Teague gave a presentation on web typography in which he said that design is about constraint—working within it as well as overcoming it—and that if you want to work without constraint you’re an artist, not a designer. I think this applies to the question of whether designers should feel constrained by HTML and CSS, and I think the answer is yes. Architects don’t have to be qualified to build houses, but they have to have some idea of what construction techniques are possible, the physical characteristics of the materials they’re designing with, general physics, etc. They can’t just design buildings without any knowledge whatsoever of how they will ultimately be built.

Mark uses a print design analogy to ask “do print designers need to know how to build a press?” This analogy makes no sense to me. It’s like asking if web designers need to know how to build a browser, or a computer even. Of course not. The real question is “do print designers need to know how a press works”—and the answer to that is an emphatic yes. They don’t need to be qualified to actually operate a press, but they need to know the limitations and strengths of the printing press they’re work is going to be produced by. Print production processes are a pretty important part of the curriculum of any good graphic design program. (That last sentence had a lot of p’s in it!) Print designers need to know practical things like not to design important info within 1/8″ of the edge of a piece, not to run something that must be matched up perfectly across the fold of a multi-page book, what type of paper they’re going to be printing on, etc. I suppose you could call this being constrained by your tools—but it doesn’t necessarily follow that that’s a bad thing.

(On a little tangent, I applaud Jon Hicks for pointing out during this whole debate that Fireworks is a better tool for creating web comps than Photoshop. I switched to Fireworks for web work almost five years ago and can’t imagine going back.)

Voices That Matter slides available

The slides from my presentation Designing CSS Layouts for the Flexible Web at the Voices That Matter Web Design Conference are now available to download. It’s a pretty big file, due to all the graphics in the PowerPoint, but I didn’t want to compress it very much and have all those graphics look distorted.

Designing CSS Layouts for the Flexible Web (PDF, 4.8 mb)

Inspiration for flexible web design

This post was last updated April 2009

Flexible web sites—sites that are liquid or elastic—have the unfair reputation of being ugly and plain. There are certainly lots of flexible sites that fit this stereotype, just as there are tons of ugly fixed-width sites. But flexible design doesn’t have to be unattractive. There are lots of really beautiful, graphically rich liquid and elastic web sites, which are all the more impressive to me because of the extra skill it often takes to pull off these graphic techniques in a flexible environment.

Here are some web design galleries that showcase flexible design:

No Resolution
This is an entire site devoted to showcasing liquid and elastic designs. Unfortunately, you have to register to submit entries, so things have been slow lately. Still, lots of great stuff in the archives, and new additions from time to time.
CSSGlance, liquid layout category
CSSGlance categorizes all entries as fixed-width, liquid, or elastic, which is really nice. They have a pretty good collection of liquid layouts.
CSSGlance, elastic layout category
Only a few things here, but elastic layouts are pretty rare in general, as well as hard to recognize with only a glance.
CSS Drive, liquid layout category
This category seems to have been mostly forgotten about recently, but it does have a good collection of liquid layouts from 2007 and earlier, and new entries do show up occasionally.
Unmatched Style, entries tagged as liquid layout
A very small collection of liquid layouts that is very rarely updated, but I include it here in case it takes off one day. Let’s hope so!

I keep my own collection of designs I find attractive and inspiring in del.icio.us. I have a number of liquid layouts saved as inspiration, as well as a few inspiring elastic ones. I’ll point out a few of my favorites:

Speaking at Voices That Matter this week

I’ll be speaking at the Voices That Matter: Web Design Conference this week in Nashville. My presentation is titled Designing CSS Layouts for the Flexible Web. It focuses on the design principles you need to conform to in order to create graphic comps that can be successfully turned into CSS-based liquid and elastic layouts.

If you’re at the conference, I hope you’ll come up and say hi!

First post

It seems like I should have something momentous to say in my first post, but I’m afraid I don’t. I promise the later posts will be more interesting! I plan to blog about web design, particularly CSS, accessibility, and usability, as these are the main areas of focus of my work. I’m currently writing a book on CSS, titled Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, so I’m going to have CSS on the brain more than the others, and I imagine the CSS posts will be prevalent during the first few months of this blog.