We’re in the battle for the net.

An important message from battleforthenet.com:

On May 15, 2014, the Federal Communications Commission proposed rules that would permit rampant discrimination online, undermining Net Neutrality. The FCC’s proposal would be a huge boon for the cable companies and would undermine the Internet as we know it.

Under the proposed rules, cable giants like AT&T, Comcast, and Verizon would be able to create a two-tiered Internet, with slow lanes (for most of us) and fast lanes (for wealthy corporations that are willing pay fees in exchange for fast service).

Cable companies would have the power to discriminate against online content and applications — they could pick winners and losers, shake sites down for fees, block content for political reasons, and make it easier for Internet users to view cable content. (For instance, Comcast owns NBC, and so has incentives to make it easier to view NBC content than that of other providers.)

Stupid Form

I often encounter stupid forms with annoying validation. It’s rare that I encounter a form that does something I’ve never seen before. This one is a real treat.

I’ve never encountered an online form that breaks a street address into three fields. I can’t imagine why they felt they had to do so, but there it is.

Not only did they want me to split the name of the street into two parts, they made the “street type” required! What if the name of the street is just “Centennial”? You would be forced to add something. If they were then mailing something to you, would the address end up being “Centennial N/A”? This is just dumb.

Then I got to the phone fields. Check out the validation on this sucker.

It will only accept the phone number with the parens, space, and dash, just as it is shown above the field. If you put in something else, you get the message below. Notice that the format displayed in red does not match the required format at all. Idiotic.

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.