273905 - poor usability of layout: unnecessary horizontal scrolling: text not free to wrap to window width

Status: RESOLVED WONTFIX

(www.mozilla.org :: General, defect)

Description

[Daniel B.]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.3) Gecko/20040910
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.3) Gecko/20040910

On many (most?) of the pages on the Mozilla.org site, layout of text is
tied to the width of other elements on the page instead of being left
free to fit in the user's chosen browser window width.  

When the width of those other elements is wider than a user's browser 
window width, the text layout is also wider than the user's window, and the 
user has to scroll horizontally to read all the text (instead of having to 
scroll horizontally only when viewing the original wide element).

For example, see http://www.mozilla.org/roadmap.html (as of 2004-12-09). 
The text wrapping is tied to the width of the dark navigation bar at the 
top.  Therefore, the text width never shrinks beyond the minimum width of 
the top navigation bar.  

If the user chooses a window width such that, when viewing that page, the
navigation bar doesn't fit in the window, then of course the user has to 
scroll horizontally (or adjust the windows) to see the right end of the 
navigation bar.  

However, the user should _not_ have to scroll horizontally to read text 
that could have wrapped to fit the window if it hadn't been tied to the 
width of the navigation bar.  (If it weren't for the left navigation bar,
the user might even have to scroll back and forth to read _each_ line of
text.)


When designing and coding pages, don't assume users view the page as you 
do.  Some users can't handle having multiple windows and use a single,
full-screen browser.  Other of us can, and use our big screens to see 
multiple windows.

Consider, say, a 21-in monitor, a display resolution of 1152x864, and two
side-by-side (non-overlapping) browser windows--that's just 576 pixels per
window horizontally.  (A 21-inch monitor has roughly the same area, and
proportions, as two standards sheets of paper, so such a window arrangement
is reasonable.)

In my case, my windows are not quite that narrow (and overlap partially), 
but the roadmap page's text _still_ doesn't fit in my windows and I have
to scroll horizonally.


For more guidance, see the links the bottom of the page at
http://www.smart.net/~dsb/2003/design/webstyle/FixedWidth.html .


Reproducible: Always
Steps to Reproduce:
1. Use a browser window width narrower than the minimum width of the top
   navigation bar.
2. Notice that the text (e.g., the "table of contents" table and the
   "introduction" text) wraps to the width of the navigation bar (wider than
   the window width).
3. Notice that although you reasonably have to scroll horizontally (or resize
   the window) to see the navigation bar, you also, unreasonably, have to
   do the same to see the right part of the text, which could have wrapped 
   to fit the window width.

Actual Results:  
See above.

Expected Results:  
The page should have been implemented in a way such that the text wrapped to
fit the window width instead of wrapping at a width wider than the window width.

Comment 1

[Daniel B.]

I should also add that, commendably, the text is not forced to be as width
as the diagram images.  (The user might have to scroll to the width of the
images to see them, but does not have to scroll to the width of the images
just to read the text.)

Comment 2

[fantasai]

(dsb, if you have a suggested patch, this will probably get fixed faster.)

Comment 3

[Daniel B.]

> (dsb, if you have a suggested patch, this will probably get fixed faster.)

If I fix someone else's bad layout for them, how are they ever going
to learn to lay things out better?

(I'm not trying to fix just the result of the problem, but the root of
the problem: someone's poor understanding of how to lay out web pages.)

Comment 4

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

The solution should be simple:  move the min-width from the body to the header,
and set a significantly lower min-width on the body (enough to ensure there are
a few words next to the sidebar).

Comment 5

[Steven Garrity [:sgarrity]]

The current min-width leaves bodytext visible and readable at a screen
resolution of 640x480. The min-width is to prevent the pages from breaking down
at extremely narrow window sizes. For devices with small screens, the these
styles are not included (they are set to media="screen") and the content/text
flows to the window size.

Suggesting WONTFIX

Comment 6

[Daniel B.]

> The current min-width leaves bodytext visible and readable at a 
> screen resolution of 640x480. 

Your statement is false.  It only becomes true if the browser 
window is sufficiently close to 640 pixels wide.

The SCREEN size is NOT the browser WINDOW size.  Why can't
you (and most web designers) understand that (or keep it in 
mind)?


Consider, say, a 1440-pixel-wide resolution.  Put two browser
windows side by side without overlapping--that's only 720 
pixels per window.  Even on a 1600-pixel-wide display, a
pair of side-by-side window are only 800 pixels wide.


> The min-width is to prevent the pages from breaking down
> at extremely narrow window sizes. 

Why prevent the page from "breaking down," force the page to
be wider than the window width, and force the user to scroll
horizontally (or resize the window when possible)?

(Really.  Why do you think that a little layout breakdown is
worse than a lot of user inconvenince?)

If the user has no choice in window size, why shouldn't you
let the page layout break down a little so the user can still 
see it and see it reasonably conveniently?  How is it better 
to require the user to scroll horizontally, possibly twice
for EACH line of text?

Even for users that do have some choice in window size, why 
shouldn't you let the users make their own tradeoffs between 
window size against "prettyness" of the layout?


> For devices with small screens, the these styles are not 
> included (they are set to media="screen") and the content/text
> flows to the window size.

What exactly do you mean?  (Who sets or ignores media="screen": 
the mozilla.org server, or the small devices' browsers, or
something else?)

Even if especially small devices work fine, why shouldn't
regular browsers?


> Suggesting WONTFIX

That would suggest that you don't understand (or refuse to 
accept) the W3C's philosophy for how the web is supposed to 
work (specifically, that authors don't get absolute control 
over rendering and that when browsers render pages they factor 
in users' preferences as expressed in the browser configuration, 
which includes, of course, the user's chosen browser window 
width).

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I agree with the reporter.  In fact, this was something I thought we made clear
when discussing the site redesign that led to the current site design.

Comment 8

[fantasai]

+1 to both statements

Comment 9

[Steven Garrity [:sgarrity]]

Attachment: Screenshot of Mozilla.org at 640 by 480

Daniel, yes, you are right that web authors do not (and should not) get
absolute control over rendering. This is why we have used a flexible width
layout for Mozilla.org. The width is flexible, but users a mix-width and
max-width to prevent it from going to extreme sizes, at which point other
readability issues come into play (line length, in particular).

I've attached a screenshot of Mozilla.org/about rendered in Firefox in a 640 x
480 - this shows that the site is readable without side-scrolling at this small
screen size. We've done our best to make the site accessible to all, and as
readable as possible in the most common browser window sizes (without any
research to back me up, I'm thinking most people browse with a window between
640 and 1000 pixels width (and yes, you're right that screen-size does not
always equal browser size, especially at the larger resolution).

This was not a decision made in ignorance of the fundamentals of the web, as
you have suggested. Rather, it was a compromise to deliver a site that was as
readable as possible for as many people as possible.

Comment 10

[David Boswell]

Closing as wontfix.  We are in the process of redesigning the site and won't make changes to the existing design.  The requirements for the new design also include liquid layouts that will work for people using devices with small screens.