Optimal Resolutions
The first thing that you will need to do is set up your workspace so you can begin creating layouts. Web design differs from print in that everything is output to the screen. For this reason, you must work at the pixel level for best results.
Resolution and Colour Mode
Designs should be created in dpi not centimetres or inches. It’s best to get this right from the very start. If you don’t, then the coder will have to reduce the size of your design when it comes time to start slicing things up and this will result in all kinds of problems - soft images, vague edges and strange layer effects, for example. 72dpi is the norm when designing for the screen.
The colour mode should be set to RGB not CMYK. If you choose the latter, colours may not render as expected when you export your graphics. Try to use web safe colours where possible but don’t worry about this too much as the majority of desktops nowadays will render millions of colours.
Canvas Size
The majority of computers in home and office environments used to have their screens set to a resolution of 800 by 600 pixels or higher. For this reason, it has been customary to design websites that will fit within a canvas set to 760 x 440 pixels. This allows room for interface elements such as the browser’s scrollbars and menus.
In the past few years the norm has gradual moved towards 1024 by 768 pixels as large monitors and graphics cards have plummetted in price. Many designers are increasing the size of their designs accordingly. Bear in mind though that just because someone has their monitor resolution set to this size, it doesn’t mean they are running their browser window at the same size. It’s common - especially on Macs - for users to not use the full screen mode of their browser. 800 by 600 pixels is still the ideal resolution to design for but if you really need the extra space, aim for 960 pixels wide. This is ideal for 1024 designs as it again allows space for the browser controls and 960 is conveniently divisible by several different numbers which makes carving up the space very simple. If possible, try to create your design with the 800 x 600 limits in mind. For example, use the right hand side of the screen for less important content so that people running at the lower resolution can still easily view the main content.
All important information and navigational elements should be placed within the 760 x 440 pixel area. Particular attention needs to be paid to the main site navigation and important copy. This should be positioned “above the fold” - i.e. so that the user does not need to scroll down the page – in order that all pertinent information is immediately accessible.
While it’s vitally important that you get the width right, height is less critical. Ideally all the important page elements should be viewable as soon as the site loads so position the most important information “above the fold”. Don’t worry if you can’t fit it all in - people are used to scrolling nowadays so it’s no problem if content goes beyond the horizontal limit.