Published: Tuesday, October 24, 2006 in reports » actual-browser-sizes by Thomas Baekdal
This page is a part of "Actual Browser Sizes"
Finally we can see what sizes we need to design for. E.g. if you want to design for 95% of your visitors you need design for no more than 776x424px (fixed layout) - or between 720x400px to 1408x912px (fluid layouts). You can also see the pixel "gab" when designing fluid layouts - at 95% it is a staggering 688px in width and 512px in height.
| % | Fixed Layout | Fluid Layout | Fluid Gab |
| 75% | 1000x576 | 872x504 - 1256x808 | 384/304 |
| 80% | 984x568 | 864x464 - 1264x848 | 400/384 |
| 85% | 912x552 | 800x448 - 1328x864 | 528/416 |
| 90% | 784x432 | 784x440 - 1344x872 | 560/432 |
| 95% | 776x424 | 720x400 - 1408x912 | 688/512 |
| 100% | 568x264 | 456x232 - 1672x1080 | 1216/848 |
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
John,
A fixed layout is on that does not scale to the width/height of the browser - as such it is based on the smallest width/height needed to support the largest amount of people.
Fluid layout is on the other hand flexible, scaling and adjusting to the browser size. In this case the min/max size is based on the average size.
The Gab is the min/max size from this average. in order to support the largest amount of people - more people = large gab.
Hi Thomas,
Thanks for the info here. Can you give us some examples of good fluid designs. From my view, it appears there are websites that have fixed width to house the content for reading, with the asthetics on each side or right side that has color/pattern that accentuates the fixed "content" area.
But if by fluid, you mean that the actual content expands, much like you see with google or search engines..please clarify, or better yet share what you see are great examples of fluid designs.
It's amazing how many people we have to educate on this, as they get more and bigger browsers, but I'm wondering if we need to rethink the whole housing of layout, because I, (like you I think), prefer to keep text at a certain number of characters wide for maximum ease on readability.
Thanks again- you've been helpful. Best regards, Jason Faber
Writer, Project Manager and Interaction Designer
follow me on Facebook, Twitter, Flickr, or visit my website
Jason, Thanks
You can read my follow-up article about that here:
http://www.baekdal.com/articles/Usability/browser-size-design/
This article should be updated! According to the latest statistics for screen resolution on w3schools (http://www.w3schools.com/browsers/browsers_display.asp), the number of people browsing at 800x600 has dropped significantly (down to 4%). While I am aware that statistics are not precise and that w3schools may not have the best sample, I doubt their sample is any less reliable than the one used here and the standard deviation between 20% (which is what it reported the 800x600 group was in 2006 when this article was written) and 4% is significant enough to warrant a recalculation of this article's data.
Id say if you want to cater to 95% of your visitors, its fairly reasonable to start at 800px and up.
Baekdal.com is (nearly) everywhere. Check out our social profiles:
FaceBook
Twitter
LinkedIn
YouTube
FriendFeed
Delicious
Dec 10
2006
John Fredrickson
visit my website
Why is there a difference between fixed layouts and fluid layouts? And what is "fluid gab"?