Why 6 Words

When we first started working on Teachersday.sg, we put ourselves on a shoestring budget. We weren’t planning on using any formal form of advertisement. We needed something that was “viral” in nature. Sorta like the cute photos of bunnies everyone forwards around via email. The print ads and radio spots were unplanned, but something we’re grateful to the guys in the other division for. 🙂

Somewhere between brainstorming and procrastinating I came across an article by Wired entitled “very short stories. The concept stuck.

I know you’re probably reading this because you’re upset that your note of thanks has been constrained to a mere 6 words. I have no doubt a longer account would have been easier to write, but we didn’t want this year’s Teachers’ Day website to be like the rest of the other years’.

So we’re counting on you to showcase your creativity, ingenuity and wit. You can leave a note that’s as simple as “Thank you for teaching me well”, or really put on your thinking cap to craft a message worthy of Hemingway.

Six words. We issued the challenge.

Meet it. We know you can.

Saying thanks need not be verbose.

Just speak it from your heart.


Inserting tick marks (or checks if you’re American)

The HTML entity for a tick (or check, but we’ll call it a tick since we’re using British English) is &10003; which generates &10003; for those of you using a browser outside of the immensely popular, but oh-so-last-millennium Internet Explorer 6. IE6 renders a placeholder box as it does not recognise the entity.

What it does recognise is that the letter “P” in Wingdings 2, which also gives us a nice tick: P for your IE6 users. Modern browsers like Firefox 3 will probably not render wingdings, even if installed on the computer.

So we have conundrum, and it seems the only way is to produce forked code, using conditional comments.

Doogal Bell has a good blog post on inserting tick marks, but I feel his use of the input field to generate a tick isn’t particularly semantic, so I’m sticking with Wingdings for the IE6 crowd.

So ultimately we have:

<![if !IE]>✓<![endif]>
<!--[if gt IE 6]>✓<![endif]-->
<!--[if lt IE 7]><div style="font:bold 1.2em 'wingdings 2'; text-align: center;">P</div><![endif]-->

If you’re not using an IE browser, feed the proper HTML entity &10003;. If you’re using an IE version greater than IE6, also feed the proper HTML entity. If you’re using an IE version less than 7, feed a div with inline CSS specifying Wingdings 2 as the default font, bold for a little extra weight and aligned centre. Yes I know the inline CSS is as evil as font tags, but if I’m going to be specifying the wingdings font, I may as well format it right.

Note to self: I should apply the same text formatting on the HTML entities, but in the system css files, targeting content inside table cells.

Inserting Paragraph Numbering

One of the idiosyncrasies of the public sector is that paragraphs in documents such as press releases are numbered. Rather than code entire press releases in ordered lists when paragraph tags are a better choice semantically, I opted to use javascript to insert paragraph numbers.

Fellow blogger Divya Manian;
was kind enough to contribute a slice of javascript for this purpose, given that my own javascript skills are non-existent.

// contributed by Divya Manian (http://nimbupani.com/)

function insertParaNumbers () {
var paradiv = document.getElementById('media-body');
var paras = paradiv.getElementsByTagName('p');
j = paras.length;

for(var i = 0; i < j ; i++ )
lineno = i+1;
insertvalue = "<span class='lineno'>"+lineno+"</span>";
paras[i].innerHTML = insertvalue+paras[i].innerHTML;

window.onload = insertParaNumbers

Problem is, paragraphs within #media-body that fall under lists (ordered or unordered) do not need the insertion of paragraph numbers. How would you exclude these paragraphs from the loop?

I tried to use Prototype’s childElements to define paradiv as only children and not grandchildren of #media-body. Didn’t manage to get it to work.

Capitalising the Necessary

It’s probably quite ubiquitous, but quite a number of government webpages use ALL CAPS to denote something important. Like someone’s name, or the title to a press release.

I recently had to recode a list of more than 300 names, which was given to me in capital letters. I could get someone else to retype those names line by line, but I couldn’t even bear the thought of giving this job to a sentient being of any sort.

Never thought I’d be saying this, but thank goodness Microsoft Word does these nitty gritty things like changing the format of all text. So I hit the shortcut key, do some major search and replacing to htmlise the content. Tadah, I have the page.

Rats, didn’t take into account the fact that some of the more illustrious names on the list have acronyms behind them, denoting qualifications or summat. Gotta be careful when using a sledgehammer I guess.

Logo Replacement

There are so many image replacement techniques out there I’ve lost count. Some using negative margins, super-small fonts or display:none, the reports are that some of them aren’t accessible.

But why replace images at all? Isn’t the alt attribute meant to replace images with text, rather than a contortion of CSS techniques?

For the MOE Website we used negative margins to do the image replacement for the MOE crest on the top left. However, under it is a black-and-white version of the crest. This is used in the printer styles, and will also be printed by browsers that aren’t CSS-enabled. The black-and-white crest has alt text to make it accessible should images be turned off.

I’m sure there are many ways to skin this particular cat.

Favicon Creation

Chami.com has a nifty online tool to create favicons, but the background of your favicons will be white. For proper transparent favicons, download the favicon (.ico) photoshop plugin from telegraphics.

Non-javascript Navigation

We finally solved the navigation problem. Though the number of users who have CSS-enabled but javascript disabled is small, untangling this dead-end was a priority for us because it is one of the basic guidelines for good accessibility.

The Solution

The current navigation needed javascript to function, so we wrapped a <script> tag around it and had it generated via a document.write. We added a <noscript> underneath it that called a server-side include for a non-javascript version of the navigation. Clicking on the roles without javascript enabled now brings you to separate websites housing the links you’d get from the slidedown menu.

It took a while to shift pieces of code for reusability’s sake, but I’m glad we got this out of the way.