Remember when we used to be obsessed with pixels and canvas sizes of browsers? Here's a research piece I did for my first design job in November 2000. We recommended not supporting Netscape Navigator 3.x at the time and if you designed to 768 x 403, you'd probably be okay (unless someone has the MS Office browser bar installed!).
1. The influence of a users’ browser, screen resolution and platform on
designing website mock-ups and websites
WC – 15/11/00
2. Introduction
From creating web pages for pitches on Photoshop through to the eventual coding of these
graphics into HTML to make a live website, there needs to be a standard canvas size to
design to so that the majority of users will be able to view the site as intended. The decision
on what we use should reflect on current Internet statistics, such as screen resolution usage,
which can be obtained from sites providing internet usage statistics such as
www.statmarket.com. There are a number of variables that effect and limit the space that we
can work with including:
- User Screen Resolution
- User Platform
- User Browser
- Taskbars
When creating a mock-up of a website in Photoshop, HTML elements, such as text and form
field elements, need to look as close as possible to what would be seen in a browser. Point
sizes of text to use in Photoshop need to be standardised to make this process as accurate
as possible across designs.
This document is intended to be a reference and there are files that are relevant to this in the
Resources folder in a directory called Designing mock-ups (this may move soon).
3. Standardising Canvas Sizes
Browser Offset
When html is displayed in browsers, there is an offset (border) displayed which is a buffer
between the window edge and the html objects. Each browser and platform has a different
size of horizontal and vertical offset ranging from 8 to 16 pixels (see Fig1 and Table 1). To
eliminate this variable the following code can be added to the <BODY> tag.
<BODY MARGINWIDTH=0 LEFTMARGIN=0 MARGINHEIGHT=0 TOPMARGIN=0>
This butts the elements of the html up to the edge of the window by removing the border so if
you are going to use this you must incorporate this into your initial designs.
Please note that this code doesn’t work in Navigator 3.x and the default offset will be shown in
this browser (WIN: horizontal 8px - vertical 15px, MAC: horizontal 8px – vertical 8px).
Table 1 – showing the horizontal and vertical offset by different browsers and platforms
Browser Horizontal offset (px) Vertical offset (px)
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
4. Fig.1 – showing the vertical and horizontal offset by a browser and the horizontal and vertical
canvas size where designs are placed.
Canvas Size
When a website is accessed by a visitor using a certain screen resolution (e.g. 800x600), the
actual pixels that they see inside the browser window is less than this due to the browser
shell, windows taskbars etc. This size, which is where the designs are placed, can be called
the canvas size (see Fig.1). Each browser on each platform has a slightly different canvas
size (see Table 2). To enable the most amount of viewers to see the design (i.e. without
horizontal and vertical scrolling), we should design for the smallest canvas size. However,
designing for the smallest canvas size that could only be used by for example, 0.05% of
visitors means that designs are sometimes jeopardised by these tight constrictions. We need
to look at the statistics and assess the screen resolution usage and usage of v3 browsers. If
we have stopped designing for v3 browsers, then there is no need for us to design to v3
browser canvas size.
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.
5. Table 2 – showing the canvas size on various browsers and platforms at a screen resolution
of 800x600 pixels
Browser Canvas width (px) Canvas height (px)
IE 5.x (Win) 760 395
NN 4.5+ (Win) 764 414
NN 4.0x (Win) 764 414
NN 4.5+ (Mac) 752 429
NN 4.0x (Mac) 742 435
IE 4.x (Win) 760 395
IE 4.5x (Mac) 723 438
IE 4.0x (Mac) 734 441
NN 3.x (Win) 760 390
NN 3.x (Mac) 742 426
IE 3.x (Win) 763 396
IE 3.x (Mac) 758 437
Evaluating what canvas size to design to
Statistics can mislead: different sites attract different visitors; different caching may distort the
raw data; different surveys use different methodologies. Statistics like these, therefore, should
only be used as very rough predictors.
Screen Resolutions
Each coloured region indicates a screen resolution (see Fig.2). The percentage of people
using 800x600 resolution is dropping very slowly and the 640x480 resolution has dropped
below 10%. This suggests that, 800x600 screen resolution is the benchmark to design to and
will be for the next few years.
Fig.2 – Graph showing percentiles of people using 640x480, 800x600 and 1024x768 pixel
screen resolutions. ‘This month’ shows results for November 2000.
source: http://www.upsdell.com/BrowserNews/stat_res.htm
6. Browser usage
Table 3 (below) shows percentages of users with various browsers accessing sites using
thecounter.com counter. This information can therefore be used as a typical cross section of
internet users around the world. The growth of use of the v5 Internet Explorer browser can be
seen but the usage of v4 IE and Netscape browsers is still significant so these must be taken
into account when designing for a site.
Table 3 – showing usage of browsers accessing sites that have a ‘thecounter’ counter
embedded for the past year.
Internet Explorer Netscape Navigator
2000
Nov
Oct
Sep
Aug
July
June
May
Apr
Mar
Feb
Jan
1999
Dec
Nov
Source – thecounter.com
Microsoft Office taskbar issue
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
7. 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.)
Recommendations
A high percentage of users, above 60%, are accessing the internet with 800x600px screen
resolutions. All designs of websites should be viewable hence designed to this resolution.
V3 browsers (Netscape and IE) are hardly used anymore (less than 1%), being replaced by
v4 (approx. 25% of users) and the latest v5 browsers (approx. 70%). Internet Explorer v5 has
the smallest canvas size to design for at 760x395. However; if the offset is removed this
allows the canvas to be bigger but this must be incorporated into all designs and through the
whole design process.
Should the MS Office taskbar be taken into account the canvas size will be decreased by 43
pixels.
Offset put to Zero ? MS Office Bar On ? Canvas Size
Yes No 768 x 403
No No 760 x 395
Yes Yes 725 x 403
No Yes 717 x 395
A decision into whether the canvas size to design to should take the MS office taskbar into
account needs to be made. We need to get statistics about % users having MS office taskbar
on whilst browsing the internet to make an informed decision.
There is a Photoshop file named 800x600.psd which has the various browser shells so you
can check if your design will fit. This file can be found in the resources directory in the
Designing mock-ups folder.
Elements of html in Photoshop mock-ups
Text
8. When designing a mock-up of a website, the text that will eventually become coded into the
html needs to look as close to final displayed text as possible. Font sizes do no vary much
from browser to browser but a major difference can be seen between Windows and Mac
platforms. 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. The table below shows the text size,
tracking and leading required to reproduce HTML style text in Photoshop. When placing
HTML style text into a Photoshop mock-up the anti-aliasing should be turned off!
Table showing the point size, leading and tracking respectively for Photoshop to enable text
to resemble HTML style text. Values are for Windows browsers.
Table showing the point size, leading and tracking respectively for Photoshop to enable text
to resemble HTML style text. Values are for Mac browsers.
9.
10. Form elements
Form elements vary greatly between browsers and platforms. To place these elements into a
mock-up there is now a Photoshop file containing all form elements from each browser and
platform called parts.psd. This can be found in the resources directory in the Designing mock-
ups folder (this may move soon).
You should use the form elements for Internet Explorer 5.x as these are the largest of all the
browser and platform variants. If you design for these then when the page is viewed with a
browser that displays smaller elements, it will not break the page.
There is more information about specific heights and widths of different form elements on the
Intranet linking to Browser Window Sizes (Production).
Reference
Steve Mulder and Michael Brandt, Sizing Up the Browsers, 14 Oct 1999
LINK: http://hotwired.lycos.com/webmonkey/99/41/index3a.html?tw=design
Michael Kay, Designing for Different Resolutions, 9 Aug 1999
LINK: http://hotwired.lycos.com/webmonkey/99/33/index0a.html
Statistics at:
http://www.thecounter.com
http://www.upsdell.com/BrowserNews/