Screen Resolution – What does it mean in English? How does that affect my website?

Screen Resolution. You heard of it, and seen numbers like 1024 x 768. But what does that mean exactly? With printed materials everyone knows what 8 ½ x 11 inches means. You can measure it with a ruler. What about your computer monitor? Can you measure it in inches? Well, yes you can, but that doesn’t tell you everything you need to know about how much information you can see on your screen.

Your computer monitor (or smart phone, etc) has a certain number of pixels of data displayed on it depending on the resolution of the screen. Some monitors are fixed at one resolution while others have the option of several different resolutions. If your monitor is set to a resolution of 1024 x 768 (a common resolution) for example, this means that the monitor has 1024 pixels across and 768 pixels down.

What does a pixel look like? Look at the two images below. The first is a screen shot of a portion of our website’s home page. The second show’s the woman’s head zoomed in to the point where you can see individual pixels, the squares of color.

Normal image from a 1024 x 768 resolution monitor


Same image zoomed in to see individual pixels


Each pixel can only be one color. The more and therefore smaller pixels shown on your monitor will result in a clearer image. Realize though that it also means the images will be smaller. The original image was 385 pixels wide. No matter what resolution your monitor is displaying at the image will still take up 385 pixels. With higher resolutions or more pixels across the same image will take up a smaller percentage of the screen. At a lower resolution the image will appear larger. When the resolution becomes low enough the image will begin to look pixilated.

So what does that mean for my website?
Simply it means that your web page will not take up the same percentage of the screen on various site visitor’s monitors. On one it may take up the entire width of their screen while on another it only takes up half.

Well, How do I make my site look good on different monitors?
There are two general approaches to this.

Approach 1
Design your website to expand/contract horizontally to fill the screen. Sounds sensible? My opinion is generally not to do this. Why? Well, visualize a nice header on your site with great graphics. What happens on the sides of the header when it expands or contracts? Either something gets cut off or you have empty space on one or both sides. Or, what will happen to the paragraph of text wrapping around a photo that you or your developer got to wrap very nicely in the right spot? If the width expands, then the next paragraph (which may have nothing to do with the photo) will end up next to the photo rather than below it. Then, the great text wrapping will appear in all different places and your site could look horrendous. There are a lot of developers out there that will argue this point. With the right design a site can expand/contract to various resolutions and still look good. Each approach has its pros and cons, but generally, my opinion would be to use Approach 2.

Approach 2
Design your site at a set width that will look good on most monitors. What is a good width? Think about when you have been browsing the web. Almost always you will need to scroll down to see an entire web page. This is acceptable up to a point of course. Pages that are extremely long can annoy a visitor, but some vertical scrolling is perfectly fine. Did you ever browse a page where you had to scroll horizontally? Most people including myself find that extremely annoying. Therefore you want to avoid that. My recommendation is to design the width to fit the lowest resolution that a large percentage of visitor’s monitors will be.

Here are some statistics. In 2009 around 40% of users had 1024 x768. That number has dropped to around 18% in 2012. For the first time 1366 x 768 has surpassed 1024 x 768. This means more users have wide screen monitors. Same vertical dimension, but wider. Note that 18% of users having 1024 x 768 is still a fairly hefty number. That’s just under 1 in 5 visitors. Do you want them to have to scroll horizontally? My recommendation at this point is still to design for 1024 x 768, but that may change sometime in the near future. I would rather someone have some background space on either side of a web page than to have to scroll horizontally.

In order for a site to look good at 1024 x 768 you need to allow a little space around the sides. Unless your page was very short top to bottom, a browser will exhibit a scroll bar on the right side of the screen. So I generally allow 20 pixels for that. Then I want a little space or margin on each side. I like to design sites at around 940 – 960 pixels wide. I like to have the site centered so at higher resolutions there is equal background space showing on both sides.

Multiple Resolution Designing
You can also use multiple resolution designs for your website. What this means is you are basically displaying different websites to a visitor depending on their resolution. Your website code can detect the monitor resolution of the user. Website code can also detect if someone is on a mobile device.

Mobile Device Websites
Mobile devices have much lower resolutions than desktop monitors. Also, it is more difficult to click on individual words as links. Simpler sites with larger graphical links are common. A mobile website would be a completely different site displayed to the visitor than your normal website. That is a topic for a future article.

Conclusion
Hopefully this article has shed some light on the topic of screen resolution. Opinions may vary on best website design practices. I believe my recommendations apply to most small to medium businesses. Larger companies that can afford it may benefit from multiple designs or managing content to flow at different resolutions.

ABOUT THE AUTHOR Michael DiLillo is president of gigshowcase.com Visit www.gigshowcase.com for all your website needs