It’s a great example of intelligent people coming together to use technology in a selfless and positive way.

Check the site out at http://eq.org.nz, and see how you can help @ http://volunteer.eq.org.nz/

Make it validate as HTML5
Make sure you honor the semantics of HTML5 as well
Make sure that whatever you use would also work in IE6 and up

Sounds fine in theory, but that last one’s actually a bit tricky, because IE6 and IE7 don’t know about HTML5 elements.

HTML5 + IE6 + IE7 =

So if you do something like this:

[file lang="html" link="on"]code-snippets/ie-friendly-html5-1.txt[/file]

then IE thinks you mean

[file lang="html" link="on"]code-snippets/ie-friendly-html5-2.txt[/file]

which is totally not what you mean.. and your lovely styled HTML5 header will now collapse because it’s basically empty.

Known workarounds: CSS or JavaScript

There are workarounds, but to be honest, I’m not about to put my fellow developers through that kind of CSS hell to maintain a project that I’ve built, and the popular JavaScript solution is not appealing to me because I don’t like to rely on something as easy to disable as JavaScript is.

There’s also Chrome Frame, which is currently still in beta, and relies on users having adequate permissions, or the technical know-how to install it.

A PHP workaround

So I got my hands dirty with a bit of PHP to come up with something that, if not immediately usable on a busy high-traffic site, is at least going to let me do my homework with the minimum of fuss:

A function

[file lang="php" link="on"]code-snippets/pseudo_html5.inc.php.txt[/file]

An implementation

[file lang="php" link="on"]code-snippets/pseudo_html5_buffer.txt[/file]

How it works

This is pretty straightforward, and it would have to be, because I’m not a PHP-coder. Tracking down some appropriate Regex took a while and it’s possible that there is a cleaner solution out there, but it seems robust as-is.

1. There is an array of HTML5 elements, and the HTML4 elements they should map to.
2. There is a dash of Regex to find the HTML5 tags that need to be replaced.
3. When the page is served, the page HTML is rendered into a buffer.
4. We then loop through our array of HTML5 tags and replace any matches in the buffered HTML.
5. Then we empty the buffer and output the updated HTML.

Only for IE6-7

To prevent a redundant function call by all of our HTML5-ready visitors.

1. We test whether the page is being viewed in IE6 or IE7 by checking the user-agent string
2. If the browser is IE6 or IE7, we run the function. If it’s not, we don’t.

Caveats

Did I mention that I’m not a PHP-coder? I’m sure this could be done better by someone who is, but, regardless, it works as a proof-of-concept.

Some things to be wary of with this approach:

1. You certainly wouldn’t want the overhead of running the replacement every time the page was viewed.
   My thoughts are that this process would be triggered by a user viewing the page – if the page was already cached, the cached version would be used. If not the tag rewriting would occur and then the page would be cached. Or maybe a cron job could be added to automate this dual-browser caching.
2. The user agent string can easily be changed in many popular browsers. My personal feeling is that this is most likely something that only a power user (or developer) would do. Regardless, the worst possible outcome for these users is that they will experience well structured pseudo HTML5 instead of fully semantic HTML5.

Feel free to flame me in the comments with any other downsides that I’ve missed

HTML/CSS Syntax

To overcome browser differences in the stylability of HTML5 elements, I’ve used CSS class names which mirror the HTML5 tag names.

While this makes the markup a little more bulky, it means that CSS can be authored once and applied to all browsers, making it easier to maintain.

It also has the advantage that the class names are visible to and usable by all developers working on a project, not just those focussing on IE compatibility.

And finally, it is a ‘means to an end’, the ‘end’ being the improved document semantics available in browsers which support HTML5, and a graceful fallback in those that don’t.

HTML5

[file lang="html" link="on"]code-snippets/ie-friendly-html5-3.txt[/file]

Pseudo HTML5

[file lang="html" link="on"]code-snippets/ie-friendly-html5-4.txt[/file]

Shared CSS

[file lang="css" link="on"]code-snippets/ie-friendly-html5-5.txt[/file]

Validation

Because div and span elements still exist in HTML5, both the ‘real’ HTML5 and the ‘pseudo’ HTML5 will validate as HTML5.

A demo

If you made it down this far, it’s only fair that you should see a demo of this in action.

Cheers.

I’m enjoying the new default WordPress skin ‘Twenty Ten’, which replaces the questionable ‘Kubrick’ theme that used to be the default. The new skin uses the latest web technologies – HTML5 replaces HTML4, and WAI-ARIA roles have been added to add extra semantic value to the page, increasing usability in screenreaders and the like.

I’ve been been learning about HTML5 recently so it’s timely that I now have a playground for this which is outside of the constraints of paid work, and is as easy to work with as WordPress is.

In line with what I’ve been learning (and what I already know), I’ve made a few improvements to the Twenty Ten skin. I’ll document these in separate posts to keep these short and readable.

Part 1: Search widget

1. fieldset wrapped around the form elements, to group them (a personal preference)
2. legend added to fieldset, to act as a heading
3. input type changed from text to search, to pick up the new formatting options available in Safari (this degrades to a type of text in other browsers)
4. placeholder attribute added to input to display this text inside the field in Safari (this degrades to no placeholder text displayed in other browsers)

Apologies for the messy code highlighting – I’m still working on getting the beautyOfCode syntax brushes applying correctly.

HTML

[file lang="html" link="on"]code-snippets/ten-twenty-part-1-search-html.txt[/file]

PHP

[file lang="php" link="on"]code-snippets/ten-twenty-part-1-search-php.txt[/file]

At least 80% of humanity lives on less than $10 a day.

How much does that leave

• for a fast broadband connection with a high data cap?
• Or a shiny new dual processor laptop with a high def screen?

Are people that earn less than $10 a day

• boring?
• stupid?
• narrowminded?
• uninterested in what is happening in the rest of the world?

What Can Computers do for the Poor?

Could the wealthy 20% of humanity, with their armies of scientists and research facilities funded by wealthy benefactors share knowledge that could lead their fellow man out of poverty?

Could this knowledge be shared via the internet, to a shared community computer in a school or internet cafe?

Are having

1. JavaScript enabled,
2. Flash 9.0.124 (or higher) installed,
3. a minimum browser spec of Internet Explorer 7+ / Firefox 1+ / Safari 2.04+,
4. a minimum screen size of 1024×768,
5. a broadband connection,
6. and at least 2GB of RAM

all requirements to enable knowledge sharing?

Or are they barriers?

Ever considered the carbon footprint of all those server farms running 24/7 to serve up your sexy graphics?

Are any of these modern web development concepts helpful here:

• progressive enhancement,
• alternate stylesheets,
• bandwidth detection

?

How are most languages spoken?

Voice.

How are most languages read?

Written word / text.

HTML is text. Screenreaders convert text to voice. Printers print text.

Less is more. Keep it simple. Do the Right Thing.

Every week I receive a respectable email newsletter containing a bunch of links on topics related to making me a better web developer. Yes, even I am not perfect (you heard it here first).

In amongst a handful of genuinely useful articles, there are an increasing number of clone sites which at first glance appear to offer their readers The Elixir of Life in one short, easy to digest post.

Too often though, they just recycle content and rely on visitors to fill in the blanks.

Because they’re becoming something of a cliché I thought I would expose them for the money grubbing ‘entrepreneurs’ that they are (IMO).

It goes something like this. Follow along to make some extra cash:

1. Set up a blog.
2. Give your blog a nice Web 2.0 skin. If you can’t design, get a crack designer. Don’t worry if it costs a bit (see 11).
3. The title should have something to do with web development, and make you appear to be benevolent and only concerned with the welfare of other developers.
4. Read other blogs, copy their content. It doesn’t matter if you’re somewhat short on content, see 12.
5. Add ads. This is the real reason for your blog, but no-one will know except you (and me). Also, try and keep the total number of ads down to 10 or less, scattered around the page – or someone else might cotton on to your scam.
6. Create a blog post.
7. Give your post a totally unbelievable title – this will guarantee that you will get lots of trackbacks from people wanting your magic content on their site – or in their respectable mailing list.
8. Add a dash of content. If you know there’s something that’s missing, don’t bust your ass to learn about it – see 12.
9. Post it and they will come – developers I mean.
10. The NKOTB will read your post and thank you, thank you, THANK YOU!!!
11. Because the NKOTB now trust you they will probably blindly click your ads. Ching ching.
12. The experienced devs, on the other hand, will critique your content, tell you where you stole it from, and – most importantly – tell you what you should have posted, supplying links to some real gems that only real developers would know about. In short they will spill their secrets to you.
13. Now you have lots of good content from people that know what they’re doing. Plus you have loads of trackbacks from people keen to show that they too know what’s hip and cool, and that they are also benevolent and only concerned with the welfare of other developers.
14. Rinse and repeat.

]]> http://dotherightthing.co.nz/2008/11/18/the-elixir-of-life/feed/ 0 playgroundnz http://dotherightthing.co.nz/2008/10/04/flow-on-benefits-of-considering-accessibility/ http://dotherightthing.co.nz/2008/10/04/flow-on-benefits-of-considering-accessibility/#comments Fri, 03 Oct 2008 13:14:14 +0000 dotherightthing http://www.dotherightthing.co.nz/?p=28 Continue reading →]]> ‘Oh, great’, I hear you say – ‘another bill’.

Well ok, yes, if it’s from Telecom, it probably is another bill.

But it’s what’s different about this month’s bill that got my attention.

You see, I’d just returned home, after spending the best part of the day picnicing with friends in Dunedin’s botanical gardens (which incidentally were planted by my partner’s great grandfather. He did a splendid job and on a beautiful summer’s day they look great – respect.)

Anyway, our picnic friends were a couple, Tom, who works in the web department down at Otago Polytechnic, and his partner Francis, who had recently returned from Australia after finishing her PHD. It was the first time we had seen them together, and they made a lovely pair.

After the initial introductions and a bite to eat, the girls and the guys paired off, and the conversation between Tom and I naturally turned to web accessibility. It’s something we both feel strongly about and try to incorporate into our working life as much as possible. Unfortunately with the conflicting priorities of marketing people, designers, and those holding the purse strings, accessibility often comes off second best, so we inevitably found ourselves moaning about the state of commercial websites in NZ, and our desire to make them better.

Lightening our combined consciences by airing these issues, and seeing the sun disappear behind some grey clouds, we agreed to meet up later to share techniques and knowledge, said our goodbyes and headed our separate ways.

Returning home afterwards, then, I was actually quite relieved to retrieve this bill-like envelope from the letterbox.

And why was that? Check it out. This corporate communication just has ‘Accessibility’ written all over it.

Now I’m not sure if Telecom are suddenly making an effort to reclaim marketshare, or whether they’d simply outsourced their mail design to a different printer, but two things jumped out at me:

1. the size of the typeface, and
2. the size of plastic window.

As an ex-postal-worker, I can immediately see a number of benefits in the updating packaging:

1. older people can read the address without donning their spectacles, so they won’t open your bill by mistake (your 0900 call logs are safe and sound).
2. the postie can get the bill to the right person the first time.
3. the address can’t slip down out of view of the plastic window.
4. it looks professional, but not in a we-want-to-sell-you-something kind of way
5. the envelope is, naturally, white, but within the plastic window there is also a lot of whitespace.

Now let’s assume that Telecom were thinking about the end-user here, and figured that they could make their bills more accessible to older people by increasing the size of the address text. This, despite the fact that they’d probably prefer to funk up their correspondence so that it appealed to the younger crowd, you know, the potential customer base that are going to be around longer, and thus make them more money. No, instead they considered the communication needs of the secondary, older audience. Brownie point #1 granted. The envelope is more readable and more appealing.

But look at the flow-on benefits. The NZ Post sorters can read the envelope more easily, which helps efficiency when they’re processing thousands of letters a day. And some of those mail workers are probably pretty old too… but even for the younger ones, it’s a welcome relief from 12pt type and of course the scribbly hand-written nonsense that many non-corporates are responsible for. The end-result here is that the sorter’s job is easier and the letter gets to the correct delivery branch quicker. Brownie point #2.

And the postie (read: ‘Postal Delivery Officer’) also benefits. These guys street sort the mail after it’s been zone sorted at the mail centre. They spend the early hours of their day sorting and bundling mail, before heading out on the fun part of the job – delivering it. Despite the well-known risks of territorial dogs, lonely old people, and impatient shop assistants, there are also the less well-publicised annoyances, like addresses slipping down below ‘the fold’ in transit.
So instead of rapid fire delivery into suburban mailboxes, posties find themselves constantly stopping and tapping envelopes to unhide the last few lines of the address. And when it’s that time of the month, and there are thousands of bills to deliver in a short timeframe, your local postie definitely appreciates any extra thought on the part of the product designer. So Telecom score brownie point #3 for making the messenger’s job that much easier.

Now, maybe Telecom didn’t think about the flow-on effects, or maybe I’m barking up the wrong tree and picked the wrong NZ corporate to pin my moral hopes on. Maybe they don’t give a toss about old people, and they just wanted to save money by getting the mail out more efficiently. But no matter what the goal was, the point is that they put it a certain amount of considered effort, for X return, and they got X+Y+Z real-life benefits out of it.

And it’s the same for web accessibility. For example, you might code in Alt attributes and skip links to add blind users to your potential audience, and inadvertently the sighted yuppie on the mobile device also benefits. Or you could increase the size of the typeface for customers with poor eyesight and actually make your design seem friendlier to new customers.

The message is: you put in a certain amount of considered effort for one user group and inadvertently you increase your appeal to other user groups.

So, next time your Project Manager or client tries to pooh-pooh your attempts to incorporate universal accessibility into your site build, have them consider that money well-spent now translates to added value in the future.

And corners cut now – well they might just cut you out of some very lucrative new markets in a couple of years time.

Postscript: Upon opening the envelope it turns out that Telecom are actually running a ‘Bigger is better’ broadband campaign… so only time will tell whether they keep their brownie points or go back to 12pt type.

Here’s one I saw a few months back, in the Webstockers Friday jobs edition:

• Modern, efficient X/HTML and standards compliant hand written coding (we don’t use Dreamweaver or other WYSIWYG editors, etc)
• Photoshop – ability to originate/manipulate graphics for web

I see this far too often, really, and it always bugs me.

Why are they so pro-Photoshop? Why not write “we hand draw our graphics pixel by pixel (we don’t use Photoshop to originate/manipulate graphics)”.

Come on people, that anti-Dreamweaver attitide is so 2000. Dreamweaver is a development tool, and as such it’s up to the developer to use it correctly.

I build standards compliant sites, and I use Dreamweaver. I handcode in Dreamweaver, no less. Go figure.

I use Dreamweaver for its ability to introduce efficiencies into the coding process, e.g.:

• auto tag completion,
  to save me typing out the same code over and over
• code colouring,
  to help my tired eyes scan for mistakes
• built-in reference material (as well as Google)
• file organisation,
  in particular the file linking and the FTP synching
• Dreamweaver templating,
  for clients that do not have a budget for CMS development
• automatic code formatting,
  (indenting etc)
• find and replace,
  across multiple files
• integration with a test server
• fast preview in multiple browsers

Using Dreamweaver does not mean that:

• I am going to build every site using tables
• I am going to drag and drop all manner of Adobe JS/AJAX widgets that I do not understand into my site
• I will rely on the little browser checker to do my testing for me
• I will rely on the design view to do my testing for me

When it comes down to it, you’re advertising for a person to do a coding job because you can’t do it yourself. Why not let them decide which tools they want to use?

P.S. I handcoded this myself in the Blogger editor. Woohoo.

My first thought was that maybe an automatic Windows Update had somehow adversely affected my install of IE6. That’s not usually my first thought, but for a previously tested and working HTML page to suddenly start crashing all by itself? Nup, no way was it my CSS. To be honest it was just as unlikely that it was a Windows Update that was at fault either, but it was worth a shot.

So I went into my XP Control Panel (“Add or Remove Programs”) and Googled the last couple of Windows updates.

Security Update for Windows XP (KB937143), installed on 15/08/2007 turned up some worrying info – apparently some guy in Germany had noticed that IE6 had started to crash “while accessing at least one site”, after installing the GDR version of the update. Maybe I was on the right track?

After a bit more Googling, I arrived at the MS support page for MS07-045: Cumulative Security Update for Internet Explorer.

Completely missing the ‘IT professionals‘ link at the top of the page (maybe that says something) and finding nothing useful anywhere else, I ended up Googling the update name and got to a page about Microsoft IE Crafted CSS Unspecified Memory Corruption, which told me of
“a flaw that may allow a malicious user to gain the same user rights as the logged in user. The issue is triggered when IE parses certain strings in CSS. It is possible for a malacious person to construct a specially crafted website which could remotely execute code on the visitor’s computer.”

I wondered who these ‘malacious’ people were? And why didn’t they just stick to the accepted label of ‘malicious’? Clearly they were social outcasts, determined to make my life harder by forcing me to rewrite my CSS so that it didn’t look like it was attempting to trick people into giving up their Facebook passwords.

A bit more Googling and a bit more info from this page which explained that “The specific vulnerability exists due to improper parsing of HTML CSS ‘float’ properties. By ordering specially crafted ‘div’ tags in a web page, memory corruption can occur leading to remote code execution.”

To cut a long story short, the page in question was debugged after I followed up the notion of improperly parsed ‘float’ properties and ended up at an old post on Eric Meyer’s site. This kicked my brain into revisiting the CSS, and after some playing around, I resolved the issue by adding a couple of lines of otherwise unnecessary CSS, to prevent a floated list from bringing the house down in IE6.

I still don’t know whether Microsoft or KB937143 were at fault, or whether the bug was always there and just waiting for the slightest encouragement, but the afternoon’s debugging has made me feel that much less secure about developing CSS for Internet Explorer.

Inevitably, this means that every now and then I have to pull a project manager, client, or designer up on inaccessible content or a poorly thought out design.

So, I might say things like, “is there an HTML alternative to this Flash content?” or, “the Web Guidelines Web Standards* say that you can’t use colour alone as an indicator of x“ (*the Web Guidelines Web Standards are great for enforcing personal beliefs and they’re pretty much the main reason why I code the way I do today).

It never ceases to amaze me that nine times out of ten their default response is something along the lines of ‘But blind people can’t do that’.

It’s not even a question (‘But blind people can’t do that, can they?’), it’s just an automatic statement – one that the speaker feels totally justified in sharing with the world.

Because ‘blind people can’t do that’, there is thus no need to implement my suggestion, and another piece of partially (or totally) inaccessible content joins its friends in the matrix.

The thing that bugs me, is that we’re supposed to be living in some kind of über information age. Why then, are otherwise well-meaning people, with the power to make a difference in the lives of others, so ignorant of the needs of their fellow citizens?

In the case of today’s ‘stand-off’, a couple of quick and fruitful visits to Google gave me the virtual ammo I needed to prove that ‘yes’, blind people could indeed partake in the activity in question. Armed with this I managed to bug the project manager in question enough that he bugged the client in question into finally accepting my recommendation So, all’s well that ends well, this time..

They had a feature on India, and because my partner rates India I thought I’d check it out. Well whatever else I found faded into nothingness when I discovered this gem of a webpage, for the

.o:O:o. Delhi Tourism and Transportation Development Corporation .o:O:o.

Yes, those wonderful circles were already in the page title (I wonder how they help their Google ranking?) Now, we all know that most clients like a bit of animation and movement on their otherwise corporate homepage, but come ON, isn’t seven counts going a bit far? Or does the average Indian web surfer have an even shorter attention span than that of his over stimulated Western counterpart?