In order to work well, designs have to be optimized for simplicity, transparency and, consequently, optimal user experience. The user experience itself is, however, in many cases just an elegant term employed with false intentions and wrong approaches.

Optimal user experience is rarely achieved by visual design elements, although some stakeholders are strongly convinced that it actually is the case. What actually matters is the fact that the content is accessible and legible — and although visual design can support the content and help to communicate with your target audience in a more effective way, it is not a solid foundation to build a successful web-site upon. (In fact, to compromise stakeholders' understanding of design solutions is your primary task if you strive to be a professional web-developer.)

Whatever stages you are going through in your design process, to perform well you need to make sure that your design works for most visitors, whatever screen resolution they use. It's not about the graphics visitors see; as stated above, it's about the content they are looking for.

To present the content in an optimal way it's necessary to consider layout width as well as line height and line length — for instance, an optimal legibility is achieved with approximately 60-80 characters per line. This metric should remain constant across different browsers and screen resolutions.

For which screen resolution should you optimize a web-site? And should you optimize it in the first place? The growing number of screen resolutions doesn't help to solve this almost historic problem for which there are still no universal solutions or common heuristics.

Screen Resolution ≠ Browser Window Resolution

As the screen resolution increases with high resolution monitors, users generally tend to avoid browsing in the full screen mode. Besides, in many cases sidebar is floating on the left or on the right of the desktop while browser extensions are placed within the browser window.

Therefore it's important to understand that in most cases the browser window resolution is much smaller than screen resolution. Although some dependencies might exist, it's hard to estimate what screen resolution is actually used.

Target Your Audience: Find An Average Profile

In order to gain a better understanding of your average user profile it's a common practice to use the data provided by modern analytics tools such as Google Analytics. Most of them not only track an average screen resolution of your visitors, but also users' behaviour and their preferences.

Thus you can determine which users stay longer on your web-site and improve the user experience by fine-tuning your design. Once you know the average profile of your visitors, you might motivate your design decisions by expected values. You can find some of the heuristics derived from recent studies in one of our recent articles Who Is Your Visitor: An Average Profile.

Common Screen Resolutions

Eoghan Mccabe, the project manager of FoldSpy, has provided Smashing Magazine with exclusive data about the screen resolution which users tend to browse with on large web-sites. Foldspy measures browser screens for advertising purposes.

Over 18,000,000 browser screenshots above the fold have been analyzed which makes a quite impressive data set one can rely on. Here are the results of the survey.

According to the data, you can be sure that your visitors will be able to see the content placed within the 500px-800px screen height. Over 80% will be served well with 1000px screen width, 28% of the users tend to browse with 1250px screen width. You can click on the image to get a a live chart.

You can find a further survey related to the widely used screen resolutions in the article by Thomas Baekdal which was published last year.

So what do we do?

Don't optimize your web designs for your personal convenience. Don't guess blindly; instead try to estimate the profile of your visitors and leverage your design accordingly. In most cases you can improve the user experience by keeping the width of your layout at most 1000px. Design for your visitors, even if it means that your design looks terrible on your high-resolution wide-screen laptop.