Maximizing Profits With Website Design and Layout: Part II
January 25th, 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 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)
Sphere It
January 26th, 2006 at 1:48 am
Yeah - I know - I’m going to disagree with you again - but only in the spirit of making other people think.
Look at Weblogs Inc and see where they put most of their advertising.
There is other research that suggests a slightly different result to Google’s heat map and you made an interesting point when you suggested that navigation should go over against the scroll bar.
If people are going to be looking for the scroll bar then the real estate next to the scroll bar might be more valuable than Google’s heat map suggests.
January 26th, 2006 at 7:01 am
Mr C. is indeed raking in the big bucks, so it’s hard to find fault with what he’s doing. However on sites I have with similar themes and similar traffic, Putting AdSense on the left rail as opposed to the right definitely improves CTR. However if you’re in the link building and acquisition stage of the game, I like to go with a more subtle AdSense implementation or turn Adsense off completely.
January 26th, 2006 at 9:25 am
When I click on your sample links, I get taken to:
http://www.crystalinks.com/thoth.html
Why’s that? They all look the same (headers anyway)
January 26th, 2006 at 9:33 am
[...] 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. [...]
January 26th, 2006 at 9:35 am
Re Crystallinks.com .. err well because that’s what happens when you put links to your local development server and forget to change them when you publish something live, sorry about that, all better now
January 26th, 2006 at 6:18 pm
I always find it interesting that Google’s search results pages (and Gmail message pages, too) display advertising on the far right-hand side of the screen — which, according to that much-referenced map above, is pretty much the “coldest” part of a page. I realize it’s a bit apples-to-oranges, but a webpage is a webpage, after all.
You’re right about adspace being an afterthought for most. I think the chief reason for that is because many people don’t imagine there’s any possibility of generating lucrative ad revenue from a personal blog, so it seems like a pointless concession to make. After getting a gander at AdSense, they find out otherwise.
That was sort of the case with me. I guided my designer every step of the way on my template, but I neglected to put any thought into ad spots. Later, when I added some, I struggled a bit to fit them in. Obviously, whenever I roll out a new look, space for ads are going to be a priority consideration.
The other thing is the widespread use of cookiecutter templates, both from Blogger et al and from freelance designers. Most of those aren’t optimized for adspace either, so it’s an odd fit when they’re added later.
January 26th, 2006 at 6:40 pm
I love your example number IV! i will definately use that layout it my upcomming blog design
January 26th, 2006 at 7:16 pm
Not Sure Google had a plan either when they started with adsense, I think they stumbled their way through. The public outcry would be unbearable if they moved them to the left, and they would lose a lot of street cred.
January 27th, 2006 at 8:39 am
[...] Maximize revenue with design [at Wolf-Howl] [...]
February 19th, 2006 at 6:07 am
[...] Maximizing Profits With Website Design and Layout: Part II : Graywolf’s SEO Blog (tags: blogging howto webdesign tutorial layout) [...]
March 9th, 2006 at 12:47 am
[...] Layout/placements: Tips for better adsense ad layout Don’t blind optimize your adsense Adsense unit size tips A short guide to ad sizes Adsense loading order affects click value Maximizing Profits With Website Design and Layout: Part II [...]
June 22nd, 2007 at 2:08 am
[...] and 120 x 240. In addition you want to make sure you have the ads in prominant clickable spots (see Maximizing Profits With Website Design and Layout: Part II :). You may also find you have a lot more success using a landing page with no external navigation. [...]