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!
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.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteAgreed, this needs to have some way to factor in a fluid design or re-sized browser.
ReplyDeleteLike the tool, need a lot of work, but I like it.
ReplyDelete-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...
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.
ReplyDeleteHow about a browser plugin that both collects statistical data and provides analysis?
ReplyDeleteClever! Thanks for sharing it!
ReplyDeleteIt's surprising you guys still think the fold still holds any significance.
ReplyDeletehttp://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
Otherwise, kudos for brining more tools to Chrome.
Great, but for websites centering or resizing their site automatically for browser sizes, it doesn't work without manually resizing the browser.
ReplyDeleteWould work better if you accommodated for that, and also maybe if you worked in resolutions.
very nice info nd help guide...........
ReplyDeletend also help me have a good google page rank of my blog.......
http://desicracks.blogspot.com/
Where is this tool getting the data about the users per URL?
ReplyDeleteback in the 90's ppl did develop sites top left. as others have pointed., todays sites are more fluid.
ReplyDeletealso, 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.
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.
ReplyDeleteits a useful tool for centered not fluid designs like google usually does.
Thats pretty cool how you resize the divs to make a window lol.
ReplyDeleteI find that vertical scrolling is no big deal to me. Horizontal scrolling is something I despise.
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.
ReplyDeleteThis is an incredibly neat little gadget. Good job guys.
ReplyDeleteHi, maybe checking body width or something similar will help you detect more correct the size of pages with centered designs.
ReplyDelete10x for the tool
As always, thank you very much :D
ReplyDeleteI 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.
1. Visitors' screen resolution data: generic or website specific?
ReplyDelete2. Screen resolution would not always reflect actual (normally resized) browser size.
Why are the lines drawn in ms paint?
ReplyDeleteThese need to be nice dotted straight lines or something!
great tool till it is update
ReplyDeleteYet another reason why I love coding in actionscript. Resize my website. All the content stays on screen, no scrolling, no fuss from the fold:
ReplyDeletehttp://www.fanhosted.com
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.
ReplyDeleteA great idea, although I'm disappointed that its just the same overlay for all sites, surely different audiences will have different splits?
ReplyDeleteIts 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.
+1 Facewest_Sam Demographics play a key factor in the design. Using general percentiles without correlating to site-specific data sets misleading constraints.
ReplyDeleteThat’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.
ReplyDeleteAnd 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!
@Mikey,
ReplyDeleteThe 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
Can you just make it as a image so I can use it in photoshop while designing instead?
ReplyDeleteTHERE IS NO FOLD!
ReplyDeleteThe visitor's browser window size (and this statistics) was based on what?
ReplyDeleteAs 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.
Great tool, thanks for sharing!
ReplyDeleteMarcos, 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.
ReplyDeleteIt's not hard.
I'm a webdesigner, and this is already one of the most usefull tool i ever used!
ReplyDeleteThanks 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
I'm curious about why the bottom-right hand corner is rounded off? Shouldn't the stats show a corner?
ReplyDeleteIt'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.
Interesting. Thanks for sharing.
ReplyDeleteLike 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.
Centered Screen doesn't work.
ReplyDeleteAfter 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.
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.
ReplyDeleteIt 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).
ReplyDeleteIt must be hilarious for the Google developers when they read all these comments.
ReplyDeleteGreat tool. Anything that I can use to explain/demonstrate this issue to out of touch designers and clients is useful.
ReplyDeleteRegarding 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?
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.
ReplyDeleteInteresting but... the same overlay is applied to any site u look up in the tool.
ReplyDeleteAn 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.
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.
ReplyDeleteWell 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.
ReplyDeleteThe negative comments surprise and annoy me, but thats life on the internet I suppose. :)
Well done again.
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.
ReplyDeleteSecond: I have a question. What is the source of your data?
@Jon_W that's so funny, I was thinking the same thing!
ReplyDeleteThanks for the useful tool guys, keep up the great work.
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.
ReplyDeleteThat said ... great work, Bruno.
ReplyDeleteGood 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.
ReplyDeleteAs 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.
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.
ReplyDeleteWhy 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.
This comment has been removed by the author.
ReplyDeleteGreat 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%.
ReplyDeleteExcellent 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.
ReplyDeleteWhy 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.
ReplyDeleteI agree with everyone who suggested to add this to analytics, I think it would be great to see an overlay.
ReplyDeletePretty cool....
ReplyDeletethanks for your information and its very helpful...
this is really amazing service from GOOGLE.COM, you are always surprise us
ReplyDeleteGood job.. i really liked it!!
ReplyDeleteIf your webpage is centered or margin:auto.
ReplyDeleteJust adjust your browser window to the desired resolution indicator. 640x480 800x600 1024x768 are very common.
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.
ReplyDeletePLEASE 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
ReplyDeleteWarm regards
Ibrahim Ali
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
ReplyDeleteWarm regards
Ibrahim Ali
It's really a nice service...!
ReplyDeleteWeb 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.
ReplyDeletehttp://language-learning-program.blogspot.com/
ReplyDeleteLanguage 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...
Thanks for sharing. Interesting tool.
ReplyDeletenice tools ,helps to improve site design...
ReplyDeleteall is shown over here is about LTR (Left 2 Right) websites.
ReplyDeletewhat 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.
Yeah,
ReplyDeleteIt's good for us.It's a very easy & simple process.
http://www.solushunz.in
http://www.cxpartners.co.uk/thoughts/the_myth_of_the_page_fold_evidence_from_user_testing.htm
ReplyDeleteThat 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 :-(
Thanks! it's good for us to know more about SEO...
ReplyDeleteSuper ! I like this servis !
ReplyDeleteCool thing, but why don´t you track the viewport by default with analytics. This would be cool.
ReplyDeleteFor 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.
ReplyDeleteFor 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).
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.
ReplyDeleteThaks guys - this will change how I redesign our page... www.lifemasters.co.za real team building in South Africa.
ReplyDeleteI 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.
How about a chrome integrated developer tool that drops resolution overlays onto the chrome window, selected either by common resolution sizes or user percentage?
ReplyDeleteIs this template still relevant?
ReplyDeleteThis 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