Journal entry

My vaccine against divitis

One of the first things I — and I suspect many others as well — do when getting into a new web design project, after having done some requirements analysis and gotten a clear picture of what there is to do, is launching Photoshop and start sketching on a design. While I personally think this part of the process is one of the most enjoyable ones, I have lately begun to wonder if this is a very clever thing to do.

Since I often end up with a pretty detailed sketch, full of graphical goodness, I suspect this is the reason why I later, when coding, almost always find myself and my documents suffering from severe divitis. All the rounded corners, drop shadows, gradients and other niceties, so easily generated and positioned with Photoshop, is just too much for the good old XHTML and CSS to handle without having lots of semantically meaningless elements thrown in and styled, just for the sake of good looks.

In an effort to remedy this, I have started to go the other way around: doing the markup first. Of course, I don’t set anything in stone at this point, since something surely will have to be altered or added to it later, but getting at least a hint of what the markup would likely end up as is great help when I then launch Photoshop to start on a sketch for the looks of it all. What this does is that I get a clear view on what limitations my documents have — both structurally and content wise — so I can better plan the positioning and structure of the looks, gracefully (and hopefully) avoiding divitis from the beginning.

Comments (5)

RSS feed

1. Joram Oudenaarde said this on June 2nd, 2006, 10:06 am

Personally I think you’re partially right. While too many spans and div’s are not really good, I do think that design has to be an important factor.

Leaving dropshadows, rounded corners and other niceties just because it consumes div’s and such, can really take the “design” out of a site. Of course, having too many div’s and spans doesn’t really help for a good semantic website, but leaving the niceties because you desperately want a semantic site doesn’t always make a good site.

I believe a golden middle road usually is the way to go. Leaving most of the design intact without making a clutter of the code. While webdesigning is different in essence, I treat webdesigns the same way as a folder or flyer. With both I never try to remove the niceties in order to make something “semantically right”. In the end, the user/consumer has to have a good feeling when visiting or using the product.

But anyhow, nice site :) I saw it on one of the css-listings (cssimport.com i believe)…. there’s one strange quirk I found though. If I type a few words in the comments, and want to make a new paragraph, the preview jumps around, trying to make very strange paragraphs or different lines ;)

2. Olof Lönnroth said this on June 2nd, 2006, 11:18 am

Joram:

Personally I think you’re partially right. While too many spans and div’s are not really good, I do think that design has to be an important factor. Leaving dropshadows, rounded corners and other niceties just because it consumes div’s and such, can really take the “design” out of a site.

I partially agree with you. But, knowing the structural limitations of your documents from the beginning is a good way to avoid adding lots of non-semantic elements just for the sake of looks, and instead trying to find new ways of styling the already existing elements, and still not sacrificing the looks. And I really think, at least for me, having some limitations is a great way of finding innovation in what you do. It’s only then that you start to dig deeper, trying to find new paths around the obstacles.

And yeah, I know about the jumping paragraphs, I’m afraid it’s a limitation of the WordPress plugin I use for those live comment previews. If anyone knows how to avoid this, please tell :)

3. Craig Morrison said this on June 13th, 2006, 3:03 am

I don’t think it’s a case of visuals vs semantics. To me, it’s about flexible prototyping of the design. When you design something on paper you might sketch it out several times before your final design starts to form.
When I was using HTML tables for layout Photoshop was a good tool for placing things and moving them about before deciding on what I was going to do. When I was done I of course had a static image to cut up. After that I often couldn’t change the design from the image very signifcantly without going back into to Photoshop and starting parts over again.
With CSS it’s a lot easier to change things and move them around, with that kind of flexibility I don’t need Photoshop and when I’m taking things like text scaling into account I really don’t want to start with the concept of a static image when I’m really creating something much more liquid.

4. Lowell said this on September 1st, 2006, 3:11 am

When I start on a new website, I do all of the markup and forget about it and move onto the design phase. Even if I try to ignore the design when coding semantically, I still manage to mess up.

5. Eiran said this on May 21st, 2008, 8:11 am

I usually design with the final markup in my head while I’m at it, which works well for me. But each to their own, I’ve mostly designed for the web though, and have been for years, so it seems to come naturally now. My only problem is when I’m designing for print I still think of the markup for it… lol

Respond! Add your comment



More entries

The most recent

Archive

Who's writing?

A picture of Olof

Olof Lönnroth is a music producer and web designer from Gothenburg, Sweden. Besides designing and producing, he is currently studying Information Systems Science at the university. You can read more about him here.