When Designing For Browser Size, Remember The Browser Chrome
This came up at work during a conversation about browser sizes and screen resolution: just what is the usable area of real estate in a browser?
That’s changing a bit with the advent of Google Chrome and minimalist browser user interfaces, but here’s a straight forward chart as compiled at My Own Shit (not kidding about the name), with some of my own notes added:
- 640 by 480: 618 by 310 actual, 600 by 300 safe
- 800 by 600: 778 by 430 actual, 770 by 420 safe
- 1024 by 768: 1004 by 598 actual, 950 by 550 safe
- 1280 by 1024: 1259 by 853, 1200 by 840 safe
I bolded the most relevant size, but I’m sure that the 1280 size is becoming more and more prevalent. Whatever suze you are designing for, it’s easiest to just think you lose 25 pixels horizontally and 170 pixels vertically, and should size the Photoshop mockup accordingly.
