Category Archives: CSS

Review: Web Standards Solutions by Dan Cederholm

Book review of Dan Cederholm’s Web Standards Solutions

Web Standards Solutions by Dan CederholmWeb Standards Solutions: The Markup and Style Handbook is just that: an essential guide and reference that builds upon the theory presented in Jeffrey Zeldman’s Designing with Web Standards with real-world practices.  Dan Cederholm is a designer working full-time in the field, and he presents practical and easily understood examples in a light tone.  This book is nothing less than essential for today’s working web designer.  Oh, and did I mention the 2nd edition is just around the corner, slated for release in May 2009?

Part One: Get Down with Markup

The book is split into two sections: the first reviews markup and creative methods of implementation, the second delves into CSS and solves many of the issues facing the modern CSS designer.  I’ve got over ten years of experience in the web design field, and I was simply amazed at some of the practical solutions to problems that I had faced.  Covering the essentials, from lists, headings, tables and forms, to expanding their usage through markup minimization and the application of Microformats, Web Standards Solutions contains inventive methods that are not only web standards compliant, but will save you time in your day to day projects.

One of my favorite chapters was the one covering anchors.  Countless times I’ve used semantically meaningless empty anchors to have the user jump lower in an HTML page.  This solution seems almost rudimentary, but gives meaning to my markup.  Its really almost comical how many decisions you make while coding without stopping to consider the implications when working a full-time job.  Another favorite that I put into immediate practice over at NESN.com was the chapter on tables, and the relations we can establish between data.  Taking the knowledge I took from Dan’s review of table markup, I combined it with the hCalendar chapter from my Microformats book and built the team calendars on NESN.com.  Check out the Red Sox schedule as an example.

Part Two: SimpleBits of Style

The second section of the book covers practical usage of CSS.  The one chapter I have referred to frequently is the section on building CSS layouts.  Cederholm breaks down CSS layout into four distinct methods, communicated in their most simplistic format, to ease the learning curve and also simplify the transition of using them as skeletons for your site designs.

Another technique I’ve pulled from this book is the “faux columns” created by repeating a background image vertically.  I’ve used this on just about all my sites I’ve designed since reading the book, and would recommend the investment so you can do the same.

The fact that Web Standards Solutions: The Markup and Style Handbook is an essential piece of the web designer’s arsenal is undeniable.  I have a personal connection to the book, as Dan makes reference to and uses in some of the book’s examples the Boston Red Sox, and their path to the title in 2004, when the 1st edition was originally published.  Being from the Boston area and working for NESN I definitely found the examples delightful.  Also going to Endicott college in Beverly, MA, I spent a good amount of time in Salem, where Dan’s SimpleBits studio is located.

The second edition of Web Standards Solutions is set for release in May, 2009. You can purchase Web Standards Solutions over at Amazon.com.

Rating

  • Overall: 8 out of 10
Advertisements

When not to split your CSS files

I’ve read a lot of articles and a few books that detail various methods for web designers to split up their CSS files. Authors have recommended splitting your CSS files to include individual CSS files for fonts, another for colors, another for structure, and the list goes on and on. The WordPress default theme comes with a CSS file that has tons of duplicate declarations.

Reduce page load time

One issue that quickly arises if you start forking your CSS like this is the number of HTTP requests that your pages are making. Since your average browser can only make 2 HTTP requests at any given moment, the splitting of CSS files into separate files therefore can slow down load time on your pages. The same rule applies for your JavaScript files, as well as CSS background images. If you can combine all your CSS background images into one larger image map, and then position them correctly via the background property, you again reduce the number of HTTP requests per page. This and many other rules are detailed at the Yahoo Developer Network in their page on Best Practices for Speeding Up Your Web Site. This page also happens to be the basis for the YSlow Firefox plugin, so if you don’t feel like reading all the rules, just download the plugin and run an analysis on your homepage. It will tell you if you have too many HTTP requests right off the bat.

Don’t keep ’em separated

The other problem that just gets under my skin is having duplicate CSS declarations. I hate going through a CSS file to find that I have 3 different declarations for my h3 tags; one that sets the font-size, another that defines the margins and a third that sets it as an inline element. Again, I know this can’t be avioded and is even beneficial in some cases, but the majority of the time I find myself combining as many declarations as possible simply for clarity’s sake. The entire theory behind splitting your CSS files based on fonts, colors, etc. is based upon this duplication of CSS declarations, and I for one think its rubbish. The smaller our files are the better, right?

Necessary decisions

I personally like to split my CSS files out of necessity, not practicallity. Rather than loading up one main site CSS file with a bunch of Internet Explorer X-specific hacks, I would much prefer to stick them in an IE6 or IE7-only CSS file. This serves a few purposes. If you place your IE6 or IE7 style sheet references in conditional comments, like this we do on this page (check your source!), they don’t get read by smart browsers. So you’re not feeding excessive and unnecessary code to new, standards-compliant browsers. Second, it makes it really, really easy to drop support for an older browser once its no longer needed. For example, what happens when IE8 is released (we’re waiting) and we can safely remove support for IE6? First, we’re throwing a party. And not just because we don’t have to test in IE6 any more, but more because to drop support all we had to do was change one line of code rather than digging through all our CSS to find the old hacks. We may even start the party first, and then drop support for IE6 for all our sites in a total time span of 5 minutes, after having a few cocktails, just to prove once and for all how easy it is, and why this is the only reason you should ever split your CSS.

Molly Holzschlag wrote an article a while back that details the different ways you can setup your CSS files to cater to different browsers via @import and the like. Check it out at the Peachpit site.

If you’re going to split your CSS into separate files, make sure its for the right reason.