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.

Comments

Design responsive

I fully agree in this study and test to be able to develop site-responsive design, but have not found a good study material on the web if you can help me thank you Joaquin.
Congratulations for the post.

responsive

You can find a lot of tutorials on Lynda or Youtube. Not sure what's out there for literature.

Responsive Web Design

Great article, thanks for sharing. A few of our clients have already noticed a need for Responsive Web Design. In our opinion, this will be a BIG trend for web design in 2012.

Responsive Web Design

This is great article and I could not agree more. I read a lot of new things in web design across many forums and people are saying all kind of things. Many of them does not recognize HTML5 as standard and a must if you want good, fast and responsive design. And if your website is not for mobile devices you loose at start about 30% of market which is unacceptable.

Responsive web design

It's 2014. and I couldn't agree more. Would you dare to predict some new trend? :)

Add new comment