In the old days, everything used to be easier. There was a graphic artist, who did the design, translated it into HTML and gave it to the coder who would then add the functionality. There was no such thing as Ajax etc. only the occasional small bit of JavaScript, maybe. Everything was properly separate into it’s own layer.

A website used to consist of a mixture of static and dynamic pages. The dynamic pages were created by a script, which either used a templating language, header and footer files or was just hardcoded by a programmer, making future changes to the HTML next to impossible. The introduction of CSS was meant to fix some of this, so the design of an application would use a fixed set of design rules, stored in one place and referenced by parts of the application.

Ideally every application design should follow a structure like the OSI model, which separates the design into seven separate layers:

1. Application layer
2. Presentation layer
3. Session layer
4. Transport layer
5. Network layer
6. Data Link layer
7. Physical layer

In reality the lines are somewhat blurry: While CSS generally made the use of (X)HTML easier, it also introduced additional complexity, and so did today’s use of Ajax/Java Script. JavaScript needs to be referenced directly in the design layer and in turn the JavaScript relies on CSS for on the fly design changes.

So what is it that the perfect web designer should be able to do? Let’s make a list:

• Design in Photoshop or a similar program.
• Translate (preferably handcode) the design into XHTML/CSS while ensuring it works across the different browsers.
• Create Ajax/JavaScript functionality together with the bits & pieces needed on the server side.
• Document their work so programmers can understand and enhance on it.
• Know how to use a version control system, such as subversion.

The reality looks something like this:

• Someone like a product manager comes up with a description of functionality for the site/pages.
• Someone with usability knowledge or experiences designs a wire frame and enhances the specification.
• A designer creates a matching mock-up.
• The XHTML/CSS specialist translates it into HTML.
• The programmer ads Ajax bits and pieces and the parts on the server that make it work.

Of course I missed the part were changes are made to the scope, the design and process while everyone is working on it. Also the personal and contractors will at least be changed twice during the course of the project ;-)

As a little anecdote let me tell you this story: Following the introduction of tables in Netscape back in 1995 (or was it 1996?), I was working with my own company, CyberTeam, to create a form that could be used to search TV listings for PixelPark, who in turn had been contracted by Spiegel TV. Back then, the people that did the design mock-ups at PixelPark, were mostly CD-ROM designers, meaning they had no clue of the restrictions and limitations of web browsers. So when our developer, Tobias E., was in the process of “translating” the designer’s work into HTML, he had to used nestled tables in order to match the mock-up. The funny thing was that our implementation crashed Netscape when you left the page. Back then it was nothing unusual for Netscape to crash while rendering certain items when you arrived on a certain page, but until then we had never heard of a page that made the browser crash when you left it.