Wed. April 8, 8:38:00 AM
The chart you provided is excellent. Consider it bookmarked :)
Browser Comparison of Available Screen Width When Using 1024x768
Recent Articles:
- Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
- Tracking Internal Website Campaigns With Google Analytics and PHP
- Everything You Need to Know About jQuery's .data() Method
- Google vs. China: How It Will Affect Web Workers
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
Subscribe To Feed
Subscribers
Subscribers
Apr 07
Figure A.
Facebook's horizontal scrollbars showing up on a 1024x768 screen resolution. (Note this screenshot was took on my own PC using Firefox)
I was using my parent's computer the other day which is your standard Dell with a LCD monitor set at 1024x768. I decided to log on to Facebook, one of the internet's most popular websites. Upon logging in, using Internet Explorer 7, I was greeted with a wonderful horizontal scrollbar. I thought to myself "Facebook, the world's leading social network has horizontal scrollbars?". Sure enough, the Facebook developers failed to check their re-designed website in IE7, or possibly, on a 1024x768 monitor.
I wouldn't have minded if a horizontal scrollbar appeared if the design was targeted towards a higher resolution such as 1280x960 but this looked more like blatant oversight on Facebook's part. Look at how little of a horizontal scrollbar appears - Figure A.
Unnecessary Horizontal Scrollbars = Evil
Nobody likes horizontal scrollbars (unless of course your entire design relies on it). Horizontal scrollbars are annoying because they hide 15-17px of content at the bottom of you page. They are also confusing because the web browser is typically browsed un-directionally, due to limitations of the mouse's scroll wheel. When a user has to scroll down and over, this forces the user to abandon the mouse wheel and manipulate the horizontal scroll bar with the mouse's left button, thus wasting time.
So What Is The Available Screen Width In Various Browsers?
Had Facebook done their homework they would have realized that a content width of 1024px combined with a vertical scrollbar results in a horizontal scrollbar. Below is the maximum width you can use in various browser viewports, showing both with a vertical scrollbar and without:
| Without Vertical Scrollbar | With Vertical Scrollbar | Scrollbar Width | |
|---|---|---|---|
| Safari 3 | 1024 | 1009 | 15 |
| Firefox 3 | 1024 | 1007 | 17 |
| Chrome 2 | 1024 | 1007 | 17 |
| Opera 9 | 1023 | 1006 | 17 |
| Internet Explorer 7 | 1003 | 1003 | 17[1] |
| Internet Explorer 6 | 1003 | 1003 | 17[1] |
[1]IE incorrectly includes the scrollbar width in the element's width, thus the actual scrollbar width is 0px.
So What's My Point?
By looking at the chart above, we need to pick the lowest value as our maximum width. Seeing that 1003 is the lowest, which is used in Internet Explorer 6 & 7, if you plan to create a design for 1024x768, I would advise that you not make it wider than 1003 pixels. I would also advise that you never make your main content DIV an odd width. See http://csscreator.com/node/472#comment-2208 for more on that. My point is, you're better off choosing a width less than 1000px if you want to avoid horizontal scrollbars. Remember to always check you design in the early stages of development for your baseline screen resolution.
You might also be interested in my article Always Show Browser Scrollbars.
Replies:
-
Wed. April 8, 9:28:32 AM
Good research Neal.
What's funny is that I was just talking with a co-worker the other day about deciding on a standard width to use for future designs, and we ultimately settled on 960px. It fits well within that range you mention, and it works great for grids.
Cameron Moll had a nice article a couple years back justifying the 960px decision. http://www.cameronmoll.com/archives/001220.html
-
Wed. April 8, 1:01:58 PM
Or design a non-fixed width site, if possible. But yeah, they really should have tested better, and design for a little under the expected width of 1024. Remember, people might have a sidebar open on their browser, or may not always leave their browser maximized *gasp*.
-
Wed. April 8, 1:26:24 PM
@Chris, yeah I'm always annoyed with my parents when they use IE7 because they never maximize their browser window. I've also noticed at work, some low-tech co-workers leave their 'favorites sidebar' open all the time thus make their screen real estate smaller. I'll never understand end-users motivations.
@Tim, The standard width is a problem I suffer from as well. Often times it's just randomly chosen depending on who did the site's mockup.
-
Wed. April 15, 12:20:52 PM
I'm just about to start up a new Geocaching site. I was thinking about how wide it should be. Thanks for the good info!
-
Fri. August 21, 1:35:49 PM
Great article.. small ask.. Why dont we go for fluid framework .. rather den going for fixed layout.
Please correct me.. if m wrong here
Rajesh
http://artsrajesh.blogspot.com
-
Tue. August 25, 10:06:39 AM
>implying scrollbar width is determined by the browser
-
Tue. August 25, 3:07:43 PM
@Epic, sorry dude, I only use PCs. If you're on a Mac write your own article.
-
Sat. July 31, 1:14:11 PM