this space intentionally left blank

January 25, 2011

Filed under: culture»internet

Blink and You'll Miss It

I tell everyone they should have Firebug or its equivalent installed, and know how to use it. I believe that people will find it invaluable if they're designing a page and want to test something. They might want to do some in-page scripting. They can examine the source for ideas, or to discover hidden items. But most importantly, they can use it to fix your stupid, unreadable, over-styled web page.

The development of HTML5 means that browsers have gotten more powerful, more elaborate, and more interactive. It also means that they can be annoying in new and subtle ways. Back in the day, page authors used <blink> and <marquee> to create eye-catching elements on their flat gray canvas. Nowadays, thanks to pre-made CMS templates, the web superficially looks better, but it's not necessarily easier to read. Take three examples:

  • Text shadow: There's nothing wrong with a little text shadow. It's a classy effect for giving headlines a little pop. But I've noticed a lot of people lately using text-shadow everywhere, which makes my eyes cross trying to focus on mysteriously blurry text. Why is my browser anti-aliasing broken? Oh, it's not, you just hate your audience.

    Even worse are the people who have realized you can give the shadow an offset of zero pixels. If the shadow is dark, this ends up looking like the page got wet and all the ink has run. If it's a lighter shadow, you've got a poor man's text glow. Remember how classy text glow was when you used it on everything in Photoshop? Nobody else does either.

  • Custom fonts: I sympathize with font nerds on the Internet. It must have been painful, being restricted to the built-in browser fonts. On the other hand, those were the defaults for a reason. Now every wannabe font nerd on the Internet can finally use their own Very Special Typeface, many of which are more "fancy" than "legible." But why stop there? Why not customize the letter-spacing and line-height while you're at it?

    I'm not an expert in typesetting or anything, but the effect of these changes--besides sometimes giving Comic Sans a run for its ugly font money--is to throw me out of my browsing groove, and force me to re-acquire a grip on the text with every link to a custom page. If I'm not expecting it, and the font is almost the same as a system font, it looks like a display error. Either way, it's jarring, and it breaks the feeling that the Internet is a common space. Eventually, we'll all get used to it, but for now I hate your custom fonts.

  • "Pixel-perfect" layouts: Once upon a time, we had no real positioning tools in HTML. Oh, there was <table>, but building a layout using tables is like trying to design a travel brochure in Excel. And then someone invented CSS, and between "float" and "position: absolute" they ushered in a whole new era of web design. A new, fragile era, one that was vulnerable to a whole host of CSS sins. If I had a dime for every page I've visited where content overflowed the elaborate layout and got hidden behind an ad or a sidebar, I'd be making money in a very strange way. Setting "display: none" on offending elements has become an unfortunately common part of my browsing experience. It's enough to make me wish for the days when every page was a simple, boring, single black-on-grey column of text.
  • Rebinding key events: Seriously, IGN? Taking away the spacebar and the page-up/down keys for no apparent reason so I can't scroll the page on the rare occasions that I'm linked to your increasingly-awful content farm? You're why we can't have nice things.

It's no wonder, in an environment like this, that style-stripping bookmarklets like Readability caused such a sensation. There's a fine line between interactive design and overdesign, and designers are crossing it as fast as they can. All I ask, people, is that you think before getting clever with your CSS and your scripts. Ask yourself: "if someone else simulated this effect using, say, a static image, would I still think it looked good? Or would I ask them what Geocities neighborhood they're from?" Take a deep breath. And then put down the stylesheet, and let us read in peace.

Future - Present - Past