Home
Web Design Basics
Design Principles
Sizing Up the Browser
Level: Professional Software:
When you're creating a Web page, size matters. There's limited space to work with, and page elements take up standard amounts of space. It's a land of constraints, and you've got to know the rules before you get started.
Unfortunately, the browser makers have been naughty, so the rules aren't simple. Each Web browser has its own playing field with its own quirks. If we don't get to know every one of these playing fields, then our pages might very well look crappy in some browser.
The purpose of this quick reference is to collect everything you need to know about the spatial aspects of the major browsers.
Here's what we'll be looking at:
- Offset - By exactly how many pixels is content offset from the edges of the browser window?
- Canvas size - How wide can a page be and still work at 640-by-480-dpi and 800-by-600-dpi resolutions? How much height is available before the user will have to scroll?
- Text size - How big are the standard HTML text sizes? What's the tracking and leading? You'll need this information if you want to mock up your pages accurately in Photoshop.
- Form elements - How much room do pulldown menus or text input fields take up? What about other form elements?
After looking at the browser stats at StatMarket, we decided to focus on the following browsers:
- Netscape Navigator 3 and higher
- Internet Explorer 3 and higher
- Windows and Macintosh
- Let the data begin.
Offset
As we all know, when you slap something into a Web page, it doesn't appear right next to the edge of the Web browser window. There's always a buffer between the window edge and the object. Unfortunately, this buffer isn't always the same, as the table below shows.
Key:
IE = Microsoft Internet Explorer
NN = Netscape Navigator (Communicator)
Win = Windows (98, 95, NT)
Mac = Macintosh
| Browser | Horizontal Offset | Vertical Offset |
| IE 5.x (Win) | 10 | 15 |
| NN 4.x (Win) | 8 | 8 |
| NN 4.x (Mac) | 8 | 8 |
| IE 4.x (Win) | 10 | 15 |
| IE 4.x (Mac) | 8 | 8 |
| NN 3.x (Win) | 10 | 15 |
| NN 3.x (Mac) | 8 | 8 |
| IE 3.x (Win) | 10 | 16 |
| IE 3.x (Mac) | 8 | 8 |
Of course, there is a way to override the default browser offset:
<BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>
Using these attributes on the <BODY> tag means that your horizontal and vertical buffers will become zero. The bad news is that this does not work in Navigator 3.x, so you'll still have the default offset in that browser. Offset is easy compared with the canvas size.
Canvas Size "To what size should I design my page?"
It's the eternal question. Since the time of Aristotle, the great debate has raged: How wide should Web page content be? We're not here to help you decide between 640-by-480-dpi and 800-by-600-dpi resolutions. We're here to help you after you've made up your mind.
The table further down on this page shows the maximum canvas sizes you have at your disposal for each resolution. These measurements were taken with the browsers in their default states after installation - that is, with all those annoying toolbars showing. Remember that many people aren't as smart as you are: They never turn those things off and are thus browsing the Web through very small windows. In our tests the Microsoft Windows taskbar at the bottom of PC screen was visible.
The horizontal size is what you can get with the browser window maximized on the screen. If the width gets any bigger, you'll get an ugly horizontal scrollbar or your content won't be visible to users. The vertical size measures the amout of space "above the fold" - that is, what users can see without scrolling down.
See the diagram below for the canvas size of an example browser at 640 by 480 dpi:
Note that these canvas size measurements do not include the browser offsets we saw on the previous page. In every major browser except Navigator 3.x, you can increase your canvas size slightly by eliminating the offset buffer.
Let's look at the numbers....
| Browser | 640x480 width | 640x480 height | 800x600 width | 800x600 height |
| IE 5.x (Win) | 600 | 275 | 760 | 395 |
| NN 4.5+ (Win) | 604 | 294 | 764 | 414 |
| NN 4.0x (Win) | 604 | 294 | 764 | 414 |
| NN 4.5+ (Mac) | 592 | 309 | 752 | 429 |
| NN 4.0x (Mac) | 582 | 315 | 742 | 435 |
| IE 4.x (Win) | 600 | 275 | 760 | 395 |
| IE 4.5x (Mac) | 563 | 318 | 723 | 438 |
| IE 4.0x (Mac) | 574 | 321 | 734 | 441 |
| NN 3.x (Win) | 600 | 270 | 760 | 390 |
| NN 3.x (Mac) | 582 | 306 | 742 | 426 |
| IE 3.x (Win) | 613 | 276 | 763 | 396 |
| IE 3.x (Mac) | 598 | 317 | 758 | 437 |
Here's a highly annoying complication: When Microsoft Office is installed on a PC, the Office taskbar is automatically added to the right edge of the desktop. It's 43 pixels wide, which makes the overall canvas width 43 pixels less than what is listed above. And a lot of people have Microsoft Office. (By the way, if users move the Office taskbar from the right edge of the screen to the bottom edge, it takes up 32 pixels of canvas height instead.)
Our conclusion: Ugh. It's not a pretty sight. There are lots of different numbers. It's not immediately clear which width and height you should design pages for.
Our recommendations
After analyzing the numbers and taking the Office taskbar into account, we have a few recommendations based on different scenarios.
| Scenario Designed For | 640x480 width | 640x480 height | 800x600 width | 800x600 height |
| All browsers, both platforms (with MS Office Taskbar) | ||||
| 557 | 270 | 717 | 390 | |
| All browsers, both platforms (with MS Office Taskbar) - ugly horizontal scrollbar showing or no right-hand offet in NN & IE | ||||
| 567 | 270 | 727 | 390 | |
| All browsers, both platforms (no MS Office Taskbar) | ||||
| 563 | 270 | 723 | 390 | |
| All browsers, both platforms (no MS Office Taskbar) - ugly horizontal scrollbar showing or no right-hand offet in IE 4.5 | ||||
| 574 | 270 | 734 | 390 | |
| 4.0+ browsers, PC platform (no MS Office Taskbar) | ||||
| 600 | 275 | 760 | 395 | |
Playing it safe with the first recommendation means a relatively small canvas, but at least you'll be sure everyone can see your content!
Notes:
- Focusing on browser versions 4.0 and higher (with MS Office taskbar) doesn't gain anything over designing for all versions.
- Focusing on all browser versions just on the Windows side doesn't gain anything either.
In summary, there are no easy answers about canvas size. But we hope that the recommendations above will give you a place to start.
Photoshop mock-ups
When designing Web pages, we always do mock-ups in Photoshop. Design first, code later. What this means is that our Photoshop mock-ups need to look exactly like what the pages will ultimately look like in the browser. Well, because of browser inconsistencies, they'll never look exactly the same, but it's important to get them as close as possible.
For that reason, we always include the browser "chrome" (the buttons, scrollbar, and other parts of the browser software that frames the page) in the Photoshop mock-up. We thought we'd provide these Photoshop files for download here:
- 640-by-480-dpi browsers - zipped Photoshop file with the chrome of all the major browsers
- 800-by-600-dpi browsers - zipped Photoshop file with the chrome of all the major browsers
Text Size
What else do you need to know to mock up Web pages in Photoshop? The size, tracking, and leading of text are key. Specifically, you need to know the size of HTML text at the seven standard font sizes. More specifically, you need those seven font sizes for all the core Web fonts in each of the major browsers.
Quick definitions:
- Size = type size in points
- Tracking = Photoshop's term for letter spacing
- Leading = the vertical space between lines of text (in points)
As it turns out, there's hardly any variation in text size between browsers. The big difference is between platforms, which is why you'll find one table for Windows and one for Macintosh below. For each font at each of the seven standard HTML text sizes, you'll find, in this order: text size, leading, and tracking. So, a value of "9, 10, 20" stands for 9-point text with leading set to 10 and tracking set to 20.
Note: For creating mocked-up HTML text in Photoshop, remember to turn off antialiasing!
OK, here come the reams of data....
| Macintosh | <FONT SIZE="..."> | ||||||
| Font Face | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Arial | 10
10 -15 |
10
11 0 |
12
14 0 |
14
16 0 |
18
20 0 |
24
27 0 |
36
40 0 |
| Arial Black | 9
13 0 |
10
14 10 |
12
17 0 |
14
19 0 |
18
26 0 |
24
32 5 |
36
51 0 |
| Comic Sans | 9
13 10 |
10
14 10 |
12
17 10 |
14
19 10 |
18
24 -10 |
24
33 0 |
36
50 0 |
| Courier | 9
10 -15 |
10
11 -20 |
12
12 -20 |
14
14 -15 |
19
18 -15 |
24
24 -10 |
36
36 10 |
| Courier New | 9
10 -40 |
10
12 -35 |
13
14 -35 |
14
16 -25 |
18
20 10 |
24
27 -10 |
36
41 0 |
| Georgia | 9
10 30 |
10
11 50 |
12
14 30 |
14
16 10 |
18
21 0 |
24
28 0 |
36
40 0 |
| Helvetica | 9
10 15 |
10
11 0 |
12
13 10 |
13
14 25 |
18
18 10 |
24
25 -10 |
35
36 10 |
| Impact | 9
11 0 |
10
12 0 |
12
15 0 |
14
17 -10 |
18
22 -10 |
24
29 -10 |
36
44 0 |
| Times | 8
10 65 |
10
11 10 |
12
12 -10 |
14
15 0 |
17
18 25 |
23
24 25 |
35
36 20 |
| Times New Roman | 9
10 40 |
10
11 0 |
12
14 10 |
14
16 10 |
18
21 -10 |
24
28 0 |
36
42 0 |
| Trebuchet | 9
10 40 |
10
11 0 |
12
14 10 |
14
16 10 |
18
21 -10 |
24
28 0 |
36
42 0 |
| Verdana | 10
11 0 |
10
12 50 |
12
15 20 |
14
17 0 |
18
22 -10 |
24
29 -10 |
36
43 0 |
| Windows | <FONT SIZE="..."> | ||||||
| Font Face | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| Arial | 10
13 20 |
13
16 10 |
16
18 -15 |
18
21 0 |
24
27 0 |
32
36 0 |
48
55 0 |
| Arial Black | 10
14 10 |
13
18 0 |
16
23 5 |
18
25 0 |
24
33 0 |
32
45 0 |
48
68 0 |
| Comic Sans | 9.5
14 25 |
13
18 -5 |
16
23 -10 |
18
24 -15 |
24
32.5 -2 |
31.5
45 10 |
48
67 0 |
| Courier | 13
13 20 |
14
13 -30 |
16
16 -30 |
17
17 -70 |
21
20 -20 |
32
32 -40 |
49
48 -40 |
| Courier New | 10
10 4 |
14
15.5 -35 |
16
17.5 30 |
18
19.5 14 |
24
27 -15 |
31.5
36 5 |
48
50 5 |
| Georgia | 9.5
13 70 |
14
15.5 0 |
16
17.5 5 |
18
21 -5 |
24
28.5 0 |
31.5
38 10 |
48
56 0 |
| Helvetica | 10
13 25 |
13
16 10 |
16
17 -10 |
18
25 0 |
23.5
27 0 |
31.5
35 0 |
48
55 0 |
| Impact | 9.5
14 26 |
13
17 5 |
16
21 -5 |
18
22 -15 |
24
28.5 -12 |
31.5
40 5 |
48
60 0 |
| Times | 10
12 15 |
13
15 0 |
16
19 -30 |
18
20 0 |
24
27 0 |
31.5
36 0 |
48
55 0 |
| Times New Roman | 10
12 20 |
12
15 30 |
14
19 15 |
17
20 20 |
23
27 10 |
31
36 0 |
48
55 0 |
| Trebuchet | 9.5
15 23 |
13
17.5 10 |
16
21.5 5 |
18
22.5 -8 |
24
28.5 0 |
31.5
40 10 |
48
61 -5 |
| Verdana | 9.5
10 80 |
13
15.5 0 |
16
17.5 25 |
18
22 -5 |
24
28.5 -10 |
31.5
38 10 |
48
60 0 |
Note: Fonts with similar names have slightly different measurements, which is why they're listed separately. (Times and Courier are native to the Mac; Times New Roman and Courier New are native to Windows.)
OK, let's end by looking at form elements.
More Web Design Basics: Most Popular Materials | Fresh Materials
| Free Web Designs at FreeTemplatesOnline.com