Web | Noisy Chaos Explosions

工事中徐行

Web design and coding

I would never call myself an expert but I've been mucking with various web sites and code off and on for a few years. The standards and technologies have grown and changed a lot but the goals remain the same— present the content in a usable way to the most people. To achieve that goal I code my sites as XHTML strict or transitional with CSS. I prefer to use minimal or no JavaScript if possible and minimal Flash and other plug-ins.

I know the trend with Web 2.0 and "web applications" these days is to add many whiz-bang features and animations but this can come at the cost of usability. I remember the first time I saw Google Maps in 2005 where you could drag and zoom the map with the mouse. It was cool and AJAXy but at the same time I was sad because I knew my old Powerbook at home would never be able to use it.

Accessibility and Usability

Can everyone visiting your web site actually use it? Federal government web sites must follow Section 508 standards for accessibility and there's even a government web site for usability. I approach accessibility and usability as a series of questions:

  • Can the site be viewed comfortably with a screen resolution of 1024 × 768?
  • Can the text be enlarged and reduced without breaking the page layout?
  • Can the site be navigated and used with images disabled? Would the site be usable with a screen reader?
  • Can the site be navigated with just a keyboard?
  • Can the site be used with Flash and JavaScript disabled?
  • Can the site be used adequately over a modem connection?

I'm more interested in squeezing the most out of HTML and CSS because they work on the newest browsers and they degrade gracefully on old browsers. An old browser that doesn't understand newer HTML or CSS will simply ignore it and carry on. It's still a good idea to check your page designs with CSS disabled so you can see what a text browser or a search robot sees.

JavaScript and Flash don't degrade well on older browsers and computers. If your Flash plug-in is too old you just see an empty rectangle with a missing plug-in symbol. I don't believe Flash text is accessible to screen readers or search robots. Some sites are so heavy with Flash that the animation or video skips and becomes unwatchable. An old computer will valiantly try to process modern JavaScript, limping along and grinding itself into the ground, freezing up your browser and computer which is extremely frustrating. An advanced user could disable JavaScript but most users will just avoid your web site. I normally have JavaScript and Flash blocked with the NoScript plug-in for web sites I don't visit often and for sites that I don't trust.

The problem with Internet Explorer

IE probably causes more headaches for web designers than anything else. As of August, 2008, IE had roughly a 72% market share with about 25% using IE 6. Unfortunately, most web designers cannot ignore IE so we have to spend hours and sometimes days working around IE bugs. Some say web designers spend up to 50% of their time getting their pages to work right in IE. Personally, I haven't kept track but it seems like it sometimes. Multiply that by the thousands of web developers in the world and you end up with too many days wasted on IE bugs! IE 8 is currently in beta testing and it looks like it will follow web standards much better but pages will still have to be designed with IE 6 in mind until people stop using it. Hmm, if I end up writing too much here I may have to convert this page into blog posts.

For reference, I've been using some of the hacks from here to specifically target and work around IE bugs. I also recommend the Explorer Exposed site if you're tearing your hair out trying to figure out why Explorer is messing up your web page when it looks fine in Firefox and Safari.

Another difficulty with Explorer is that there are at least two versions that web designers need to test for compatibility and it's not possible to install more than one at the same time. Fortunately for Windows users you can download a free version of Virtual PC and disk images that allow you to test your web pages with IE 6, 7, and 8. Mac users will have to use Boot Camp or some kind of virtualization like Parallels or VMware Fusion.