Exhibit A:

How to recover from an awkward ‘wave’ situation

http://www.reddit.com/r/funny/comments/1fqg60/how_to_recover_from_an_awkward_wave_situation/

I’m testing a new productivity technique that originated from Marc Andreessen (founder of Netscape).  It’s incredibly simple but has been highly effective for me so far.  Here’s how he explained it:

I sit down at my desk before I go to sleep, pull up my Todo List … and pick out the 3 to 5 things I am going to get done tomorrow. I write those things on a fresh 3x5 card … then, the next day, I try like hell to get just those things done. If I do, it was a successful day.

Once you get into the habit, you start to realize how many days you used to have when you wouldn’t get 3 to 5 important/significant/meaningful things done during a day.

I’ve been doing it for just over a week and really like it.  Prior to this, I had a gargantuan to-do list that only grew throughout the day.  Now, I can just focus on 3 to 5 things and no more.  Every time I finish one of my to-do’s, I feel so good.   

A lot of people love to hate on Muni, but I dig my time riding it.  With the exception of running, riding Muni is one of the few times in my day where I’m disconnected and am able to let my mind wander freely.  It’s during these free moments that I get new ideas, solutions, and perspectives.  For 99% of the day, my mind is occupied on a specific task (either productive—building features or meeting people—or not so productive—Facebook, reading random news, etc.).  Even if I’m detached from my computer, I’m typically inches away from my phone.  Unlike most people, I don’t like to use my phone on Muni.  At first, I avoided it after some young street tough tried to steal my phone on the F train, but now I do it exclusively to let my mind go wherever it wants. 

Yesterday I learned (YIL) that IE 8/9 don’t support placeholders in form fields.  You know, placeholders are those handy instructions that give guidance to your users on how to fill out your forms.  

Amusingly, I learned of this when I sent the link to my dad and he wrote back saying that he couldn’t sign up and the forms were all blank.  I wrote back, more or less, suggesting he didn’t know how to use the internet.  He quickly replied with a screenshot showing that there were, in fact, nothing but a bunch of empty label-less form fields on the sign up form.  Oh.  Instead of helpful instructions on which forms were which (via the placeholders), I was starting at 5 completely blank forms.  This could be confusing for users.  

Since I have done all development on my Macbook and use mainly Chrome (and a little Firefox), I was living in ignorant bliss that the site looked amazing across all browsers and operating systems.  This morning, I used Adobe’s (free) Browserlabs to check out the app on 6 different browsers.  I had spent quite a bit of time tweaking the design on the site, so I was not pleased to see many obvious incompatibilities.  Some (like box-shadows and gradients) can’t be helped much, but others things like placeholders can be addressed.   

I then checked Google Analytics and saw that about 15% of my traffic was using Internet Explorer.  Since IE10 requires Windows 8 (as far as I know), I figure the majority of that IE traffic was using the old versions.  

My next stop were a few other sites to see if how they handled this problem.  Refer.ly—cool site with nice design—also ditched labels and used placeholders.  When I loaded up their site in Browserlabs, I saw a bunch of blank form fields too.  

I looked at a few more and saw the same thing.  Hmm. (aside: this is actually an entertaining exercise.  take the most gorgeous web application load it up on IE8 and it’s instantly warped back to 1995)

I considered my options:(1) use a jQuery plugin; (2) not give a damn; (3) code my own custom jQuery solution; or (4) fix my form by adding labels.

I spent a little time looking at the options and settled on option 4.  I didn’t want to scare away 15% of my users over something like this.  Here’s the finished form.  

It’s not as zen as the label-less version and it’s much longer than I’d like, but I can live with it.

I have no idea how Refer.ly or other sites actually deal with this issue.  How does yours?

Other conclusions:

*Everything looks terrible in IE8

*A lot of things look terrible in IE9

*Chrome on mac makes everything the prettiest