Shortcuts and aesthetics-first can undermine usability and derail working code
Developers have taken to their blogs to warn those in the web industry to be mindful of their code. If careful attention isn’t paid to code output, or the wrong assumptions are made, this can heavily impact on projects, reducing usability or leading to major bugs and rendering issues.
Web Directions co-founder and software developer John Allsopp wrote in a piece about HTML5 that you don’t have to quote attribute values—until you do. The syntax of HTML5 is far looser than that of XHTML, and some developers take advantage of this, not closing tags or quoting attribute values. Reasons for doing so may vary between laziness or an attempt to shave every byte from a file. “Think of the bytes saved! The billions of developer hours saved no longer having to type “ pr ‘,” remarked Allsopp, with more than a hint of sarcasm.
He then provided an example of a class tag with two values. Unquoted, this would cause browsers to see two attributes: class=[first value] and a boolean attribute [second value], which it wouldn’t understand. “So, why not simply quote all attribute values? One basic rule will never get you into trouble, and cost you maybe a few dozen bytes a page at most,” he advised.
Mozilla developer evangelist Christian Heilmann was also in ‘warning mode’ about developer’s trying to be too clever. In a post on ‘improving’ forms, he suggested developers sometimes had a tendency to concentrate too much on aesthetics rather than usability. “Entering forms is annoying and frustrating as in many cases you need to look up data elsewhere. This is why your main goal should be to create a working form that needs the least amount of information labeled in an understandable fashion,” he said. “The look of the form is less important than that—this pleases us and our clients but a pretty form that isn’t understandable is not good for your users.”
Heilmann therefore recommended developers ensure their forms are robust behind the scenes, with action attributes pointing to a server-side scripts, label elements for boosting accessibility, and visual enhancements that won’t leave the form broken or unusable if they’re stripped away or the page is zoomed. “It is very easy to replace forms with ‘nicer’ things. It is also too easy to block out a lot of users when you do,” he said.