Landing Page Resolution: 800×600 vs. 1024×768

ScreenresolutionWhile 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 800×600 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 1024×768 (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.

Screen_rez

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

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

What does this tell us?

800×600 Visitors: Since both versions of the landing page were designed to have the headline, fields and call to action visible without scrolling in 800×600 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.

1024×768 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 8×6 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.

1280×800, 1440×900 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.

13 thoughts on “Landing Page Resolution: 800×600 vs. 1024×768

  1. 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

    Like

  2. Facinating post Jonathan. I’ve been measuring a similar problem on my company’s site (which is designed for 1024×768). What we’ve found is that users at 800×600 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 1024×768, as you noted, seem to take in the page in one full sweep. Looking forward to more on your experiments.

    Like

  3. 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?

    Like

  4. 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 800×600 resolutions and the clicks on the upper button was more.
    my question: is it a proven fact that pages designed for 800×600 resolution perform the same or better on 1024×768 resolution?
    P.S: We’ve seen a increasing trend in 1024×768 resolution this year (slow trend though)
    Regards
    Anil

    Like

  5. 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.

    Like

  6. 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 800×600, 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.

    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.

    Like

  7. Someone I work with visits your blog quite often and recommended it to me to read as well. The writing style is superior and the content is top-notch. Thanks for the insight you provide the readers!

    Like

  8. This is a really good blog, I found your webpage looking around for a related subject and arrived to this. I couldn’t come across to much alternative info on this blog post, so it was pleasant to discover this one. I definitely will be back to check out some other articles that you have another time.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s