The New York Times: When features break normal behaviors

Feature Creep is a nightmare for many. Some features are useful and when it doesn’t push a project back and improves the experience then it’s okay to have them.

One day I was on The New York Times’ website and I highlighted some text to act as a marker while I replied to someone on messenger I noticed something. A small tool tip popped up with a question mark and as I hovered over it - it stated ‘Lookup Word’. Clicked the tool tip to have a small pop up window open with the definition. At first I thought it was something the web browser had done but then I noticed it happened in other browsers and realized that the developers for The New York Times’ had added this feature that when you highlighted some text you could get the definition of the word. - Pretty Useful.

But then I noticed something - When I right clicked the highlighted text, I couldn’t copy it because it undid the highlight and thus prevented me from copying the text.

This feature which seemed useful to me broke normal browsing behaviors - Now we have a problem. Without the feature I could of copied the text and searched for the definition myself - but now I can’t copy this text.

But Wait… You can copy with keyboard shortcuts..
Yes I can use keyboard shortcuts, but the problem with that is not everyone knows keyboard shortcuts - for example - do you know from right off your head what Command+Option+Control+8 on Mac OSX does?

What if I wanted to copy a whole paragraph? - Well that works. As soon as I highlight four words I’m able to copy the text. So it doesn’t break my normal behaviors all the time… only when I highlight three or less words, then I have to use the keyboard shortcuts..

Not a bash on The New York Times’ site - I thought it was useful and granted most of the time I will use the keyboard shortcuts but it is a risk to make such a move. From what I’ve noticed when it first was released a lot of people complained and even went as far as blocking the script using ad-block and I’m assuming that since it’s release it’s been adjusted. It would be nice if at some point they made it so I could still have my normal right click behavior but no one’s perfect and hopefully they will find a way to keep the feature because I do think that they were focusing on their readers when they added this feature.

If you need to explain how to navigate your website, you are seriously doing it wrong.

If you need to explain how to navigate your website, you are seriously doing it wrong.

Tags: web design

Tags: web design

I bought a WebOS device and went to Taiwan. Now I understand why the Web on Mobile is a pretty big deal.

Tags: mobile web

Caps lock Detection

Recently I was working on detecting if someone had caps lock on. Rather than try and reinvent the wheel, I looked to see if anyone had created a plugin that did so.

Which as you can guess - someone did. So I looked into and and noticed that it was firing a false positive. When someone had Caps Lock on and hit Shift it was saying that caps lock was off. So I modified the plugin and email it to the original creator.

The creator of the plugin later emailed me back and I think we both learned something very interesting. Turns out on Windows if you have Caps lock on and hit shift it will make the character lowercase, however on a Mac if you have Caps lock on and hit shift it makes the character uppercase.

Which now made things very interesting. What was awesome is someone wrote a plugin which can detect OS & browser and while both the creator and the plugin and I prefer feature detection over OS detection - this is an OS issue. So I ported over the OS detection plugin into the Caps lock plugin and now have a plug in that detect if - Caps lock is on, Caps lock is off, and if the OS is Windows and if Shift is hit if Caps lock is on or if the OS is Mac and if Shift is hit if Caps lock is on.

Edit: Well I sent my code to the plugin’s creator and he caught something I missed - Sadly we are still at the point where we can’t detect if Caps lock is on & the shift key is pressed on a Mac. On the bright side the updated plugin looks pretty solid.

autocapitalize=”off” on login inputs…

A little over a week ago I drove from Cincinnati up to Indiana and attended the re:build 2011 conference. While Brad Colbow presented on how it’s the little things in design that adds up and shows you really care.

I noticed him stating when he logged into a website from a tablet computer he would have to make sure to lowercase the first character so he could login, however he then noticed at somepoint they added autocapitalize=”off” to the textbox which prevent the mobile browser on the tablet from capitalizing by default.

I made sure to make note of that since I wasn’t aware of it; but as I thought of it - it seemed odd… Personally, I think it’s odd that a website would make a screen name case sensitive - People have been known to hit capslock and type full emails messages - chances are they will have capslock on and type in their screen name, they might notice it and remove capslock and then type their password normally.

While I understand that a password should be case sensitive, I don’t view the same for the screen name (which sometimes is also the email address). While adding the autocapitalize=”off” might prevent woes it, it seems that the case sensitive user name is more of an error in the application’s logic.

On that note - it makes sense that one might want to turn autocapitalize off in some inputs (and if the developer doesn’t have access to the backend then it’s understandable) so by being able to add autocapitalize=”off” or autocorrect=”off” such as <input autocapitalize=”off” autocorrect=”off” type=”text” value=”” /> is useful. Just some small thoughts.

Tags: web

Let’s go back in time, it was near my last year of college and my assignment was create a website with no words that explains how to do something… It could be anything so I did it on “How to make Ramen Noodles”. The challenge was that someone who might rarely use a computer must be able to use the site, finish it completely and (hopefully) know what the explanation was…. So you want to make sure you followed the KISS principle because if they failed to figure out how to use the site, you were told that you would fail the class.

Turns out I over thought things… way too much and made the simple task of Ramen Noodles harder than trying to remember the Konami Code… So here you go, best of luck.

For the record… I believe 3 people couldn’t figure it out.. (one of them being a professor who had taught the assignment for years [so yeah….]) luckily I wasn’t failed… Most likely because I became aware of the mistakes of over thinking it and also I learned that just because you can do something, doesn’t mean you should…

Wait what?Am I suppose to remove my USB drive or not?

Wait what?
Am I suppose to remove my USB drive or not?

Good Designers Copy, Great Designers Steal

A while back I found a CSS Tip on 37Signals blog which I thought was very useful. So I stole it (Okay I suppose it’s copying but whatever) and added the idea to my stylesheet. However depending in my project I might not be able to make it an ID. So I made it a class - however I didn’t really agree with the idea of calling it a Flash Bar like 37Signals just because if someone else was using my stylesheet in a project which might have flash, they might think that the class would go around a certain flash element.

So now I have this class one class which defines the border, font-size, padding, margin, etc and then I chain another class which will define the color of the text, background, and if I want I can include a background image as an icon with it.

For example .noticebar.warn, .noticebar.success, .noticebar.info, etc etc.

Next thing I copied was from the personal style guide for oli.jp which was the callout which is similar to the Flash Bar from 37Signals however it has a different purpose (however the concept for both is the same) I view the Flash Bar as a notification based of an action - like an update or delete, while the callout could be used for articles - which I’ve incorporated into my tumblr skin which is proving to be useful.

Tags: web css design