Thursday, December 17, 2009

Browser Size, Web Tools and the Fold line

When i was working on OEM, one of my many pet peaves was the size of browser pages, wasted space and data below the "fold line". Here is an image of Oracle's Performance Page and the original mockup I did for the performance page (see the page before my designs verses after). In the mockup, I compress it so more data was above the fold, but unfortunately the size was bloated in the final version though more importantly my design ideas were mostly used verbatim.
what is the fold line and how do you determine it? The fold line is the line at which data is off the default browser screen. I determined it in the above image based on my browser and screen at the time which was probably way bigger than mosts, you know, working at Oracle and having a nice laptop and all. Well now there is a better way to determine the fold line. Goolge has an application that will do it for you. Here is an example of Google's application and my web page on DB Optimizer:
Cool stuff! You can see percentage wise how much of the general view population sees of the web page above the fold line.
Here is the application

1 comment:

  1. One drawback of the 'browsersize' app is that, because there's only one background rendering, you don't see how the pages is reshaped for narrower screens. Generally lines will be wrapped earlier rather than forcing people to scroll left/right. That pushes content further down the screen.