Unless you haven’t read much tech news lately, Google just released the Chromium OS. It’s beautiful and OpenSource, and it represents a huge shift in mentality. The reason we use our computers is to access the internet, so Google centered their operating system around the internet and the cloud. Their browser is one of the many supporting HTML5, a real movement to reduce the need of proprietary plug-in-based rich Internet applications, such as Adobe Flash and Microsoft Silverlight. HTML5 with some simple JavaScript will begin to power the front-ends of many of the web apps available on the Internet, and our experience will be as beautiful as the Flashy websites of today. Designers are already trying to push the limits of HTML5; for example see Mr Speaker’s HTML5 Canvas Particle System. HTML5 and these JavaScript techniques, mainly using jQuery, will make our web interfaces feel as rich as the desktop. They are already at our finger tips, available in the latest version of Firefox and Safari, and even in the iPhone.

OpenGL comes to HTML5 and Modern Browsers

OpenGL comes to HTML5 and Modern Browsers

What is holding back the reigns on HTML5? Well the Internet Explorer project isn’t bringing support until IE9, but rumors are that they plan to release another really useful tool, GPU acceleration. This would mean that web developers could take advantage of the GPU on a browsing device. So that means our web enabled interfaces get a direct link with the GPU, no OS really needed to host heavier graphics applications. If the iPhone were to support it, all of those shocking AR experiences would instantly be accessible on a range of compatible devices like our laptops or other devices with some version of WebGL. Well this stuff is already getting a lot of discussion and there are talks of ensuring future browsers include a binding of OpenGL ES to JavaScript, essentially WebGL. Google figured out their own way of doing it and released the O3D API for rich interactive 3D applications in the browsers, Safari and Firefox. More native implementations of WebGL are coming from Firefox and Safari for the desktop and mobile devices soon.

So that’s cool and all, but how much of a competition is this to Flash and SilverLight? Right now, about 90% of machines have Flash installed on them and I would guess that less than 50% of all users are using a browser with HTML5 capabilities. Further more, all of those users probably have Flash and possibly SilverLight installed as well. The competition will be with the 10% or more of browsers that do not have Flash. These are mostly users on mobile devices. iPhone and most mobile browsers do not support Flash. Okay let’s step back a bit and examine the real problem here for a second. The issue lies within the accessibility of content across screens and interaction devices. Content is simply not as easy to browse on some devices or screens as it is on others. That means small screens may not be able to display some collection of content as well as a large screen. Kind of obvious, but it is all about the content.

Lay down content and focus on content before all else. If you have no content, you have no purpose. The next most important layer is to consider the behavior. Ensure that full functionality is available across all devices. The user should be able to preform actions on a small display as easily as on a larger screen. Finally, take care of the visual display and style of your screen space. Chase down some device specific styles if you know you will have a large users browsing with a specific screen size. You can easily use jQuery to sniff out the browser and display an appropriate style. If you want to get crazy and provide some extra-ordinary graphics experience with animations and things, consider using the HTML5 Canvas and JavaScript techniques to make it happen. There is another detection device called Modernizr that can ensure your user has the goods. If you detect that the user is on a mobile device, you may consider using jQTouch which is beautiful, and I really want to find more time so I can play with it. I’ve heard people say it is better to assign separate stylesheets via scripts and conditional comments rather than use a reset style, but I think we just need to make it accessible. If they can use it, and it looks alright, great. Of course, we cannot run around trying every device and screen size on earth to preview our work, but we still want to have some confidence in the universal accessibility of our content. Maybe the next best thing is to use BrowserShots, and then just do a couple simple tests. Make sure your user can fully experience your website with no CSS and no JavaScript (and no Flash or anything, but that was obvious by this point right?).

The accessibility of different technologies used in the web space will continue to challenge all web developers for quite a few years to come. For now, we need to try being progressive and push our interfaces to new limits every time. Take the accessibility challenge with me and design for the future, but never ignore the past. Let’s start to use HTML5 and CSS3 with progressive JavaScript to enhance our sites, but hold on tight to those poor IE6 users. Look around the web and keep finding new ways to be cutting edge, but still support our poor IE friends.

Written For Nerds and For People of the Web