trinity-users@lists.pearsoncomputing.net

Message: previous - next
Month: October 2014

Re: [trinity-users] New TDE site released

From: Felix Miata <mrmazda@...>
Date: Sat, 18 Oct 2014 05:23:26 -0400
Michael . composed on 2014-10-18 12:11 (UTC+1100):

> Felix Miata composed on 2014-10-17 19:49 (UTC-0400):

>>Except most *are* made to measure (in px units), and are *not* made to adjust
>>to the users individual setup (constrained as well as enhanced by site/author
>>CSS). Most size most objects in CSS px, which wholly disregard the user's
>>environment.

> Let me just say in my experience most are not made to measure in px units.

Then your experience is naive. I've been subscribing to various web design, CSS, browser development, and web standards mailing lists and other forums since last century. Almost as long I've been inspecting styles of a wide variety of sites, very often suggesting or recommending changes to increase usability and accessibility. If anything, more sites have in their latest incarnations abandoned or significantly reduced their use of relative units, most after M$ dropped IE6 & & support, which dropped IE's (virtual) inability to "resize" text styled in px units, thus removing experts' reason for recommendating that px units for sizing text be avoided.

Following is a small sample of styles from some high profile sites that refutes your assertion. For every major site you find that does not size P text either directly or via cascade in relative units, if I was inclined to waste the time (I'm definitely not), I could probably find at least 5 that do it in px in the same amount of time spent looking, probably closer to 12 or 15. I know it's been a while since I've looked at most sites on http://fm.no-ip.com/Inet/shame.html but if you don't believe most stylists of major sites are married to using px units, take a long look for yourself. In case you haven't noticed, Google'w home page weighs in at over 1GB if saved as web page complete in Gecko. About 10% of it is the HTML page. Most of the rest is insufferably complex CSS and JS. Digging out what's going on is neither easy nor fun on any but the smallest of sites. In the following samples, note:

A:Many serve CSS with newlines filtered out, making direct examination painful. You can tell which do so because all rules in the source are on line 1 (sometimes line 2 following an empty line 1).

B:Those that do not strip newlines sometimes have a 4 digit line count, which may not be apparent until discovering the total line count among multiple served CSS files. In any event, CSS not unusually outweighs the HTML by several multiples.

C:Some sites Domi provided no CSS URL for, and I just accepted on faith whatever rules Domi showed me instead of looking for source URL or digging embedded out of markup or JS.

1 http://www.libreoffice.org/
http://www.libreoffice.org/themes/libreofficenew/css/bootstrap.min.css?m=1396490701
line 68: body {font-size: 14px}
line 156: .container {width: 750px}
line 158: .container {width: 970px}
line 160: .container {width: 1170px}
line 886: .navbar {min-height: 50px}
line 886: .navbar {margin-bottom: 20px}

2 http://espn.go.com/
line 2: body {font-size: 13px}
line 2: #content.container, #scoreboard {width: 924px}
line 2: #scoreboard {height: 55px}

3 http://www.loc.gov/
http://www.loc.gov/static/stylesheets/base.css?18999
line 173: body {font-size: 12px; line-height: 18px}
line 648: .container {width: 980px}
line 5231: .intersite-nav {font-size: 11px}

4 http://www.mozilla.org/en-US/
https://mozorg.cdn.mozilla.net/media/css/responsive-min.css?build=e503c67
line 1: body {font-size: 14px}
line 1: #wrapper {width: 1000px}
line 1: .promo-grid-inner {width: 1260px}

5 http://www.ubuntu.com/
http://assets.ubuntu.com/sites/guidelines/css/responsive/latest/ubuntu-styles.css
line 1: body {font-size: 14px}
line 1: .wrapper {width: 984px}
http://assets.ubuntu.com/sites/ubuntu/1201/u/css/beta/global-responsive.css
line 174: body {padding-top: 30px}
line 351: .nav-global-wrapper {width: 984px}

6 http://dictionary.reference.com/
http://static.sfdict.com/dictcloud/r201410160523/css/combinedInterim.css
line 1: body {font-size: 13px}
line 1: #main {width: 971px; top: 108px; left: -4px; margin-bottom: 108px}
line 1: .text-box {width: 460px; height: 203px; left: -4px; padding-top: 17px;
	font-size: 14px; line-height: 26px}

7 http://www.imdb.com/
line 24: html {min-width: 1008px}
line 29: #root {width: 1008px}
line 30: #root {font-size: 13px}

8 http://us.etrade.com/
https://cdn.etrade.net/1/14100700130.1/prosp/skins/min/css/prospect/global_prospect.css
line 1: body {font-size: 13px; min-width: 960px}
line 1: #search-form {width: 163px; height: 60px}

9 http://www.paramount.com/
http://www.paramount.com/sites/default/files/css/css_NOcv0o5q6uyTPpnoh3-9oYv9M56penBNuIuTCDmiRg0.css
line 2: body {line-height: 18px}
line 2: body, label, input, select, textarea {font-size: 13px}
line 2: .container {width: 940px; padding-bottom: 90px}

10 http://www.toyota.com/
http://www.toyota.com/common/css/v2/global.css
line 1: body {font-size: 12px; line-height: 18px}
line 1: #marquee {height: 568px}
line 1: #wrapper {min-width: 978px}
line 1: .navbar-wrapper {max-width: 978px; height: 60px}
line 1: #search {font-size: 11px}

> Felix if you agree offer up some ways to fix it. You have alot of knowledge
> and information yet have not offered 1 suggestion that I have seen (I admit
> I may have missed them and if so p0lease point me to them) as how to fix it.
> I am willing to learn new ways (or old in this case) but to learn them it
> is often best to be guided by someone who knows. I am eagerly waiting for
> your help and suggestions.

Partial diff of markup:
http://fm.no-ip.com/Auth/Tmp/TDE/markup.diff

I truncated it due to the 4k+ line lengths. The bulk of differences are only for loading the images from the tmp directory here instead of from the original site, but the important ones are easily noticed, all to do with the focus of my changes, making the biggest image on the page automatically scale along with everything else that automatically scales, to fix a complaint of my 2014-10-15 15:45 -0400 thread reply.

Diff of CSS:
http://fm.no-ip.com/Auth/Tmp/TDE/trinitycss.css

Page URL incorporating changes:
http://fm.no-ip.com/Auth/Tmp/TDE/trinity.html

Screenshots:
96 DPI/1280x1024:
http://fm.no-ip.com/SS/tdeHnoip-096-201410.jpg

108 DPI/1440x900:
http://fm.no-ip.com/SS/tdeHnoip-108-201410.jpg

132 DPI/1920x1200:
http://fm.no-ip.com/SS/tdeHnoip-132-201410.jpg

144 DPI/2048x1152:
http://fm.no-ip.com/SS/tdeHnoip-144-201410.jpg

180DPI/2560x1440:
http://fm.no-ip.com/SS/tdeHnoip-180-201410.jpg

The 144 is the only one with the page loaded in a browser window smaller than full screen, roughly 60% of screen width, a viewport bit less than 1200px wide. The only significant thing I changed is that the image of the TDE desktop stays sized in proportion to the whole page instead of whatever the original was supposed to be doing in .snap, which here was always 336px by 225px regardless of available space. The original here renders that image smaller than the size of KCalc, living in a vast sea of white over four times the image's width in the 180 DPI environment, small even for a window on a lower density (e.g. 96 or 108 DPI) screen.

I don't intend for any of the above other than images to remain much longer than this thread continues. It's all there for any and all to load and/or work from as they please, if they please.
-- 
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/