Usability Institue Logo- A bolt that can be fastened with any of 4 tools
PicoSearch
Usability Consulting, Specializing in Schools and Non-Profits
Reducing Training to Its Eventual Minimum... Zero?
Home Page- List of All Content Home Page- All content, in date order Resources: page describing tools you can use Morsels: just our short articles and blurbs Just our Before&After Articles About: details on who I am and what I do Address, phone, number,  and so on
 
 
Check out these items that can help you conquer unfriendly software:
arrow Function Tree
Destined to be an industry classic, a consolidated hierarchy of all generic software function.
arrow Results Tree
I'm not settled on the name yet, but the content is incontrovertable: afford these results or vanish.
arrow GenericUI
Style sheet and hundreds of design elements for serious data applications in a browser
arrow Website Survival Checklist
33 vital signs for every website's health
arrow Computer User's
Bill of Rights

8 rules of the of user-in-yourface common sense
arrow Winning the Business Softwar
Our 46-page book, absotively free
arrow Free Usability Criteria for RFPs
Put this text right in your Requests for Proposals, no strings attached.
  Full list of resources...

Dissecting CSS Styles

Or, How Do They Make that Cool Text Style on AdaptivePath.com?

November 21, 2004

The subject of web font size arose on the STC Usability SIG recently. I polled the group on whether the font size issue was well-resolved on the AdaptivePath.com site. The quick answer seems to be yes, which then brings up the question, how do they do it? This article describes how to look under the hood to see how various web styles are defined, so you can achieve the same results.

To get the details of the AdaptivePath font size, one needs the following resources:

  • Hours of spare time
  • Potentially thousands of dollars of software, though experience and guile are often good substitutes
  • Lots of computer experience. I have 22 years. This was just barely enough.

This alternate universe, in which a simple thing like legible type requires "rocket surgery" (Steve Krug), is what the computer world calls p-r-o-g-r-e-s-s. But a favorable view of this dilemma is that we are really just in the early years of computers, much like when cars were started with hand cranks. Put your goggles on so the mud doesn't splatter. Here's how to dissassemble their font style:

  1. Open a page whose style you want to dissect. We'll use "http://www.adaptivepath.com/events/".
  2. View the source code for the area of the page in question. (Either click in that area to establish context and use the menu function, View Source; or right-click in the area and choose View Source.)
  3. In the source code, search for ".css" repeatedly and note all of the CSS files referenced.
  4. Ignore any line beginning with "<link " that also includes the phrase 'media="print" '. The remaining CSS's possibly cascade (overlay) to define the styles on the page.
  5. From the lines you found with ".css" in them, copy value of the HREF attribute, such as "/css/low.css" to the clipboard.
  6. Paste this value into your browser's Address bar to form the appropriate path to the CSS file. For instance, for "/css/low.css", paste it right after the ".com" because the slash (the one at the beginning of /css/low) indicates the root of the site.
    Our example yields "adaptivepath.com/css/low.css".
  7. Press Enter or otherwise go to the page. On my system, the CSS file opens in the associated program. For me this is a stylesheet editor called TopStyle.
  8. Repeat the last three steps, opening each of the CSS's you found.
  9. Back in the source of the page, identify an element whose style you are interested. Look at all of the surrounding tags, codes within angle brackets <>, particularly for "class" attributes. (You can save the page itself from browser when feasible, or from the TXT source, and open it in a visual editor to do this more efficiently.) For my example, I searched for the word "committed". All I see is a <p> tag surrounding the paragraph.
  10. The <p> tags are implicitly within the <body> tags, I think. For a simple site, you would now look in the style sheets for any changes to these two styles. But alas, AdaptivePath is not a simple site, far from it... as in "A Land Far, Far, Away."
  11. Here's where the complexity of Adaptive Path site shows the ugly face of current web markup. Although touted as a solution to the past nightmare of working with tables, we now have a veritable horror movie of style construction and workarounds. You can learn about this ghoulish spell by searching the web for "tableless css." When I open the source in Dreamweaver, I see the following style genealogy for this paragraph:

    < body.col-SMX#events><div#content><div.wrap><div.maincol><p>.
  12. The text after the periods (col-SMX#events,#content, .wrap, and .maincol) could be applying a style. You could scan the CSS for these, but I first tried removing each of them and refreshing the instance of my locally-saved page, to see when the text changed. Voila, when I removed ".maincol" the text got larger! Here's what maincol shows in the style sheet:

    .maincol {
    float:left;
    width:510px;
    margin:0;
    font-size:85%;
    line-height:1.5em;
    }
  13. And here's what the body tag shows:

    body {

    color:#000;
    font:x-small Verdana,Sans-serif;
    voice-family: "\"}\"";
    voice-family:inherit;
    font-size:small;
    } html>body {font-size:small;}
  14. When you experiment with all of these values, what you find is that the attractive text of AP is from these three items:

    font:x-small Verdana,Sans-serif;
    font-size:85%;
    line-height:1.5em;
  • The Verdana font gives the blockier, wider letter proportion that works with rather than against the pixellated electronic display.
  • The 85% gives the size that looks sophisticated but just big enough to read in default browser size.
  • And most subtle of all, the increased line height dramatically enhances the comfort of reading!

I believe that this is more than just a passing fad. That's why I've gone to all this trouble. In the same way that newsprint has established very persistent norms that work best in its medium, these ideal settings should persist at least until we see if "electronic ink" establishes new rules.

My hands hurt. It's time for me to go read my favorite book (Amazon)!

 


"My interest in usability arose from the pain and tears of patching the wounds of suffering interface designs with the inadequate bandages of help files and user guides." — Daniel Cohen

© 2002, UsabilityInstitute.com   All Rights Reserved    jackbellis@hotmail.com
Any and all content may be reused without prior consent if you simply acknowledge the source, UsabilityInstitute.com