October 2009
The $300,000,000 Button
If you think that usability, information architecture, and user experience design are made-up disciplines for lily-gilding aesthetes, with little practical bearing on your Web site, think again.
Jared Spool explains how changing one button in a site's checkout process increased sales by $300 million per year. (He doesn't name the retailer in the article, but it starts with "A" and ends with "mazon.com".)
Ellipses and interrobangs and em-dashes, oh my!
Typography is one of the most overlooked aspects of Web design—and I'm not talking about fonts, kerning, and x-heights. I'm talking about proper use of glyphs—the individual letters, numerals, and (especially) punctuation marks that make up all written text. There are proper and improper ways to use each glyph—and even large, well-funded websites often get it wrong.
This isn't surprising—even if a site's designer is trained in the specialized discipline of typography (which is unlikely), the person who actually marks up the content (or pastes it into the content management system) probably isn't. But the fact remains that poor typography is one of the most common and most easily avoided blemishes on the web.
Password Security for Web Applications 101
User registration and login is a standard feature on interactive Web sites, and passwords are the standard way to protect those accounts. But a password is only effective as long as it's kept secret—and you might not be doing everything you can to protect yours.
Let's say you've finished building the HTML and the server-side validation code for your registration form, and you're now ready to write the code which stores the user's information (probably in a database). How should you handle the password?
Conditional comments for iPhone
You're probably familiar with IE's conditional comments. They allow us to feed special code to that special browser to overcome its many bugs and deficiencies.
Is there something similar for iPhone? Not exactly, but we can achieve the same end:
<!--[if !IE]><!--> <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" /> <!--<![endif]-->
Simulating HTML5's placeholder attribute with jQuery
I recently discussed the placeholder attribute in HTML5. Today, I needed exactly such a behavior for a site I'm working on, so I knocked together a reusable, unobtrusive solution with jQuery.
Forms in HTML5
The HTML5 spec continues to grind inexorably toward publication. I've just spent a while with the latest draft, and at least with respect to forms, I like what I see. Here's a roundup.