November 19th, 2008

sabres jersey

(no subject)

Cooks Illustrated recently launched a new website.

Although it's true that they made the site a little bit more aesthetically pleasing, they made a number of changes to the site that didn't look so good.

Being the geek that I am, I looked into the code of the page and saw some ways that they could improve their page design.  I e-mailed them (well, at least I think I e-mailed them, I can't find the e-mail I sent) a few weeks ago with my suggestions for the page:

1. Set the "print" version of the page to have the recipe title in bold text.  The old site had bold text, and when you print something out and stick it in your binder, it's far easier to find it the next time.

2. Get rid of the ridiculous spacing between the letters in the title.  (Seriously, 1.85px of spacing?)

3. Bigger title font size. (15.5 px?)

4. (And this one is a technical flaw) the recipe instructions text is already numbered.  On the page, they've enclosed the list of instructions in an <ol> (ordered list) tag.  The text of the instructions already has the number present.  When printed out, the instructions look like this:
  1. 1. Do A
  2. 2. Do B
  3. 3. Do C
Of course, their normal CSS sets the ol to list-style-type: none;, which suppresses the numbering of the list.  The printing CSS doesn't have the restriction.

Not surprisingly (since it looks like I never sent the e-mail), my suggestions weren't incorporated.

What's a geek to do?!?!

With Firefox, the answer is simple: userContent.css.

Firefox allows you to specify custom CSS code and apply it to all sites, all sites across a domain, or web pages with a specific URL.

Collapse )