Photo by John Loo
Remember that rug you brought home that you thought would be perfect for your front entrance? The pattern exactly matched your contemporary decor. The colors complemented your walls perfectly. You lug the thing from the mall, carefully bring it home in the back seat of your car, only to unroll it and discover that it was about 4 inches too wide.
Let's make sure your website doesn't suffer the same fate. In this series of posts, I'll discuss fixed-width vs liquid layout designs (the sites that stretch to fit the browser window horizontally). I'll also talk about the difference between screen resolution (from tiny smartphone screens to huge 30 inch monitors), and usable screen resolution. Also known as the "Web Safe Area".
But first, let's make sure we understand the basics.
What's a pixel?
A pixel is a single square "dot" of light used to "draw" an image when assembled into a grid formation. This applies to all the visual "graphics" (images, HTML code) that make up your website. The color and brightness of any individual pixel can be set individually. The number of "steps" in color/brightness is determined by the number of "bits per pixel" or bpp.
Virtually all modern platforms on which your website will be used, including Smartphones, are capable of displaying at least 16 bits of color information (65,000+ distinct colors). Most desktops and laptops display 24 or 32-bit color (16+ million distinct colors).
You may find older references to a "Web-Safe" palette of 256 colors. This is obsolete information that no longer applies to modern web browsers and computing platforms.
Almost all modern display devices used to view your website use a Liquid Crystal Display or LCD screen. This includes smartphones, laptops, and the "flat" style display monitor.
Each of these devices will have a "native" display resolution. In other words, the screen is physically built with a specific vertical and horizontal pixel count. Both Microsoft Windows and the Mac Operating System allow you to set the screen/display "Resolution". This should ALWAYS by set to the native resolution of the display device whether it's a desktop, laptop or iMac. (You can find your device's native resolution in the manual it came with or on the manufacturer's website.)
The reason for this is best explained with a picture. Let's say your operating system has the srceen resolution set at 10 pixels tall by 10 pixels wide (not real numbers). However, the display attached to it has a native resolution of 15 pixels by 15 pixels. If you try to display a 5 pixels square box with a 1 pixel border, note in the picture how you get a "misalignment" of the pixels between what the computers graphics processor "puts" out versus what the display wants to draw.
Why should I care about all this pixel stuff?
Whether your site visitors pick it up consciously or unconsciously, websites that aren't "pixel-perfect" are often perceived as being unprofessional. This "unprofessional" website translates as being unreliable or untrustworthy. Those are NOT emotions you want to have associated with your site when you are trying to convince them to buy something, donate, register, etc.
Therefore, start by ensuring that your own computer/laptop has the correct resolution setting in your Windows/Mac OS for the attached display. This will make it easier to perceive misaligned elements.
Understanding Dots per Inch or DPI
Dots per Inch or dpi really relates only to physcial output devices. For our purposes, a "dot" is equivalent to a pixel. Traditionally, dpi is something you set for your printer. Specifically, it means how many dots of "ink" per inch are use to print the text or image.
For printed output, dpi affects the sharpness/graininess of the output. For example, a fax machine typically scans & prints at around 100dpi where a laser printer typically prints at 300dpi or higher.
DPI and Computer Displays
Modern computer displays come in all kinds of sizes from the tiny smartphone screens, to your traditional 17 inch display all the way up to 30 inch monitors or higher. However, all of these devices do NOT have the same output dpi.
For LCD displays, the number of pixels per physical inch of screen display may be referred to as Dot Pitch, Pixel Density or, more typically, Pixels Per Inch (PPI). The value may range as low as 51 to well over 300.
Why do I need to care about dpi or pixel density?
Where pixel density comes into play is when your are working on the design of your website. You shouldn't determine how large or small to make elements on your website based on how they appear on your monitor. What make look to be the right "size" on your monitor may be completely out of proportion on someone else's display who has a a different "native resolution" and different "pixel density".
Wikipedia maintains a list of display devices showing their native resolution and pixel density.
For example, the image of the box on the right is exactly 100 pixels square. I have a 24 inch Dell monitor with a 94ppi pixel density. Therefore that box will appear to be slightly more that 1 inch square to me. However, I also have a new netbook with a 10 inch display at 155ppi. On it, that box will appear about 0.65 inches square.
What if instead of that box, I was displaying a thumbnail image of a product. Though the same 100 pixel square thumbnail would be displayed, would enough detail be visible for all your site visitors? The lesson to take away from all this is that what may appear to be the correct size and proportion on your own monitor may be quite different on your visitors' monitors.
So how big, wide, tall should I make my site elements?
Before we can answer that question, we need to review the wide array of display resolutions your site will be viewed with, as well as how the usable part of your browser window affects your design decisions. This will be covered in Is Your Website the Right Width? Part 2 - The Web-Safe Area