[Sigia-l] Optimal Screen Size for 1024 x 768 Resolution?

Will Parker wparker at channelingdesign.com
Tue Nov 27 14:59:21 EST 2007


On 11/21/07, Jodi Bollaert <jodi at bluesunworks.com> wrote:
>
> Hi,
>
> The IAs in my work group have been asked to specify
> the optimal screen size for 1024 x 768 resolution for
> above the fold elements.
>
> We are recommending 960 wide x 560 tall.  However,
> someone told us that Apple is 980, NYtimes is 972.
> FoxSports is 982, ESPN is 990, AOL is 961, and Yahoo
> is 950.
>
> Can anyone explain why there might be so many
> variations?
>


I was asked to answer this question a couple months back. Wound up writing a
Javascript to report browser window sizes and then running through all the
important browsers at various screen resolutions on Win 2K, XP, and Vista,
as well as Mac OS X 10.3 and 10.4. (Note to self - check in 10.5.1). I then
based my recommendation on the narrowest width and the narrowest height in
the whole collection.

It's a nasty problem with no definitive answer.

Aside from the issues related to users running with non-maximized windows or
installation of third-party software that adds toolbars and such, the space
taken up by each browser's UI (AKA 'chrome' in Webspeak) is different. Also,
each operating system offers different amounts of free screen space at each
available screen resolution. now add in the problem of non-standard screen
resolutions, like the 1280x800 default screen on the 13" MacBook just to
make things interesting.

Your current recommendation of 960x560 is close to my own recommendation. I
suggested 960 based on my own research and the Cameron Moll article that Tim
mentioned. I picked a height of 550 because almost all of our web pages have
to include a 12px footer for low-priority utility links (About, terms &
conditions, copyright, store finder, etc.).

I also specified that *NO* high-priority UI controls (e.g. "Buy This Now")
be placed below the 500px line. This was based on the assumption that some
unknown but significant number of visitors would be running at some odd
screen size or with a less-than-maximized browser window.

BTW, another design trick I've seen used to good effect is to deliberately
position interesting content so that it lies 'across the fold' and entices
the visitor to scroll down, revealing the next batch of content you want
them to see. Keep this trick in mind, because there's evidence that a
significant and rapidly growing number of people in North America are
upgrading to monitors with native horizontal resolutions of 1280 px or
above. Depending on which studies you read, this group comprised 12-18% of
active Web users as of early 2007.

If you're lucky enough to have access to the server logs for the site(s) for
which you're designing, you might consider implementing the browser window
tracking solution Chris Casciano describes on his blog (
http://chunkysoup.net/advanced/bugged/). Your web server will tell you which
operating systems and browsers your current Web audience is using, and
Chris' solution will give you feedback on their actual browser window sizes.
You can never go wrong designing for your current audience -- as long as you
keep an eye out for the rest of the world, too.



More information about the Sigia-l mailing list