Home arrow Best Screen Resolution
Best Screen Resolution




Best Screen Resolution

What is the best screen resolution for web use ?

The best screen display resolution for web pages is a screen size that gives the largest screen, not the widest. Many 'large' display screen resolutions are simply wider, and give an unfortunate letterbox effect that is poor for website display, although it may be satisfactory for side-by-side document display. Therefore it depends what your main usage or preference is - if you want the best website display, then a true large screen is best, but for simply comparing documents then a letterbox-style screen may be suitable, since it is likely to be cheaper.

Measuring the best screen size

Screen size itself - eg 19", 21" (inches) - is only important for an overall guide. A more useful factor is the width to height ratio, since a wider screen may in fact be worse in this respect than a smaller one. If your new 'larger' screen is of the letterbox shape then website viewing is not going to be improved, in fact it may be worse. If you buy a screen with extended width but not height, all that will happen is that there will be wide gap at the side of the web page. And, if the page is of a fluid width design, the design might even be wrecked as all the page elements will move upward and to the left and right, ruining the design in some cases.

With these very wide screens, it is often better to have the browser in a window, and not view the site full-screen.

Calculate the size ratio

We don't use the aspect ratio descriptions of 16:9 or 4:3 here as it's easier to work it out another way. There is a simple way to do this for your screen or your intended purchase: either look at the table below, or divide your screen width by the height. The lower the figure, the better. There is nothing wrong with high ratio screens except they are not designed for optimum website viewing, but for side-by-side document work or TV film viewing. Since they are cheaper, they can be sold as 'wide screens', and appear attractive as the price is normally lower than expected (they are cheaper to make as there are less pixels in them due to the reduced height of the screen). For website viewing you need as tall a screen as possible, a thin slice at the top of a web page isn't optimal. A web page is like a magazine page.

Our simple formula: width divided by height -
eg for a 1400 x 1050 screen, then 1400 over 1050 = 1.3

The best screen resolutions for web use have a ratio of 1.3 or lower. An average screen will be of around 1.6, and the worst letterbox-shape screens for web use are of 1.8 or higher, as seen in the table below.

Make sure to buy a screen of 1.6 ratio or less when calculated as described, if you want the best online viewing experience. It may be possible to change the display resolution but this doesn't change the overall shape of the screen. A deeper (taller) screen is a better screen, for web use.

Screen resolution in pixels

Screen size is usually quoted in inches, as in 20" or 20 inches. However what you really need to know is the resolution, as this tells you if you are buying a true 20" screen or a letterbox type. The best resolution in this size range is 1600 x 1200 pixels, which could also be written 1600x1200 px. It is a genuine large screen size, as against the 1600 x 900 pixel choice, which is more of a letterbox shape.

17-inch screens

It is often found that going up from a 15" screen to a 17" screen has no benefit as the page seems smaller, due to resolution / visual effects. The actual, physical size of anything on the screen is actually smaller, and therefore many types of information (like text) are harder to read or understand. Text will be more than 1 point smaller in reality. Setting the resolution the same as the smaller 1024 x 768 screen improves the size but the result may be blurry.

It may be found better to skip this size and go on up to 19".

Best screen size for web designers

Web designers need two screens, a standard 1024 x 768 15-inch panel, and a larger one of 19 to 24". This is because they need to see web pages at a standard size and at a larger expanded size.

A web page must always look good at 1024 x 768 as this is both the standard laptop size and the most popular current screen size, as can be seen by the second table below. Pages should also be checked at a larger size to see that they haven't crashed when expanded - which often happens to graphical sites as against text-based sites, if the page is set to fluid width.

The basic reference size is now 1024 x 768 pixels, as the old 800 x 600 CRT monitor is obsolete and has few users. You can see in the table below that out of 49,000 visits on the day shown, only 1,300 had a CRT monitor. We deliberately chose this particular website as the visitors are a very good average sample: not too 'techy', too well-off or too narrow market-wise, ie likely to be from any particular demographic. It is a very accurate average picture of current users.

The worst sin in web design is probably to have a scroll bar at the foot of the screen, as there is nothing more calculated to annoy people than having to scroll left-right as well as up-down. Therefore a reference screen size has to be chosen and it can't be a large size. Luckily, at present, there are clearly more users of the 1024 x 768 size than anything else, so this becomes the reference resolution.

Fixed-width or fluid width ?
This is a tricky question with no obvious answer and there are are bitterly opposed camps here. Our opinion is that web pages should normally be designed at a fixed width of 1024x768 px. These are some of the reasons:
  • A fluid-width page often crashes if expanded up to a larger screen resolution. All the elements move upward and to left and right. Sometimes this can make it look like a train wreck. The designer's visual balance will certainly go.
  • A text-based site has no problems here - but a wide-screen text site is a visual affront. Best to keep it at the original size.
  • If you want to keep every page on the site looking the way you designed it, you can't allow the individual visitor to vary the width ad hoc. You might as well give them another template and not even bother checking it.
  • Ecommerce sites can crash if expanded outward.
  • The current 'mental model' of a web page is the same shape as a magazine page. Until that changes, and we accept a wide but short page (like a letterbox) as the new shape, a page often conveys its message better if it looks similar to a magazine page shape, and we scroll down it like scanning down a magazine page.
  • Wide screen owners are often better off browsing in a window - which is what we do. There is no great benefit to stretching a web page left and right, especially to the extent that the new cheap 'wide & short' screens do, giving the effect of a slice at the top of a web page.
  • However if you run your site on a simple  blog cms / micro-cms such as WordPress, the templates are generally very simple visually and can take being expanded out widthways.
  • If the site is basically a text site but with simple gfx, then it should also expand out OK. However, a very wide page of text is unpleasant and hard to read. This is why multiple columns are used on a magazine or newspaper page - or on a wide text-based web page. It's why we often restrict the main content pane width, in order to make the text easier to read and more pleasant on the eye. So, if you allow the page to expand out to any width, even simple text looks poor.

What about CRT monitor users at 800x600 ?
Times change and move on. The small CRT monitor is finished and will die out. It's like dial-up Internet connections: if you design your site for users of those, the other 95% of people with broadband will have a restricted experience that will not please them. The old 40kB 'desirable maximum pagesize' has gone for ever - and so has the small CRT.

You can see on the second table below that more people have a 24" screen now than have an old CRT monitor.

Larger CRTs are a different matter as they are the technical reference screens used by technicians. As yet they are still superior to TFT flat panels. However as they are larger, at 2048x1536 for example, they are up there with the other 19" monitors.

The screen size tables

Here are two tables showing screen resolutions:
  • Table 1 shows the best monitor sizes for web use
  • Table 2 shows the screen resolutions of the visitors in one day on a busy site
These show the best and worse sizes, and also the most common screen resolutions for one day's traffic, midweek, on a site we are associated with, in August 2009. There is a good sample as there were about 49,000 visits. We chose a simple way of calculating which screens are the best for website use, and which are the worst: simply divide the width by the height.

Screens with a height/width ratio of 1.3 or less are the best for web use, and those with 1.8 or more are the worst.

Table 1: the best screen display size table


pixel size
ratio
notes
   
Best buy screen sizes
  
1024 x 7681.3
Standard 15" screen - reference
1229 x 983
1.2
 
1280 x 9601.3
 
1280 x 10241.2A good 17" screen
1360 x 10241.3
 
1400 x 10501.3
A 'best buy' large screen size - about 19"
1600 x 12001.3
A 'best buy' large screen size - about 20"
   
Average choice screen size
  
1280 x 854
1.5
 
1600 x 1024
1.5
 
   
Poor choice screen sizes
 These sizes are good for office work
- but poor online
1280 x 720
1.8
 
1360 x 768
1.8
 
1366 x 768
1.8
 
1536 x 864
1.8
 
1600 x 900
1.8
 
1920 x 1080
1.8
 
2048 x 1152
1.8
 
   


Screen resolution Q & A

Q: Windows 7 will only allow a screen resolution of 1200 x 800.
A: The screen resolution is determined by the monitor and the graphics card, the operating system has little to do with it.

You can use up to the maximum that the monitor will allow, assuming that the graphics card can deliver that resolution. So if your screen will allow 1600 x 1024, and the gfx card can handle that, it will run OK. Windows 7 or any other OS doesn't come into it. If you can't get a high res that you think should be possible, then it looks as if your gfx card doesn't run correctly under W7. Update the drivers or get a new gfx card.


Q: How to check screen resolution?
A: Right-click on your Desktop >> view right-click menu >> choose Properties >> Settings tab >> see resolution slider - adjust to suit.

Screen resolution vs visit number chart

Next is a chart of the screen display resolutions recorded for visitors to a high-traffic site with about 35,000 uniques and 49,000 visits on the day seen here. It shows what proportion of visitors have screens of the various sizes, in August 2009. There were also a number with odd screen sizes that were represented by less than 10 visits, but we disregarded these as the numbers are so low in comparison to the larger figures (eg over 11,000 with a standard 1024 x 768 screen).

Screen resolution in pixels is followed by number of visits, then the relationship of width to height. A higher number is worse, in terms of real screen size, and a number over 1.6 is poor. Screens with a number over 1.6 are of a letterbox shape, and although they may be excellent for placing documents side by side, they are not a good choice for viewing websites.

However there appear to be no larger screens, of 21" and up, with a width/height ratio of less than 1.6, perhaps unless a more expensive screen is bought. The 1920 x 1200 option at a 1.6 ratio seems the best choice of screen in large size, at around 24", since there are several worse choices with a 1.8 ratio (like 1920 x 1080).

Small mobile devices are marked # and their screen size ratios are not relevant here.

Table 2: a large-sample visitors' screen size table

sizevisitsheight/width ratio
   
1024 x 76811,119
1.3
1280 x 10247,915
1.2   A common 17" resolution
1280 x 800   7,754 1.6
1680 x 1050  4,8161.6
1440 x 900 4,4681.6
1920 x 1200 1,567
1.6
800 x 600 1,343
1.3
1152 x 864
1,170
1.3
1366 x 768 1,040 1.8
1920 x 1080811
1.8
1280 x 7687421.6
1600 x 1200593 1.3
1280 x 960 473  1.3
1024 x 600  456 1.7
1600 x 900 330 1.8
1400 x 1050316 1.3
1280 x 720 314 1.8
1360 x 768 210 1.8
1024 x 640 1471.6
1344 x 840
1371.6
320 x 396  960.8 #
1536 x 864851.8
1024 x 819761.2
1152 x 720 701.6
1536 x 960651.6
1229 x 98362 1.2
1024 x 576 481.8
819 x 614 45 1.3
2560 x 1024432.5
1024 x 614 391.7
1024 x 1280 37 0.8
2560 x 1600 37 1.6
2048 x 115235 1.8
1120 x 700 34 1.6
1093 x 61430 1.8
960 x 600251.6
1600 x 102424 1.5
1170 x 93624 1.2
979 x 55024 1.8
1680 x 94521 1.8
640 x 48019 1.3
1698 x 106118 1.6
922 x 69115 1.3
983 x 737141.3
1280 x 854141.5
1080 x 81014 1.3
1613 x 100814 1.6
1140 x 64114 1.8
1088 x 61413      
1.8
1396 x 104713 1.3
936 x 702121.3
1360 x 1020 121.3
240 x 32011 0.7 #
1120 x 840111.3
1115 x 697
111.6
855 x 64110 1.3
1050 x 168010 0.6
800 x 48010 1.6
   


Here is the list of screen resolutions used by small numbers of visitors - less than ten visits out of 49,000. These are likely to be more expensive options, or unusual equipment types in some cases. We didn't bother placing these in the table or calculating the screen size ratio - they are included for reference and to ensure the sample data is complete.


1200x1920     9
823x514        9
886x664        9
960x720        9
853x533        9
1050x1680     9   # This is a 1680 x 1050 panel with the resolution defined 'the wrong
           way round' in some screens of Chinese source sold originally for advertising displays
1517x948      9
1301x813      7
1257x785      7
1229x768      7
1311x737      7
240x320        7
1688x949      7
1200x1600     7
480x320        6
840x525        6
1603x902      6
1080x810      6
2048x768      6
894x670        6
1214x711      5
1466x916      5
1214x910        5
1638x922        5
1755x987        5
30720x768    5
2048x1536    5    # a high-quality 19" CRT monitor - but lots of deskspace needed
936x702        5
1140x641        5
894x524        5
1519x949        5
3840x1200    5
983x576        5
1143x857        4
1336x855        4
1350x844        4
1536x1152    4    
640x512        4
1067x800        4
1429x893        4
320x480        4
1440x960        4
1170x702        4
1360x1024    4
1192x670        4
1441x810        4
3840x1080    4
1360x765        4
1152x870        4
1840x1016    4
768x576        4
1067x600        3
1619x910        3
1088x614        3
1483x835        3
934x584        3
360x480        3
900x1440        3
1160x725        3
1486x836        3
1680x988        3
3072x1152    3
991x743        3
1117x894        3
1772x1108    3
991x793        3
1772x997        3
1245x778        3
320x240        3
640x400        3
800x480        3
1369x855        3
1152x900        2
1350x1080    2
1425x891        2
1525x857        2
234x298        2
1230x768        2
234x276        2
933x700        2
1176x735        2
2880x900        2
1115x697        2
1920x1096    2
240x160        2
1344x1008    2
170x174        2
480x360        2
793x595        2
2048x1280    2
832x624        2
1676x1047    2
170x178        2
314x240        2
1124x644        2
3840x1024    2
1069x668        2
1920x1440    2
1916x1068    2
3200x1200    2
122x133        2
1120x630        2
1293x970        2
3360x1050    2
953x762        2
122x146        2
1696x1060    2
1224x768        2
1568x980        2
720x1152        2
1020x613        1
1104x865        1
1280x933        1
170x220        1
320x320        1
800x5000        1
884x663        1
960x540        1
1088x612        1
1280x778        1
1600x768        1
170x102        1
1843x1037    1
3120x1050    1
778x486        1
1120x774        1
1225x702        1
1280x1280    1
1364x768        1
1440x856        1
1680x935        1
1800x1440    1
3520x1200    1
720x450        1
896x717        1
10240x7680    1
1067x683        1
1152x922        1
1280x935        1
1429x1143    1
1005x754        1
1040x760        1
1152x648        1
1200x800        1
1232x692        1
1386x854        1
234x278        1
314x200        1
1024x738        1
1078x674        1
1187x670        1
1280x600        1
1306x737        1
1804x1014    1
734x550        1
991x595        1
1216x1028    1
1264x898        1
1355x847        1
176x208        1
240x274        1
800x624        1
888x500        1
1011x758        1
1045x653        1
1088x725        1
1202x868        1
1243x702        1
1344x1088    1
1600x924        1
1867x1400    1
234x282        1
560x420        1
800x1280        1
936x549        1
1024x744        1
1080x1920    1
1192x668        1
1368x1080    1
1600x1050    1
1823x1119    1
768x1024        1
1216x684        1
1264x899        1
1288x774        1
1436x742        1
3280x1200    1
698x524        1
800x800        1
972x547        1
1016x870        1
1204x752        1
1243x995        1
1280x912        1
1344x756        1
170x184        1
234x290        1
576x432        1
800x352        1
1024x765        1
1314x642        1
1368x768        1
1600x1105    1
1824x1028    1
308x270        1
768x480        1
840x630        1
917x550        1
1069x801        1
1222x916        1
1272x947        1
1560x875        1
199x140        1
707x530        1
819x480        1
1018x768        1
1053x790        1
1205x678        1
1421x800        1
170x190        1
1918x1080    1
234x296        1
855x501        1
1082x677        1
1142x603        1
1280x770        1
1463x1097    1
234x244        1
311x194        1
844x633        1
1296x810        1
1440x717        1
1680x921        1
1776x1000    1
2025x1139    1
347x582        1


An explanation of best flat panel monitor screen display resolution for website use, together with a visitor percentage chart of screen resolutions for site visitors from a single-day large sample.
© A3webtech 2009-08
 
Web Business Managers