November 12, 2010

Forms of Forms

How many forms do you fill out on the Web? Lots and lots, I'd bet. Do some of them make you want to tear your hair out? Indubitably.

How do you make a good form? With the current (HTML 4) tools available to you, you make a simple form with a lot of text input fields, do some JavaScript validation, and make it pretty with CSS 2. With the upcoming HTML 5 features, you make a simple form with different types of input fields, make use of the browser for validation (possibly in addition to JavaScript), and make it pretty with CSS 3.

Making a form is easy!

"Wait a minute," you say. "There's got to be more to it than that. I heard that if you put your form interspersed in a paragraph, for example, the percentage of people who fill it out goes up dramatically. There's got to be more to it than input fields, JavaScript, and CSS. Where's the magic?"

I'm glad you asked.
  • Make it appealing without sacrificing usability. Set off the form from the surrounding elements through the strategic use of pictures, borders around the form, or a different background color. Also, use enough whitespace (but don't float your label on the left edge of the screen and your text field on the right – that's too much whitespace).
  • Take advantage of the HTML5 form validation as soon as it's widely implemented. The less you have to rely on server-side validation, the less load you'll put on the servers and the happier your customers will be.
  • Speaking of HTML5, start using the new form input types and placeholder text now. They degrade gracefully to regular text input fields in older browsers, and they provide advanced functionality to people using modern desktop browsers and Mobile Safari.
  • Only collect the information you absolutely have to. Why ask about a user's favorite color in a form to sign up for a mailing list? (Okay, that's an extreme example, but you get the point.)
Abracadabra!

November 09, 2010

Why Web Designers Should Like IE 6

Cascading Style Sheets are what makes the Web not boring. CSS is descended from SGML (Standard Generalized Markup Language), which was created in the 1970s. The first version of the CSS standard was published in 1996, with version 2 being finalized in 1998. Version 3 is still under development.

The first browser to fully support CSS1 was a browser that only one person remembers: Internet Explorer 5 for the Mac. You read that right: The first CSS standards-compliant browser was created by Microsoft. That was in 2000, four years after the standard was first published and two years after CSS2 was released. Other browsers played catch-up in the months following.

The problem with the Internet in the time leading up to the adoption of the CSS standards was that no one had been willing to wait for the standards body to, well, standardize, and so they implemented horrible proprietary things like <blink> and <marquee>. Each new version fought to not only include the newfangled tags that its competitors had introduced, but also to create new features of its own. "Best viewed on <browser x, version y> at <designer's screen resolution>" became all too common.

So who was our knight in shining armor who delivered us from this? Internet Explorer 6.

Indirectly, of course. IE 6 in and of itself was not particularly revolutionary, except for the fact that its Standards Mode hewed more closely to the standards than any other major browser at the time (sorry, Opera, even back then you weren't a major browser). The revolution was its competitors.

See, IE 6 had something called Quirks Mode. Basically, if your HTML document had a certain doctype (or no doctype declared at all), the browser would fall back and render the page like IE 5 would have. This was to keep old pages from breaking. One consequence of this was that the infamous "whitespace bug" was perpetuated. CSS2 support was also not as good as it could have been. Mozilla and others jumped into the fray at this point, reigniting the browser wars. The result? Today, because IE 6 was so bad, we have Firefox, Opera, Chrome, and IE 9 (which will supposedly implement the standards way better than any previous version of IE).

Thank you, IE 6.

November 01, 2010

Instant Results and Spin

After reading the transcript of the SpoolCast episode Luke Wroblewski and Innovations in Web Input, I decided to write about two subjects they brought up. It's a double post! What does it mean?!*

*Yes. This joke is stale.

Isn't Google Instant Awesome?


I mean, really! You start typing and (as long as you're not using Opera) results just pop up (unless your connection's too slow)! It's like magic! It makes Amazon's search suggestions look quaint and your public library's catalog search look positively archaic! Why can't they do magic like that, too?

Well, Google has approximately one quadrillion times the resources of your public library, for one thing. Something like Google Instant takes a lot of resources. If a company tries to implement something like that without the required resources, the resulting performance hit (and probably downtime) is as bad as or worse than not having search at all. Yahoo! actually tried to implement something similar to this in 2005, but they ended up ditching it because they were concerned about server load.

This does put smaller organizations at a bit of a disadvantage, because if people get used to seeing results instantaneously, they start expecting it everywhere. Why should I have to type my entire search query, hit enter, and wait for another page to load? (I guess you could argue that Google is aiding Twitter's nefarious plot to shorten the attention span of the world's population.) Unfortunately, though, businesses have to allocate resources to the activities that will provide them with the most benefit, so Google Instant-esque capabilities are probably going to be fairly low on the list.

Their Numbers Don't Mean As Much As You Think They Do.
I used this analogy recently…there's 160 million iTunes users, and within 48 hours they announce that one million of them were on Ping. So the metaphor I used there was, well if 160 million people are driving down a road, and I put a pile of dog poo on that road, chances are one million will drive through it. — Luke Wroblewski
In a world where Apple can do no wrong, their music social network Ping is a fledgling feature that hasn't yet reached its full potential. In the real world, well, it's been compared to a pile of dog poo. "One million" is a useless measure without context. I'd love if one million people read my blog. Facebook would probably kill a new feature that only attracted one million users. For the iTunes Store, one million is less than 0.7% of their users.

On the other hand, one could argue, for the time period mentioned in this anecdote, maybe 160 million users isn't the metric we should use to judge Ping's success. Surely, not all 160 million people are trying to buy music at the same time. Maybe only half of them are typically online at any given time. That makes Ping's user base…just over 1%. The point is, a company can spin numbers in a multitude of ways to make themselves sound better.

(Wroblewski goes on to suggest that the reason for Ping's disappointing adoption rate is an uncharacteristic lack of attention to detail on Apple's part. Version 2 might be better.)