|Home Sitemap Issues About Contact|
New book on Website Optimization Secrets
Eric Meyer has done it again. His self-titled sequel More Eric Meyer on CSS is a collection of ten conversion projects that teaches CSS by example. A practical alternative to his other new book, Cascading Style Sheets: The Definitive Guide, 2d ed., More is more inspired how-to than dry reference. Meyer says that the ultimate goal is to "lure you into using more CSS" with tempting visual effects, improved accessibility, design flexibility, and reduced page weight. We asked Eric Meyer why he wrote this book:
"There was such positive response to 'Eric Meyer on CSS' that New Riders and I decided it would be fun to create a sequel. Both books share the same project-oriented, practical philosophy, which is what people really seemed to like - that and the full color printing! The hope is that the book will help more designers get to know and love CSS, and inspire them to take the concepts presented and do something really awesome."
As you progress from project 1 through 10 Meyer takes you through more difficult CSS conversions. The first two chapters show you how to use CSS layout to convert conventional table-based designs into CSS-based layouts. Tables still have their uses however, and Meyer is not above styling table-based financial reports with CSS in project 3. Chapter 4 shows how to create translucency with positioned backgrounds. While the technique does a nice job of simulating the problematic semi-opaque PNG, Meyer points out the additional graphic overhead required for this technique.
Chapters 5 through 7 are the heart of the book, styling lists to create rollover, drop-down, and tab-based menus. Some of these techniques you may have seen before, documented by foreword writer Douglas Bowman and the aforementioned Zeldman. Meyer is the first to gather them all into one place and update them for CSS 2.1 and modern browsers (most version 5+ browsers). He takes you step by step through transforming simple unordered lists into line-straddling rollover menus, lightweight CSS-only drop-down menus, and variants of Bowman's "sliding doors" technique to create rounded tabs.
Chapters 8 through 10 take it up a notch, styling a weblog, a home page with weblog, and the CSS Zen Garden site. The Zen Garden project actually uses a PNG file that works with a full alpha channel in IE6/Win as well as IE5/Mac, Mozilla, Safari, and Opera. Chapter 10 in particular will be of interest to graphic artists who convert graphics comps into XHTML and CSS.
Starting with purely structural XHTML, Meyer shows you how to gradually build up your style sheets, adding effects with each iteration. Full color screenshots, notes, warnings, and websites annotate each tutorial with alternative methods, browser workarounds, and further reading. The net effect is like having a CSS master look over your shoulder as you convert existing web sites. You can take many of these techniques directly from the book and companion site (more.ericmeyeroncss.com) and put them directly into your sites, with some minor caveats.
Speed-wise converting to CSS typically saves you from 25 to 50% off of HTML file size, with as high as 70% savings off of total web page size. Substituting CSS-based techniques for old-style layouts and effects is one of the most effective web site optimization techniques available to web developers. Eric Meyer has arguably done more than anyone to help promote the use of CSS, and for that we applaud him. CSS is not just for styling text anymore. Highly recommended.
More Eric Meyer on CSS
By Eric Meyer
New Riders Publishing, $45
Buy at Amazon
Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the semiweekly WebReference Update.
Copyright © 2003-2013 Website Optimization, LLC - Try our new conversion rate optimization service, and free website speed test
Last modified: November 09, 2004