On November 19th, Fantasy Interactive and the Google Chrome team released 20 Things I Learned About Browsers and the Web. 20 Things is an e-book intended to be of general interest, but has received much–perhaps more–close examination by Web developers.
Seven things about 20 Things:
- Its visual design is both fresh and vintage.Paul Truong and Christoph Niemann seem to enjoy mid-twentieth-century book design as much as I do. In my opinion, nothing has proved as readable as the generous whitespace, large type sizes, and unobtrusive illustrations of Anglo-American books from about 1930 to 1960, and I love seeing these practices brought to the Web, especially after enduring so many years of retro-Seventies puffy lettering and garish color schemes.
- It shows the efficiency of HTML5. Much of the hullaballoo about 20 Things has been about its aggressive reliance on HTML5, CSS 3, and not very much JavaScript to deliver a gorgeous interface. The markup couldn’t be simpler:
- It demonstrates how CSS delivers more than fonts and colors. The handsome design for 20 Things arrives on the Web screen via eight modular stylesheets. One is for “basic mode,” rendered in less capable browsers.
Interestingly, there are both print-preview and print stylesheets–a Print Preview for this application is available both from a JavaScript-enabled button and from the browser’s built-in print function. This is a text intended for novice Web users, who, as many of us have seen, tend to print out Web screens and e-mails to study at length. That’s why, I suspect, there’s such great concern for the printed view of these pages.
In contrast, there’s scarcely any adaptation or special allowance for mobile browsers:
- It doesn’t give a flip about IE 6. There aren’t any * html hacks. Not even Modernizr. IE 6 gets an acceptable, usable appearance–and a nag-bar up at the top, urging users to upgrade.
- It exemplifies using jQuery as a tool, not a crutch. JavaScript powers the animations which make 20 Things appealing: the turning book pages, the fades-in and -out of the widgets, the reliable print-preview mentioned above. Certainly all this could’ve been done in Flash–and possibly has–but with all the familiar detractions of the technique, including its lack of support from Mobile Safari.
- It forces browser upgrades. Go on, try using 20 Things in Lynx:
If nothing else, boredom should at least provoke you to install some new software.
- It proves you can use the latest Web standards for a general-audience application. You don’t need to kowtow to crummy browser support anymore, even if your users include your mom, Ma and Pa Kettle, those people still on Compuserve, whoever. You don’t have to suppose they’re using IE 6, just like you don’t have to suppose they’re using hand-cranked telephones on party lines. You’re free to develop for nearly modern users (that bit about print outs…) Google and the 20 Things developers proclaim it so.





