The same website can look fabulous and work flawlessly on one computer, but look like a mess and be difficult to navigate on another. Unfortunately, websites aren’t one-size-fits-all, and usually the culprit when this issue comes up is screen resolution.
So, what is screen resolution? It refers to the number of pixels that your screen is displaying. For example, if you have a screen resolution of 800×600, 800 pixels is the width and 600 pixels is the height. The higher the resolution, the more information will fit on your computer screen. But it also means that the higher the resolution, the smaller the content will appear on your screen.
You can test out the effect of screen resolution for yourself by going to your Control Panel in Windows. Click on “Adjust Screen Resolution,” and make a change. You can always revert back later.
Currently, the most popular screen resolution is 1024 x 768, so you want to optimize your site for this resolution. However, that doesn’t mean that it should only look and work right with this setting. You want to make sure you are accommodating other resolutions as well.
Know your audience. If you are serving an older population, they may set their screen resolution lower. It is easier to read text at 800 x 600 than at 1024 x 768. They may also increase their font size. If you have a younger, very tech-savvy audience, they may be more likely to have a higher screen size and thus a higher resolution.
Research your audience. Don’t want to guess about what screen resolution your users have? Good news, you don’t have to! If you are using Google Analytics, you can get statistics on the resolution of the current visitors to your site. Look under Audience, Technology, Browser & OS. Then select “Screen Resolution” as your criteria.
Don’t expect users to change for you. Some sites post a message that says “best viewed” at a certain screen resolution or using a certain web browser. Unfortunately, most users won’t go through the trouble to adjust their computer’s setting just to see your site at its best, so you need to make sure that your site can perform well for all of the most popular configurations.
Test, test, and then test again. If you have a website, you should have multiple browsers installed on your computer, and ideally you should have access to a PC and a Mac. Before your initial launch, you should test how your site looks with different screen resolutions, as well as on different browsers and operating systems. And if you make changes to the site in the future, you should go through the same process. If your site makes frequent updates, then consider setting a reminder to do a quick test for it with different configurations once a month.
Consider mobile. It’s very difficult to design a website that looks good for a normal computer’s monitor and also a cell phone screen. That’s why sites that have frequent mobile traffic actually have a separate site that those users can visit. If you notice a lot of visitors to your site have very tiny screen resolutions, it’s likely your seeing a lot of cell phone traffic, so you may want to consider investing in a separate site to accommodate those users.
Revisit your decision periodically. Just a few years ago, it was recommended to use 800 x 600 as basis for web design since that was the most popular screen resolution. But technology is constantly updating, and your website should change with it. For example, just today the iPad 4G was announced — with a screen resolution of 2048 x 1536. That’s better than most HDTVs. Designing for this resolution now doesn’t make sense since most users won’t adopt the new technology right away, but in a few years, a much higher resolution, even for basic web browsing, may be the standard. You want to ensure that your website keeps up!