Free technical help for digital creators - music, video, art, photography, graphic & web design

Choosing screen / page size for projects by Matt Ottewill

Useful desktop image

Download a desktop image (suitable
for monitors set to 1024 x 768) to
help you develop for different
end-user monitor resolutions ...

download icon PICT file for the Mac (20Kb)

download icon BMP file for the PC (16Kb)

You will need to choose your project screen size to suit your minimum end-user system profile. So what is the smallest screen size your end user is likely to have? There a number of web sites including marketshare.hitslink.com with statistics that can help you. Remember, there are still a considerable number of users with monitors capable of 1024 x 800 pixels only maximum.

Click here for more detailed information on profiling end-users.

How to choose

You need to set the size of your page, screen or "stage" so that your end-user has to scroll the window as little as possible. Here are a few guidelines ...

  • Avoid setting a size that requires the end-user to have to scroll horizontally (left to right)
  • Try to size your index (or menu) page so that no scrolling is necessary
  • Use vertical scrolling only wherever necessasary
  • If your page is very long (height), use in-page page specific navigation links and anchor points within the page to navigate around it
  • Remember to take account of the browser window menu bar and side bars when sizing your web sites

Click here for more on screen resolution concepts .

14 and 15 inch monitors

If you take into account the fact that there are still a lot of end-users with monitors capable of 800 x 600 only (15" monitors), and some screen space is taken up by the browser window side bars and toolbar, you may find that these project sizes are the most appropriate ...

760 pixels width

490 pixels high (try to always use this for your index/menu page, subsequent pages can scroll)

17 inch+ monitors

However, many western (richer!) surfers will have 1024 x 768 capable monitors and so you can use these sizes ...

960 pixels width

600 pixels high (try to always use this for your index/menu page, subsequent pages can scroll)

Using favelets

You can use Favelets to help you check your project is fitting on your target end-user screen size. Click here for more on Favelets.