Finally, cross-browser visual control over forms.

Now we have something else to be thankful for. Nathan Smith of Sonspring has created a library that gives designers and developers “some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system.” Smith calls his new library Formalize CSS:

I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag.

For more, including demos, options, screenshots, thanks, and the library itself, read Smith’s write-up at SonSpring | Formalize CSS. Hat tip and happy Thanksgiving to my good friend Aaron Gustafson for sharing this gem.

HTML5, CSS3 default templates

Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.

Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.

Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)

My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.

Opera loves my web font

And so do my iPhone and your iPad. All it took was a bit o’ the old Richard Fink syntax and a quick drive through the Font Squirrel @Font-Face Kit Generator (featuring Base 64 encoding and SVG generation) to bring the joy and wonder of fast, optimized, semi-bulletproof web fonts to Safari, Firefox, Opera, Chrome, iPhone, and Apple’s latest religious device.

Haven’t checked IE7, IE8, IE9, or iPad yet; photos welcome. (Post on Flickr and link here.)

What I learned:

Even if manufacturer supplies “web font” versions with web license purchase, it’s better to roll your own web font files as long as this doesn’t violate the license.


Opera hates my web font

Opera hates my web font.

So I’ve wanted to use a condensed, bold Franklin typeface for my site’s headlines since, well, forever. So I bought Fontspring’s fine Franklin Gothic FS Demi Condensed and licensed it for @font-face use for a mere $2.99, an incomparable value.

It looks great in Safari, Chrome, and Firefox, but not so nice in the latest version of Opera, where it resembles the inside-out test monkey in Cronenberg’s “The Fly.” (Okay, okay, it looks like a ransom note, but the monkey simile was more picturesque.)

And this, my friends, is why Typekit exists. Because even when you find a great font that’s optimized for screen display and can be licensed for CSS @font-face use, guess what? There is almost always some glitch or bug somewhere. And Typekit almost always seems to find and work around these bugs. It’s the kind of grueling task designers hate dealing with, and Typekit’s team loves solving.

If this were a client site, I’d switch to Typekit, or try licensing a different vendor’s Franklin, or (if neither of those options proved satisfactory) dump web fonts altogether and use Helvetica backed by Arial instead. But as this is zeldman.com, I’d rather nudge my friends at Opera to look into the problem and fix it. This will make browsing zeldman.com in Opera a somewhat weird experience, but hopefully it will help all Opera users in the long run.

Implementation Notes and Details

  • I haven’t made an SVG version yet, so the web fonts don’t work in iPhone or iPad.
  • iPhone and iPad see normal weight Helvetica instead of bold Helvetica, because if I leave “font-weight: bold” in the CSS declaration, Firefox double-bolds the font. This is not smart of Firefox. Fixed via technique below.
  • In order to match the impact of the previous Helvetica/Arial bold, I boosted the font-size from 25px to 32px. (This also helps smooth the font. Web fonts need more help in this regard than system fonts.)
  • Camino ignores @font-face and supports the first system font in the font stack, Helvetica Neue (correctly styled bold).

Update: Problem solved. See Opera Loves My Web Font.


The dog ate my bookmarks

Disappearing bookmarks bug.

It’s been years (or is it weeks?) since something odd, implausible, and inexplicable happened to one or more of my Apple computers that doesn’t happen to anyone else’s. You know you want to hear this.

So yesterday morning I’m in my hotel, finishing some work on my laptop before leaving for the airport, when MobileMe alerts me that in order to sync the bookmarks on my laptop, it will need to delete some and add some. I click OK. A few seconds later, I have no bookmarks in Safari.

That’s strange, but it’s a bit liberating, too. I feel lighter. That kink in my neck is gone.

Heck, I can re-create the few bookmarks I really need and do without the rest, right? (Besides, I imported my Safari bookmarks into Chrome a few weeks ago, and I sync Chrome bookmarks via Google, so the bookmarks aren’t really gone, they’re just gone from Safari.)

I re-create five or six bookmarks in my laptop’s Safari bookmarks bar, close my laptop, and fly home.

Here’s where it gets weird.

At home, after midnight, sleepless, jetlagged, I turn on my iMac. MobileMe wants to sync my bookmarks. It says it will delete quite a few of them and create a handful of new ones. There is no option to send my iMac’s bookmarks to MobileMe instead. There is no option not to sync. I can skip sync for now, but eventually I’ll have to sync, and that means I’ll have to let MobileMe wipe my many old Safari bookmarks off all my computers. No sense delaying the inevitable.

I click OK.

My old bookmarks are gone, but the new ones I created on my laptop have not been sync’d. I have no bookmarks.

I start re-creating them from scratch, and as I create them, they disappear.

I create a Flickr bookmark. It works. I create a zeldman.com admin bookmark. When I look up, the Flickr bookmark has disappeared. I create a Twitter bookmark. When I look up, the zeldman.com admin bookmark has disappeared. A moment later, the Twitter bookmark has disappeared.

I begin quitting Safari immediately after creating a bookmark (in order to force Safari to save it). This seems to work. When I re-start Safari, the bookmark I just created has been saved. I do this six times in order to create and save the few bookmarks I really need in order to work.

I don’t bother re-creating the dozens of JavaScript bookmarklets I use daily. I figure I can do those in the morning. I verify that Safari now contains six bookmarks. I run a backup via SuperDuper and go to bed.

In the morning, my bookmarks bar is blank again. Overnight, all my bookmarks have disappeared.

It can’t be from syncing via MobileMe, because the computer should have gone to sleep as soon as the backup finished (and it was asleep when I woke up this morning).

At this point all I can figure is that Apple wants me to switch to Chrome.


Last Tangle in Firefox

Incorrect Helvetica in Firefox rendition of zeldman.com

Snow Leopard plus FontExplorer X equals screwed-up fonts in Firefox (especially Helvetica).

  • Google Search on “Snow Leopard Firefox FontExplorer X” reveals numerous incidents of CSS displaying incorrectly in Firefox (wrong font weight, wrong font style) when Font Explorer X is on Snow Leopard Macs.
  • My Flickr thread contains a screenshot demonstrating the problem plus a useful discussion of causes and possible workarounds.
  • Disabling FontExplorer X solves the problem.

Update: Buying FontExplorer X Pro and clearing font caches also solves the problem. (The problem is with Apple’s fonts, not with Firefox or FontExplorer X, but it takes mediation to fix it.)

Chicago Deep Dish

Dan Cederholm and Eric Meyer at An Event Apart Chicago 2009. Photo by John Morrison.

For those who couldn’t be there, and for those who were there and seek to savor the memories, here is An Event Apart Chicago, all wrapped up in a pretty bow:

AEA Chicago – official photo set
By John Morrison, subism studios llc. See also (and contribute to) An Event Apart Chicago 2009 Pool, a user group on Flickr.
A Feed Apart Chicago
Live tweeting from the show, captured forever and still being updated. Includes complete blow-by-blow from Whitney Hess.
Luke W’s Notes on the Show
Smart note-taking by Luke Wroblewski, design lead for Yahoo!, frequent AEA speaker, and author of Web Form Design: Filling in the Blanks (Rosenfeld Media, 2008):
  1. Jeffrey Zeldman: A Site Redesign
  2. Jason Santa Maria: Thinking Small
  3. Kristina Halvorson: Content First
  4. Dan Brown: Concept Models -A Tool for Planning Websites
  5. Whitney Hess: DIY UX -Give Your Users an Upgrade
  6. Andy Clarke: Walls Come Tumbling Down
  7. Eric Meyer: JavaScript Will Save Us All (not captured)
  8. Aaron Gustafson: Using CSS3 Today with eCSStender (not captured)
  9. Simon Willison: Building Things Fast
  10. Luke Wroblewski: Web Form Design in Action (download slides)
  11. Dan Rubin: Designing Virtual Realism
  12. Dan Cederholm: Progressive Enrichment With CSS3 (not captured)
  13. Three years of An Event Apart Presentations

Note: Comment posting here is a bit wonky at the moment. We are investigating the cause. Normal commenting has been restored. Thank you, Noel Jackson.

Short URL: zeldman.com/?p=2695

In-Box Twenty

Found in my in-box on this gloriously muggy morning:


  • E-mail from a neighborhood mom interested in hiring our child’s nanny in September, when the girl enters kindergarten. Would our nanny work part-time? (No, she would not.)
  • Invitation to speak.
  • Account status message from American Express, freezing my business account.
  • Personal letter from a co-author of CSS.
  • Correspondence from one half of a feud, demanding that A List Apart delete “libelous” comments made by the other half.
  • QA correspondence on Brighter Planet beta.
  • Photo of kid on general store porch-front rocking horse, sent by ex, from mini-vacation they’re taking together.
  • Responses from speakers selected to present at An Event Apart in 2010.
  • Discussion of “send to friend” links in context of COPPA compliance.
  • Raw personal truth from my dear sponsee.
  • Notes from a developer whose web fonts platform I’m beta testing.
  • Query from a mom whose friend is expecting: what do we pay our nanny? Would she take less? (I hope not.)
  • Basecamp notifications concerning Chapters 7, 9, 2, and 4 of Designing With Web Standards, 3rd Edition.
  • Invitation from a social media network’s director of strategic relationships.
  • Milestone reminder.
  • Note from my brother about the release of his CD.
  • Case study for review.
  • Notice of Credit Limit Reduction on my personal account from American Express. “In this difficult economic environment, we all need to make choices about how we spend and save.”
  • Discussions of Happy Cog new business activities in various stages of ripeness.
  • Note about a magic berry that will make me look like a princess.

Typical day.

Firefox test page

Firefox gurus, a page demonstrating the Firefox long content bug has been created for your browser fixing pleasure. Kindly visit the test page using Firefox 3.0 and Firefox 3.5 for Windows (and possibly also for Linux). The following defects should be evident:

  • At least half the comments should be cut off by the browser.
  • The footer should be cut off by the browser.
  • The form enabling you to add comments may also be cut off by the browser (or it may be incomplete, or the labels for such things as your name and email address may appear in the wrong location).

View the same page in Safari 3+, Opera 9+, or IE7/8, and compare. In the other browsers, all comments are displayed, the footer is displayed, and the content form is viewable and displays correctly. How often does Firefox compare unfavorably with some of these browsers? Hardly ever. Which is precisely why you want to fix it. (That, and you’d like your users to be able to view all the content on a page, not just some of the content.)

The test page is identical to this 2 July post, with comments frozen as of 9 July 2009, and with the site’s original CSS, which revealed the long content bug in Firefox.

A subsequent 8 July post documents the steps I and two other developers took in order to isolate this bug in Firefox, and the CSS workarounds (suggested by two of the site’s readers) which have since been put in place to cover up for this defect in Firefox. The thread also explains what we changed in the CSS to enable Firefox users to read long content on the site.

The CSS cover-up enables Firefox users to read all the content on long pages, but at a cost: there is a flash of red background during slow load times. And, obviously, it’s better to fix Firefox than to create somewhat flawed CSS workarounds that slightly diminish the experience for all users of the site.

Thanks for your help! Let me and this site’s readers know how we can assist you. And remember, please use the test page (not this page or any other page of the site) to isolate the bug in Firefox.

Read more

  • HTML 5: Nav Ambiguity Resolved. An e-mail from Chairman Hickson resolves an ambiguity in the nav element of HTML 5. What does that mean in English? Glad you asked! — 13 July 2009
  • Web Standards Secret Sauce: Even though Firefox and Opera offered powerfully compelling visions of what could be accomplished with web standards back when IE6 offered a poor experience, Firefox and Opera, not unlike Linux and Mac OS, were platforms for the converted. Thanks largely to the success of the iPhone, Webkit, in the form of Safari, has been a surprising force for good on the web, raising people’s expectations about what a web browser can and should do, and what a web page should look like. — 12 July 2009
  • In Defense of Web Developers: Pushing back against the “XHTML is bullshit, man!” crowd’s using the cessation of XHTML 2.0 activity to condescend to—or even childishly glory in the “folly” of—web developers who build with XHTML 1.0, a stable W3C recommendation for nearly ten years, and one that will continue to work indefinitely. — 7 July 2009
  • XHTML DOA WTF: The web’s future isn’t what the web’s past cracked it up to be. — 2 July 2009

[tags]firefox, browser, bug, firefox3, firefox3.5, windows, linux, bugs, buggery, debugging, demo, testpage, mozilla[/tags]