In Maximizing Profits With Website Design and Layout: Part I, we looked at some examples of screen resolutions, and content placement. In part II I’m going to show some examples of how I look at and approach design considerations, specifically where the important “money making” parts are in relation to the screen break.
Looking at the Adsesne Heat map lets get some ideas about how to design a page with the prime content above the fold. As I see it you want to use your money spots for either your products or your AdSense advertising. I know this is going to sound like web heresy to some of you, but if you’re putting your navigation on the left, I think you’re not utilizing your prime real estate as well as you could, shift that navigation over to the right, people will figure it out, and personally I think it works better next to the scroll bar anyway. So Lets do some mockups of what I consider optimal layout.
We’ll be working with four files to start with (example1, example 2, example 3, example 4). Example 1 has a 50 px header, example 2 has a 100 px header, example 3 has a 150 px header, example 4 adds a navigation banner, page title and breadcrumb. I’ve also used some of the colors from the Adsense heat map to make things clearer. Below you’ll see the pages in 800 and 1024 screen resolution.
I think it’s very important to note that in both shots the “money parts” of the page are in the prime location. Now Lets see what happens when we raise the masthead up to 100 pixels.
Both of these layout are still acceptable IMHO, but you can see how the bigger masthead is clearly encroaching in a dramatic way on the 800 screen resolution. Now lets go up to a 150 pixel masthead.
All right that doesn’t look to bad, but wait these pages don’t have an H1 title, they don’t have any primary navigation, or a breadcrumb navigation. If you add that in lets take a look.
This is really about as far as I would push it. Personally I’m of the opinion that the 800 layout is “broken” and needs to be scaled back, but thats just me. I think the 1024 layout still works
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.
Categories:( website.design, | website.design, | website.layout | website.layout)
