~john _________________________ Dr. Zeus Web Development http://www.DrZeus.net "content without clutter"
on 11/27/2004 6:21 PM Felix Miata said the following:
john wrote on Fri, 26 Nov 2004 17:26:19 +0000:
For the most part, the debute of my "standards-friendly" redesign has been met with great fanfare, but I've been receiving a few emails from people saying that the text is "way too small." This, I do not understand, as I've used em to specify font sizes, and they all look good to most. Of course, I'm not striving for MOST...I want ALL.So, what would be affecting these users who are saying the text is too small? Default computer font size? What do I tell them, or is there anything more I can do on my site?http://cslewis.drzeus.net
From http://cslewis.drzeus.net/style.css I collected the following:
font-size: 0.7em; .new
font-size: 0.7em; .small
font-size: 0.8em; #tabmenu a, a.active font-size: 0.8em; #content
font-size: 0.8em; #sidemenu li a
font-size: 0.85em; #footer
font-size: .9em; td
font-size: 100.01%; body
font-size: 1em; .introtext
font-size: 1em; .paper
font-size: 1em; #content ul
font-size: 1.2em; #qotd blockquote p
font-size: 400%; .drop
font-size: 12px; #secondarymenu
font-size: 17px; h2
font-size: 20px; h1
font-size: 36px; #banner h1
Are all the last four affiliated with images? If not, they too should be sized in em, keywords, or percent.
and from http://cslewis.drzeus.net/forums/templates/peasoup/peasoup.css
font-size: 10px; .copyright font: 11px input,textarea, select font-size: 11px; .code font-size: 11px; .gensmall font-size: 11px; .name font-size: 11px; .postdetails font-size: 11px; .quote font-size: 11px; .topictitle font-size: 11px; input.button font-size: 11px; th font-size: 12px .cattitle font-size: 12px; .forumlink font-size: 12px; .gen font-size: 12px; .genmed font-size: 12px; .mainmenu font-size: 12px; th.thHead,td.catHead font-size: 14px; .postbody font-size: 18px; .maintitle,h1,h2
Looking at the the homepage with Domi, I see some cascading ems e.g.:
#content .small = 80% * 70% = 56% Verdana(huge),Arial(large),helv(average) #content .introtext = 80% * 120% = 96% georgia(average),tnr(small),times(small)
Visitor 1 with 800x600 and default (his preference) set to 13px arrives and sees:
#content = 80% = 10.4px #content .small = 80% * 70% = 7.28px #content .introtext = 80% * 120% = 12.48px #sidemenu li a = 80% = 10.4px http://members.ij.net/mrmazda/tmp/Images/cslewis1.png
The minimum intelligible size for a PC display is 9px, so your #content .small is clearly too small no matter how good the eyes and large the display.
If it was me, I'd not let the cascade happen. Try using a keyword instead in .small at least.
Visitor 2 with flat panel 1400x1050 and default (his preference) set to 22px arrives and sees:
#content = 80% = 17.6px #content .small = 80% * 70% = 12.3px #content .introtext = 80% * 120% = 21.1px #sidemenu li a = 80% = 17.6px http://members.ij.net/mrmazda/tmp/Images/cslewis2.png
Then he clicks the link "forums" and sees:
again http://cslewis.drzeus.net/forums/templates/peasoup/peasoup.css plus inline styles: font-size: 0.6em; #footer = 13.2px font-size: 0.8em; #tabmenu a, a.active = 17.6px font-size: 20px; h1 font-size: 36px; #banner h1 http://members.ij.net/mrmazda/tmp/Images/cslewis3.png
So, most of what he sees on arrival is smaller than his default, then he clicks a link, and most of the new page shrinks more, which easily could be the people complaining. Also, it shows a significant reason why I so rarely try to use any web forum.
http://members.ij.net/mrmazda/tmp/Images/cslewis4.png shows result of user above zooming the same page enough to restore the main content to his preferred size.
If the site was one I frequent, it would probably look something like this:
http://members.ij.net/mrmazda/tmp/Images/cslewis5.png
due to user stylesheet with rules something like:
@-moz-document url-prefix(http://cslewis.drzeus.net/) { .small {font-size: smaller !important;} /* or font-size: small */ .new {font-size: x-small !important;} /* or font-size: small */ h1 {font-size: x-large !important;} h2 {font-size: large !important;} #tabmenu a, a.active {font-size: small !important;} #qotd {font-family: Arial, Helvetica, sans-serif !important;} #qotd blockquote p {font-size: medium !important;} #content, #content ul {font-size: medium !important;} #content blockquote {font-family: Arial, Helvetica, sans-serif !important;} #footer {font-size: x-small !important;} #sidemenu li a {font-size: small !important;} #secondarymenu {font-size: x-small !important;} /* or font-size: small */}
Maybe your stylesheets could apply the Golden Rule (Matthew 7:12) wholly (main content 100% based) instead of partially (merely resizable in browsers lacking zoom).
See also http://members.ij.net/mrmazda/auth/defaultsize.html and URL below
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
