Landing Page Resolution: 800x600 vs. 1024x768

While not one of the eternal questions of our time, what screen resolution to build your landing page is nevertheless always a key design consideration. Many factors weigh into this decision. What are the browser resolution settings for the majority of your users? How does the page appear on different resolution setting (e.g. where is the call to action)? Or the worst one of all, what does the design or style guide permit?

Recently, we worked with a client whose existing landing page designed at 800x600 was performing very well. I had the idea that building multiple landing pages optimized for different browser resolutions and then targeting the pages to match the user’s resolution might improve conversion rates further. However, before we went about creating this layer of personalization we needed to test and validate this assumption. In the interest of time and resources we built one new page in 1024x768 (rather than three that would include the higher resolutions). We created performance segments for each of the four popular screen resolutions and put the pages to the test. The results are quite interesting.

At the lower resolutions the results are counterintuitive to my targeting hypothesis. Visitors with 800x600 actually converted at a significantly higher rate on the 1024x768 page. Those with 1024x768 resolution performed better on a page that was built in 800x600. Hmmm…

For the higher resolutions the effect was more expected. 1280x800 visitors converted at an almost 2% improvement on the 1024 page. Moving up to 1440x900 the improvement factor for conversion rate was over 6%.

What does this tell us?

800x600 Visitors: Since both versions of the landing page were designed to have the headline, fields and call to action visible without scrolling in 800x600 we can hypothesize that the larger presentation on these key landing page factors on screen accounted for the over 5% lift in conversion for the 1024 page on visitors.

1024x768 Visitors: This outlier is frustratingly difficult to understand. One hypothesis is that users on 1024 are much more likely to keep their browser windows not at full display mode. By shrinking the browser window it’s possible that the 8x6 page provides a better experience since no scrolling would be needed to interact with the page. A follow up test with some custom JavaScript will let us know if this is indeed the case.

1280x800, 1440x900 Visitors: Our original hypothesis remains strong in the higher resolutions. The larger resolution on landing is clearly has an increasing factor as you move to these levels. A follow up test would be creating pages optimized for these higher resolutions. There were many visits from laptops and work environments with these resolutions. Understanding the factors of higher resolution browsers more fully will be very beneficial.

Does it make sense to target the landing pages?

Sure does. Targeting these landings should yield a compounded conversion rate increase around 13% based on our initial testing. Additionally we’ve validated a fundamental design change for our client and continued testing as mentioned above will likely yield continued improvement.

What should I do?

Create pages in different resolutions and test! Screen resolution is a fantastic high impact segment. Nice lifts in conversion and other performance metrics can be easily gained by targeting the most basic (and most important) user experience variable, screen resolution.

Comments

[frank patrick]

Be careful with your math there.

Simply adding those percentages doesn't give you the total effect, which is actually probably somewhere between 2% and 6%.

[Jonathan Mendez]

Thanks Frank. I knew someone would call me on that. Didn't figure it would be you though. :)

Of course we have to look at overall traffic levels to come up with the true predictive and then measure the targeted pages against the untargeted ones over the same period for a valid metric.

Eyeballing it I believe since we are looking at the effect on the segment level and we will be targeting to each segment the compunded number should be much closer to mine then yours....but we'lll have to wait for those results. :)

Thanks,

Jonathan

[benry]

Facinating post Jonathan. I've been measuring a similar problem on my company's site (which is designed for 1024x768). What we've found is that users at 800x600 are forced to scroll and often end up reading more of the page than they may have if it was at a lower resolution. Those at 1024x768, as you noted, seem to take in the page in one full sweep. Looking forward to more on your experiments.

[Richard Hearne]

hmm...
"One hypothesis is that users on 1024 are much more likely to keep their browser windows not at full display mode."

I'd be interested to find out how you get on testing this one - kinda hard to imagine keeping browser windows non-maximised in 1024?

[Jonathan Mendez]

Richard-

With some javascript we should be able to detect the actual window size the browser is.

Thanks,

Jonathan

[Anil]

Amazing post Jonathan!
Love your posts, this one is quite interesting and i can relate to. One of the things we also observed is we had to call to action buttons (above and below the product description/benefits) and we had 50%+ users on 800x600 resolutions and the clicks on the upper button was more.

my question: is it a proven fact that pages designed for 800x600 resolution perform the same or better on 1024x768 resolution?

P.S: We've seen a increasing trend in 1024x768 resolution this year (slow trend though)

Regards
Anil

[Martin]

this is not really a problem. i test it last week - without problems.

[Ari Shomair]

Interesting article Jonathan -

Have you ever tested what effect maximizing the browser window via javascript has on conversion rates?

The interactive agency I work at commonly uses this trick for their flash microsites and what not - although I'm sure it pisses off many users, it does allow you to ensure your landing page is seen "in its original form" per say.

[Ben Pfeiffer]

Very interesting reading! I was researching something similar to this back a couple weeks ago I kick myself for not seeing this report earlier.

[Dave Jarvis]

Hi,

Don't forget about toolbars, sidebars, and plug-ins that a person can add to their browser.

While the resolution of the person's monitor may be at 800x600, even if the browser is maximised, Internet Explorer has a status bar, a right-hand scrollbar, a menu, a toolbar, an address bar, and a 3 to 5 pixel window border (XP vs. XP Classic). Each of these items claims for itself screen real estate, which, in turn subtracts from the total.

http://img380.imageshack.us/img380/4126/screenshot1zr6.png

If JavaScript can be used to determine the actual amount of visible screen real estate for the pages, then that would be the way to determine the Screen Real Estate available for your web pages.

[T-Shirt]

Intersting post. I will test it this evening.