Mootools Enhanced Elements – How Web Developers Should CodeContent

by keif on December 16, 2008

Toby Miller has released his Mootools Enhanced Element Script to the masses on MooForum – and it’s a sweet idea that falls inline with how web developers often describe as “how they always code.”

How should Web Developers code?

Everyone has the basic understanding of how they should be coding – semantic, clean code. They should be coding with the idea that screen readers should be able to easily navigate the site (you know Target tried to fight accessibility in court?)

You should be starting with your content in mind – and often it’s always gone – Header, Body, Footer. But why?

Generally, we always assume people want the navigation (in the header) at the top. We then include accessibility links to allow them to be skipped. Download lynx and test for yourself – and then hit up some e-commerce sites and see how many use it (I know that does, outside of e-commerce). Of course, this leads to the question – why include a link that is necessary when we can manipulate the appearance for visual browsers?

Content is King – so treat it as such!

Why do we lead with our navigation when it’s the content that matters? Content – Navigation – Footer – why isn’t this how a page is coded? It’s something I’m struggling to wrap my head around and start pushing forward with in my own code – to be accessible, and also to show it *can* be done. Code should be clean and simple! And I hope to see a return to simple websites in the future

After you’ve got your clean, validated code – now you manipulate it with CSS – you take your skeleton and give it its skin and a coat of paint. Javascript enhances the experiment, and flash is the last piece (further enhancement, a plug-in experience). It’d be nice if the accessibility flash detection was reliable

But on to Mootools Enhanced Elements!

This goes beyond the simplistic “is javascript available? Then add this ID/class to the body tag.” It goes beyond saying “if less than IE7, load this style sheet and javascript.” If you understand these ideas, you’ve got the basics of what Enchanced Element is about.

Yes – this is taking it up a notch. Adding classes, properties, custom elements and styles! I suggest reading the article and checking out the posts about it and looking at the site built with it!

Comments on this entry are closed.

Previous post:

Next post: