Screen Resolutions and Better User Experience

Advertisement

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

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.

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?

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

  1. 1 http://www.smashingmagazine.com/2007/10/03/who-is-your-visitor-an-average-profile/
  2. 2 http://www.baekdal.com/reports/actual-browser-sizes/

↑ Back to topShare on Twitter

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 performance problems in large companies. Get in touch.

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

    0
  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. …

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

    0
  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!

    1
  5. 5

    I feel you contradict yourself here:

    “Optimal user experience is rarely achieved by visual design”

    but:

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

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

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

    0
  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

    0
  9. 9

    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!

    1
  10. 10

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

    0
  11. 11

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

    0
  12. 12

    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.

    0
  13. 13

    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.

    0
  14. 14

    I feel you contradict yourself here:

    “Optimal user experience is rarely achieved by visual design”

    but:

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

    0
  15. 15

    @cole:
    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.

    0
  16. 16

    go liquid, go liquid, gooooo…

    1
  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)

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

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

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

    0
  21. 21

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

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

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

    Regard,
    Vic.

    0
  24. 24

    Short but cool

    0
  25. 25

    Hi,
    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.
    Talyah.

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

    0
  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?

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

    0
  29. 29

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

    tia,
    Dean

    0
  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 >

    0
  31. 31

    In fact, to compromise stakeholders’ understanding of design solutions is your primary task if you strive to be a professional web-developer

    I don’t understand this sentence.

    1
  32. 32

    Sorry, I am pretty new to this web design business, but I’m lost why you have to use a fixed width at all. Liquid width is harder to design, and harder to code, but in the end it produces more flexible, accessible solutions. Even better, on navigation pages – with no large blocks of content – you push more content above the fold.

    One of the problems with the ‘average user’ theory is that your analytics software can’t tell you about all those people who don’t use your website because it lacks accessibility.

    The ‘very-wide monitor’ issue is only a problem for Internet Explorer v6 or before – IE7, Firefox, Opera, Safari all handle max-width fine. Therefore, just add ‘max-width:1000px;” to the body, and problem solved.

    0
  33. 33

    Therefore it’s important to understand that in most cases the browser window resolution is much smaller than screen resolution.

    Is this actually derived from the data, or just an assumption? I think it’s stretching it too far and would like to see some data to back this up. Other testing for this does not support this claim.
    http://baekdal.com/reports/actual-browser-sizes/ This shows that for user that run 800×600 and 1024×768 resolution, almost everyone is using a fullscreen browser.

    In most cases you can improve the user experience by keeping the width of your layout at most 1000px.

    According to the data you presented from Foldspy, this would give a horizontal scrollbar to appx. 20% of your visitors. I would not consider this good advice. Everyones audience is different, but if 20% of your audience is getting a horizontal scrollbar, I would consider the website a failure.

    Sitepoint had some great info on this topic as well:
    http://www.sitepoint.com/forums/showthread.php?t=463591

    0
  34. 34

    “To make a design liquid (fluid or elastic) means that on larger resolutions the width is going to grow way beyond the optimal width.”

    Not really — fluid or elastic layouts do not mean that you have single column websites. You can explicitly define your column widths… a three column fluid layout can become a two column layout if the viewer decreases their viewable area. A fluid layout can also have a maximum content width… the main concern is does the website “degrade” gracefully.

    0
  35. 35

    I would like to show the readers an interesting solution used by http://www.aish.com Click through to any article. They have their article text set to 10-12 words across, at a font size easily readable even at higher resolutions. Then, the extra area on the right of the page is used for ads or other in-site linked features. Readers at lower screen widths will get the article but not see the non-essential material on the right.

    0
  36. 36

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

    0
  37. 37

    The screen resolution is a real problem,in fact more definition mean less readable,
    Moreover there are some differences between IE and firefox in the visul layout.
    Excuse for my bad english,bye by Hermann from Italy

    0
  38. 38

    I’m designing with a 925px width. Video is the prime consideration for many of us these days. 925px works well with the standard video sizes and leaves people with a little space at the side if they don’t want their browser window fully maximised.

    If you sites contain a lot of text then 750px wide is still great from a readability point of view. As mentioned, with 60-80 characters per line, you are looking at columns in the region of 384 to 450 pixels wide. With a long article in one text column that gives you a hell of a lot of other empty space to fill on a 975px wide page.

    0
  39. 39

    What about being “cute” with technology on your websites?
    Such as, auto-highliting Google search terms you came in with — but giving no option to disable the hilighting?
    I even tried a different browser, and it STILL remembers how I got to this site. You must be using IP address and everything in some kind of database. Anyhow, it’s annoying, and overkill — just like Flash and the other stuff you don’t recommend.

    0
  40. 40

    I usually design for 940-960 (depending on grid I’m using) if the 800×600 users are less than 5% of the traffic. If you can’t ignore users with low screen resolution, you can use min-width of 778px for 800×600 resolutions and a max-width of 960px for 1024×768 resolutions and higher. I saw a website that was behaving pretty well in IE6 also, I just can’t remember the link…

    I also agree with positioning the less-essential items, like advertising, in a side-section on the right.

    Nice post and comments :)

    0
  41. 41

    now a days people using normal and wide screen monitors with 17″ and 19″ monitor. so problem is what resolution should best for website. Some people think 100% flexible is best. but that is not good. for 1wide screen 1400 resolution and for normal 1024, never match. so i found that if we keep 995px width. Gives nice look for all resolution.

    0
  42. 42

    now a days people using normal and wide screen monitors with 17″ and 19″ monitor. so problem is what resolution should best for website. Some people think 100% flexible is best. but that is not good. for 1wide screen 1400 resolution and for normal 1024, never match. so i found that if we keep 955px width. Gives nice look for all resolution.

    0
  43. 43

    Very interesting article; I am researching for the best size to use in a new FileMaker Pro database I am building for local school teachers. I wish FMP had better “liquid” design tools, but I have found in early testing that if I design with a 900×700 size (no fold), I can get the database UI to look pretty good on old iBooks and PowerBook 12″ Macs at 1024×768 native res. I regret the loss of perfectly usable space on the newer MacBooks, however, which would allow me to get well over 1000 pixels wide without scrolling being necessary.

    I think if I were starting this in 2009, I would go for the 1280×800 native res screens of the MacBooks, but since it’s still 2008, I’m going to assume some people are still using the older 1024×768 12″ portables at a minimum. Basically, just like you guys, I’m trying to design for what I assume will be the minimum used size and not worry too much about users with larger screens.

    Anyway, back to my point, thanks for the interesting article, the very cool “live” Flash charts, and the excellent comments. That was neat! Take care everyone.

    0
  44. 44

    this information is great. thanks. it is however interesting to me that everyone is focused more on the width of a design. i am currently working on several projects where the ‘above the fold’ question is coming into play. does the height information in this article take into consideration browser chrome and browser tool bars, etc? some more general information about what a designer should be working with for height in a design to assure information being above the fold wold be quite helpful.

    thanks

    0
  45. 45

    A recent study found that the most common width for the most popular websites around the world is about 900px.

    0
  46. 46

    Great article and I also love the contributions from your readers – thanks everyone for having your say! Here’s to a more readable Web!

    0
  47. 47

    liquid design might be appropriate in some cases, but most of the time fixed design works better. From my experience web designers most of the time create layout for one resolution, not thinking about what will stretch if necessary and how elements will reposition in different resolutions. Its simply way too difficult to predict even few cases and not butcher and limit the designer basic idea at the same time. Furthermore, its extremely difficult to read long lines of text and if liquid design is not thought thru out properly it will end up in disaster and all the “usability improvements” will do exactly opposite. Personally I go with 960px. Someone said 979px but then he will get 1 pixel too many in some designs causing trouble and believe me I learned it the hard way :)

    0
  48. 48

    Hi, 60-80 characters per line for screen reading seems like a lot, especially for articles, are you not accidentally basing your figures on folio? What is your source?

    0
  49. 49

    So, when will this article be updated to include 2011 figures?

    2
  50. 50

    Thanks alot i didn’t knew about this now i think this info will surely help me in my next blog :)

    0

↑ Back to top