A Web Designer’s Spectrum

I’ve been thinking about what I am loosly calling the web designer’s spectrum. Imagine a straight line. On one end you have a blank file from which you start, on the other end you have a theme that has already been designed and coded.

Although there are bound to be exceptions, I doubt anyone actually starts even a minor web project with a completely blank slate. Websites are increasingly complex and require a lot of weird lines of code. And over the years, patterns have emerged.

Take for instance the Eric Meyer Reset. The reset is a chunk of CSS that essentially “zeros out” a great deal of built-in styling. It’s a handy thing to do before you start writing the styles that design the page. It looks (no need to read it, just look at it) something like this:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

There’s no reason to type this every time you start a new stylesheet. It’s boring, repetitive, but necessary stuff. I mention it as an example of code that was written by a person (Eric Meyer), yet is used over and over again by designers the world over.

I’ll define this as one end of the spectrum, starting nearly from scratch with every project. Tossing in only a bare minimum of styles that would be written anyhow, regardless of what the end design will be.

The other extreme is doing nearly none of the coding yourself. Here I’m talking about buying a theme and applying a few settings (changing color schemes, typography settings, et cetera) and calling it done.

Between these two extremes different levels of from scratch web design. There are a number of “CSS Frameworks” available. HTML5 Boilerplate which includes its own reset and a number of frequently used styles. It also includes necessary javascript libraries for tricking Internet Explorer into behaving correctly. There is 320 and Up, which is a different flavor of boilerplate. And there’s CSS Blueprint which goes a step farther, actually defining a grid. Twitter Bootstrap has its own version of libraries that can be used. Bootstrap goes further, defining not only the grid, but the look of buttons, navigation and interface elements.

These that I mention here are just a few of the CSS and Javascript starter kits available. (Or are they boilerplates, or frameworks, I’m not even sure what they should be called.) There are even whole themes for WordPress and other CMSs that aim to do the same thing: give designers a starting point with some of the basic grunt work already done.

My point is, that everyone has some starting point when beginning a new project. Not many actually start with a blank sheet.

But where on that line is a designer not saving time by having a rolled up package. Wehn is the designer just being lazy? And when does that laziness become detrimental final website? How much should a designer rely on these starter kits? There is no question in my mind about the helpfulness and usefulness of these starter kits. The question becomes “how far is too far?”

There is certainly value in using these starter kits. There is repetitive code, and there simply are certain things that you need to get started. Also, not everyone is an expert in everything. I’m no javascript expert and I lean heavily on pre-packaged scripts like modernizr or Twitter Bootstrap. But I try not to rely on them.

Do you start every project with a blank file, or do you start every project by browsing a gallery of themes until you find one that looks close to what you want? Where should you fall between those two extremes? Finding out where you should place yourself on this imaginary spectrum will be a personal choice.

And of course there is nothing wrong with looking at the work of others and learning from it. However, abandoning the grunt work and simply rejiggering existing themes as a working practice will do you no good as a web designer. It will perhaps get you a head start on a project, but will ultimately harm the project.

When you write your own code you are investing in your own code. You’re learning why the lines of code are there. You’re understanding it more thoroughly, and you’re hopefully understanding what may not be necessary and can be cut. You make mistakes along the way.Fixing mistakes is hard, but you learn things as you fix them. More importantly, you learn how to avoid the same pitfalls in the future. And that is way more valuable to your clients than the ability to install a “pro theme”.