nosewheelie

1. Having a sign-in in the first place
2. Requiring sign-in too soon
3. Not stating the benefits to registering
4. Hiding the sign-in button
5. Not making “Create a New Account” or “Forgot Your Password” a button or link
6. Not providing sign-in opportunities at key locations
7. Asking for too much information when registering
8. Not telling users how you’ll use their information
9. Not telling the users the requirements for username and password up front
10. Requiring stricter password requirements than the NSA
11. Using challenge questions they won’t remember in a year
12. Not returning users to their desired objective
13. Not explaining if it’s the username or password they got wrong
14. Not putting a register link when the sign-in is in error
15. Not giving the user a non-email solution to recover their password
16. Requiring more than one element when recovering password

Source: 16 design mistakes for account sign-in.

Scoodi’s picture uploading function is known to cause issues in Safari 2 when Keep-Alive connections are turned on. For performance reasons we want to enable Keep-Alives, however don’t need to inform older Safari users (though I don’t believe we have any current Safari 2 users) of the known issues.

We use Browser Detect within Scoodi for browser specific functions, which means IE at present, to do things such as correctly alpha blend images, etc. Unfortunately the current version of Browser Detect has limited support for Safari versioning, and especially doesn’t like the latest Safari versions (3+) which have slightly changed the user agent string.

Luckily, the details are documented so a patch is easy:

...
else if (this.isSafari) {
  // Correctly identify version, see: http://developer.apple.com/internet/safari/faq.html#anchor2
  if (ua.lastIndexOf('version/') != -1) {
    this.versionMinor = parseFloat(ua.substring(ua.lastIndexOf('version/') + 8));
  } else {
    this.versionMinor = parseFloat(ua.substring(ua.lastIndexOf('safari/') + 7));
  }
}
...

Which makes for some nice Safari detection:

...
this.isSafari1x = (this.isSafari && this.versionMajor >= 125 && this.versionMajor < = 312);
this.isSafari124 = (this.isSafari && this.versionMajor == 125);
this.isSafari132 = (this.isSafari && this.versionMajor == 312);
this.isSafari1up = (this.isSafari && (ua.lastIndexOf('version/') != -1 || this.versionMajor >= 125));
this.isSafari2x = (this.isSafari && this.versionMajor >= 419);
this.isSafari204 = (this.isSafari && this.versionMajor == 419);
this.isSafari2up = (this.isSafari && (ua.lastIndexOf('version/') != -1 || this.versionMajor >= 419));
this.isSafari3x = (this.isSafari && this.versionMajor == 3);
this.isSafari30 = (this.isSafari && this.versionMinor == 3.0);
this.isSafari31 = (this.isSafari && this.versionMinor == 3.1);
this.isSafari3up = (this.isSafari && ua.lastIndexOf('version/') != -1);
...

Here’s the complete file: browser_detect.js.

Hopefully something like this can get added back into the main distribution.

We’ve been performance tuning Scoodi for the last few days, making extensive use of FireBug and YSlow in Firefox. Surely there’d have to be something similar for Safari? Please don’t make me start Firefox when I need to do this sort of work…

I’d heard about Safari’s Web Inspector and Drosera a while ago, but the latest Safari 3.1 makes these easily available in a new “Develop” menu (enabled in Safari’s preferences). The Web Inspector is nothing short of spectacular, it seems to have a lot of FireBug’s features (I’ve not found anything apart from the selection widget that FireBug has over it), wrapped up in the usual Mac eye candy.

Here’s a screen shot of it in action against the Scoodi UAT site, showing HTTP headers.

You can also attach it to the browser window (FireBug style) with the icon on the bottom left. I noticed this morning also that IE 8 now bundles a developer console also.

As much as I hate spending inordinate amounts of time staring at CSS files and checking browser compatibility, I am quite reasonable at it, and seem to have an innate fascination with the application of design to the web. To that end, Cameron Moll takes us through designing a Highly Extensible CSS Interface in a four part series. I’ve got to say the result is pretty striking. You’ve got to love what a good designer can produce…

Via Justin French: