Responsive Web Design and HTML5 are the Future

With the latest launch of the Amazon Kindle Fire Tablet, the world is now up to more than five major Android hardware providers. Here's the list of the major players:

• Amazon
• Samsung
• Hewlett Packard
• HTC
• Motorola
• Barnes & Noble (Nook)

Among each of these, there is also a wide variety in the screen sizes, from the smart phones to mid and larger tablets.

Outside of the Android market you have the 800 pound gorilla, Apple with their iOS Platforms (iPhone, iPod & iPad). And you have RIM with the Blackberry and Nokia (who still can't decide what they are going to use).

WTF?

So what's a developer to do? Do we throw our lot in with Apple or bet on Android and hope applications work across the plethora of devices? Supporting even two fully forked codebases concurrently is a recipe for disaster and more than doubles your cost. Shooting for 3 or more is an ambitious goal best left to giant corporations. The answer lies with responsive web design.

Common Ground

Unbeknownst to most people, there is one common thread across almost all of the mobile platforms listed above: they use the Webkit browser. While the exact browser versions may be different, that means you can develop once in HTML5 and just worry about tweaking things to make them work on the latest devices. Most platforms even support compiling your HTML5 and landing it on the device as a semi-native app - complete with the little app icon on your home screen (using PhoneGap is one method).

What's Different?

The main difference you have to worry about across all of these devices is different viewable areas. Fortunately there's already a simple CSS-based solution. CSS3 media queries, a major pillar in responsive web design, addresses this very problem, allowing elements to be shrunk, repositioned or hidden depending on how many pixels are available. If properly designed an HTML5 application will take full use of the real estate even if was never designed to that particular size.

Added Benefit

Beyond common ground among mobile devices, Webkit is also the foundation rendering engine for Apple's Safari browser and Google's browser, Chrome. As a standards-compliant browser it's also very similar to FireFox's rendering. This means your mobile targeted application will also work on most computers as well. And if you want an application to run on the desktop, you can use the same app compiling technology to make that happen as well.

Old Browsers

In our exploration of browsers across embedded hardware devices (Samsung TV, PlayStation3, etc) we've found that the browser currently integrated often lags far behind tablets. While this means HTML5 often won't work, HTML (remember HTML4?) still is a workable option. This often means you have to default to older techniques but you can get a working application running in any of these environments. I would predict this will only be an issue for the next year or two.

What are you Waiting for?

If you are currently supporting multiple codebases, start converting your application to HTML5. If your application currently only works on one platform, start converting your application to HTML5. Ultimately having your application built in HTML5 will no longer be the competitive advantage that it is now, it will be *the* industry standard and anyone developing with different technology will be at a disadvantage.