The common question .what screen resolution (or screen size) should I design for. is a wrong question, though it can be turned into a meaningful question. If you need to answer the question as posed, the correct answer is .any resolution.. This can be literally anything, starting from zero pixels; there are no pixels in a speech presentation of a page.
The simple test for page width is to open the page on a graphic browser and modify the browser window width. Is the content visible without horizontally scrolling if you make the browser window.s width half of the screen width?
The upper limit for the visible width without scrolling is dictated by the horizontal resolution of the screen, which is typically 1024 or 1280 pixels these days. A fairly common scenario of using two equal-wide windows side by side means that window width is 500–600 pixels, and this is often a convenient width for browsing: it roughly corresponds to typical page width in books.
You can find your monitor resolution in the system settings,
e.g. via the Control Panel in Windows. You can also create a simple test page
containing elements with known width, for comparison. A simple way to create
such an element in HTML is
The graphic rendering of a page can “have a width” in several meanings:
tabletag, then the width is 750 pixels, causing some horizontal space to be unused if the browser window is wider, and forcing horizontal scroll bar if it is narrower. (To be exact, the page will be a bit wider, due to default margins.)
As a rule, a mixed-width page with a maximum width set to, say, 550 or 750 pixels is more accessible than the other alternatives. The value of 550 has no magic in it, but it allows the page to be viewed without horizontal scrolling on most devices, at least in full-screen mode; moreover, it probably makes the page fit on paper, for most commonly used paper sizes. A free-width page is suitable too, except for the fact that on a large screen, the user needs to know how to set the window width to something suitable. For a fixed-width page, smaller widths (down to something like 350–400 pixels) are better than larger widths.
However, the width issue is deeply entangled with the
overall page design. If you have, say, a page with a layout table with
<table width="900">, then the page surely has accessibility
problems, but you cannot usually solve them simply by removing the width
attribute or changing its value. There are probably several elements and
features on the page that relate to the table width and should be adjusted too.
However, on many pages that use layout tables in a rather simple way, removing
all width attributes from the table and its cells can produce a
Tables are not the only constructs that impose a specific a lower limit for page width. Quite often, a page is otherwise a free-width page but contains a wide logo image at the start (or elsewhere). In such situations, it is advisable to replace the image by another version that has width smaller than 550 pixels.