Improve Your Conversions: Design Meets Data Using Google Browser Size and Google Analytics

Would you like to increase your sales or number of leads by 10%, 20%, or even more, without increasing your marketing spend? I’m sure most of us wouldn’t mind that extra bit of sales and revenue :). Well, there is no better time to do it than now. Roll up your sleeves, summon your web designer and your web analyst and then marvel over data available from Google’s new tool: Browser Size, with data from Google Analytics, and then start rockin’ n rollin’.

Google Browser Size

Google has recently introduced a new tool called Browser Size to help web designers “ensure that important parts of a page’s user interface are visible” by a wide audience. You basically type your URL in the tool and it’ll then load your page and show what percentage of users see what sections of the page, without having to scroll i.e. giving us a visual view of what is seen “above the fold”. The idea is if more people have to scroll to find your “calls to action” they are less likely to click and convert. For example, Google applying this method on Google Earth download page layout had an impressive 10% increase in their download rates by moving the download button up by 100 pixels.

So what does the Browser Size look like? Here is how our home page appeared in the Google Browser Size:

Google Browser Size

As you can see, 90%+ of the web population can see our “Optimize Your site” Call-to-Action, the green button (surrounded by a red box for you to see it in this above snapshot, but the home page doesn’t have this ugly red box :)). Kudos to our creative director and web designer (luckily we recently distributed Nordstrom’s gift certificates for the Holidays, otherwise they both would be asking for a bonus after reading this post:)).

Design Best Practices

Now that you have a visual view of your most important page elements, it’s time to put this useful information into action. We do know that design best practices for usability and conversion teach us that your important information should be immediately visible and easily accessible to users. An example of such an element is a conversion button, such as “Buy Now” for an ecommerce website.

Let’s say you have a “Buy Now” button at the bottom of the page, where only 20% of users can see it. And say your “add to cart” rate is 5% for all the visitors that come to this page – so for 1000 visitors, that’s 50 starting the purchasing process.

If we know that according to design best practices, a visible “Buy Now” button that catches your users’ eyes will entice users to buy, thus, “above the fold” is the way to go – that is, making sure this button is visible to as many users as possible (not requiring them to scroll down) could significantly increase your “add to cart” rate. That is, if 20% of your users seeing the “add to cart” button is leading to a 5% “add to cart” rate, imagine what 90% of your users immediately seeing the button may do. Even if that causes a 5% increase in “add to cart” (the new “add to cart” rate will now be 10%), you’re looking at doubling the number of visitors that start the purchasing process and you are likely to double your sales/revenue.

So with the help of this tool, if your page is being designed for 1280×720 and you realize 20% of your users can see that resolution while 90% can view 800×600 – though you don’t have to change your design to be tailored to fit the smaller size, at least the important elements should take this into account.

It’s worth mentioning that some folks have other views about the benefits of the “above the fold” concept, for example we really shouldn’t be cramming too much information up “above the fold” and we should keep in mind that “less is more”. Nonetheless, the Google Browser Size is still very useful.

Google Analytics offers additional data points & insights

The data in the Google Browser Size is collected based on visitors to What you can also do is to use screen resolutions data from Google Analytics on your own site . Here is how to get the data in Google Analytics:

  • Click on the “Visitors” tab
  • Click on “Browser Capabilities”
  • Then click on “Screen Resolutions”

You’ll get a report on screen resolutions that visitors to your own site use. You can then optimize your site based on this information.

So it appears that from our own screen resolutions data, most of the visitors can more or less view the entire page (a very good thing!).

Now, if you had a site that had a different screen resolution distribution, like the one below, you’d want to review the current design/layout of your pages and tailor them to the different visitors’ pattern.

Google Analytics Screen Resolutions 800x600

Segmentation, Segmentation Segmentation

And as always, don’t just look at data in aggregates, use segmentation to your advantage and zoom in on the data segment that is most important to you. Here are some examples of how to slice your data before you start your analysis and fact finding:

  • If your targeted audience is only in US & Canada, then run the Screen Resolutions reports on an Advanced Segment for the US & Canada audience
  • You might want to also segment by buyers and non-buyers and monitor any interesting trends between these two distinct groups of visitors
  • If you have different page layouts on your site, for example, your blog, your home page and category pages, you’d want to run the above analysis on each unique layout and make sure the messaging/calls-to-action are where you want your visitors to see them

Testing with the Google Website Optimizer (GWO)

One last note. If you are used to running tests, whether A/B or Multivariate, then it’s probably a no-brainer to run an experiment before you make massive (or small) changes across your site. If you haven’t tried testing yet, then this is a perfect opportunity to take the data and analysis to your manager and convince them to support you with resources to begin testing and realize site and revenue improvements! You can use the powerful and free testing tool from Google, the Google Website Optimizer (GWO), or another testing tool of your choice, to confirm (or disprove) your hypothesis before your roll out the design and layout changes.

Hope you find this post helpful. Feedback, comments and questions are most welcome!

Related Posts

5 thoughts on “Improve Your Conversions: Design Meets Data Using Google Browser Size and Google Analytics”

  1. To optimise conversions you should employ a web analytics provider such as clicktale to show you how your customers enagage eith your site. From the results fo the aggregate behaviours, real time videos and heatmaps you can mend any deficiencies and make it easier for visitors to your site to become buyers.

  2. Hi Dan,

    Thank you for your comment.

    There are many aspects to improving conversions, and products like Clicktale, CrazyEgg and others can be used for their intended purposes (mouse movements, heatmaps, etc.).

    You still need an enterprise level web analytics solution such as Google Analytics to provide you with a strong data/reporting foundation along with the host of advanced analytics capabilities that Google Analytics continues to offer.

    It’s also worth mentioning that Clicktale’s own website is using Google Analytics :).


  3. 1. users scroll
    2. did you notice Browser Size doesn’t take in account centered layouts? Is your “Get Noticed” headline being seen by 99, 98 or 95% of users?

  4. Thanks for your comment.

    As far as scrolling, yes, and the post made a reference to an article by CX Partners about the other views on “above the fold”. I don’t think we should be obsessed with “above the fold”, and yes users to scroll, especially when you have quality content that will entice users to read more (I know our creative director can elaborate on this one very well :). But we do see a whole lot of sites where some of the most important elements, CTAs, etc. are buried way down the page for no reason.

    And regarding the centered designs, as many of the comments on the original Google post, it would be a nice enhancement for the developers to add, among few other tweaks. We have provided some feedback to the Google developers, and I suggest you give them your input as well at browser-size-external-feedback @ google dot com.

    I think one takeaway here is to encourage the creative/design/usability team to work with the analytics folks with a common goal to use data and available tools to improve the overall user experience and site usefulness (and increase conversions/leads/sales/profits along the way :)).


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">