Webvanta Blog: Creating Effective Websites

Should Designers Write Code?

In the past few months, I’ve met with dozens of designers to better understand their workflow and their pain points. It’s been striking how diverse the skills and approaches are of people who are all "web designers".

  • At one extreme is the graphic designer who works in Photoshop and Illustrator to create web page mock-ups. They then hand these off to someone else who builds the web site.
  • At the other extreme is the coder who works in HTML and JavaScript from the start, so his or her designs evolve from functional wireframe-like designs to polished presentations.

Each approach has its strengths and its weaknesses. Most people lie inbetween, and I’d argue that this is the best place for a web designer to be.

Advantages of the Designer/Coder Split

Graphic design and programming are very different skills, and relatively few people have a natural talent for both of them. Design is a mostly a right-brain, creative activity, while programming is mostly a left-brain, analytical task.

This supports the approach of dividing the work between a designer and a coder. For many designers who come from art school backgrounds, dealing with code in any form is just not what they want to do, but they have the skills to design beautiful web sites.

By handing off Photoshop comps to a coder, the visual designer can do what they do best, and let someone else turn that design into code.

Complete separation of tasks works best on large projects that can afford to have a group of specialists and someone to coordinate them. The larger the team, the more appealing specialization becomes.

Advantages of the Jack-of-all-Trades

If one person can create a great visual design and implement it in reliable, easy-to-maintain code, they have many advantages over a team that has split up the design and coding tasks:

  • Efficiency. When the designer and coder are the same person, they don’t need to spend time meeting with each other, and the chances for a misunderstanding between them are minimized.
  • Emergent design. The site can start out with a wireframe-level design but with the content and HTML markup all in place. The visual design can then be iteratively improved, while using the site with real content and full interactivity.
  • Matching of design and technology. The more you know about the technology that’s being used to implement your design, the more likely you are to make effective use of it.

There’s just one problem with this approach: most great designers aren’t very good at programming, and most people who love to program aren’t great visual designers.

Finding the Sweet Spot with Real People

For most projects that have significant design and programming tasks, and have the budget to do a quality job, there’s going to be more than one person on the project. It makes sense to divide the work up between a design-oriented person and a technically-oriented person.

If you’re a designer who prefers to stay focused on design, you can still get a lot of benefit from developing your coding skills a little bit.

It’s important to realize that what people commonly call "coding" is really a set of fairly different tasks, from HTML markup to CSS and JavaScript. And then there’s the leap into server-side code, such as PHP and SQL.

HTML Markup for Designers

I believe anyone who is serious about web design should be comfortable with HTML, as well as with at least the easy parts of CSS. If you’re not, you’re cut off from your sites: you can’t tinker with them directly and see the result. This cuts you out of the rapid iteration that is othewise possible.

Writing HTML is not programming: it is markup. HTML is not a programming language, since it lacks even the rudiments of variables, loops, and conditionals. This means that it is much simpler to learn than programming, especially with modern web design practices in which the HTML is minimal, semantic code, with all presentation details in the CSS.

HTML markup, when stripped of presentational detail, is simple. You can deal with most content by learning only half a dozen tags. Applying HTML markup requires little more than identifying each element, such as a heading, paragraph, or list. To apply visual styles, without needing even to know what they look like, you just apply a CSS class.

A Simplified Approach to CSS

CSS, while still not a programming language, can get wickedly complex. It is a tough beast for most designers to tame, especially when it comes to multi-column layouts and complex positioning.

If you put aside the overall layout of the page, however, and focus on a single block of text, CSS is simple. There’s a small enough set of terms you need to learn, and then writing CSS becomes a compact, easy to use, and detailed representation of how you want the text to look. And once you’ve done this, you know how to adjust any aspect of the design, so you can iterate.

By using a CSS framework with a grid system, such as Blueprint CSS, you can gain access to a simple, reliable way to layout out columns in as complex an arrangement as you’d like.

JavaScript

The technology that leads many designers into programming is JavaScript. It is the language of the browser, making it the simplest way to have things happen in the web browser that don’t require an interaction with the server.

As with CSS frameworks, JavaScript libraries make JavaScript programming dramatically easier. jQuery, the liibrary we use, provides a CSS-like syntax that is designer-friendly.

If you’re disinclined to do any programming, you can avoid JavaScript entirely and connect up with someone who can do it for you. If you like the idea of dabbling in a little programming, then learning jQuery is a great place to start.

Whether you dabble in JavaScript code or not, you should at least understand the basics of how it works, so you can see opportunities to use it to enhance the user experience on your sites.

Server-Side Programming

The next step down the slippery slope of programming languages is PHP. It fits in easily intermixed with HTML. Once you can write a little PHP, you can connect to a MySQL database — just learn some SQL, and how to structure relations between tables… and, if you’re like most designers, you’ve gone way off the deep end.

This is where Webvanta gives designers tremendous power they’ve never before been able to access direcly, to easily set up a CMS with their design and a customized database, all without any programming and just a little bit of markup.

What Kind of Web Designer is Webvanta Best For?

In creating Webvanta, we realized we needed to focus on serving a particular type of designer. We built Webvanta for designers who are comfortable working in HTML and CSS, at least to the extent of modifying existing designs.

We make it easy for you to integrate your HTML and CSS with our system, but we don’t write that code for you. You can create your code with Dreamweaver, or BBEdit, or any other tool, however you’re accustomed to doing it. Then you install your code in your Webvanta site, and you have instant access to rich content management and database capabilities.

Your site is automatically set up with the Blueprint CSS and jQuery libraries, and we provide an assortment of snippets that provide cookbook solutions for many common needs, such as form validation, slideshows, accordion animation, menus, and more.

Webvanta may not be the best fit for designers who want to build sites with no coding, or, at the other extreme, for people who love to play with PHP, databases, and other back-end code (since Webvanta takes care of all that for you). For the majority of web designers, who fall somewhere in the middle of this spectrum, Webvanta provides a huge boost in the capabilities of the sites they can produce.

Add Your Comments

(not published)