Monitor Resolution Mockups

I've had several clients ask about different monitor sizes/resolutions so hopefully this post will help clear things up a bit.

The first sample shown below is what I see on my monitor (1440x900 pixels). Depending on your client's screen resolution your HC design may appear differently on their monitor.

Note: there are other monitor resolutions not included in these samples. See the wikipedia article for full details: http://en.wikipedia.org/wiki/Computer_display_standard

(Click to view larger; all of these images have been scaled down but at the same ratios to give a better idea of how the site might appear on different monitors. You'll notice that the last one - 800x600 - the client would have to scroll over a little bit to see the full background.):


It is for this reason that the majority of Hyena Cart and Congo designs that I create are made with an 800 pixel wide (or less) header; so that they will accommodate the majority of monitor resolutions.

My preferred header size is 750 pixels wide. That way even on a smaller monitor resolution your client will see your header and also a bit of your background without having to scroll over to the right or left. I tend to use 72 ppi as the resolution for most web images that I design.

The following is taken from "peter's digital photography - Resolution Explained (http://www.ptcuk.com/02_technical/resolution.htm):

Monitor resolution refers to the number of pixels comprising the image on the screen. The monitor screen resolution on a PC can be set up through Microsoft Windows - My Computer - Control Panel - Display - Settings. For example a screen resolution of 1282 pixels wide by1024 pixels high might be selected which would mean an image imported with this dimension would fill the entire screen. An image of size around 600 x 450 pixels would only fill a quarter of the screen. A practical screen resolution for say a 17 inch CRT monitor is around 1024 x 768. A 17 inch CRT monitor has a viewing area of approximately 12.5 inches wide by 9.5 inches high.

Dividing the number of pixels by the number of inches gives a resolution of 82 pixels per inch. Therefore, in this example, for monitor viewing there is nothing to be gained by having an image resolution greater than 82 ppi. Usually 72 ppi is a default used in most imaging software.