Maximizing Profits With Website Design and Layout: Part I
January 24th, 2006 by Michael Gray in Advertising, CSS, Case Study, Ideas, Random ThoughtsIf you're new here, you may want to subscribe to my RSS feed. Read my top posts or learn more about Michael Gray. Want more frequent updates follow me on Twitter. Thanks for visiting!
I was building new site this past weekend and I got into the liquid width versus static width debate with myself again. Now I’ve been involved in designing, programming, running, and optimizing websites in one way or another since 1998, and while I’m no usability expert I think I’ve seen and built enough websites to have a educated opinion, so I’d like to share what I think about how design and layout can effect your profitability.
First off lets look at some recent screen resolution statistics:
| Screen Resolution | 2004 | 2005 |
|---|---|---|
| 800×600 | 35% | 28% |
| 1024×768 | 50% | 56% |
| >1024 | 10% | 11% |
| smaller/unknown | 5% | 5% |
We see a reduction in 800×600 screens an increase in 1024 screen and a slight increase in larger screen (strangely 5% remain consistanly clueless). I’ll confess that I personally have a 17″ widescreen with a 1440 x 900 pixel resolution. I’ll also confess that at one point I would have defended liquid layout to death like a fiercely devoted open source zealot. The thing that changed my mind was actually getting a bigger monitor with a higher resolution. Why? Well unless you have LOTS of content, enough to fill the page at any almost any width your page just ends up looking … funny at some point. If you mix in adsense, affiliate links, or any other type of commerce where layout and placement are crucial, IMHO liquid layout makes a lot less sense. But lets take a look at some examples.
To start off lets look at the poster child for gadget blogs Engadget
A few thing to notice right off the bat I’ve only got one toolbar on so there’s not a lot of wasted browser chrome. Second thing to notice like all weblogs inc blogs it’s wider than 800 pixels (see the scrollbar on the bottom). As far as actual content we see the site masthead, the title of the first post, and thats it. Let’s raise the resolution up to 1024.
The horizontal scrolling is gone so IMHO that’s a good thing. Next thing is we are getting actual content on the screen. In this case it’s a picture but it could just as easily be text. Now lets look at it at at my my resolution of 1440.
Now even with the big picture we are still getting some actual copy. Now just because I’m a little crazy lets look at the same page in the RSS feed at 1024.
I feel there are two important things to take note of, one the advertisements are taking up much less screen real estate, and I can see almost two complete posts without scrolling. Why is this important to people who build and market websites? Hopefully you read the report that came out last week about how little time people spend evaluating a website. (Internet users quick to judge. 16/01/2006. ABC News Online)
“Visual appeal can be assessed within 50 milliseconds, suggesting that web designers have about 50 milliseconds to make a good impression,” the Canadians report in the journal Behaviour & Information Technology.
Associate Professor of psychology Bill von Hippel, from the University of New South Wales, says it takes about 50 milliseconds to read one word, making this a “stunningly remarkable” timeframe in which to process the complex stimuli on a website.
So if you are concerned with a websites financial success, exactly what and how much are you going to show that person in 50 milliseconds in an 800 or 1024 width screen? According to a recent article on blog design trends “big headers and footers are in” as well as “a thin border at the top”. From where I sit this doesn’t make much sense, you want to keep your masthead as small as possible, just enough to put a logo, establish branding, get some primary navigation, and maybe a search box. If you can do it in 50 to 75 pixels excellent, keep it 100 or less you’re still in good shape, approach the 150 pixel height and it maybe time to reign in your web designer, and see if you are on the same page and working towards the same goal. I’ve said it here a few times before, big huge tall banners have always been my problem with the layouts on CSS Zen Garden. Not that designs there aren’t stunningly beautiful, but I think they do more to stroke the ego of the designer on their 20″ apple monitor, than facilitate commerce on a 15″ to 17″ Compaq, Dell, or Gateway.
In Maximizing Profits With Website Design and Layout: Part II, I’ll give you some examples of what I think are design considerations you should think about.
Categories:( website.design, | website.design, | website.layout | website.layout)
Sphere It
January 24th, 2006 at 9:24 am
The key to web design is testing. Its well known in the direct marketing world that something as simple as changing a color can increase (or decrease) an ads earnings. I use this same principle when I create a site.
January 24th, 2006 at 9:45 am
Agreed, there is no one size fits all solution, but in the same way all sports cars share some characteristics, certain websites or blogs do as well. Finding and implementing them can mean the difference between making a profit and folding up shop.
January 24th, 2006 at 12:32 pm
Your Website Designs Impact On Ad Placement And Performance
What impact does your website design have on your advertising performance? It has a whole lot to do with it and I’ll show you why. First off let’s tackle the actual size of your website. Size has a double meaning…
January 24th, 2006 at 2:09 pm
I’m not sure that I would place too much importance on that 50 millisecond research.
In the real world what website loads in 50 milliseconds?
January 24th, 2006 at 2:43 pm
I don’t think it’s that the website loads in 50 milliseconds but that the end user makes judgment in 50 milliseconds after the page loaded.
January 24th, 2006 at 4:41 pm
I understand what your saying but I think it’s more a case of what the surfer is going to see as the site loads.
Some of the ‘expert’ comments that I saw in relation to that research suggested that people were looking for colour, movement and graphics but those things are the last things to load.
There are other things that load quicker and appear sooner that you can use to grab a surfer’s attention
January 24th, 2006 at 9:06 pm
Colly’s approach is a pretty good idea, revealing more or less with javascript. The smaller screen res never really loses anything that important and the larger screen works. Same thing for Benjamin Adam’s old website.
January 24th, 2006 at 9:09 pm
Not a big fan of javascript or client side code at all, too easy to trip up IMHO.
January 25th, 2006 at 11:26 am
Graywolf I think I’m with you– I went from fixed, to fluid, and now I’m at fixed again.
With a fluid design on a wide monitor, one line of text can be ridiculously wide, which is very poor usability.
January 27th, 2006 at 10:02 am
[...] Es hat gute Gründe ein Design nicht “liquid” zu machen (siehe Artikel: Maximizing Profits With Website Design and Layout: Part I), genauso hat es aber auch gute Gründe ein Layout liquid zu machen. [...]
January 31st, 2006 at 3:16 am
[...] Mehr dazu in Maximizing Profits with Website Design and Layout. [...]
February 10th, 2006 at 8:38 am
[...] Спустя достаточно долгое время я решил вот сейчас возвращаюсь к вопросу дизайна блогов. Побудила меня к этому статья “Maximizing Profits With Website Design and Layout: Part I”, а точнее одна из идей высказанных в ней. [...]
February 10th, 2006 at 7:13 pm
I prefer to create a fluid site fixed at 1024 resolution. This makes it equally viewable in 800 and 1024 but if it gets larger it won’t look ridiculous.
I’ve come to a point where I like fluid 1024 sites (I used to think they looked ridiculous), but have to agree that when it gets more than that it does look ridiculous.