Friday, April 20, 2012

4.01 != 5

Ran into an interesting problem at work this week. And when I say "interesting", I mean "crazy annoying". See, I developed this small Catalyst web application on my Linux laptop. Added cool gradients, box shadows, and round corners using CSS. Everything looked GREAT!

I moved the application onto our test web server. The app should work exactly the same, right? Yeah, I didn't buy it either. Type the URL into Chrome and pow - there's no background on the links. These links perform actions. So I styled them like buttons. All of the styling disappeared.

Long story short, the style sheet set the --webkit-appearance property for those links. I thought that it made the links all the same width. Turns out it does more, and that more messed up their appearance under Windows. Remove --webkit-appearance and the links looks like buttons again.

Now how do I make them the same width? The correct property is display: block. Poof - we're back and running!

Pull up the same page under Firefox. Everything looks great. Links still look like buttons. I'm making good progress here.

Internet Explorer 8 comes last. Ugh! This page is all wonky. Worse - the standard elements I copied from the main web site look all wrong. That's impossible. That exact same HTML appears just fine on our main page. Why not for my page?

I'll spare you all of the dead ends inherent in debugging. In the end, the problem came down to the <!DOCTYPE> declaration in the HTML. Dumb me, I copied it from an older project. So this current document declared the 4.01 DTD. And the HTML content blithely contained HTML5 tags. Oddly, Chrome and Firefox both ignored this contradiction. IE ignored the HTML 5 tags - making the page look downright nasty.

Knowledge in the World
This little experience reminded me about The Design of Everyday Things by Donald Norman. The book talks about the distinction between knowledge in the head and knowledge in the world. See, my problem and its solution with <!DOCTYPE> completely dealt with knowledge in the head. That in and of itself is another problem.

Nothing in Chrome, Firefox, or IE told me the problem. Yet all three clearly saw the contradiction.

Error messages are very difficult to do right. Users really don't care about the technical details. Shoot, I'm a programmer and I don't care about the technical details. I want to know how to fix the problem! Error messages should put knowledge in the world. When I went looking for the error, a message about  tags not matching the DTD would have gone a long way. It would have taken knowledge the browser had and placed it in the world - so I could see it.

That brings up another good point - know you audience. Error messages for developers leave hints. Point a good developer in the right direction and they'll find the solution. Users, however, may require more hand holding. I would never expect a browser to show users messages about DTD's and HTML versions. Communication means understanding.

Tuesday, April 3, 2012

Litterbugs and Dirty Houses

Three things happened this last week that all struck a chord. For better or worse, my mind drew a connection between these events. Let's see where this leads...

The first event happened on Saturday. The missus went shopping for pre-school clothes. No, not her pre-school - Vania's (our 4 year old). My wife went shopping with the van. The van has Vania's one and only car seat. I expected to visit the library and park, taking the girls with me in the van.

So there we are standing in an empty garage, Dad, Deanna, Lucy, and Vania. I spent the next hour distracting Vania - who expected to go to the park. Why? Because my wife is uncomfortable driving the car. She can drive it. She has driven it. She doesn't want to drive it.

The second event occurred at church. I was standing around outside. A girl and boy walked along the street. I watched the boy unwrap an ice cream cone. Without even missing a beat, the boy dropped the wrapper right in the grass. Never even looked back or down.

The third event happened on the way to work. I drove by a business owner walking by the highway picking up trash. People had hurled fast food bags, cups, and wrappers from their car onto his property. Bags and wrappers attract bugs. They look ugly.

These three things reminded me of the book Leadership and Self Deception: Getting Out of the Box by the Abinger Institute. The book discusses how we view people as objects. In this state, we hold a fundamental disrespect of other people. Those three events display that fundamental disrespect.

Take the boy with the ice cream wrapper. He had a problem - how to get rid of the useless wrapper. Did the boy solve the problem? Well, no. He imposed his problem onto someone else. Now someone at the church will pick up the wrapper and they must find a way to dispose of it. See how the problem still remains - getting rid of the useless wrapper. Just the responsibility shifted.

The missus did the same thing. Driving the car presents an inconvenience. Taking the van imposed inconvenience on the rest of the family. It didn't overcome anything. It shifted the responsibility. That shifting - the imposition - shows a fundamental disrespect for the person on the receiving end.