Menu Search
Jump to the content X X
The Smashing Book #5

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. new Smashing Book 5 features smart responsive design techniques and 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 Oxford

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 Oxford, on March 15—16, 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

    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.

  21. 21

    We live in XXI century so 1024px is now minimum, sites lower than 1000px are just waste of space.

  22. 22

    We live in XXI century so 1024px is now minimum, sites lower than 1000px are just waste of space.

    That’s wrong. Look at the data – a sizeable percentage of users still operate at 800X600, and for some websites it will be higher. The point is that you should, at the very least, know what you’re user is viewing at. I would argue that it’s just good manners to accommodate such a high percentage of internet users, and design accordingly.

    Besides, you wouldn’t discount, say, 14% of users just because they didn’t use Internet Explorer.

  23. 23

    I think web developers should think about the target audience of the website when optimizing it for screen/browser resolution. For example on our site visitor are mainly web developers and they all have screens bigger then 800×600 screen (according to Google Analytics). So we made the design with 960px width and it’s fine.


  24. 24

    Short but cool

  25. 25

    What is the practice for designing internal and external web applications which require the presentation of a large amount of data in one single screen?
    How can one compress so much data in one single screen without using vertical or horizontal scroll bars (that is a requirement) using 600X800 resolution?
    Will enlarging the resolution to 768X1024 help compress the data needed? and will the users be able to read the text in that resolution?
    Still many questions still remain with no absolute answers.

  26. 26

    I still design for a minimum of 780px, and optimal for 960px. You’d be surprised how many people don’t know that you can change the screen size. Even then, some older people with small screens (15 and 17″ CRT) prefer 800×600 more than 1024×768 because the font is bigger and better readable. Also, not everyone is able to buy a new monitor every 3 years. 15% of your audience is still a big gab and you shouldn’t let them have a horizontal scrollbar. It’s like your shop would only be 1m90 (6 ft) in height, because only 15% of the people are bigger than that . The extra effort for a good 800×600 experience is worth the potential 15% income.

  27. 27

    I think so many are over-looking the key point in this discussion – the optimal reading width of 60-80 characters. This is why newspapers have columns! To make a design liquid (fluid or elastic) means that on larger resolutions the width is going to grow way beyond the optimal width. You therefore need to be constraining to a fixed width to ensure you can be sure the width is kept in check regardless of users screen resolution or browser window size.

    Sure you can design to 1000px but be sure it suits your target audience, another key factor in your design decision. If you do chose to design to 1000px then consideration of those users still on 800×600 needs to be made, such as ensuring all key information, logos, navigational elements are displayed without having to scroll sideways. This then begs the question if some content isn’t important enough to be included in the non-scrollable area is it important enough period?

  28. 28

    Decent article — but feel compelled to point out that it is a little lean in explaining the impact on the User Experience. In my experience, I’ve found that you can take all the metrics in the world regarding browser sizes and screen sizes, but there is no single solution to solve the whole issue. Every project is unique and should be treated as such. Engineering (or designing) a user experience is more than determining safe ranges for display areas, it’s an exercise in understanding a user’s fundamental behavior on a website — at least on THAT particular website — and developing a visual language to communicate the goals of the website. It’s striving to find a balance between the requirements of the project and the limitations of user’s technical understanding.

    Having a good foundation like a target resolution isn’t a bad starting point. But that is all it is — a starting point. In nearly every project I’ve worked on, I get to a point where you need to break the rules. Sometimes you need to ask yourself and the user to step outside their comfort zone. Perhaps all it is, is simply encouraging them to resize their window a little or scroll. Now, before your resize fanatics get your knickers in a knot — yes, yes I know: there is a HUGE difference between encouraging resizing and plain old hijacking the user experience.

    To the point: understand what and who you’re designing for; engineering a user experience means sometimes you have to break the rules; get out of your comfort zone; scrolling and resizing are not atypical nor negative user behaviors – they do it, and so do you.

    Lastly, the metrics provided in the charts outline the average display area over a wide range of browsers and resolutions. These are broad metrics and should NOT be taken as gospel for any and all websites and applications. They are without context to a website or a particular user experience. In fact the are aligned with advertising goals (which is completely different than user experience). If you’re going to use metrics or any type of statistical data in an article — be sure its specific and meaningful to the issue.

  29. 29

    anyone have any information about what specifications they are developing mobile web content for?


  30. 30

    Hmm.. I’m on to go with 960 as well.
    1000 is too much imo, but I always do it in 1024 and then add some lines for 960px.

    the mobilphone-browser-prob is baaaaaaad >


↑ Back to top