The graphic safe area dimensions for printing layouts and for page layouts designed to use the maximum width of 800 x 600 screens are shown below:Graphic "safe area" dimensions for layouts designed to print well:
Maximum width = 560 pixels
Maximum height = 410 pixels (visible without scrolling)Graphic "safe area" dimensions for layouts designed for 800 x 600 screens:Maximum width = 760 pixelsMaximum height = 410 pixels (visible without scrolling) Screen size Maximized window Max available content area
| 3% | 640×480 | Always | 618×310 |
| 17% | 800×600 | Always | 778×430 |
| 60% | 1024×768 | Often | 1004×598 |
| 18% | 1200×1024 or more | Rarely | 1259×853 or more |
| Total: 100% |
|
|
|
Screen real-estate available for browser, based on findings by
Jakob Nielsen with added data by Justaddwater.
- Optimize for 1004×598, which is currently the most widely used browser window size. Of course, the general guideline is to optimize for your target audience’s most common resolution, so the size will change in the future. It might even be a different size now, if, say, you’re designing an intranet for a company that gives all employees big monitors.
- Do not design solely for a specific monitor size because screen sizes vary among users. Browser window size variability is even greater, since users don’t always maximize their browsers (especially if they have large screens).
- Use a liquid layout that stretches to the current user’s browser window size (that is, avoid frozen layouts that are always the same size).
My modified version of Jakob Nielsen’s Alertbox “Screen resolution and page layout“, July 31, 2006. My modifications: browser window size instead of screen size.
http://www.baekdal.com/articles/Usability/actual-browser-size-preliminaryhttp://www.baekdal.com/articles/Usability/browser-size-design/optimal width of a block of text is between 65-80 characters (with a line-height of about 1.15). This is the optimal size of text, and it has been proven to be: - Easier to move from one line to the next
- It is much faster to read in general
- The brain use less mental effort (which increases understanding and learnability)
It has no relevance to discuss fixed vs. fluid layout. We know that the best way to present text is when there are 65-85 characters per line. You know that you cannot read the text if you make the text smaller than 11px (translates to a text box width of about 450px). With the report your layout width need to be less than 776px, if you want to reach 95% of your visitors - and that is your design constraint. You cannot make your text larger than 19px, because the text box needs to be larger than the available screen space. http://www.baekdal.com/reports/actual-browser-sizes/abs-sizes/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. Sizes to design for
| % | 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 |
http://www.humanfactors.com/downloads/feb03.asphttp://meyerweb.com/eric/articles/webrev/200006a.htmlIf you're concerned about older user agents that don't know about CSS2, then *.class (or *#id) is an easy way to fool them. Because either of these are examples of an invalid selector in CSS1, CSS1-only parsers should ignore them. For this reason, it might be a good idea to omit the universal selector in conjunction with class and ID selectors, at least for the time being. The selector is denoted by an asterisk, and if you place the following line of code at the start of your CSS, you will remove the default browser margin and padding on every element, negating the need to include it in any element, except where you need to have something other than the default: * {
margin: 0;
padding: 0;
}