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)
Related posts:
- Thesis is a Wordpress Framework Not a Design and Why That Matters for SEO When I men
- How To Figure Out What Parts of Your Website Aren’t Being Crawled When Googl
- New Website ViralConversations.com So if you
{ 5 trackbacks }
{ 7 comments }
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.
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.
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)
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
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.
I love your example number IV! i will definately use that layout it my upcomming blog design
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.
Comments on this entry are closed.