Your website will be displayed on screens with a variety of resolutions — from mobile devices with small screen dimensions to large desktop monitors set to 1024 x 768 and beyond.
As a designer, you need to be sure your pages will look fine when displayed in the different circumstances your target audience will encounter. Don’t assume that everyone has the same monitor setup that you have!
The situation is more complicated than simply screen resolution:
- Browsers have different amounts of space available for webpages
- Macs and PCs have different amounts of space available for pages
- The user can adjust their browser to make more or less room available (e.g. showing or hiding different control bars)
- If your page needs a vertical or horizontal scroll bar, that scroll bar takes up extra space (12-15 pixels)
Based on all the variations, below is a guide for designing pages for the screen resolutions, 640×480, 800×600, 1024×768 and beyond. Designing with these recommendations will ensure that all your page content will be visible in the worst case situations. The recommendations below are only guides, and you should adjust your designs based on your project’s requirements. You don’t have to design exactly for these dimensions. In particular:
- In the vertical direction, you can have (and will probably need) additional information beyond the specification. Keep in mind that your audience may have to scroll to see it. Consider the information within the first 560 pixels (for 1024 x 768 displays) to be “above the fold.” In newspaper terminology, copy that’s “above the fold” is visible in the top half of the paper, and includes the most important headlines, articles and content.
- Web designers need to understand the importance of putting the most important information “above the fold.” This term, “above the fold,” has been adopted to to refer to the first visible part of a web page. It’s what users see without scrolling, and it should hold their attention and entice them to click or scroll down further.
- In the horizontal direction, you don’t have to fill the space to the limits of the recommendation. Just because you can design to 990 pixels wide for an 1024 x 768 screen, doesn’t mean you should design that wide
The size recommendations below are smaller than the actual screen size because there is space taken up on the screen by menus, scroll bars, buttons, and other interface elements not on the web page.
- Recommended maximum page dimensions for 640×480 screen: 610×280 (sample page)
- Recommended maximum page dimensions for 800×600 screen: 770×400 (sample page)
- Recommended maximum page dimensions for 1024×768 screen: 990×560 (sample page)
- Recommended maximum page dimensions for larger than 1024 pixel width: 1020 x 750 (sample page)*
Important note: The browser window’s top navigation and sides take up part of the window space so, to be safe, designers use a dimension smaller than the resolution size. And of course different browser windows (Safari, Firefox, Chrome, Internet Explorer, for example) take up different amounts of space– they are not the same. That said, there is some variation to the 990px recommended for this course. When optimizing for a 1024 x 768 monitor size, you’ll notice designers sometimes use 900px, or 950px, or 960px, or 1000px. There is not a hard rule on this.
The height of the page should be as long as is necessary for the content.
So there isn’t a standard length or height in pixels. Do keep in mind the concept of “the fold.” “The fold’ for the monitor resolution size 1024 x 768 is around 560px. This means that you can’t see content that is below 560px without scrolling. So be sure to place the most important content (headings, navigation, etc.) above the fold. Also, you don’t want the content on the page to “scroll forever” so limit content so there isn’t too long of a scroll.