Google Dec. 16 moved to attack the increasingly prevalent problem of incomplete Web page viewing by creating a tool that lets Web site operators see how visitors see their sites.
Browser Size is a nifty 20% time solution to missed buttons that stems from browser clients rendering Web pages on different monitor sizes, or when browsers are not full screen or have to account for toolbars and the like.
Why is this a big deal? Because we miss a lot when we go to Web sites. Google offers the great example of Google Earth, which has a big ole download button, but far fewer people downloading it compared to the visitor rate. Google’s Arthur Blume wrote:
“The install rate increased by 10% when we moved the “Download” button 100 pixels upward. We can attribute that increase to users who wanted to try out Google Earth, but didn’t see the button before.“
Those are benefits that any Web site operator can recognize if they apply Browser Size. The tool employs special code to collect data on the height and width of the browser for a sample of users to Google.com. The tool tells what percentage of users can see a Web page at a given point in the Web browser.
To do this, Browser Size overlays an IFRAME contour atop a Web page. Better to show than tell. Using the latest Firefox 6.5 browser, I clicked on this and saw this:
That percentage is spot on. I had to scroll another nearly third of the Web page to see the download button.
To use Browser Size, go here on Google Labs and type a URL into the “Enter URL here” textbox at the top of the window and click Go.
I tried this tool in a fresh example, using my employer’s main domain, eWEEK.com. The left to right action was fine. Unfortunately, we’re running a big ole Microsoft ad this week, so when I entered the URL and clicked Go, I couldn’t see a single story to even click on!:
One really cool usability feature is that even though the overlay blankets the site, everything is still actionable, or clickable. Specifically, as you move the mouse around the window, you see a transparent rectangle following the mouse pointer. Just point and click and you can access a URL. The content renders and the overlay remains.
One other cool trick for different visualization: You can change the opacity of the overlay by clicking the gray boxes next to the word “Opacity” at the top of the window.
Google offers additional advice for using Browser Size:
- “The sizes represented in this contour are client area sizes, not browser window sizes. This means they represent the size of the browser without the title bar, toolbars, status bars, etc., and thus give a true representation of how much content can be seen by a particular segment of the Web-using population.
- Browser Size works best on web pages with a fixed layout aligned to the left. If the content reflows as the width is adjusted or it is centered, then the results can be misleading. In this case, you can obtain more accurate results by reducing the browser width to a percentage column, e.g. 90% and seeing what content falls below the 90% horizontal line.”
What does all of this mean? Well, if you’re a Web designer, you can use Browser Size to redesign your page to minimize scrolling and make sure that the important parts of the page are always prominent to your audience, Google Senior Software Engineer Bruno Bowden said.
At a time when what Web site visitors can’t see hurts Web sites, tools like Browser Size will help Google Chrome users as much as it helps Firefox, Safari or even IE users.
Everyone wins.