DPI

Many people who are used to working with printed documents are used to dealing with a measuring system based on inches or centimeters because the design and the final product are completed on two different mediums (screen and paper) an interplay must be created translating the resolution s of the design and the the printed page. When thinking of an image, dots per inch is a ratio of how many dots (pixels) are present in a linear inch when printed. This ratio can range from 150:1 (150dpi) to 1200:1 (1200dpi). So the math works like this: if your image is 300 pixels across, and you want it to fill 1 inch of page, then it prints at 300 dpi, if you want it to fill 2 inches of page, it will print at 150 dpi.

Screen Dots Per Inch

When designing for the screen, as in email or web design, thinking in terms of DPI is an unnecessary step. Since the final document is measured in pixels, the same as the image, there is no need to create a translation between the measuring unit of the document and the measuring unit of the image, it is always 1:1. An image that is 300 pixels across will always take up 300 pixels of screen space.

Canvas Size

When thinking about the size you are going to design a web page at, take the following things into consideration:

• While the full screen resolution of about 11% of internet user’s monitors is 800×600 pixels, the actual usable space in the browser window is closer to 770×460 pixels because of the toolbars, and scrollbars that are part of the browser. Similar reductions are present in ALL resolution sizes.
• As of Dec 2006 89% of users browse the web with a screen size of 1024×768 (leaving 990×560 above the fold) or larger, that means 11% (and growing thanks to mobile devices) are still smaller.
• The most important dimension is width, users don’t mind (and expect to) scroll down to see content, but pages should be designed to use a masthead/navigation/headline area that fits above-the-fold.
• About 15% (and rising) of internet users use a mobile device (blackberry or sidekick), that won’t render HTML email, to access their email.

Columns

Text just doesn’t span columns in HTML. if you have a block of text, it can only go in one long column.

Fonts

One of the major problems designers have when moving to the web is font usage. Any font that isn’t Arial/Helvetica or Times/Times New Roman is likely not to be present on the end users system. That means that unless you convert your text to images (very bad practice) or use Flash based output (impractical for large sites and emails), you are limited to the basic system fonts. Anything else will show up on the users screen as a system font anyway, so it is better to just use the system font in your design.