Ĉi tiu paĝo disponeblas ĉi-lingve, depende de la lingvo-agordo de via krozilo.
A major web-design problem is that the designer has chosen to unnecessarily make the page a particular width, i.e. a fixed or frozen width.
Question: What page size should you design your site for?
Answer: The size of the space it is being rendered in.
Question: What are the standard page sizes?
Answer: There are no standard page sizes.
Let's go into details. How big is your browser window? Can it be bigger? Can it be smaller? (Did you not know you can change it?) How big is the window of someone visiting your site? You don't know. You might think you know, but you don't. You might think that they have no right to use a different size to you (or to one of the supposed ‘standard’ sizes), but you are wrong. The World Wide Web does not have a fixed size, or even a few – it is infinitely varied, and was designed that way. HTML was designed to allow a document to be expressed in a manner independent of its rendering environment, thereby being widely compatible.
Yet many pages have a specific width designed into them, either
using the CSS width property, or by
placing the content in a <table> with the width attribute. This is extremely annoying for
anyone whose browser window is narrower than the specified size,
because the dreaded horizontal scroll bar becomes necessary, and
each and every line of text has to be read with a time-consuming
shuffle to the one side, then to the other. And let's be clear –
the visitor is being perfectly reasonable to suppose that a page
will fit into her window, even down to very narrow widths.
Why has the designer chosen to do something so irritating? If
I don't limit the width of the page, the lines of text become too
long, so it's harder for the reader's eye to find the start of the
next line,
I hear the designer protest. But that's not his
problem, for two reasons:
It might be harder to read for the designer, checking his design, because he's using his full screen to observe the page. It might, and probably can, look fine to his narrow-window visitor if he does not try to ‘fix’ it. There is nothing to fix for such a visitor, because the page is not broken for her.
If someone views a page with no styling using her full screen, then she is inviting the page to fill it. This is not a fault with the page or of its designer, because the page (with no styling) cannot anticipate the many and varied environments in which it will be rendered.
The visitor might not even regard it as a fault. She might have chosen to use a larger font with her wider window, so the lines won't appear so long in that case.
It is, therefore, the responsibility of the visitor to deal with very long lines, not the designer's. The designer should assume that the unadorned page is always correct, even if a little plain.
However, the designer can do something about it through styling
– make a flexible hint with the max-width
property.
The max-width property has been
standard since CSS2, and allows the designer to advise that a
visual object should have a maximum width. Mozilla/Firefox, Opera
and Safari all support it; possibly others, even IE7. And it does
no harm if not recognised.
max-width might ideally apply to a
group of paragraphs (perhaps in a <div>), or to a whole page (by setting it
on the <body> element).
Now, when your visitors' browsers recognise the max-width property, those with narrower windows will
see the page fill the window as before. This is not a problem for
them – they asked the page to use up that space, and their lines
were never too long anyway. Indeed, such visitors might not even
notice that you constrained the width.
However, visitors with wider windows do see a difference – the lines of text now don't go beyond a certain point, regardless of slight variation in window width. So their experiences are improved, at no expense to the narrow-window visitors.
What value should be specified by max-width? Firstly, choose the unit carefully. If the
purpose of constraining the width is to prevent lines of text
getting too long, and this excessiveness is defined in terms of the
average number of words per line, then you can roughly
equate this to an average number of characters, and therefore to a
certain number of ems. The em is most useful here since, if the
visitor uses a larger font size as her default, she can probably
cope with a wider column of text – the lines will naturally be
taller and easier to traverse, and the number of words per line
won't change until the full window width is consumed. And when it
does, the word count actually goes down; so you're effectively
setting the maximum number of words. Try around 45em to start with,
and adjust according to comfort.
(The ex unit may be more appropriate, but I've seen doubts raised about its usefulness.)
It is also advisable to set one or both lateral margins to
auto when using max-width. Set them both to achieve a centering
effect.
Finally, I'll mention that some browsers allow the user to set
max-width in their user stylesheet, to be
applied to all pages in the absence of any suggestion that comes
with the page itself. The wide-window user can use it to visit
pages both with and without styling, because her own max-width comes into effect whenever the page fails to
specify something. However, she can not know beforehand the
structure of the mark-up of every page, and so can probably at most
apply:
body {
max-width: 35em;
}
…which is suitable for an unstyled page. But if you set
max-width on individual components of your
layout, that default <body>
setting might be too restrictive for your layout, so it is
reasonable to loosen it up a bit by overriding.
Web Matters - Flexible design of web sites — Stephen Poley's comments
Viewable with Any Browser: Accessible Site Design Guide — Screen Size — Comments from the Any Browser campaign
Ĉi tiu paĝo disponeblas ĉi-lingve, depende de la lingvo-agordo de via krozilo.