Archive for the ‘web design’ Category

workaround for entity bug (?) in tabber

Tuesday, February 6th, 2007

A user of my tabber script discovered that when his tab headings had an ampersand character like this:

<h2>Me &amp; My Shadow</h2>

Then the tab control displayed “&amp;” instead of a single ampersand character.

It looks like this occurs because the JavaScript DOM function document.createTextNode() does not convert entities. However, it looks like innerHTML does convert entities, so to fix your problem find the following line in tabber.js:

DOM_a.appendChild(document.createTextNode(t.headingText));

and replace with the following:

DOM_a.innerHTML = t.headingText;

I’ll think about this some more and if I can’t find any bad side effects I’ll add to the tabber code.

remember me

Sunday, October 8th, 2006

Many sites have a “remember me on this computer” checkbox when logging in, which saves a cookie on your computer so you remain logged into the site. Slashdot actually makes the cookie opt-out: you must select “public terminal” if you don’t want to save a cookie on the computer.

Today I saw an interesting feature on the AAA Auto Club web site. It had the typical “remember me” checkbox when logging in. I logged in but did not select the checkbox.

Then on the “my account” page, it presented the option again. This is the first time I have seen an option to save your account cookie other than on the log-in form. It also gives you the ability to delete the cookie. It’s a nice detail.

LazyScript (made up word of the day)

Tuesday, September 5th, 2006

LazyScript (n): a solution coded in JavaScript that should have been implemented with server-side coding. The resulting solution works in most browsers, but does not work when JavaScript is disabled, is not accessible, and does not appear in search engines. See also: kludge, hack

STOP YELLING: The Flickr Newbie Muzzle

Wednesday, April 12th, 2006
yell.jpg

ONE OF THE THINGS THAT EXPERIENCED INTERNET USERS HATE IS WHEN SOMEONE TYPES IN ALL CAPS… IT FEELS LIKE THE PERSON IS YELLING!

I noticed on Flickr that they have implemented anti-yelling technology – so if you enter a comment in all caps it automatically changes to lower-case and even attempts to capitalize words based on sentence position.

BEFORE:

TESTING COMMENT. WOW! IT WORKS!

AFTER:

Testing comment. Wow! It works!

This is cool, although if you really want to type in all caps it won’t let you. In my mind it’s a good tradeoff.

Update: it would have been even better if they had provided a notification that this was being done, and perhaps a way to override it if you really wanted all caps.

more user interface blast from the past

Tuesday, April 11th, 2006

vv-power-anim.gif

Forgive my continued stroll down memory lane as I sort out my old-school ui / web application design work. Back in those days we didn’t have any fancy “C S S” and we liked it that way! Harumph.

VirtualVault was a high-security variant of HP-UX with an integrated web server, used by the first Internet-enabled banks. In fact, when SecureWare was pitching the first Internet bank (Security First Network Bank) I created the demo screens used in the presentation (my one meager contribution to history, I’ll puff up my resume to say “I designed the first internet bank”).

Compartmented-mode security was devilishly hard to administer, so we created a web-based administration tool. We solved a lot of problems and developed our own standards, and looking back at it I think it holds up remarkably well.

vv-home.gif vv-newaccount.gif

In addition to doing information architecture, graphic design, user interface design, and high-security programming (phew!) one of the toughest things was to retrofit the application for internationalization/localization, then I got stuck managing the Japanese localization (what a time and culture difference!). We came up with a pretty good solution for internationalizing the code, then a few years later I was looking at a new GNU gettext solution, and realized it used a very similar system so I guess we did something right! Even with the aid of tools we developed, retrofitting an existing application was a bitch, so now whenever I can I write i18n code from the start.

vv-i18n-2.gif

This project was a great opportunity for me, but the ultra-high security market was not lucrative enough so HP got out of the security market. The old team still gets together for a holiday party each year, which I think is pretty remarkable.

Screencast: Judge a Web App By Its Title

Thursday, April 6th, 2006
You're Killing Me Here!

The second episode of “You’re Killing Me Here!” (usability and design screencast series) discusses various uses of the page title (HTML TITLE element): in particular how you can use it to communicate with users of your web application.

View the Screencast (2.5 minutes)

JavaScript tabbifier v1.5 new features

Sunday, March 26th, 2006
Tabber

I just released a new version of my JavaScript tab interface software. It has some new features that make it crazy-easy to use, plus I eliminated a memory leak in the IE browser (damn you Microsoft!).

New Features

  • You can set the tabberOptions global variable before you include tabber.js to change any of the tabber settings.
  • You no longer have to specify a title for each tab – it automatically finds heading elements in the body of the tab. Of course you can still specify a title if you don’t have headings or to override the title of the tab. And if you don’t do either it automatically numbers the tabs. See also tabberOptions.titleElements and tabberOptions.titleElementsStripHTML.
  • Removes the title attribute from the tab so it does not appear as a tooltip when you mouseover the body of the tab. See also tabberOptions.removeTitle.
  • You can prevent tabber from running automatically in the onload event. See tabberOptions.manualStartup.
  • Fixed a small memory leak that appeared in the IE web browser.

You’re Killing Me Here! Web Usability Screencast

Friday, March 24th, 2006
You're Killing Me Here!

Introducing “You’re Killing Me Here!” a series of screencasts discussing web site and web application design, accessibility, and usability from the perspective of a power-user.

The first episode discusses “type ahead find” in the Firefox browser and the design implications that come along with it.

View the Screencast