Wednesday, December 16, 2009

Introducing Google Browser Size

When I started work at Google, I visited the Google Earth team, hoping to find a 20% project on my favorite Google product. There I met Bruno Bowden, who introduced me to a problem I had never thought much about: how to take browser sizes into account when designing a page.

Bruno had noticed that many people who visit the “Download Google Earth” page never actually download, even though, as you can see, the button is pretty hard to miss:



He wondered if a significant number of users might have their browser windows too small to see the button:



To analyze this, Bruno looked at how large people's browser windows were when they visited this page. His first key idea was to measure not the entire browser window, but just the client area -- no toolbars, status bars, or other chrome.

Bruno's second key idea was to render several weeks' worth of page visitor browser sizes in a contour visualization:



Using this visualization, Bruno confirmed that about 10% of users couldn't see the download button without scrolling, and thus never noticed it. 10% may not sound like a lot, but in this context it turns out to mean a significant number of people weren't downloading Google Earth. Using this data, the team was able to redesign the page to good effect.

Bruno and I realized that Web designers might benefit from this information if it could be made more generally available. We constructed a page that could overlay a DIV containing the contour visualization atop an IFRAME containing any other Web page:



This turned out to be a good way to see which controls were and weren't visible at typical browser sizes. The only problem was, the overlay DIV prevented mouse events from getting to the page IFRAME, so it wasn't possible to interact with the page.

To solve this, we split the overlay DIV into four:



Each of the outlines above (red, yellow, blue, green) represents a separate DIV. As the mouse pointer moves, we resize and reposition the DIVs to leave a small window of blank space around the pointer, and adjust background offsets for each DIV to make the overlay look like one seamless graphic. (We originally did this on a timer, but we found a simpler way: when the mouse touches any of the DIVs, resize/reposition all of the DIVs.) End result: a designer can click and otherwise interact with the page with the mouse, and thus interact with the site normally instead of repeatedly typing in URLs.

We are now making this tool available to the public on Google Labs. To try it, simply visit browsersize.googlelabs.com and enter the URL of a page you'd like to examine. The size overlay you see is using latest data from visitors to google.com, so this should give you a pretty good indication of what parts of your UI are generally visible and what aren't.

We look forward to receiving your comments at browser-size-external-feedback!

84 comments:

  1. Interesting tool, but it doesn't take into account the fact that many sites have fluid (resizing) designs. Thus, it's not really useful for determining if the content you want to appear is actually appearing in the percentile you want on a fluid design, without resizing your browser manually.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Agreed, this needs to have some way to factor in a fluid design or re-sized browser.

    ReplyDelete
  4. Like the tool, need a lot of work, but I like it.
    -What about a site that is centered on the screen?
    -Maybe the scale should be in devices resolutions (320x240, 640x480, 800x600....).
    -Could be fun if connected with google analytics...

    ReplyDelete
  5. It might be useful to use a javascript browser resize, instead of an overlay for the reasons listed above. That probably can be achieved with resizing the iframe for the site, but it would need to be toggled.

    ReplyDelete
  6. How about a browser plugin that both collects statistical data and provides analysis?

    ReplyDelete
  7. Clever! Thanks for sharing it!

    ReplyDelete
  8. It's surprising you guys still think the fold still holds any significance.

    http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm

    Otherwise, kudos for brining more tools to Chrome.

    ReplyDelete
  9. Great, but for websites centering or resizing their site automatically for browser sizes, it doesn't work without manually resizing the browser.
    Would work better if you accommodated for that, and also maybe if you worked in resolutions.

    ReplyDelete
  10. very nice info nd help guide...........

    nd also help me have a good google page rank of my blog.......

    http://desicracks.blogspot.com/

    ReplyDelete
  11. Where is this tool getting the data about the users per URL?

    ReplyDelete
  12. back in the 90's ppl did develop sites top left. as others have pointed., todays sites are more fluid.

    also, wht is deriving the medians., it would be usefull to select/deselect operation systems, browsers., etc etc to drop off mobile devices.. 300x300 for 99% = no shit.

    ReplyDelete
  13. I agree too. When i browse a website on my notebook the login button spans to the 1300res area which is 20% viewable but on my home pc which is 1024 res it resides inside the 90%. dues being problematic with fluid spanned designs.

    its a useful tool for centered not fluid designs like google usually does.

    ReplyDelete
  14. Thats pretty cool how you resize the divs to make a window lol.

    I find that vertical scrolling is no big deal to me. Horizontal scrolling is something I despise.

    ReplyDelete
  15. Have you heard of or tried XScope? It's a OS X app that overlays visible content sizes for the various browsers. Take a look if you've got a mac.

    ReplyDelete
  16. This is an incredibly neat little gadget. Good job guys.

    ReplyDelete
  17. Hi, maybe checking body width or something similar will help you detect more correct the size of pages with centered designs.

    10x for the tool

    ReplyDelete
  18. As always, thank you very much :D

    I guess there are many designers that still don't have any idea of importance of end user browser size. This tool is a very clever way for testing.

    ReplyDelete
  19. 1. Visitors' screen resolution data: generic or website specific?

    2. Screen resolution would not always reflect actual (normally resized) browser size.

    ReplyDelete
  20. Why are the lines drawn in ms paint?

    These need to be nice dotted straight lines or something!

    ReplyDelete
  21. great tool till it is update

    ReplyDelete
  22. Yet another reason why I love coding in actionscript. Resize my website. All the content stays on screen, no scrolling, no fuss from the fold:

    http://www.fanhosted.com

    ReplyDelete
  23. I think you can still get far more useful data by using analytics to track the viewport size of browsers visiting your site with events. In fact if this kind of visualisation could be tied into real data harvested from user data for a given site it might actually be extremely useful.

    ReplyDelete
  24. A great idea, although I'm disappointed that its just the same overlay for all sites, surely different audiences will have different splits?

    Its definately something I've been interested in for a while so if it can be improved on it has the potential to be extremely useful.

    ReplyDelete
  25. +1 Facewest_Sam Demographics play a key factor in the design. Using general percentiles without correlating to site-specific data sets misleading constraints.

    ReplyDelete
  26. That’s a cool tool. What I reckon would be interesting to know, is the number of computers that don’t have scroll wheels, or some other kind of pseudo-scrolling method. Web stats tell us things like screen res, what OS, which browser versions, and so on, pity they can’t indicate the scrolling capabilities.

    And larger monitor sizes are becoming more the norm now. But I wonder how many people do NOT have scroll wheels which makes scrolling less easy. Maybe just grandmas, who don’t know any better.

    Sometimes it surprises me how many people still use 800x600, or the occasional oddball who uses 640x480! Even handhelds have better resolutions than that.

    Mikey's comment about above the fold being old hat is interesting, but for some things I think it does matter. A good example of the “above the fold” point is the number of people who place Adsense ads on their websites to make money, but say they never make much from it.
    A key element to success is placing the ads above the fold, generally right at the top of the page, so they’re the first thing people see.
    Plus tailoring the ad appearance (as much as you can) not to look like an ad, but as if it is just part of the normal page content.
    When I did that consistently through my personal sites, my earnings quadrupled, perhaps even more.
    I generally make at least £150/month, but at other times of the year can go to £450/month.
    Nice pocket money.

    The other important thing is good SEO to get the traffic!

    ReplyDelete
  27. @Mikey,
    The page you linked talks about vertical scrolling (up and down), but not horizontal (left and right). I consider that to be a far larger problem then vertical. Mostly because a scrollwheel will not (easily) allow it.

    As for the tool itself, I believe it should be used with great care, if at all. As shown above it does not take liquid designs into consideration. In addition I don't see what it offers over a simple resize of the browser window?

    Also, if its a simple overlay, why not make it into a bookmarklet? (http://en.wikipedia.org/wiki/Bookmarklet)

    Just m $0.02

    ReplyDelete
  28. Can you just make it as a image so I can use it in photoshop while designing instead?

    ReplyDelete
  29. The visitor's browser window size (and this statistics) was based on what?

    As mentioned earlier, this tool doesn't take into account that most of the sites have resizable designs, also doesn't take into account the current browser window size when using the tool.

    In my opinion its not helpful in the way it is.

    ReplyDelete
  30. Great tool, thanks for sharing!

    ReplyDelete
  31. Marcos, it does take it into account, you just have to use the page differently for fluid layouts: just resize your browser to your target percentage in each dimension, then check if the content is correctly rendered. Alternatively, resize your browser to the smallest it can be until something breaks or looks bad, then check the percentage of vistors to which the degradation applies.

    It's not hard.

    ReplyDelete
  32. I'm a webdesigner, and this is already one of the most usefull tool i ever used!

    Thanks a lot for sharing this :)


    PS: I have already enhanced my website ( http://derfurth.com/ ) with a bit of js magic so visitors see the goal if the window is too small

    ReplyDelete
  33. I'm curious about why the bottom-right hand corner is rounded off? Shouldn't the stats show a corner?

    It's a useful education tool from my point of view, alhtough it would good be for liquid layouts to either:
    - Make explicit that you need to re-size your browser, or
    - provide options for re-sizing the width of the site within the iframe, to simulate different resolutions.

    ReplyDelete
  34. Interesting. Thanks for sharing.

    Like others have said though, most designs I do are fluid in one way or another. Sometimes just flexible borders, or centred, and often fully fluid layouts. It would be cool if anyone could come up with a way of handling this with a nice little tool like you've done.

    ReplyDelete
  35. Centered Screen doesn't work.

    After looking at this, the first thing i did was to look at my own site and since it is centred, the result is null for now.

    Hope it improves soon and we get more info.

    cheers.

    ReplyDelete
  36. Handling resolution has always been a bugaboo for me, so a tool like this grabs my attention. But the browser itself resizes nicely if you give it the tools. Like following a car with a bumper stick that reads "I may be slow, but I'm ahead of you": if running 1280, I'll see so much; if running 800, I'd see less _but_ the browser compensates, so not really less after all. Gee, maybe I'm past this issue after all.

    ReplyDelete
  37. It would be better if it were a Photoshop layer. If you are concerned about the layout of your page, you are most likely not doing the design in an HTML editor. Instead you're using Photoshop (or equivalent app).

    ReplyDelete
  38. It must be hilarious for the Google developers when they read all these comments.

    ReplyDelete
  39. Great tool. Anything that I can use to explain/demonstrate this issue to out of touch designers and clients is useful.

    Regarding comments above:
    YES there is a fold. Ask anyone whose livelihood depends on e-commerce. Or sit in a room and watch usability testing with your customers trying to find important information "hidden" outside the initial view.

    If you are already designing truly fluid sites, do you need this tool?

    ReplyDelete
  40. It finally seems that mobile browsers have one advantage over the desktop. While it's difficult to know how an app appears across the number of devices in the market, at least there's some uniformity in display on each given device. Keynote is rolling out Mobile Device Perspective Interactive in January to see how apps show up across various smartphones. It'll be fun to do some discoverability research on smartphones when compared to the desktop variation illuminated with the tool in this article. Many assume that smartphone content is more difficult to find; however this may demonstrate that it isn't always the case.

    ReplyDelete
  41. Interesting but... the same overlay is applied to any site u look up in the tool.

    An idea: a script that deploys in your site (like google analytics) and shows you the overlay based on the visitors of your site, not google's.

    Now that's actionable. Google's average is not as actionable unless you have little design experience and no clue about your site's visitors.

    Keep up the good work.

    ReplyDelete
  42. Most well designed sites are fluid, but that doesn't mean they're perfect. Wikipedia's main english page for example uses 3 columns: sidebar, featured article, in the news. At 300px they'd be better going to single column. Good luck doing that without javascript though.

    ReplyDelete
  43. Well done... very simple and easy to understand. Its not perfect for every situation, but then again nothing really is. I expect the aim was not to solve everyone's problem, but rather to expose some useful information.

    The negative comments surprise and annoy me, but thats life on the internet I suppose. :)

    Well done again.

    ReplyDelete
  44. First: I find this to be REALLY handy... it's an easy way to answer a question that I often ask myself -- and normally I have to keep resizing my screen a lot to find the answer; with this I can just glance (or drag back and forth once if the layout is fluid.

    Second: I have a question. What is the source of your data?

    ReplyDelete
  45. @Jon_W that's so funny, I was thinking the same thing!

    Thanks for the useful tool guys, keep up the great work.

    ReplyDelete
  46. Nice tool. If you could allow the user to select a virtual display size, then you could fix the very annoying problem of liquid designs. As it is, this tool gives misleading if not totally incorrect figures for liquid pages. Liquid pages are a valid and common design choice.

    ReplyDelete
  47. That said ... great work, Bruno.

    ReplyDelete
  48. Good idea, and I'd love to see one that takes liquid layouts into account. Maybe those boxes, but opaque, and on mouse-over you see what it looks like when the browser is physically sized to those dimensions? I think that's be much more useful.

    As it is, for example, anything that's centered on a larger viewing window gives totally nuts results without resizing your viewing window ... making the whole point kind of moot.

    ReplyDelete
  49. Yeah, as mentioned the centred/scaling sites have a bit of a problem with this, the idea is great and getting it from real data is important (more-so than just using a browser/window sizing tool)... But I will propose this.
    Why not add it into the 'overlay' function of analytics? Place it into the scenario of 'my data' and how 'my' site relates to 'my' viewers and what 'they' can see. We run a University web site so relating this to our stakeholders is important, even if now-days most users can see past the fold, if not the right-side scroll in the case presented above.
    Love the work, the idea is great.

    ReplyDelete
  50. This comment has been removed by the author.

    ReplyDelete
  51. Great tool, but I am with the others that a little tweaking would be good to address sites that are centered and at a fixed width... about 900 pix wide (give or take) seems to be fairly common to me and 90%.

    ReplyDelete
  52. Excellent use of a simple tool to provide instant visual feedback. This kind of thing is great when you're working on comps or prototypes and want to test before committing to deeper development.

    ReplyDelete
  53. Why are people complaining about it not catering for liquid designs? All you have to do is resize your browser? Just grab the web developer toolbar.

    ReplyDelete
  54. I agree with everyone who suggested to add this to analytics, I think it would be great to see an overlay.

    ReplyDelete
  55. Pretty cool....
    thanks for your information and its very helpful...

    ReplyDelete
  56. I really liked your blog! You have some great content. Please come visit my site Fortworth Business Directory when you got time.

    ReplyDelete
  57. I really liked your blog! You have some great content. Please come visit my site Fortworth Yellow Page Business Directory when you got time.

    ReplyDelete
  58. this is really amazing service from GOOGLE.COM, you are always surprise us

    ReplyDelete
  59. Good job.. i really liked it!!

    ReplyDelete
  60. If your webpage is centered or margin:auto.

    Just adjust your browser window to the desired resolution indicator. 640x480 800x600 1024x768 are very common.

    ReplyDelete
  61. Interesting, but if the underlying data about viewport size does not come from my Google Analytics account then the results are too general to be reliable I think.

    ReplyDelete
  62. PLEASE DOWNLOAD FROM WEBSITE www.goldenduas.com for peace, security, health and wealth for man kind. The same may be circulated for all concern based on Quranic verses 2:2,10:57,17:11 and 16, 28:59,39:55 and 57 and also 65:8

    Warm regards
    Ibrahim Ali

    ReplyDelete
  63. PLEASE DOWNLOAD FROM WEBSITE www.goldenduas.com for peace, security, health and wealth for man kind. The same may be circulated for all concern based on Quranic verses 2:2,10:57,17:11 and 16, 28:59,39:55 and 57 and also 65:8

    Warm regards
    Ibrahim Ali

    ReplyDelete
  64. It's really a nice service...!

    ReplyDelete
  65. Web developer toolbar - firefox addon has the feature that allows you to set the size of yours browser windows to for example 800x600 , 1024x768 ...or custom size. It's much more better because you really see the window size as it would see person who has the selected screen resoultion. No problem with fulid layouts, etc.

    ReplyDelete
  66. http://language-learning-program.blogspot.com/

    Language Learning Programs and Ebooks

    Rosetta Stone, Tell Me More, Michel Thomas, Pimsleur, EuroTalk, Face2face, EFU, Berlitz, Oxford, Cambridge, Barrons, Colloquial, ESL, EFL, TOEFL, IELTS, LANGMaster, Rocket Languages, Teach Yourself, Touchstone and more...

    ReplyDelete
  67. Thanks for sharing. Interesting tool.

    ReplyDelete
  68. This is a very nice project, why dont you do something about making it as a frame less to avoid other mobility issues too. Due to a large number of Pocket PC or small size screen nettops now a days.

    ReplyDelete
  69. nice tools ,helps to improve site design...

    ReplyDelete
  70. all is shown over here is about LTR (Left 2 Right) websites.
    what about the RTL websites ? are you checking the direction of the webpage?
    because some conclusion about how the user see your site may be incorrect due to that.

    ReplyDelete
  71. Yeah,
    It's good for us.It's a very easy & simple process.
    http://www.solushunz.in

    ReplyDelete
  72. http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm

    That page doesn't render properly on IE8, even in compatibility mode. Who is the audience?

    I don't want to use IE, I have to :-(

    ReplyDelete
  73. Thanks! it's good for us to know more about SEO...

    ReplyDelete
  74. Super ! I like this servis !

    ReplyDelete
  75. Cool thing, but why don´t you track the viewport by default with analytics. This would be cool.

    ReplyDelete
  76. I dont this browser size is of much use as fold is not considered as nowadays people are using higher resolution monitors and more over many sites have fluid (resizing) - http://edotsindia.blogspot.com/2010/03/browser-size-useful-tool-for-web.html

    ReplyDelete
  77. For the folks saying that "there is no fold," I can't say I disagree with you, but you have to admit that the case study that was the impetus for this tool is reasonably convincing that being aware of browser viewport sizes is important.

    For those who wish this handled fluid and center-aligned layouts, I suggest:

    www.foldtester.com

    Shows what's up at different opacities, and allows you to change the alignment of the page ("left" or "center" only).

    ReplyDelete
  78. I'm using FF3.6.8. The page is very jumpy/stuttery. If there are large sections that are mouse over, it flickers as the mouse is moved around. Needs to resize before the mouse leaves the active area.

    ReplyDelete
  79. Thaks guys - this will change how I redesign our page... www.lifemasters.co.za real team building in South Africa.

    I see we have 22000 searches a month in SA for "Team building, about 1000 of those get to my page... and about 60 ask for a proposal for some team building event... This will change my results...thanks!

    Tony Dovale -
    Life Masters Team Building South Africa.

    ReplyDelete
  80. How about a chrome integrated developer tool that drops resolution overlays onto the chrome window, selected either by common resolution sizes or user percentage?

    ReplyDelete
  81. Is this template still relevant?

    ReplyDelete
  82. This looks like a great tool, but what about a site that's centered rather than aligned left? I'm not a developer so I have no clue why my sites appear centered - it seemed like that would be a good thing. But it means the tool doesn't work for me :(

    ReplyDelete