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.