Let's go back to basics of HTML development.

All A tags whose content isn't a text string should have a TITLE attribute

If your link is plain like this, adding a TITLE attribute is less über important but gives you a chance to help your poor user even more:

Where it really matters is when you use an icon instead of system text to link to describe something. Having an ALT attribute on the image isn't always good enough. Some browsers will not show the ALT attribute tooltip when you roll over an image that is wrapped in an A attribute. Here's how you should do it:

Sure you should use the ALT attribute. In this above example, in Firefox, what happens when you roll over the icon is that the TITLE attribute's content is shown in the tooltip. What we have to do then is to copy the TITLE attribute to the ALT attribute so it looks like this:

Now you get the best user experience in both Firefox and IE. Your users can roll the mouse over the icon and be guided by a tooltip if they're uncertain what clicking the link means. Why does this matter? You probably, as me, have been on tonnes of sites with mysterious icons you can click and you have no idea what they do. Sometimes they have tooltips, sometimes just a tooltip like "email" or something equally cryptic. There's been times when I hesitate to click but instead try to guess what the click means by looking at the URL it will go to. If it looks like something like this .../change_password?user_id=1234 that gives a way a lot. Other times, I've actually inspected what the name of the icon file is to understand what it actually does (you can do this in Firefox by right-clicking and select Copy Image Location).

Why does this matter? The ultimate gospel in web usability (if you belong to the Steve Krug school) is: Don't make me think! It's painful to not only have to waste seconds on guesswork and forensic analysis but it's also a really bad user experience since you'll force your users to plunge into a click they're not entirely certain about.

Whilst I'm at it, this appeared in front of my eyes today on a hotel booking site. None of them were links but just icons with no ALT attribute. Can you guess them all?

I've put together a little demo.html page so you can see for yourself what happens when you roll your mouse over these and what happens.

If you do web design, making your pages work in different browsers can be very frustrating. The most common troublemaker is Internet Explorer and I think everyone who's ever tried hand-coding CSS has experienced. Another thing that makes it hard is simply lack of time to test it in all different browsers and platforms.

But! if it makes you feel any better even Apple is struggling as this screenshot shows.

I've seen Apple.com/store work in Firefox on other computers so clearly it's not a problem on all Firefoxes but you'd think a big site like this must have heard of this and done something about it. If you think that what happens is that the images aren't loaded that not the case. This problem has been around for a while for me now. And no, I don't have Firebug or any other debuggers switched on as I open this site.

Now I realise why I'm taking a serious look at new "shorthand frameworks" like Django and Grok rather than Twisted, Plone 3 or Zope3: Because of jQuery! The Javascript framework which makes writing normal Javascript a joke.

Ever since I discovered jQuery I haven't looked back. Seeing "manual" Javascript code makes my crinch. By jQuery'ifying a pile of pure Javascript code you can go from 100 lines of code splashed with semi colons and for-loops into 20 human-readable lines. There's lots of magic which I guess you've just got to get over and accept but what's so brilliant is that stepping out of the magic into the wild is so damn easy and near. My only regret is not using jQuery since the day it was released. Now I've been using it for at least a year and can't see any reason for using anything else.

Ruby on Rails looks tempting too with its own nifty magic but I'm just afraid the step into "raw mode" is going to be too big. Like Plone, if you just do what you're told you can do you're getting brilliant results but anything more exceptional than that and you're back to more trouble than if you had done it without a framework.

My personal current dilemma is that I can't decide which on to invest in fully: Django or Grok. Grok seems technically superior but Grok as a community is where Django was a very long time ago. I'm going to try to master them both and some point in the future drop one of them. This is what I did when the Javascript frameworks came out. I eventually gave up on Prototype and Mootools and put all my effort into jQuery instead and I'm glad I did.

EditArea and CodePress are two text editors that are run in the browser. They're not WYSIWYG editors and the most important feature it really actually adds is syntax highlighting. First and foremost I think this is a solution to a problem that shouldn't exist: either you go full-on in emacs/vi/eclipse or you don't do any editing at all.

However, if there is a (client) need where you want to allow for source code editing in the browser, either CodePress or EditArea is probably the way.

I seem to remember a EditArea implementation for Zope which replaces the dumb textarea tags in the ZMI for Python Scripts which was a neat idea but I quite quickly turned it off and went back to the plain vanilla solution. My beef with it was simple: speed. It takes almost more than 2 seconds to load it fully and the browser feels unresponsive for a quite a few seconds even after it's fully loaded. And unlike emacs/vi/eclipse, in a web browser the reason you're editing code is probably because you're jotting down a quick hack or editing a tiny detail. Neither activity means that you keep the editor open for a long time.

F**ing great! I received an MMS from my dad in Sweden and I can't open it on either my T-Mobile branded Nokia or on my Firefox. First of all, why is it still not possible to receive MMSes from different countries? Secondly, if you receive an SMS from T-Mobile with a web link (and a password) wouldn't you expect that web page to work on mobile phones?

When you open it you get this Javascript popup warning: Nice!

When I later tried it instead with my Firefox web browser (under Linux) the interface for reading your received MMS messages is awful and done in frames and then it turns out that the bloody video format is Quicktime which is a crap proprietary format which doesn't work on Linux (unless you hack around).

Thanks a lot T-Mobile! :(

I'm sure there are plenty of free icon sets on the net but since I always forget the few I find, this time I'm going to blog about it to not forget it.

The Silk Icons is a really nice set of 16x16 pixel icons free and free for commercial use. You can either download them all as individual PNG files or preview them all using this one big image file (1Mb)

Whilst on the subject it's also worth keeping the iconfinder in mind. It's in beta and both limited and slow but worth keeping an eye on.

Pretty cool talks and talk topics. A pretty dull expo area but Adobe give out free beer if you take one of their books and trade in a business card.

Even though every second app on the expo and many of the talks are about social networking I found it really hard to network here. I had some decent chats with the expo people but not much with the fellow guests. They few who aren't head-down stuck in their mac laptops were being cliquey and hard to approach.

A blind talker from AbilityNet taught gave me a few thoughts:

• he likes that Gmail has a plain HTML alternative
• Google docs (despite being heavily javascriptted) works for him
• AJAX is generally bad news for him
• screen readers have javascript enabled by default so don't expect them to read notices inside noscript tags

An interesting company there was XCalibre. After 3 years of development they've come up with a virtual servers hosting solution which looks cool. Unlike us, when a virtual server outgrows a physical machine they can move the virt. server from one machine to another with less than 1 min downtime and without loosing any packets or stuff in RAM. They currently support Windows and some Linuxes for operating systems Currently not Ubuntu due to a tricky kernel bug but they're working on it. The cost model is cost per usage. Ie. by megabytes, data transfers and time. The name of the product is Flexiscale.

A few things I learnt from one talk by a lady called Heidi who is an expert at mobile web development:

• don't use the strong tag, use the b tag because it's smaller in size (5 bytes)
• Don't use H tags like H1 or H2 or maybe even H3. They're almost always too big for mobile screens and the mobile browsers make them too big. Content wise, a bold is enough.
• Use the xhtml-mobile10.dtd DOCTYPE.
• Navigation links are over-rated. Use search instead!
• Mobile acid test: http://jwtmp.com/a

One of my personal heros had a talk about Firefox and JavaScript and the future of Firefox. It was John Resig. A nerdy looking fellow who was an excellent speaker with a voice a very very confident and clear voice but with some very shy movements on stage. He had a very technical talk about where Firefox is heading with Javascript 2, SVG and some weird OpenGL extensions. He also touched a bit about Firefox 3 and offline use. Long story short: Mozilla has some grand and exciting ideas about Firefox. Really exciting!

One of the most interesting talks was that of Kevin Rose. The Digg founder. It was nice to hear that he's no genius God. He's just another regular bloke who likes to put together websites. He started everything up from scratch and made lots of misstakes and had to learnt lots as they grew. A few random points I can remember:

• invitation features such as address book import and email invites has been very good for their user growth.
• on the "send an email to a invite a friend", instead of using a mailto: link, use the mail program icons like the Outlook, Firebird etc logos to very quickly explain what it's about
• Their second project, Revision 3 was done in Python and the latest was done in Django and they were very happy with it. Digg is done with LAMP(hp).
• Don't (even try to) go for VC until you've got a working app
• Plan for success! One of the biggest mistakes he confessed. However, at the very earliest stage his aim was to get something working and earn a few extra bucks to reduce his rent.

If you're a web developer and care about having snappy web sites you'll know about YSlow for Firebug. I managed to get a grade A (96) but I'm suspecting that there's a bug in the YSlow analysis.

Setting an Expires header is inferior to using Cache-Control which my site was already using fine with headers like:

 Cache-Control: public,max-age=3600

according to the latest documentation but YSlow kept going on about setting Expires headers. I prefer Cache-Control since you don't have to do any date formatting which eats a few excess CPU cycles. If anybody knows why it's a good idea to use both Cache-ControlandExpires let me know.

I discovered something really odd today that maybe a seasoned AJAX guru already knew as a legendary bug which might even have a name. I was developing a little AJAX method on the server side that returned this:

 <?xml version="1.0"?>
 <sections>
   <section>
     <number>001</number>
     <title>PLug 1</title>
   </section>
   <section>
     <number>003</number>
     <title>PLug 3 xyz</title>
   </section>
 </sections>

 Note: The Content-Type used was "text/xml"

I used jQuery to kick off the AJAX call and then I loop over the document element returned with childNodes almost like this:

 children = data.childNodes[0].childNodes;
 for (var i=0, len=children.length; i<len; i++)
   // bla bla

It was working fine in Firefox and of course not in IE 6.0.

If you search Google for 'yogurt' www.dannon.com comes up second in the search results. Neither the title nor the URL contains any reference to the word yogurt. The word "Yogurt" is the 37st word of all (55) non-HTML English words that appear in the crappy table-inside-tables-nested piece of crap source code.

A SEO expert would immediately count Dannon.com as doomed on the search term Yogurt but clearly Google had other plans. According to my Google toolbar the Dannon website has a measly 5 out of 10 PageRank™ only, so that's not the explaination either.

So how did Google do that?

Today I was working on an popup input box (actually 3 input boxes) that asks the user to enter a project, a vendor or a category. The first box looks like this:

 Project name: __________________________

The second looks like this:

 ...accounts code (optional): __________________________

I'm wondering, what's the most user friendly way of displaying that label. Is it:

 ...accounts code: (optional)

or is it:

 ...accounts code (optional):

Yesterday I discovered that the <button> tag doesn't work in Pocket Internet Explorer so for the mobile version of the particular page I'm working on I had to replace the <button> tag with a <input type="submit"> tag.

And I thought Microsoft invented the tag. Perhaps they did but forgot about their own "standards" when they did the Pocket IE.

For hard cord Javascript developers this comes as no surprise but if you, like me, do all your work in Firefox (of course with Firebug installed) then you need to keep a close eye on the correctness of your Javascript syntax because Internet Explorer will have some difference ways of thinking about it. Here's what I learnt the other day. This works perfectly in Firefox:

 var person = { age:27, name:"Peter", };

But if you run that in IE you get "Expected identifier, string or number".

I know that SQL raises syntax errors on trailing commas but Python sure doesn't and I like that.

What a pointless rant this was. More like a note to self that might hopefully help someone else some day.

correct.html
incorrect.html

It started with this letter of apology on the corporate site of jetblue.com which was quite impressive. Discarding the content I liked the design and the simplicity of the navigation.

I then tried the flight booking interface and was even more impressed. It was intelligent and fast and since I was just goofing about to test rather than to book I accidently selected 30th of February as my return date and a Javascript alert box popped up and prompted me of a my misstake and corrected it. All very impressive since so many airline booking forms suck badly these days.

Then I clicked to go to the homepage and noticed how my Firefox almost froze and started stuttering. Even though the homepage fits on one screen and hasn't got much information it took 11 seconds to download it completely! (apple.com takes 4 seconds, peterbe.com takes 2 seconds on this WiFi connection I'm at)

cbeau.ca or "Retouche Photos Retouching" is a neat little online gallery showing what can be accomplished with photo retouching of models and other photos like that. What's interesting about the gallery is that the interface is great. It's done in Flash and I'm often disappointed and very rarely amazed by Flash interfaces. I still love Flash games as a user interaction medium and the Flash video players have worked a zillion times better than Quicktime, Windows media or Real player.

Most Flash interfaces are just annoying. Thinks flash, blink and move away from your attention. Nothing ever looks the same so you never learn how to use the interface. Also, a lot of Flash interfaces are slow to load and once loaded you rarely get content but just decorative fluff that you don't really need.

This is an exception though. They even clearly mark out which photos you've clicked on. (I guess they've read and taken in Jacob Nielsens books). The interface is fast and obvious and there is very little else of distractions from what you're there to see.

To all Flash developers out there: Keep up the good work! Don't use Flash when HTML is better even if it's less fun to develop. Look at sites like this for inspiration.