In response to my Graphic Vs. Web Design article, someone said:

So, when I begin by opening photoshop and making everything look cool, am I doing it all wrong?

Yes and no. It’s generally a good step to have a clear design in your head before starting anything (although, don’t be afraid to deviate from a preliminary design). But it should never be more than a concept.

Imagine what you want to do visually, see the words flow together in your sea of colours. Paint this picture, if you must, in Photoshop (or whatever package you want to use). Done? Now, throw it away immediately.

Let’s start again properly: take the content you want on a page and separate it into logical sections (content, navigation, header etc). We’ll do this (in mark-up) using the DIV tag. Importantly, give each of these top-level DIV’s a unique ID attribute. If each of those sections needs broken down further, then do that too (although you might be looking at giving these DIV’s generic classes, rather than ID’s). Iterate, until you’ve chopped your site into the smallest reasonable sections.

Take this site as an example. It has 3 top-level sections: Content, Navigation and Header. Now, it so happens that I only wanted a single title in the header, so DIV tags were omitted. They were unnecessary since the (unique) H1 tag takes care of anything that a DIV could. Navigation is broken into a several sections, but I’ll focus on the Content section.

First off, the Content DIV, has a header (H2). This is important since everything that follows is subordinate to this. In an outline view, you can easily determine that the content is part of “Happenings” (my own very special way of saying “News”). After this, each piece of content is broken into “BlogItem”‘s (a second-level DIV with a “BlogItem” class attribute attached to each one). These consist of 4 parts: A heading (H3), the date (a P with a date class attached), the content itself and a permanent link to that BlogItem.

The heading is self-explanatory: each part of a document should have an appropriate title which, in this case, happens to be at the H3 level since it is within elements containing H1 and H2 tags (the parent sections of our BlogItem’s). We could add further subheadings in our content, if necessary.

The date is a little more dubious. Some would make it an H4 heading. I disagree. In an outline of the document, nobody cares about the date something is posted. We would skim through the headings until we saw something that interests us, not when it was posted (“Oh yeah, this was posted on the 23rd February. I must read”). But it is useful meta-data. We can use it as frame of reference to put the content in.

The content itself is quite self-explanatory too: it’s what you wanted on the page. It’s why we’ve went to these lengths to create a well-structured document. Type it in. (There’s a lot to be said about marking-up content, but that goes way beyond the scope of this article – another time perhaps). Note that an article is logically separated into paragraphs, and these paragraphs into sentences. This is what we’re doing here, and on a larger scale.

Finally, we have a permanent link to each individual BlogItem. This is, again, meta-data. It’s useful to have an access mechanism to a given piece of content at the end (or beginning) of that content. We can then look back at it whenever we feel the need, without having to sift through the rest of the data structure.

I’m not saying this structure should be adopted for other sites, it just made sense for this site. Separate your own information into logical sections, to get a decent structure for your site.

Now I can already see the graphic designers and table fanatics at the back saying: “That’s not web design, it’s information management”. Well, yes, it is information management, and it’s also exactly what web design is based on. Now that we have a logical data structure for our information, we can make it look however we like. This is a secondary concern.

Because of our detailed structure (complete with IDs and classes), we can now generically access every similar item on every page in one clean swoop. That means that redesigning a site will now take minutes, rather than weeks. The data structure, free from style of any form, is mouldable at a higher level. For anyone who’s strived to change a site or make it look good in a brand new browser (how are those new table hacks coming along?), this will mean a lot. Actually styling the page is, again, beyond the scope of this article, but will be resolved at a later date.

To summarise, style should always come after structure. Once we have a structure, we can do what we like with it to make it look great. The same can’t be said in reverse.

The whingers of the music industry are put into their places by Scott Andrew. With a million “artists” per required piece of art, we’re not in any shortage. Artists should, primarily, create art for themselves. Glad someone else sees it that way.

Most web designers are terrible at web design. There, I said it. I’m not talking about the people who put up personal sites full of animated gifs that they stole from the thousand other personal sites that came before, or the small businessmen who get their wife to design a logo in their copy of Paint. I mean “professional” web designers.

Now, let me clarify slightly. The web designers who are terrible at web design are the ones who trained as graphics designers and jumped on the net bandwagon, thinking that it’s a graphical medium so the same approach always works. It’s not. Let’s say it loud and clear: graphic design and web design are very different disciplines, despite some similarities in function and possible conveyance.

Graphic and web design both share one key thing in common: they both aim to convey information in the best way possible. By this, I mean that not only is it important that the subject is understood by everyone, but is also accessible to everyone. And there lies a key difference; graphic design passed on as web design is not accessible and does not convey information well.

Imagine we have “Munky Cola”, the newest soft drink to enter the market. So new, in fact, that the manufacturers have yet to establish any real brand identity for themselves. They hire a design team to come up with a brand and marketing scheme. Being a traditional team primarily, they first create a logo for the company. This is a fine first step. A logo is a very simple way of getting immediate recognition for any brand. It can and should be permuated across all media.

Next, they create a series of graphic designs to be used as adverts. These centre on the brand and making it stick in peoples head; something funny or, perhaps, abstract. This is a fine second step. People now recognise the brand and associate it with a product or idea.

Then, they take their existing graphic design ideas and blindly transform them as closely as they can to the web environment, with some information or widgets related to the product/brand in some way. (By widgets, I mean tiny games or toys that the user can play with). This is a bad step. Using widgets is fine, they help strengthen a brand, but using the existing graphic design is bad web design.

Why? Websites are different, they serve a different purpose and must be treated as a different medium. What works for graphic design (abstract advertising) will not work on the web. Web users want information, they want to go beyond the elements of graphic design they’ve already seen, they want interaction. This is a key difference. Graphic design is a one-way medium: people can see it but they can’t do anything to it, they can’t be part of it. Web design is two-way: we can use it to convey more information about a project and, more powerfully, create a sense of community around it.

Think carefully about that last bit: a community means a constantly growing and returning audience. You can’t buy that kind of interest (whether you’re selling something or not). You also start to get a project which generates its own content. No need for a new graphic design every other week.

That takes care of the usability side of things. In terms of actual design (raw and dirty mark-up), it’s just plain wrong to treat a website as an example of graphic design. Sure, it should convey brand identity, but it shouldn’t be a graphically based. Using tables and all manors of redundant mark-up to get an image to sit just right on a site is missing the point. A web page is essentially a document (largely, just a piece of text) with special tags around parts of it to logically separate chunks of it and give certain parts meaning. This can’t be achieved through graphical means.

There’s a lot more to this, but I’ll leave that for another day. Just remember, next time you design a web site, make sure it’s a web site and not a graphic design.

Today, I got an email from Dean Allen saying that I can use Textile in Finetto (the CMS I’ve been working on for quite some time).

This is great news since it lets me focus on other areas of Finetto, without having to worry about processing text. Besides, the Textile system is fantastic at what it does. I couldn’t come up with better (you should see the cludges that hold the site together at the moment). Thanks, Dean!

This site is, perhaps, the internets finest moment; bursting with comedy, insight and bizarreness. Those are the cornerstones of the web. Well, maybe porn is the cornerstone, but in the absence of that then it’s those 3 things.

Back to the site: Imagine the world’s most argumentative couple. And then imagine the male of the pair documenting everything. You get such classic quotes as:

I eat two-fingered Kit-Kats like I’d eat any other chocolate bars of that size, i.e., without feeling the need to snap them into two individual fingers first. Margret accused me of doing this, ‘deliberately to annoy her’.

Read the whole page. It’s full of the most contrived logic. You know, the sort of stuff we all like to use in arguments with people we love.

The link? Things My Girlfriend And I Have Argued About