Maximizing Profits With Website Design and Layout: Part III
January 26th, 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!
In Maximizing Profits With Website Design and Layout: Part I, we looked at some examples of screen resolutions, and content placement. In Maximizing Profits With Website Design and Layout: Part II, we looked at how banner size affected the “sweet spot” being above or below the fold. In part III we’re going to look at liquid versus static.
When we left off we had a page that was pushing the limits of keeping the profitable elements above the fold in both an 800 and 1024 layout. This was done using a fixed width page layouts.
Lets look at what happens when we change it to a liquid layout (if you don’t believe in the power of CSS compare the files and see how easy it is for me to change this with very few lines of code)(example 4example 5).
Now because we had to go to % instead of fixed pixels I think the 800 looks worse. You could play with using a hybrid of percentages and fixed width side rails, but that’s more complex than I want to get into right now. The 1024 looks a little better because you have more on the page. Lastly what about all the spoiled brats of the world like me who have big monitors, how does it look to them.
I think that looks great, but notice that page also has a more than a minimum amount of copy (over 200 words). So if you’re going to be building a website with a decent amount of copy on a page, then liquid layout is definitely your best choice. However if your copy is going to be less than stellar quality and posses a Zen like brevity, go with a fixed with to make it “feel” longer, and layout nicer. If you were to drop down to two columns instead of three, the length of the copy is going to play a larger role so make sure you are going to have plenty of it if you do want to go liquid.
Conclusion
So to wrap everything up in a nice little package here my recommendations
- Masthead - Just the essentials, smaller is better. Avoid big graphics and other designer tricks and elements just to make an impact
- Body - Keep the money items in the prime real estate above the fold and as far left as possible.
- Navigation - If it’s in the masthead keep it small, if it’s in the body keep it to the right
- Page Width - Are you going to have lots of content, if so go ahead and fill the whole screen, otherwise stick with a fixed width to make it feel longer
Sphere It
January 26th, 2006 at 8:15 am
Cheers, interesting series.
On a not totally unrelated side note : you dropped adsense here ?
January 26th, 2006 at 8:35 am
Nope Adsense is still here, it phases in in stages as post age.
January 26th, 2006 at 9:35 am
[...] In Maximizing Profits With Website Design and Layout: Part III, We’ll look at liquid versus static and see how those factors play into the picture. [...]
January 27th, 2006 at 6:30 am
and test, test, test - split A-B testing is the only way to fly
January 27th, 2006 at 1:19 pm
How to prevent ads from printing
Right now I’m following my own advice and setting up yet another site, this time a questions and answers site. I’ve been spending some of my spare time playing around with the look and management of site, so there’s no real content on it yet. But it…
June 1st, 2006 at 12:14 pm
Thank you for a very well written series. Your perspective and consideration for all the factors that go into designing a site for a customer are all given weight, which is a rare quality. And as if good, clear writing weren’t enough, you generously supplied good, clear visual examples. Just an excellent job, Michael. Having read the series, I understand the sizing issues of web design much better.
June 18th, 2006 at 5:14 pm
Thank you for writing this series. It provides a lot of information for me to consider.
Jeronimo