Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Screen Resolutions and Better User Experience

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 Link

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 Link

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 Profile1.

Common Screen Resolutions Link

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.

Chart Screenshot
Chart Screenshot

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

So what do we do? Link

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.

Footnotes Link

  1. 1
  2. 2
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    I think the most common problem is to make the decision regarding the width. Right now i think it’s quite safe to assume that 1000px is the new 800px.

  2. 2

    Interesting article. Just go one step ahead and add a few tips and links for your readers, e. g. how to think in more flexible terms when designing a new site lay out, suitable css techniques etc. …

  3. 3

    Samuel Cotterall

    November 23, 2007 8:41 pm

    From what I see on a daily basis, Windows/Linux users maximise their screens, regardless of how high their resolution is, and Mac users stretch their window to fit the content (although mine, on a MacBook, is always stretched to fill the screen).

    I believe that just because screen resolutions are getting bigger doesn’t mean that we have to work to fill those screens. Since we moved from low 800 x 600 screens to 1900 x 1200 screens we haven’t doubled the size of the Photoshop UI, or the desktop icons, because they were fine that size and still work at lower resolutions. This is to say that designing for 760px-wide is still acceptable.

    I would go as far as to say that screen resolutions are actually decreasing with the rise in mobile browsers, and it’s something to keep in mind when designing.

  4. 4

    I tend to design at 979px width – it is perfect for every browser I have ever looked at using 1024×768 or greater. I know the 979 is quite obsessive but depends on how far you wanna go with your design!

  5. 5

    I feel you contradict yourself here:

    “Optimal user experience is rarely achieved by visual design”


    “an optimal legibility is achieved with approximately 60-80 characters per line”

    — graphic design class 101.

    Actually visual design is an (not the only!) integral part of making information clear and accessible.

  6. 6

    Tuppence: from personal experience, Google Analytics is a great way to capture screen resolution demographics (along with OS, Browsers, etc) in advance of a redesign.

  7. 7

    imo 960px is optimal, good for vertical grid:
    960/6 = 160px
    960/5 = 192px
    960/4 = 240px
    and you still have some white spaces on right and left.

  8. 8

    Stanislav Majerski

    November 23, 2007 9:38 pm

    Agreed, 960px tends to be the holy grail these days, divadeble by 2,3,4,5,6,8,10,12

  9. 9

    *sigh* Yes, it’s handy to know at which resolutions people tend to browse, but it’s a shame that an article which itself uses a flexible-width reasonably well places so little emphasis on this approach. By designing a site with a specific resolution (or browser, or person) in mind, you’ll ultimately end up excluding a goodly chunk of people – better by far to change your design to incorporate a flexible or elastic width layout and let your users browse it on their terms, not yours or someone else’s.

  10. 10

    Nice article about treating your users like idols, they’re why you become popular and the reason why you published your website. So treat them as they deserve, you must host them well.
    Also about the 960px, yeah that’s a great start, because when you begin to publish a website, you can’t evaluate so soon your average profile.

  11. 11

    The author’s last statement says “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 1000px.” Why estimate when their are tools out there to let you know exactly what resolution your users are surfing with. And as far as 1000px, it really depends on the nature of the site. I have a client who has roughly 40% of their visitor base using 800×600. And that’s not accounting for chrome and non-maximized windows. Don’t make an educated guess people…know your client and their respective target market and design appropriately.

  12. 12

    I feel you contradict yourself here:

    “Optimal user experience is rarely achieved by visual design”


    “an optimal legibility is achieved with approximately 60-80 characters per line”

    – graphic design class 101.

    Actually visual design is an (not the only!) integral part of making information clear and accessible.

    No contradiction. The overall design usually looks best when matched to screen width. The section of the page that contains the main content can be kept to a convenient reading width. That’s what columns, whether div or table based, are for.

    While the content in this article is excellent there is a lot more that can be said on the subject of design width and the placement of content. Window width is becoming such a difficult challenge.

    What is the best way to serve content for both the iPhone user and the person with a 30″ monitor? Now that Apple has made web browsing semi-reasonable on a cell phone other manufacturers will probably start paying more attention to their browsers. When cell/PDA browsers no longer suck, and people in reasonable numbers, start using them, how do we design for small screens?

    At the same time with the cost of large monitors dropping, there is the question of how to best use the extra real estate. As pixel density of monitors increases how do we accommodate? As the baby boomer generation’s eyesight deteriorates how do we match fonts to the decrease in actual font size of the bigger and higher density monitors?

    I look forward to more articles covering display as these questions become more urgent.

  13. 13

    The problem with Google Analytics is that while it tells you screen resolution, it doesn’t tell you the size of the actual window they are viewing it in. So just because a majority of your users are running 12×10 or better doesn’t mean they are going to see it at 12×10.

    I tend to concur with what others have said…960px is a solid place to start in this day and age. And if you design it right, it will collapse gracefully to accommodate those running something smaller.

  14. 14

    go liquid, go liquid, gooooo…

  15. 15

    968 is the absolute maximum.

    I hope you know what you’re doing Smashing Magazine. You’re writing for thousands and thousands of people. A lot of people pick up what you write, and then make the stupid mistake of making their designs a thousand pixels wide. This leads to a horizontal scrollbar in several browsers. GG!

  16. 16

    I used 960 in a recent project as well, 800 is just too thin nowadays. Sigh.

  17. 17

    Agust Gudbjornsson

    November 24, 2007 8:47 am

    As usual, very nice article.

    Keep up the content, love to visit this site :o)

  18. 18

    I agree that liquid layouts need much more consideration…along with the helpful max-width CSS property. Also, that is interesting “FoldSpy” data, thank you.

  19. 19

    The resolution depends on the project requirements. I like 950px and it works very well. I think that the 960px used widely because of the good grid implementations is not so good because it does not give the design a minimal free space.

  20. 20

    I think the biggest goal when determining what size to design for is understanding the target audience. For instance, my web site is a web design news site and therefore most of the visitors that come to my site are going to have larger screen resolutions so something like a 1024px base width works effectively. However, I don’t typically design for height because the fold is mostly irrelevant. You still want the content to start before about 400px though. This will help the flow of the overall site.

    Typically at work when I’m designing sites for government agencys or organizations I want to make the minimum resolution 800px depending on the organization. It all varies. You just have to ensure you are acknowledging your target audience at all times through design.


↑ Back to top