Technology, mountain biking, politics & music.

Archive for the ‘Design’ Category

16 design mistakes for account sign-in

without comments

  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.

Written by Tom Adams

April 18th, 2008 at 10:24 am

Posted in Design

Browser Detect patch for Safari support

without comments

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:
  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.

Written by Tom Adams

April 8th, 2008 at 3:54 pm

Posted in Design,Ruby

Tagged with , , ,

Safari’s Web Inspector

with 3 comments

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.

Written by Tom Adams

April 8th, 2008 at 11:35 am

Posted in Design,Mac,Ruby

Tagged with ,

The Highly Extensible CSS Interface

without comments

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…

Written by Tom Adams

April 3rd, 2008 at 11:53 am

Posted in Design

Bring bad design to justice

without comments

Written by Tom Adams

January 17th, 2008 at 10:31 am

Posted in Design