Maximizing Profits With Website Design and Layout: Part II

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.

Adsesne heat mapLooking 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.

800

1024

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.

800

1024

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.

800

1024

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.

800

1024

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.layout)

GraywolfSEO.com runs on the Genesis Framework

Genesis Framework

Genesis lets you to quickly and easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.


tla starter kit

Advertisers:

  1. Text Link Ads - New customers can get $100 in free text links.
  2. BOTW.org - Get a premier listing in the internet's oldest directory.
  3. Need an SEO Audit for your website, look at my SEO Consulting Services
  4. TigerTech - Great Web Hosting service at a great price.
More in Advertising, Case Study, CSS, Ideas, npb, npp, ntt, Random Thoughts
Google, Bull Sh*t and Britney Spears

So the web's most linked to Googler Matt Cutt's is going on about spelling and it's effect on SEO. Now...

Maximizing Profits With Website Design and Layout: Part I

I was building new site this past weekend and I got into the liquid width versus static width debate with...

SEO Zen Master

Maybe I'm a sucker for eastern philosophy, but if you're looking to find out how to take a pebble from...

Close