Browser sizes - November 2000
- 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.
- 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/