General layout: leaderboard above fold, or 300x250 on side?

[csdude55]

My existing layout for desktop is like this:

<div style="width: 975px; height: 162px">
 <!-- Logo, member login, search bar, and navigation -->
</div>

<main>
 <section style="float: left; width: 635px">
 <!-- Main content -->
 </section>

 <aside style="float: right; width: 320px; margin: 10px">
 <!-- 300x250 banner, ATF -->
 <!-- News headlines, recent classifieds, links to other site content -->
 <!-- 300x250 banner, BTF -->
 <!-- more aside content -->
 </aside>
</main>

But I'm thinking about changing it to this:

<div style="width: 975px; height: 162px">
 <!-- Logo, member login, search bar, and navigation -->
</div>

<div style="width: 975px; height: 100px; text-align: center">
 <!-- Responsive leaderboard banner -->
</div>

<main>
 <section style="float: left; width: 635px">
 <!-- Main content -->
 </section>

 <aside style="float: right; width: 320px; margin: 10px">
 <!-- News headlines, recent classifieds, links to other site content -->
 <!-- 300x250 banner, BTF -->
 <!-- more aside content -->
 </aside>
</main>

As you can see, the second layout would remove the 300x250 that's above the fold, placing the "aside" content higher on the page. But there would be a leaderboard banner just below the navigation, so the entire content area would be 100px lower on the page.

I have my resolution set to 1440x900, and have a viewport of 1440x780. So this second layout would use 33% of my screen before I get to the "real" content.

Which of these two options do you think would be better in both terms of user experience and ad value?

[phranque]

AB testing?

[csdude55]

That was my thought, too, but it's a bit of work to do. So I was hoping maybe somebody else has already gone through it and can share their result.

[NickMNS]

Is the site responsive? What happens to the layout in the mobile view?

[tangor]

What is the rationale behind one layout over the other? Change for the sake of change is not a good enough reason. That said, both work. Which one do YOU like? Or Which One Will Generate More Ad Revenue?

[csdude55]

Is the site responsive? What happens to the layout in the mobile view?

Yes, that's what I've been rebuilding. I use CSS to check the user's screen width, then manipulate certain elements to make sure everything falls in line.

Mobile and tablet / low res desktop users will already have a 728x90 banner at the top, but the <aside> element is totally hidden... so, no 300x250 banners, and no <aside> content to encourage more clicks.

What is the rationale behind one layout over the other? Change for the sake of change is not a good enough reason. That said, both work. Which one do YOU like? Or Which One Will Generate More Ad Revenue?

I have 2 thoughts:

1. No leaderboard at the top means that the meat is higher up on the page. That doesn't necessarily encourage more clicks, but it does mean that the end user sees what they want sooner which could result in more return traffic.

2. The leaderboard at the top will probably be worth more money than the 300x250 ATF, based on the fact that the leaderboard I have at the bottom of the page is worth more. And while it brings the <aside> content higher on the page (by 150px), which may encourage more pageviews, it also pushes the meat down.

So I think that the leaderboard at the top would generate more pageviews and more revenue, but I do worry about starting the meat lower down the page. I don't want to negatively affect the user's experience.

[NickMNS]

In my opinion you need to approach this from a mobile first perspective. I think the difference in the ad placement on desktop will be marginal, as you describe each layout has its trade-off. But from a mobile perspective there can be huge difference. First, (just to be sure) your banner needs to be responsive otherwise it will break the mobile layout. There is an issue with placing the banner directly below the navigation, if the ad loads relatively slowly (async for example), then the user may scroll down the screen before the ad is seen. This is not good. So it seems (I haven't had the chance to fully test this first hand) that the optimal location for the first ad on mobile is at the fold. Eg: <nav> <some main content> <ad> <!-- fold--> <more main content> <ad> <secondary content> <3rd ad if desired> <footer>. Now how this ends up looking on desktop is up to your design ability. The way I have recently laid it out on one my sites is
<nav> <h1 long title that wraps on mobile> <banner ad> <!-- fold--> <main content>... the banner ad is 728 x 90 on desktop and it collapses to 320 x 100 on mobile.

Another down side to having the banner directly below the nav on desktop is that if you have drop down menus in the nav this can expand over the ad and may increase invalid clicks.

[martinibuster]

Be careful about putting the leaderboard beneath your navigation if the navigation is a drop-down menu. That's one of the issues AdSense flags as a no-no and can get your account suspended for invalid clicks.

A compromise (if necessary) is moving the ad down to beneath where most people put their "featured image" and proceed from there.

[csdude55]

No worries, the navigation doesn't use a drop-down menu :-) I had to roll my own system so it's more like:

NAV1  NAV2  NAV3  NAV4  NAV5  NAV6
Subnav1 | Subnav2 | Subnav3 | Subnav 4

Then when you mouse over NAV2, the subnav changes to match. But it's all inline, so there's no worry of it overlapping the banner.

The only issue I run in to with having the banner within the <section> section is that my width is only 635px on a desktop, so there's no room for the 728x90 unless I completely remove the <aside> section. The <aside> section does have value, though, in that it encourages more pageviews, so I really don't want to drop it completely. I had to drop it for low-res and mobile, of course... but I get less than half the pages-per-session from those that I get from high-res desktop, and I suspect that this is one reason why.

Sadly, though, I'm seeing more and more traffic converting from desktop to mobile (not in addition to, but in place of), so at some point the focus on desktop traffic will become irrelevant. Which really sucks since mobile users look at less pages, and the ads on mobile are worth a fraction of those on desktop... which means that when 90% of my traffic is mobile I won't be able to pay the bills anymore :-(

[NickMNS]

the ads on mobile are worth a fraction of those on desktop...

That is mostly due to the fact that most ad impressions on mobile never get seen by the user. Compare your AVV (Active view viewable) for desktop and mobile. This is in large part due to the fact that pages are optimized for desktop and the ads in responsive mobile view end up wherever. I believe that it is crucial to optimize ad placements based on the mobile view first. The ad will show-up on the desktop view. It will be seen and the difference in revenue between an optimal and sub-optimal position will be negligible compared to the difference of the ad never being seen on mobile.

Then when you mouse over NAV2, the subnav changes to match. But it's all inline,

I like that, I might steal the idea :0)