Web Safe Areas (Screen Sizes)

Storing this for yours and my convenience, here is a list of web-safe areas. The web-safe area is the maximum real estate available in a web browser, before a scrollbar is added.

These values apply only to maximized browsers, and should work for most of the browsers out there (in their standard UI configuration), although most certainly not all. There are no guarantees, but these are probably as close to “industry standard” as we’ll ever get.

Note: These sizes should work even with a vertical scrollbar.

Screen Resolution Safe Area Safe Area
(Default margin: 10px) (No margin)
640×480 600×300 620×320
800×600 760×420 780×440
1024×768 955×600 975×620

11 thoughts on “Web Safe Areas (Screen Sizes)”

  1. Chris says:

    Handy this, thanks.

  2. Joen says:

    Thanks, and if I may say so myself: perfect timing for the pretty new A List Apart, and the discussion following it.

  3. Dave Child says:

    There was an item on HotWired many years ago on the same topic (Sizing Up The Browsers) some time ago. According to those figures, at 640 you have 584 pixels to play with, at 800, 744 pixels and at 1024, 968 pixels. However, given that it was IE 4.5 Mac that had the smallest canvas, those figures are probably out of date! I’d be interested in seeing another study covering the major browsers…

  4. Joen says:

    Nice addition, thanks.

    I just remembered that it’s a good idea to mention that I’ve tested these 800×600 > 780 x 440 widths to work even _with_ a vertical scrollbar.

  5. Chris says:

    bq. with a vertical scrollbar.

    well doesn’t everyone use the html {height: 100%; margin-bottom: 1px;} trick? I can’t imagine not doing that now. Pixel jump when going from a scrolled site to a non-scrolled site is unnerving.

  6. Joen says:

    bq. well doesn?t everyone use the html {height: 100%; margin-bottom: 1px;} trick?

    Perhaps, but it still steals some 18px of real estate. It’s worth noting that those pixels are calculated with, when defining these “safe” areas.

    By the way, may I recommend you instead use: @html { height: 100%; margin-bottom: 0.1em; }@

    That way you rid (in most cases) of the 1px bottom margin on pages that don’t need the scrollbar.

  7. pizeme says:

    What’s the area of a web page first seen when loaded into a web browser and before the end user scrolls further down the screen page? above th…?

  8. Joen says:

    Pizeme,

    If your browser is maximized, then the sizes are located on this very page. For instance, the visible area on a maximized browser on 800×600 resolution is 760×440.

  9. Chris Tin says:

    Have you taken into account that most browsers now use tabbed browsing?

    I think all the latest generation versions of the main browsers use tabs, and many of the older versions do too.

    Also, most people seem to have the Google toolbar (or something similar) installed.

    I’ve been knocking up a visual template of a browser window with the available screen estate outlined in red. The ‘safe’ amount for 1024×768 reaches from the absolute top to the absolute bottom of the browser (IE6). This is without any toolbars or tabs tho!

    BTW, I don’t know what this html { height: 100%; margin-bottom: 0.1em; } hack is but it sounds interesting. Can someone point me to a resource for this. TIA

  10. Joen says:

    Have you taken into account that most browsers now use tabbed browsing?

    No, I have not taken tabs into account. Indeed the safe area has also increased. Even so, you can never be entirely safe.

    BTW, I don?t know what this html { height: 100%; margin-bottom: 0.1em; } hack is but it sounds interesting. Can someone point me to a resource for this. TIA

    That sounds like it came from forcing scrollbars — the hack ensures that a vertical scrollbar is always present, even when not needed, thus preventing a page jog where centered content moves left to account for the new decreased realestate of a page without scrollbars.

  11. http://tinyurl.com/y8enr7k
    Web Safe Areas (Screen Sizes) (Noscope)(NOSCOPE.COM)

Comments are closed.