511900 - (rudehypocrite2) web site styling should be prime example of best practices

Status: RESOLVED WONTFIX

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

Description

[Felix Miata]

This is an offshoot of bug 225639.

The about-to-be-released redesign is still setting some font sizes in px, and setting contrast to values marginally above WCAG on the very same undersized text. This is rude, unnecessary, and a major reason why browsers need to provide their users such defensive measures as minimum font size and zoom, and outsiders provide bookmarklets such as on http://forums.mozillazine.org/viewtopic.php?f=4&t=23476&start=0&st=0&sk=t&sd=a. 

To summarize, most web site text should be clearly legible. Reduced contrast and reduced size both contribute to reduced legibility. A reduction of either necessitates an increase in the other to compensate. Both the current site styles and the beta site styles generally reduce both. To put it politely, this is unfriendly, and unwelcome by users.

All the latest browser versions in common use have very good CSS support, which includes the ability to incorporate a large measure of resolution independence by sizing primarily in ems. Resolution independent designs allow users to enjoy a page without resorting to defensive measures; to use them comfortably just as they find them. Unfortunately this is not very common. Mozilla should lead the way to reverse this unpleasant condition, to boldly show others that it can be done, and how.

These articles are just a few that explain font sizing and other legibility issues:
http://www.w3.org/QA/Tips/font-size
http://www.useit.com/alertbox/designmistakes.html
http://tobyinkster.co.uk/article/web-fonts/
http://www.lighthouse.org/accessibility/top-10/
http://www.lighthouse.org/accessibility/legible/
http://www.dev-archive.net/articles/font-analogy.html
http://fm.no-ip.com/auth/accessibility.html

Comment 1

[David Boswell]

I certainly agree that www.mozilla.org should be a example of best practices and can lead in establishing new ways to handle things as web standards evolve.  With that having been said, I don't think we should block the relaunch on this issue and we can address this after the redesign goes live.  

I suggest getting Happy Cog (the designers who worked on this project) involved to discuss why they made the decisions they did -- they are focused on web standards best practices as well and probably have some worthwhile things to add to this discussion.  We can then discuss the decision making behind these choices and discuss our available options and decide if we need to make changes and what changes to make.

Comment 2

[Felix Miata]

Attachment: high (144) DPI screenshot of beta home page

This is what it looks like to a high DPI visitor not using minimum font size or zoom. Note the comment near the bottom describing limitations of viewing it.

If it was up to me I would block launch until fonts conform to best practices.

Comment 3

[David Boswell]

Thanks for the screenshot -- there is certainly an issue here to look into, but we're not going to block things on this.

Comment 4

[Felix Miata]

Attachment: 144 DPI screenshot with 24px minimum font size (nominally only 150% of Gecko's default)

Here the "readable" bookmarklet from the first link in comment 0 is also applied. .moral-wrap/.agree is obliterating the upper right of #content even though the page has voluminous whitespace. The obliteration is similar, and worse, on /en-US/firefox/personal.html, where many links in the columns below the fold overlap each other, even though there is more than ample surrounding blank space.

Comment 5

[David Boswell]

Note that the screenshot in comment #4 is from www.mozilla.com which is separate from www.mozilla.org.  If this is a general concern for all mozilla sites then maybe this is a governance bug?

Comment 6

[Felix Miata]

The URL for the screenshot in comment 4 was reached by clicking the most prominent Firefox link on the homepage. For styling purposes, as long as that kind of "offsite" behavior is common on mozilla.org pages, mozilla.com and mozilla.org should be treated as one entity.

Comment 7

[Chris More [:cmore]]

Closing old Mozilla.org website bugs due to them not being relevant to the new Python-based Bedrock system. Re-open if this is a critical bug and should be resolved on the new system too.

Comment 8

[Felix Miata]

Fonts remain sized in px, so the root problem remains the same.

Comment 9

[Mike Alexis [:malexis]]

We are changing fonts across Mozilla.org in the near future.

Comment 10

[Felix Miata]

Attachment: 120 DPI screenshot of current mozilla.org mission statement page

Here, at a display density nominally higher than "normal", P text is 14px, less than half the physical size of the user's 12pt optimal. Caption text is 12px, barely half the user's physical size 10pt UI text. And, both are gray, further reducing legibility.

URI of screenshot: https://www.mozilla.org/en-US/mission/ (Current mozilla.org home is virtually void of text.)

Page's headline:
"Our mission is to promote openness, innovation & opportunity on the Web."

From "How to Meet WCAG 2.0" <http://www.w3.org/WAI/WCAG20/quickref/> section Advisory Techniques for 1.4.4: "Avoiding scaling font sizes smaller than the user-agent default...The author won't actually know the font size, but should avoid percentage scaling that results in less than 100%."

5+ years later, www.mozilla.org s still styled for pleasing stylists instead of users, for scanning instead of reading, for emulating the majority of the web, instead of for demonstrating how users should be treated, in significant part, by following WCAG guidelines.

WONTFIX to this now, without first "changing fonts across Mozilla.org", amounts to a statement of official policy that web site styling should be *not* prime example of best practices, being inconsistent with whatever official policies and/or goals really are.

Comment 11

[Gérard Talbot]

(In reply to Mike Alexis [:malexis] from comment #9)
> We are changing fonts across Mozilla.org in the near future.

Then why not leave this bug as OPENED and then resolve it as RESOLVED when changes applied honor the expected results? 

Today, font-size of unstyled body text in many www.mozilla.org webpages are set with px unit (14px and even 12px) and not with relative unit (like % or em). Today, color of unstyled body text in many www.mozilla.org webpages use #333 which reduces color contrast.

"
web site text should be clearly legible. Reduced contrast and reduced size both contribute to reduced legibility.
"

Gérard