Recently in Accessibility Category

I have no idea what key I hit, but suddenly, Alex’s voice is everywhere.

When I open a new Firefox tab. When I close one.

When a popup message appears. When I open System Preferences (to see if I can uncheck anything so the voice will stop talking to me!).

It was amusing initially but it’s starting to get a little obsessive-compulsive as it reads out every little step I take.

Admittedly, Alex’s voice is the most accurate and human like. I prefer listening to him over Bruce and Fred. There are lots of things you can make Alex do for you.

But could someone please tell me how to turn him off? :)

[Update: Turns out I hit Command + F5 by accident and that turned Alex on. I’ve just put him back to rest.]

There I was, happily ranting away about Web Standards again when Ryan Lin pointed out that my page had XHTML errors. Eep! How did that happen?

Firstly, I missed a couple of stray ampersands in my 'Asides' column. I'm usually quite picky with invalid URLs, but was so excited to hear that Prince William was single again (yeah right), I forgot to modify the URL accordingly. Heh.

However, there were still so many bugs! It turned out that my Twitter badge was the main source of errors and warnings, due to the use of 'embed' instead of 'object' tags. I tried switching to the Javascript version, but it too had errors and warnings. I started reading Flash Satay on A List Apart, and managed to reduce a number of errors, but it wasn't enough as Twitter had many other parameters that were still considered invalid.

I cried out for help - where else but on Twitter... and help came in the form of Dominik Schwind who kindly pointed me to another website which had exactly what I was looking for. Although it was entirely in German, thank God that HTML, like LOVE, is a universal language. So I was able to modify my own parameters - which this dude cleverly separated out - and voila! No more validation errors!

Thanks a lot guys... solved this within 45 minutes ;-) Geek power rules.

If you've ever done web design before, do take this survey. Some of the answers I gave made me smile, because it's been years since my job title was 'web designer'.

While web designing is not my main role anymore, as an overseer of numerous projects I still use my whip judiciously. We can all play a part. Singapore clients must ask for web standards and accessibility to be applied to their projects, so that agencies will realise there is a demand and bother to learn the stuff.

However, clients must know some code too - because some agencies will claim they do apply web standards, but when you look at their code there are tables (not for tabular data) and font tags (or something that obviously looks like a .style1 created in Dreamweaver). There are still vendors out there who design fancy bullet points by using a two-column table. They insist that they comply - 'But we do use CSS to colour the table background!' Be warned.

Singapore schools much teach students about web standards and accessibility. So far the only design students I've met who know about web standards, learnt it on their own. When it comes to the web, it isn't just a huge graphic that you splice into multiple cubes and plonk onto a web page. But I'm thinking the mindset is more like, 'Who cares, it's just more work and we have other projects to rush. Teacher won't grade us on our coding. It can work in IE, rite?'

I've spoken to people who are trying to adapt to web standards. You can tell who they are, as their code is a mix of valid CSS and tags embedded within HTML. These are the people we should encourage and teach. I'd call them the real 'transitionals'. They see some value in web standards but have told me that a lot of time is required for their designers to learn how to make the switch.

Well, I'd say in the long term, more time is saved. You will no longer need to re-code all your pages to change a visual element on all of them. You will no longer have to tell your server to generate print-friendly pages using a separate template. You will no longer have to design separate web pages that can be viewed on mobile devices, projectors, or be listened to by visually handicapped people.

Unless you're the type of agency who likes to charge by the amount of time spent on the project. I'm not impressed with that. A proactive, innovative agency could propose other useful features for the website and the client may take it on. Only an agency that's totally out of ideas will fall back on outdated coding techniques and do nothing else to help themselves. And we wouldn't want to hire them, would we?

Today I got home from work late, had dinner and started designing a mockup for my church's new website. At work, I am more of a project manager/New Media-PR person than a designer, but every now and then it is good to revive the skills I picked up as a web designer/technologist a few years ago.

At recent church meetings and at work, I've brought up the benefits of using web standards, particularly Cascading Stylesheets. For the more technically savvy folk, I usually explain the important of separating style from content. For an even more able colleague yesterday, I explained the rise of XML and how we are currently in transit mode with XHTML, which is why our code has to be tidy.

I've always been sensitive to people's reactions to my ideas. So, for web standards, I usually avoid going into technical details when talking to laypersons. I move straight into the benefits like the time saved by amending only one stylesheet as opposed to changing the font tags in every paragraph on each page. Those who are interested to learn more, can then find out what exactly needs to be done.

If there's time, I like to show CSS Zen Garden - it always has a 'Wow' factor. I usually display the visual aspect of the web page first, then its source code. Then I switch to another template, and show them that most of the code's still the same - the only thing that's changed is the stylesheet. Everyone gets it after that.

If I want to demonstrate how different stylesheets can be used on the same website, I'll take them to our internal staff newsletter, which looks very different when you print it out. Elements which are not necessary on paper, such as the nav bar, and certain images, are removed from the print version. I explain to them that the same thing can be designed for mobile devices, so there is no need to have many different versions of the same website.

Back to my church revamp. Given the fact that our new site map has 3-4 levels of navigation, I forsee someone might ask me for one of those fancy dropdown menus. Naturally if that happens, I only want to use CSS dropdown menus. However, many examples I found involve the website being aligned to the left. This example is the best I've seen so far - good to look at, and centred. And it has 'tentatively' valid XHTML, according to the W3C validator. Do let me know if you find any more.

Out of nostalgia, I decided to use my G5 Mac to work on the mockup. My preferred weapon is still Fireworks. I seldom use Photoshop except for editing photos. Fireworks is easier to use in the sense that you can draw layouts quickly, and create Symbols and hotspots with one or two clicks or presses of a button. Of course both programs are now part of one big family...

Technorati Tags: CSS

Lucian has summed things up nicely on the main WebSG blog.

I arrived late but managed to catch the last bit of Yuhui's presentation.

Then I finally got to see what Chu Yeow looked like. In the past few years he empathised with my not being able to use Firefox, while I ogled his handiwork at Bezurk and the fact that he wrote a book on Firefox.

Lucian gave his talk on Microformats which you can read about in more detail here. I remembered he was blown away by Tantek Çelik's presentation at SXSW last year. This year I may attend a panel on the latest microformats, also featuring Tantek. Haven't had time to plough through all the panels and arrange my schedule. Yet.

In between talks, I was distracted by this extension of Kevin's. I mean, the video camera he strapped to his head. He used it to take a video of all of us. I looked disillusioned due to something else which happened earlier that day. Still, he managed to make video interviews with some of us, including myself. You can tell I am obviously shorter than Kevin. Off the top of my head, quite literally.

I also got to meet Veron of Sparklette, and Brennan! Gah, these people are so much younger than I am. The usual suspects Ivan (our 'host'), Coleman and Preetam were there too.

The first Web Standards meeting in Singapore took place this evening at Raffles Girls' School. The turnout wasn't large, but new friendships were made, and I could now put human faces to personalities I'd been conversing with online, for years.

Lucian began by giving an introduction to web standards, recalling the good old browser war days.

Lucian also elaborated on the aims of the Web Standards Group here in Singapore. We will promote the use of web standards in Singapore. The group comprises people from Education, Private and Public sectors. We will share technical know-how with each other, and help to spread the word.

Next, Coleman gave a presentation titled "How to bluff your way through web accessibility". However I don't think he was bluffing us very much in the end ;-)

He noted that in the physical world, there is legislation - such as the Building Control Act 1989 in Singapore - which ensures that the disabled can move around in buildings.

On the web, however, the disabled still have problems accessing information. Coleman showed a video of a visually disabled person using a screen reader. They take a longer time to receive information aurally. They can't use devices like mice because they don't know where to point to. Label your images so that these users can at least know what they are.

Coleman gave a good analogy about the importance of standards. What if, for instance, you tried to watch a new DVD, only to discover that it won't play on your screen as it's not big and new enough? (An allusion to websites that can only be viewed in certain resolutions using certain browsers, etc)

He introduced the Web Accessibility Initiative (WAI), the Web Content Accessibility Guidelines (WCAG) and its different checkpoints, as well as Section 508 which requires Federal agencies to have accessible websites.

Lucian and a few others also noted that the Dutch government just made accessibility mandatory for their websites as well. I think the private sector worldwide will take a longer time to catch on, as most have yet to see the business value of web standards. Oh well, there's never been a better time to 'Go Dutch'!

Our third and final presenter, Nick Pan, showed Natalie Jost's diagram, illustrating the separation of markup, presentation and behaviour.

He explained how using web standards will allow programmers and designers to work concurrently, as opposed to waiting for each other to complete their work, save the files and pass it to the next person in the production line.

He demonstrated how CSS lists were used in one of his projects, which had a multiple-tiered navigation bar.

Russ Weakley, the guy who created the very useful Listamatic, will be in Singapore to give a CSS workshop. More details over at Pebbleroad.

So far, I've heard two types of very contrasting reactions about this full-day workshop. It's priced at S$350 (that's US$230 going by an exchange rate of 1.55) but the reactions I've received so far go along the lines of "So expensive!" or "So worth it!".

I know $350 is a lot of money to some people, especially if you're in a small company or a freelancer. Pitching web standards when everyone else at work is concerned about the bottomline and whether it will cost more time and money to implement, is difficult but not impossible if you know how to put across its benefits from the viewpoint of your bosses. Easier said than done, isn't it!

I worked as a web designer for the first 4 years of my career. I've since become the client, and web coding is no longer a key part of my job. Project management and new media innovation/development, is. Still, I hope to work with designers who practice web standards, because knowing that there are nested tables, spacer gifs, font tags and other bloated code in there somewhere, makes me feel uneasy.

At least I can now go to SXSW this year, look Jeffrey Zeldman in the face, and tell him that we have finally done something about Web Standards in Singapore.

Onwards!

[Update: We'll keep a list of everyone's accounts of the events, on WebSG, so head over there. Join our mailing list! ]

Technorati Tags: web standards, web accessibility, meetup, singapore,

Someone from usability company Etre wrote in to inform me they that conducted a study on many corporate websites to see how the new Internet Explorer 7 displayed them.

Turns out that many of these websites are busted. I haven't done enough research myself to determine if IE7's new rendering engine really adopts standards as their blog claims. To quote:

The CSS standard does not provide a way to target specific browser versions and as a result the Web developer community has developed CSS filters (also called "CSS hacks")... As we fix these bugs and improve CSS support, some CSS filters will stop working.

My hopes were raised when I read further that Microsoft is trying to strike a balance between adopting standards and also making sure that not too many websites break. Of course, ultimately every website should move towards standards.

For now, we have to make do with a partial adoption. I'll leave it to experts like Zeldman/Alistapart, Meyer and Tantek (yes, the box model hack needs to be updated for IE7). Big thanks to the Web Standards Project for facilitating the reporting of browser bugs to Microsoft.

We can expect to see new tutorials on CSS hacks for IE7 soon. And business will boom for web standards consultancies. Designers who code the old-fashioned way (that's a LOT of Singaporean designers IMHO) will have to upgrade or lose out. If everyone's IE on Windows PCs gets automatically updated in time, people will be scrambling to make sure their corporate websites look fine on IE7.

Good on ya, Microsoft.

Technorati Tags: IE7, internetexplorer, IE, Microsoft, webstandards

Update: Zeldman's post on IE7. Also see IE7 bugs and fixes, part 1.

It's time to pick potential panel topics for SXSW 2007. One person, one vote. Might I add that the new SXSW site looks much better than the previous version and we can select our panels via a drag-and-drop technique. (AJAX!)

As requested, I've shortlisted 10 panels: looking at trends 10 years from now, mobile apps, managing communities, Web 2.0 for the enterprise, interactive media for children, the me-customer, geek politics.

Another panel I picked was something that I was discussing with Ivan and Kevin this afternoon - for instance, how do we move beyond the Technoratis of today, which rank by quantities (e.g. number of linkages), to make sense in a more human, qualitative way?

Context: The Next Layer of the Net

The Net has brought us more information. More text, more images, more audio and now video. And the future only promises to bring us more access to more of it in more places. How do we find things when we don't know specifically what we want? After "web 2.0" enables the average user to create even more stuff, the next layer of the Net needs to help it all make sense. This session combines experts on technologies and individual curators and communities that are already creating context and not just more stuff.

Most unusual suggested panel topic: Chocolate. Apparently it's for people tired of geek talk. Naturally, the panelist in charge is a lady ;-)

Technorati Tags: SXSW, SXSWi, SXSW2007, Austin

A couple of people signed up recently and I was prompted to check out how many people in Singapore were interested in a Web Standards meetup.

I was impressed.

Shall we?

[Another question - where exactly can we meet up? Somewhere we can hang out and hopefully with free wireless...]

Eric Meyer's latest article on how he improved on Alistapart's print styles, is an excellent read for those interested in the technical aspects of printable web pages.

When designing our organisation's online newsletter, I decided to create a print stylesheet but kept it simple - display:none for the logo, nav bar, and mastheads. The only images I retained for print were one-off photographs included within each article. However, little did I know that some colleagues wanted to print the newsletter to keep as records, and were surprised to find that it did not look like the screen version at all. In the end I had to reinstate some elements so it looked more like the screen version. (I took it as flattery, that they liked my design! :-)

For the screen stylesheet, I also made text resizeable - which I thought was a very useful feature since (and I do lament repeatedly), we aren't allowed to install Firefox or any other browser on our systems, and our version of Internet Explorer (6) is unable to resize text if you use fixed font sizes.

However, once again I received a complaint - this time, from an editorial team-mate who had unknowingly reset his browser to magnify text. At first, the rest of us were baffled by his emails and assured him that the web pages looked fine to us, on our own computers. Then it occurred to me that his browser settings were involved. He confirmed it, but added that to avoid this problem in future, I should fix all font sizes!

I told him that we had other colleagues who were visually impaired and it would not be fair if we prevented them from resizing text in their browser, so they could read our newsletter properly. Fortunately, that argument held.

All in all, it was an interesting lesson in managing expectations. Apart from those initial teething problems, the newsletter website loads fast, is easy to click through, and doesn't waste employees' time with clunky navigation. It's also easy to change the look (for instance, we began early in the year with a 'blue' theme, and during summer I switched to 'red-hot') by simply updating one CSS file. I just wish more local web design companies took stylesheets and web standards more seriously.

I generally agree with much of what web usability guru Jakob Nielsen says, but get the impression he's pretty stubborn about applying his principles to his own website. Wouldn't it be great if he could demonstrate how usable websites can still be beautiful?

And I didn't get the impression he was very forthcoming about suggestions, despite other people's attempts to give him a makeover (however, I like this post about spicing up useit.com with more semantic markup).

[Side note: I had a prototype for this 2000 redesign competition, reUSEIT, but didn't enter in the end. I only just visited the site again, to find that no entries were submitted! Dang. Now I wonder where I saved my old design! In 2003 there was a more successful redesign competition, endorsed by Nielsen himself. Unfortunately, nothing was adopted for his site. ]

And the other thing is - why doesn't he have RSS feeds? I'd see that as a form of 'usability' in the sense that I don't have to go to his website to see if any new articles are up. Of course, I could still subscribe to his e-mail newsletters, but my mailbox is already jammed and I'm unlikely to read it - at most, just skim through it.

But thanks to this post from Boing Boing, someone's kindly scraped the content into a bootleg RSS feed. Thank you, kind soul.

Hmm ... not practising what he preaches all the time ... not wanting to improve the look of his own site ... not blogging or providing his own RSS feeds. Getting a little bit out of touch? Time to stop resting on laurels and get 'with it'!

[Update: Check out youzit.com, a spoof of useit.com. Yes, it's in Flash. ]

Those of you on AppleCentre Orchard's mailing list must be amused lately by the messages from other recipients who thought that "replying to all" would somehow get them off the mailing list. One reply started the chain, and to date I have counted at least 4 more replies to all. One lady was fed up enough to reply to all, telling everyone NOT to reply to all! However, that didn't stop more replies from coming in. (Doh!)

If these people had only noticed there were links at the bottom of each e-mail newsletter, and if they clicked on them they'd be taken to a page where they could administer their account and even unsubscribe from the mailing list, life would be much easier.

However, in their defence, the system isn't so obviously user-friendly. If the links at the bottom of each newsletter had actually said 'Unsubscribe or administer your account', these mass-mails wouldn't have occurred. However, AppleCentre Orchard's newsletters simply list two URLs, with no explanation of what they signify. Maybe only kaypoh geeks like me would bother clicking on them and administering my account through Mailman.

Another solution would be for AppleCentre Orchard's administrator to send an email to everyone (oh no, not again) to tell or remind them of how to administer their accounts. They could also configure the system so that other people on the mailing list cannot send emails to the group (this isn't a forum, anyway).

Whatever the case - if I see another "Please take me off the mailing list" again, I'm going to send a firm note to the administrator. Surely people who sell Apple products will understand usability and simplicity.

A hearty congratulations to the Ministry of Community Development, Youth and Sports (MCYS) for developing what is probably the Singapore Government's first AAA-rated website.

Go on, take a look. It doesn't look too bad either, contrary to what some might expect. Their site conforms to three international standards.

I attended the seminar organised by Design AFA and supported by the Disabled People's Association today at Harbourfront Spinelli's and it was a positive start. I can understand how Government agencies are targetted first, because it's less likely that a private company here will bother to expend more time and money making their website accessible, where it is difficult to establish an increase in return on investment.

We live in exciting times.

I wrote a letter to IRAS. Below is the full transcript:

Dear IRAS,

I have had great difficulty e-filing my taxes the past few weeks. Every time I log in I encounter an error page. This happens even after clearing my browser cache. The website is much slower than in previous years. Altogether, it is frustrating because all I need to do is fill in just one more field!

I do note that certain aspects have improved. I am grateful that most of my taxable income has been filled in already, making it more convenient for me.

However, there are other aspects of the site which are not user-friendly. For instance, when prompted to change my password after logging in for the first time, I was not sure what sort of password to enter. I recall seeing an example of what a password should be. Yet, I was told a few times that each new password I keyed in was unacceptable.

Rather than just giving examples, it would be more helpful to say upfront that it has to be alphanumeric and contain a specific number of characters. Lack of clarity forces users to re-submit new passwords multiple times. This wastes our time and adds unnecessary load to your server. Also, we should be told whether passwords are case-sensitive.

I strongly suggest you consult a usability consultant to prepare for next year's e-filing. There is at least one such consultancy in Singapore and other civil servants have attended their workshops (www.microusability.com). My organisation hired them and vastly improved the usability of our website.

Next, I'm not certain why Netscape is supported but not Firefox. For next year's e-filing I hope you take this increasingly popular browser into consideration. The website looks skewed in Internet Explorer for Mac, which is another common browser that isn't supported here. I am, however, grateful that you do support Safari.

There are lots of small ways to ease the server load. I looked at your HTML code and some of it was unnecessary. Your designer uses Cascading Stylesheets (CSS), which is good, but she uses it in a limited way - to change fonts and colours. You can actually use CSS to position every element on your website and many other things, reducing the need to use tables for layouts. One CSS file can control the entire look and feel of a website, and you only need to load it once, as opposed to loading lots of 'formatting' code for every single page.

CSS is also recommended by IDA's Web Interface Standards (which I believe all Government agencies must comply with), and by the World Wide Web Consortium (www.w3.org/Style/CSS/).

Also, even though CSS was used to control font appearances, your designer still used font tags in some areas of the site. Again, this is more unnecessary code because once you use CSS, you don't need font tags anymore. Same goes for unnecessary 'br' tags and '  ;' spaces - CSS can handle alignments, cell paddings, and margin spacings.

Your designer should look at this site, which shows that you can make functional AND good-looking websites with CSS: www.csszengarden.com.

Lastly, I hear that one major reason for the slowness of this year's e-filing website could be due to SingPass. Whatever the case, I hope your administrators can resolve this problem as soon as possible. Almost everyone I've spoken to - friends and colleagues - have also experienced the same error messages on your website. As the filing deadline draws nearer, some of us are increasingly concerned that we cannot file our taxes in time.

I hope you think of us as customers and not as an obligation, and see my advice as an endeavour to help you improve your service.

Thank you for your time.

Best wishes,
Vanessa Tan.

[My auto-acronymiser seems to have sprung into full gear...]

I'm looking for articles, statistics and any other relevant information that can help me argue a case for the implementation of Web Standards in my company. I don't have much time to prepare my proposal (like, tomorrow) that's why I'm asking around.

The main problem is that Web Standards aren't really that important if your job is about making a website look attractive to a target group. You can be good at coding pages but who will know (unless you create some massive JavaScript problem that prompts a popup/security alert)?

The truth is, bosses don't read code and it's not one of our key performance indicators (KPI). If the page loads, the page loads. Saving a few KB of space per page means little to them. Only you (and God) will know the extra effort you put in. Meanwhile, everyone else around you who doesn't bother doing it, has more time to complete other work.

The power of stylesheets has also been eroded by another technology - the Content Management System. Most big organisations already have a CMS, so why utilise stylesheets to their full potential when everything's in a template already? The CMS takes away some of the controlling elements that stylesheets have (in terms of positioning and colour schemes).

We codies may love Zeldman, Eric Meyer and CSS Zen Garden, and I know Jeffrey Veen's written an article but that's too general and targetted at an audience that is somewhat enlightened already. We can't push through a vague paper without looking foolish and having our proposal backfire on us. I mean, try talking web standards to these groups:

• Senior business managers who don't know much about technology and don't want to spend money on intangibles when they do not lead to substantial savings for their company. (Reduction in bandwidth costs isn't good enough. Corporate web hosting fees are much bigger and those who are paying it, can afford it as it is)
• Busy executives who are simply trying to get their websites launched in the shortest time, satisfying all the content and visual requirements, usually on a fixed budget, with their performance reviews at stake, working with companies who know nuts about web standards

In fact, in all these aspects, usability ranks pretty much above web standards. In my case, I am responsible for a public service so my team needs to ensure that customers can find what they're looking for as quickly as possible; that their needs are met; and if not, that they should have a channel of communication to request for more information. You can have a website that's beautifully coded, with valid XHTML and stylesheets, that is difficult to use. You'd have won the battle, but lost the war. A lot of things need to work hand in hand for an optimal result, but some things are more important than others in satisfying the objectives.

But a little part of me (the part that joined WSSG - our Singapore web standards group) is nagging at my conscience, knowing that the job could be done better, that web pages could load a microsecond faster, that thousands of web pages could be controlled more easily with proper use of stylesheets.

And that comes back to why I need your help.

Updates

1. Found a presentation on Standards but it may not be suitable for management level as it's too technical
2. I forgot - who needs Web Standards when all we are allowed to use is IE?
3. Griping aside ... maybe I could argue that using Web Standards makes it easier to migrate pages into other mediums like handheld computers and phones? (However that's still a fringe activity as our mainstay will always be computer browsers).
4. Sadly, coming to think of it, none of my marketing or business books mention using Web Standards. Instead, it's all about strategy and communicating to your audience. Web Standards still belong in the realm of the geeks.
5. How do we explain the importance of XML or web services, in a country whose news websites don't even have XML newsfeeds? People are not exposed to these possibilities in the first place, so they do not understand their potential.
6. God's Smuggler, by HicksDesign, is a spanking good example of how to create a beautiful, usable website with web standards. More of this, please! I need to show it to management ...

... to file my taxes.

This year, Singaporeans log on to mytax.iras.gov.sg.

Curiously, I am told that my browser is not Java-enabled. Checking Firefox's preferences, I do have Java enabled.

Viewing the FAQ section on how to fix this problem, there is only help for Mac users of Netscape 7.01 and Safari 1.2.3.

I'm in a similar situation when doing Internet banking. I suppose Safari has to be my de facto browser for secure internet transactions.

...Is like living without my right arm.
I can still get things done

But it's like walking 3 sides of a square
to get to the same point.

Every time I think of opening a new page,
I reach out to hit CTRL-T but then realise
It doesn't work that way any more.

I did that too many times today.
I stopped myself, because it felt silly.
As if something would happen in IE!

So my taskbar's cluttered now.
Programs, Documents, and a gazillion browser windows.
I do lots of things at the same time.
Now it just takes me longer to locate a window.

And I can't open multiple pages
With the click of a button anymore
It's one by one by one by one...

The customised version of IE we have to use
prevents me from changing the homepage URL
and usernames or passwords cannot be stored

So nothing's done anymore with just a click of a button.

And it takes longer for me
To find what I want.

Worse, I nearly lost the Google Toolbar.
I begged to keep it
Because that was the closest thing to Firefox
That I had left.

At least it let me search Google
And block popup windows
For free.

Want tabbed browsing on *ugh* Internet Explorer? You can have it, as advertised on Microsoft's Windows website. It even comes with a popup blocker *ooh!* and a search bar *wow*.

However, it costs US$29.95. And the reviewers of this software don't seem to realise there are better products out there, going for free.

Get real. Get Firefox!

Firefox revived

Yesterday I forwarded this BBC News article about how Mozilla browsers have taken 7% of the browser market share at Internet Explorer's expense, to my boss and team-mates. Happily, a team-mate backed me up and suggested we needed these browsers in the course of our work. Even better, my boss said he had just discovered Firefox a month ago, installed it at home and found it better than IE!

So we've requested the IT department to install Firefox as well as Opera on our systems (fingers crossed). We're the Internet team, after all. We do need to test out our web pages on our own PCs.

Farewell to my playlists

Last night, while iTunes was playing, my G5 hung (it hangs every other day now, which is very irksome). So I force rebooted the system.

When I started up my G5 again, iTunes was blank. Zilch. No playlists, no songs! Fortunately the music files, nearly 5000 of them, were still in the same folder on my hard drive. I managed to import them all back in. But the iTunes database file was corrupted, and importing the iTunes XML file didn't do anything except add a 'Shuffle' playlist which was blank. Importing it again just duplicated that playlist.

As I don't have time to figure out how to restore a corrupted database file, I'm just going to close my eyes and hit the 'Update Songs' command, and watch my song ratings, playlists, and play counts disappear.

Sob...

Web standards buddies - Do you have any hard evidence that the failure to close HTML tags is detrimental to the wellbeing of a website? I'd hate to have the wool pulled over my company's eyes just because our vendor says 'it's OK, IE will display it anyway'.

Our website isn't XHTML compliant yet, though we are required to attain one 'A' for accessibility. My main grouse is that our new CMS rewrites the XHTML-compliant code I paste in, removing closing tags such as 'li'.

Research findings e.g. slower rendering time in web browsers, incompatibilities and all other reasons are welcome. The benefits of keeping clean code in order to facilitate migrating to XHTML in future is a little hard to explain at the moment, but I hope to further this cause in time.

Kindly post your findings and I'll log in regularly to approve them all.

I just submitted my WSSG (Web Standards Singapore) logo. I've decided that nothing I'm going to do in my life will ever be perfect, and my work isn't going to get richer with age, unlike wine, so there's no point keeping it till the last moment.

It's only when I do things like this, however, that I suddenly remember all the times I muttered, through gritted teeth, "I hate print work." But I've forced myself to use Freehand for print layouts, because I know it's good for that, and I always like to learn new things.

I'm essentially a Fireworks user at heart, and when I do have to use Freehand to edit illustrations I get thrown off by the fact that many shortcut keys are different. Hello, Macromedia? Can we have a bit more coherence here! Or maybe the two programs are really different from each other and I'm just not getting it.

I also get thrown off when elements in a document are saved as external files, and when fonts I export to another format get changed. I'm a webby by nature - spare me the ink.

Anyway, I'm looking forward to some good submissions from other members. I hope we're spoilt for choice.

A long time ago, as a frustrated web designer whose client noticed that a Flash form didn't go to the right fields when the 'tab' button was used, I realised that there were very few good resources on the web that actually taught you how to code your forms properly.

So when I did figure out the answer, I decided to put up a Flash tutorial (with a ready-to-go file download). I linked it on my home page once, it was picked up by Google, and for one and a half years it's been turning up fairly high in the rankings despite the fact that I have not mentioned or linked to it since then.

This however is perhaps the second or third 'Thank-you note' I've received from people who've used my tutorial:

I just wanted to say thanks for putting the flash mx tab order fix on your site. I have been trying to find the correct code for a few days now. In trying other people's code, I have noticed that yours was the only one that worked for me, and for this I say thank you.

I'm glad I'm helping some people in my own way to make their website more accessible. Thank you for thanking me.

[Disclaimer: Slacker as I am, this is the only tutorial I've done, and I haven't even completed the second part of the tutorial which teaches you how to de-activate other elements from being tabbed. And yes, this was not produced using the latest version of Flash.]

Jakob Nielsen has posted a review of the usability of the Bush and Kerry newsletter campaigns.

Unfortunately, Bush seems to be winning, though by a slim margin of 1%. As in real life, both sides have some way to go.

I am glad to announce that, a month into my new job, I have embarked on my mission to promote the benefits of Web Standards.

First, I emailed some colleagues the link to CSS Zen Garden, just to let them know that our current website's use of stylesheets could do much more than simply colour the titles of our page.

Previous attempts in other jobs have evoked mixed responses, depending on whether people think it will create more work or make life easier for them (I'd like to think it does both - more work at first, reworking messy code, then all they have to do is switch styles).

So this time I went out of my way and demonstrated to a team-mate how you could retain the source code of a web page, but drastically change the look of the site. I mean, why should we waste time changing font tags on every page and moving table cells about every time we needed a revamp?

Thanks to my persuasive / arm-twisting skills, we might form a taskforce that looks into Web Standards beyond the forthcoming guidelines, and a more comprehensive use of Stylesheets to streamline our workflow. Wish us success.

Of course you could say that redundant coding techniques create jobs for our recuperating economy. If life was as easy as Zeldman and Co. have made it out to be, then what about the hapless designers who are still arranging their lists using GIF images and table rows, and forgetting to close their paragraph tags? What about the millions who have never heard of Mozilla, and only check their pages on Internet Explorer on a PC? Would this mean that agencies would have to charge clients less, now that a simple revamp could involve only the switching of a stylesheet and some images?

But let's not get carried away: I feel that a site's main purpose should be to inform, or entertain, or project an image of the company's brand. Essentially, it has to convey some sort of message in an appropriate manner. And I know many visitors may not notice that the web page they're clicking on is standards-compliant. But perhaps the odd visitor with a visual problem, an outdated browser or operating system, may notice that your side degrades gracefully into something legible which they can at least navigate.

It could actually boil down to your definition of technology. Should it be used exclusively by the most affluent and intelligent of people? Or should it be extended to people from all walks of life (who are able to access the internet)?

Certainly it is a chore, especially if you're a designer or programmer who thinks coding pages is drudgery. Perhaps I may be asking too much for you to re-think the way you code your pages and re-learn everything they've ever taught you in design school. Your boss probably isn't going to pay you more for doing it, and it won't show in screen-shot printouts of your portfolio. It is a long-term commitment, because there is no such thing as 'half-compliance'.

We also have yet to see any legislation equivalent to Section 508 (though we have legislation for almost everything else). However, I know that this situation will be changing, at least for government websites which are accessible to the public. The guidelines make good sense and also refer to the Web Accessibility Initiative.

Note also that I say 'accessibility' and not the whole Web Standards compliance outfit. Good things take time to bear fruit. But let's just say, things are changing, and it can only improve our online experience.

I should have publicised this a few months ago, but better late than never. A handful of Singaporeans who believe and trust in the virtues of Web Standards, is forming a local community.

Since I still get a healthy number of referrals from Web Standards authority Jeffrey Zeldman, I will take this opportunity to spread the news to everyone who's possibly reading this.

Nearly a year ago, I was pretty cynical of the reception that web standards was getting with most clients and web designers themselves.

To date, I haven't notice much improvement in the industry, although I was glad to know there were at least eight (8) other individuals - at present time of writing - who cared.

Do you care, too? Contact Jaime via this form, and join the force.

Sometime, somewhere, someone's going to write about interdisciplinary approaches to solving life's complex problems if they haven't already.

One good example would be what I experienced today, while deciding on the layout for our new kitchen. Budgetary issues aside, we made modifications and decisions using a mix of common sense, experience and ... some old web design know-how.

An excellent document on Web Standards from 456 Berea Street.

Take the Web Standards - Who Cares Anyway? survey.

Grr! Buying tickets to Vegas shows is a pain.

Some sites don't think there are any other countries in their dropdown menu except for USA, Canada and Mexico. Another site actually remembered to include Japan. (Go, Asia! Go!)

I also felt mighty uncomfortable after hitting the submit button and ending up with an error page.

I also do not like the fact that I am forced to enter a US number where the fields prevent me from keying in extra digits. My telephone number will therefore be incorrect.

Slightly troublesome are page which disappear once you try to go 'back' to change something. Another site had the 'submit' button on the left, and 'reset' on the right - I nearly got them mixed up.

Oh, and these people drive on the wrong side of the road, too :-P

I love the new Mozilla Firefox. But I noticed something funny this morning when I tried to access some of my usual news websites.

The scrollbar was missing. When I tried to get around this problem by using the PgUp and PgDn keys, my page appeared to scroll down, then a split second later bounced back to the top again. The normal 'down' arrow worked fine, though.

A quick search on the Mozilla website didn't reveal anything, but I did find out that other users experienced the same scrolling problem (see the comments postings on Firda's entry here).

Turns out that if you use alternative themes for Firefox 0.8, the scrollbars won't show. So for now I'll bear with the default version until the bug is fixed.

[Update #1: It appears that the scrollbar works with other themes I've installed, so it could be a problem with the individual themes and not Firefox. Thanks to Cheah Chu Yeow for the tip. ]

[Update #2: Those of you using Accessible Image Tab Rollovers (a la Fast Company) need to delete an extra line of code to make the rollovers work. More details over at Simplebits. ]

I don't know what happened to the Lean Dean campaign machine, but that is one flashy events calendar.

It's fairly easy to use (this demo lets you edit entries), though it could improve on initial load time - subsequent updates were much faster. Also, visitors aren't able to select or copy the event descriptions, nor click on email links to contact officials.

There was an interview on Newsradio 93.8FM this evening with a spokesperson from a visually impaired association in Singapore. I didn't catch most of it, but my ears did prick up when they mentioned online text readers and how there is so much we can do to improve online accessibility for these people.

Duh, it's about time, I was thinking. The Americans and the rest of the first world have been proactive in enabling handicapped people to have as normal an online experience as possible. What is the point of being a technological hub when you leave your most helpless citizens behind?

In fact, about three years ago, my ex-colleague Adel Goh wrote about how she interviewed someone who said*, 'Why design for the blind? The Internet isn't for them'. Nothing much has changed since then. The local new media scene is still very much visually-oriented, and that is also because clients are much more impressed with a Flashy, tub-thumping website than a neatly coded (and labelled) one. Granted, the two categories are not mutually exclusive, but so far I have yet to see a locally-produced effort that qualifies for both.

In a way I wonder if this problem is a reflection of our society. Many people have commented over the years on how physically disabled persons in the United States are fairly independent, visible and mobile. Back here, I am curious as to why I never see any handicapped people - unless I volunteer at a Home. On rare occasions I'd see a few people escorting someone on a wheelchair or walking stick at a shopping centre - and that would be it. Is this because of our culture (shame/ not wanting to impose too much on helpers/ too inconvenient)?

What's more, I still see many people parking in handicapped lots - despite the threat of fines, wheelclamping or both (we call these the 'Socially handicapped', who are also 'visually handicapped' when they tell officers that they didn't notice the huge sign next to their lot.).

Regardless of how reality ties in with our virtual behaviour, it is something that has to change. And soon.

* - Time has eroded my memory but I do recall that was the gist of the interview candidate's statement.

After the useit.com redesign competition comes a proposal to redesign Slashdot. Also useful to read if you're thinking of reformatting your company website into something a little more compliant and semantic.

And here's the book we've been waiting for: Carrie Bickner's Web Design on a Shoestring. A positive Digital Web magazine review here. Considering the state of the local web design industry, I am sure a lot of frugal clients and managers will find this book useful, and know which areas are worth investing in.

You can read excerpts here. I'll be looking out for a copy when I next visit a computer bookstore.

I read the latest Foxtrot comic strip, and couldn't help giving a few pointers:

1. 'Nuff said.
2. Macromedia has a short and sweet explanation for using <strong> and <em> instead of <b> and <i> respectively: While the latter tags are not yet deprecated, they only achieve a visual effect. The former tags make more sense to screen readers which will read the text out more loudly. A W3C workshop on accessibility says: the use of EM and STRONG elements is superior in the sense that they describe the content without committing it to a specific format.
3. Jason isn't always polite, but he should try to mind his </p>s and </q>s.

Worth reading: A US marketing professor's damning report on the poor accessibility support found in the vast majority of private sector websites. Its conclusions are based on statistical evidence. In fact, the other articles on the Equal Access to Software and Information (EASI) website are pretty good reads themselves.

[Linked from Builtforthefuture.com.]

Jakob Nielsen on his two-hundredth Alertbox, outlining the milestones in his usability doctrines:

In what might be its most striking victory, the Alertbox ushered in the decline of the glamour design agency. Sure, there are still a few glamour agencies left, and a company that wants to waste money on an unworkable website can easily find designers eager to take the money in exchange for a beautiful, if useless, site. But the average Web design agency pays attention to usability these days. Most bigger agencies have hired usability professionals, and it's common for clients to actually request websites that work, not just pages that look good.

Eric Meyer reports of a new contest to redesign Jakob Nielsen's useit.com website. These are the requirements (visit the contest page for more information):

The design must use valid tableless XHTML 1.0, CSS, and it must meet WAI Accessibility level 1. JavaScript, GIF, JPG and PNG images may be used. Server scripts, databases, and plug-in based media are not permitted. Designs containing animated GIFs and Flash are acceptable, but will face tough scrutiny to ensure that they are accessible.

This sounds like fun. If I have enough time (good question), I might just take part in this contest. However, it is unlikely that the winning design will be implemented. Nielsen himself has told the organiser, that "it is highly unlikely that I will use the results, since my goal is to use the same design for useit.com as we have for nngroup.com".

Call me anal-retentive, but I fail to see how an association purporting to promote XML in Asia, has a website with no doctype, unclosed break tags, and no link to the W3 on its web standards page. Sample code was converted to image files. Some images with flat colours, were inappropriately saved as watery-looking JPGs instead of GIFs. No header tags, just lots of <b> tags.

They obviously have lots of information about the subject, but still haven't put it to use on their own website. Oh, just leave me to rant. For the full list of objections, read on.

This is an excellent lecture by (who else but) Jeffrey Zeldman. Screen captures aplenty, with no holds barred.

So many people have been directed from search engines, to a previous post of mine on tab orders in Flash, that I have been prompted to write a tutorial. On this page you will find notes from Macromedia (extra reading), a quick-fix solution in .fla format (no explanations given), and the proper tutorial, which you can click through (Flash player 6 required).

The rest of my tutorial site isn't ready yet; I'll write more when I have the time. My intention is to provide solutions on topics which others have yet to explain properly, such as the aforementioned accessibility problem.

I hope that some of you will benefit from my three years of web design experience, and that I myself will learn to become a better teacher. Any requests, readers?

In my previous post, some of you reported difficulties viewing this website on IE6. The problem is best explained as a simple, two-step process.

In my latest stylesheet, I specified a 1 pixel dotted border to go on the right side of my blog. In well-behaved browsers such as Netscape 6 and 7, Mozilla and Opera, it works.

In IE6, however, problems arise:

1) IE interprets '1 pixel dotted' as '1 pixel dashed'. That's one bug in itself. And it only happens when it's 1 pixel wide [I remedied this by making it 2 pixels dotted, but it doesn't look as pretty].

2) Next, IE renders pages in a certain way such that the dotted / dashed vertical line (created from the dot-to-dash bug) also prevents the text along it from displaying properly. There was a really profound article I read last year but I can't seem to find it now.

In short, it's all Microsoft's fault. Dig? That's why you can't read this clearly and lose text when you scroll this page.

Zeldman says pretty much the same thing, but since he's famous and his latest book has become a bestseller at Amazon even before its release date, I'm sure this statement of his will be meaningful, if rather abrupt.

In the same spirit, I'd like to say to Hell with bad browsers! or design a page that messes things up, such as the World Wide Web consortium's very own CSS page (the official primer).

But ... seeing how everyone, save for anal, compliant-crazed designers like me (about 0.001% of the online population) uses some version of Internet Explorer, I promise that my next redesign will not use CSS-specified dots, dashes or any other shenanigans that may disrupt your viewing pleasure ;-)

If you ran an internet consulting company, which of the following would you do?

• Purchase software or extensions to make your web pages accessible to everybody.
• Send your staff for courses on how to build usable, standards-compliant and accessible websites, instead of living with code that is archaic, bloated and difficult to update.
• Alternatively, give your staff time off to experiment on their own and encourage them to learn newer technologies and languages such as XML and even FML.

Or is this something you never considered before, or don't see as important? After all, you've a business to run. As long as the work's done quickly, the images are nicely spliced up and the web page looks fine on Netscape 4, you're happy. Training is expensive, and your employees can do without it.

As for accessibility, a web page is a web page, after all, and handicapped people really shouldn't be on the Internet. Why bother spending more time improving on things the client won't appreciate?

The last answer was a response my chief web coordinator from Project Eyeball received from a local designer / businessman (I can't remember exactly) over two years ago. Of course I have no idea if anyone's using a text-to-speech reader to view this site, but I do intend to make it more accessible to all even as I learn about accessibility. I haven't quite passed the Bobby test yet, but I'm determined to get it right one day.

There's one thing I agree with the US Government on, and that's section 508. People can and have been sued for making inaccessible websites in (where else but) America.

Check out also the W3C's Guidelines on accessibility.

Happy Easter, everybody. Let's make the world a better place in the best way we can.

I'm pleased to report that yesterday I learnt how to fix a Flash accessibility 'bug'. I had a problem with a Flash movie which had various elements such as movie clips, buttons and text input fields on it. When you filled in the first field, and hit the 'Tab' button, you'd be taken to the next nearest element - which unfortunately was a button. Thus the flow of use would be disrupted.

I searched some Flash forums and found that many people have been trying to remedy this problem since circa 2000 (the Flash 4 era). Flash MX, however, allows you to customise your tab order and disable tabbing for specified elements.

The Textfield.tabIndex property lets you set the order, where Textfield is the instance name of your input field.

The .tabEnabled property, when set to False, can be used on buttons and movie clips so they won't show up when you hit the Tab button while filling the form.

Voila. Note that since this is an MX feature, you must publish your Flash file as version 6. Your users also need the Flash 6 player for everything to work.

[ Update: Read my tutorial on Flash MX tabbing! ]

Meanwhile, over at UIE:

'...having a usable web site is not always enough to convince users to transact. Even if a user can complete a transaction on your site, doesn't mean that they will transact.

To be successful, sites must go beyond Usability by focusing on Persuasive Design. They must motivate users by taking advantage of persuasive tactics that will make them take action. The most persuasive web sites focus on making users feel comfortable about making decisions and helping them act on them.'

Continue reading here.