greg-wood.co.uk
The homepage of web designer Gregory James Wood
The Blog
A little about constraints
As someone with a super keen interest in websites, I often browse whilst thinking in the back of my mind, "how and why was this particular site designed?". One thing that has been niggling me over the last few weeks is the visual wrapper. You know the one. It's basically a column, usually about 780 pixels wide, often horizontally centred, that houses the content. Often it has a white background and maybe a slight shadow on either side. My question is this: why as web designers do we so often constrain ourselves with a fixed pixel visual space in which to work?
A Visual What?
I’ve been trying to write this paragraph to explain what I mean for a while, and I haven’t really succeeded. Therefore I’ll use a live example to try and illustrate what it is I’m talking about.
Take a look at one of my favourite designers’ website, jeffcroft.com. You’ll see that although the site is around 1000px wide, the design of the site doesn’t stop there. For those with a wider screen, we receive more design. The same can be said for not only this website you’re looking at now, but for a lot more as well.
Contrast this to the default Expression Engine template used on John Oxton’s now deceased blog, for example. In comparison, the design feels constrained; the content is visually wrapped in a white box against a grey background. Sure, the widths of all the above sites are larger than the EE template, but the same principles apply.
I guess what I’m trying to get across is that I don’t think web designers should be adhering to print design-like constraints. The amount of screen real estate we have to work with differs vastly from user to user, and in my view our designs should reflect this. This isn’t an opinion on what sort of layout we should be using, rather one of how we should be presenting these layout choices that we make.
Guilty as charged
Yes, I know. I myself have enclosed content on many a website using a visual wrapper, but now it seems I’m realising the error of my ways. This site is probably one of the first I’ve designed without these constraints, and in my opinion it’s resulted in some of my more favourable work. Recently, even if mocking up wireframes in Photoshop for a site whose content will be 780 pixels wide, my PSD document will have a canvas size of about 1200.
Using a grid for layout can often help this process immensely. Because of the nature of a grid, the content will feel and look structured and organised without having to resort to wrapping it in a page-like visual wrapper. Check out subtraction.com for evidence.
Maybe I’m Wrong
Or maybe I just haven’t articulated my argument effectively enough (practice will make perfect). Either way, there are many notable exceptions. I’d love to hear some opinions on this, as I’m starting to think I’m a little confused myself!
Post a comment
About this entry
- Posted on: 10/04/07
- Posted in: Design
Feed Me!
RSS feeds, for all your content-to-desktop needs!
Feed me what? I hear you ask. Well, RSS feeds are a fantastic way of getting content from your favourite websites delivered to your desktop. No need to trawl through your favourites checking for updates! Especially useful for arse-ugly websites.
Copyright © Greg Wood mail@greg-wood.co.uk http://www.greg-wood.co.uk 2007 | Everything here protected and licensed using a Creative commons license | Get some RSS
Comments (4)
Post a comment
Andrew Rickmann // 10/04/07
Greg, I’m not entirely sure I get your point.
Do you mean that rather than designing the entire page, i.e. use a 1600px Photoshop document, we design only for the space we will actually inhabit? such as design in a 770 pixel Photoshop document even though the header will expand for the entire width?
or
Do you mean that we don’t give enough thought to design that provides the best experience for the screen size available?
or something else?
Greg // 11/04/07
Yeah I was worried I didn’t put my opinion across clearly enough.
What I was talking about was purely about aesthetics. On this site there are no visual boundaries enclosing the content horizontally, only vertically. If you have a larger resolution and resize your browser windows to full screen, the whitespace is to the left and right of the main body content continues. There is no defined cut off from the background and the site. It was these boundaries (constraints) that I was talking about.
Any clearer? (I need to practice my writing!)
Andrew Rickmann // 11/04/07
Greg, I think I understand what you meant now. It certainly isn’t easy describing a concept that relates to a behaviour which can have as many variations as this.
I think there are a few reasons for it but for me the most persuasive is simply that people copy (borrow / steal ) from those they admire. I
For whatever reason the original people did it, that is why others followed on. I don’t think that most web designers are as well versed in print as is often suggested.
I think the trend is definitely moving toward the free and open approach though; although, it I think it probably because the people that are admired, such as the few you pointed at, are doing it as well.
I think there are good solid design reasons for the page-in-page approach, I just don’t think most people consider them.
Greg // 13/04/07
Yeah I guess it’s down to personal opinion at the end of the day.
Add to that the fact that most of the sites I visit, read, admire are sites based on news or articles, and you could say this trend in design lends itself well to that kind of site. Also I can’t really picture a site with a small amount of content looking very attractive if designed in this way.
A bit of a confused article in hindsight, and although I did my best at expressing my opinion at the time, I think I’ll think these things through a little more in the future! :)