In the Details: Placeholder

I appreciate the usefulness of placeholder text in form fields. Yesterday’s post was a great example of the use of placeholder text to inject some fun into an otherwise forgettable activity. But it isn’t always a good idea.

I know it is grayed out, but it sure looks like I’m submitting a form with Apartment 12 as part of my address. Optional fields probably shouldn’t contain placeholder text. Or, they should clear when text has been entered into any of the fields.

Back to Basics: Field Size

If there is a required (or expected) number of characters to be entered in a given form field, the field should be sized to fit. This serves both to visually communicate the expected length of the string and to provide enough room to see the entire string once entered.

Each of the fields provided here is one digit too short. That may be due to browser inconsistencies, but whatever the case, it is inexcusable sloppiness.

Geek Effect

Have you heard of the TV show, TableTop? If not, I expect you are in the vast majority of the population. It’s one of the shows on Felicia Day’s YouTube channel, Geek & Sundry. It’s like celebrity poker, except that instead of poker, they play better games, like Settlers of Catan, Shadows Over Camelot, and Zombie Dice. The celebrities aren’t your typical Hollywood movie stars or pop singers. They tend to be a bit geekier: voice actors, game designers, fantasy authors, and weblebrities. Oh, and the show is hosted by Wil Wheaton.

The interesting thing is, the show is gaining a following. It’s an awesome way to find out about great games. I’ve purchased several that I’ve seen on the show. You may be thinking, “Okay, but how popular can it really be? It’s not on cable.” I present Exhibit A.

A few weeks ago, the show featured the game Betrayal at House on the Hill. It’s a really cool, cooperative game that plays differently every time, allowing the players to randomly build a mansion with room tiles as they play. Eventually, one of the players turns out to be the bad guy, and things get hectic. The game was originally published in 2004. It typically sells for about $50.

Within a matter of days after the episode aired, the game could not be found. It was listed as out of stock at every on-line retailer that carried it. Amazon was listing it for well over $100 in “other buying options”, and people were trying to sell it for similar prices on Ebay. People were posting questions to boardgamegeek.com and other sites, asking if it was out of print. One of the designers of the game answered a question on Amazon:

Hi, I’m the designer of the game. I was concerned about all the rumors here, so I checked with the publisher. She told me that 5000 copies of the game had been sent to distributors during Q4, but some of the larger distributors may have sold out theirs already due to the Tabletop coverage. There are more on the way, though, and I suspect that some of the smaller places and local stores may still have copies available, so you shouldn’t need to start scavenging quite yet!

Amazon had restocked the game earlier this week, but they are already sold out again. If you ask me, that’s a pretty good indication that a YouTube channel is a viable competitor to traditional media. 

Keychain Bane

Apple’s Keychain does serve a purpose, and perhaps is better than nothing. However, it is fundamentally flawed. When it comes to banks and credit cards, I want to use secure passwords, but I don’t want to have to type them in. Random sequences of letters, numbers, and symbols in mixed case are a pain to type. So, to be at all useful to me, a password aid must remember every password, synch them across all of my devices, and enter them for me.

I don’t care what Discover Card requested. I want strong security and ease of use. I can’t rely on keychain to provide that. 1Password has little to fear from Apple at this point.

Review: Responsive Web Design

I was on a business trip last week (training the crew of the USS Carl Vinson) and made good use of my travel time. During take-offs and landings, when I couldn’t have my laptop out, I read Ethan Marcotte’s Responsive Web Design, published by A Book Apart. It’s one I’ve had sitting on my desk for months now. The book itself is well designed with full color screenshots. The code is nicely formatted with just enough syntax coloring to improve readability without painting every page a rainbow. Ethan did a fantastic job explaining and demonstrating fluid and responsive layouts. He walks the reader through the design of a webpage, starting with a Photoshop mockup from “a designer” on their team. His writing style is easy on the brain with a good dose of humor.

I highly recommend the book, not just for front-end developers, but for designers that contribute production code. I’m looking forward to putting media queries to use in my own work.

Designer’s Toolbelt: Macaw

When I first began learning to design websites, I used the brand-spanking-new Adobe Pagemill. Who needs to learn code? I was a designer, not a programmer, and I wanted the freedom of the WYSIWYG tools I was used to using for print. The computer should do the boring work of figuring out how to actually specify it. When GoLive Cyberstudio released, I jumped on it. I continued using that tool after Adobe purchased it, and I eventually switched to Dreamweaver after Adobe acquired Macromedia.

By that time, I had graduated with my Masters and was working for a software development firm. It didn’t take long for me to realize why the developers turned up their noses when they saw the HTML I was handing them. Fortunately, I had been working with it long enough that I had developed enough understanding of HTML to be able to start coding by hand. Once I got my hands on CSS, you couldn’t pay me to go back to a WYSIWYG editor. These days, I’m a huge proponent of Object Oriented CSS (OOCSS), speaking at conferences and leading workshops about working with developers and contributing directly to the production code base.

So, it was with much interest and a hint of disdain that I took a look at Macaw, “the code-savvy web design tool” under development by Tom Giannattasio and Adam Christ. I must admit, I’m impressed with what they have shown so far.

Stop writing code. Start drawing it.

Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It’s time to expect more from a web design tool.

This tool is pretty slick, and you can tell that it has been thoroughly designed by a designer who understands typography, grid-based layout, and code. You can tell that it has been built to address all those little annoyances we web designer/developers face daily. From readouts that tell you things like the number of characters per line, to supercharged key combos for quickly aligning objects (pudging is going to make your heart skip a beat), the application looks to be chock full of awesome.

And then there’s the code. I’m awed by how intelligent their aptly named Alchemy engine is.

We wanted Macaw to write code you’d be proud enough to hand to developers. Current applications rely on trendy frameworks, export rigid positioning and generate ridiculous IDs. We think designers and developers deserve better. Macaw’s powerful, patent-pending engine is called Alchemy and it can do some incredible things.

Alchemy analyzes every possible selector to describe your document and determines the most succinct way of using them based on logical criteria: applicability, specificity and semantics.

Macaw offers designers the freedom of absolute positioning within the interface but will convert to a static document flow upon export by calculating the necessary margins, padding, floats and clears. It’s the best of both worlds.

There is an incredibly elegant outline palette, reminiscent of Photoshop’s layers palette, that not only serves as a method of hiding and showing elements within your page, but also creates the semantic linking between elements and the classes that will be generated in the CSS.

I’m just scratching the surface here. You really should check it out for yourself. I’m not saying I’m ready to start generating all the enterprise web applications I work on in this way, but it sure seems like an excellent tool for sketching, prototyping, and then moving your prototype to usable code. It’s leaps and bounds beyond any editor I’ve seen before. They say it’s coming to the Mac App Store soon. I’ll be following their progress with great interest.

In the Details: Direction

This is part of Priceline’s airfare booking user interface. It’s the navigation for seat selection, allowing you to move from flight to flight.

Why are the arrows beside “prev flight” pointing to the right? Based on western-world reading direction, these arrows should point to the left, indicating that the user will go back to the previous flight, in the opposite direction from “next flight”. And while I’m picking nits, there is plenty of room to spell out “previous” and no good reason to abbreviate it.

Upgrade Charade

FontExplorer X Pro 4.0 is available, or so I was told. I do use FontExplorer to manage my font library, so of course I’m going to upgrade. Apparently, however, they don’t actually want me to upgrade, as the only options are to ignore the new version or to have them remind me later. Where’s the “Give us your money right now!” button?

When I scrolled all the way to the end of the announcement in the dialog, i did find a link to their website where I could download the new version. The resultant webpage had a beautiful, large photo that took up half the height of the browser window, per the current fashion. Below that was a big, honkin’, green button labeled ”Download Free Trial”, so I clicked it. This displayed a popup with which to collect my name and email address so that they will be able to hound me later about paying for it, but most of the form displayed below the fold. I had to scroll to see what should have been shown to me when I clicked the button.

Eventually, after installing the new version of the application and launching it, I was able to click a link that took me back to the website to pay for a license. I filled out all of the information, and I double-checked my credit card information. When I pressed the submit button, I was told that my order was declined.

Of course, they gave no indication as to why, so I have no idea what I need to do for them to accept it. I guess they didn’t really want me to upgrade after all.