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).


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.

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.

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.

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.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

About the Author

Joaquin Lippincott, CEO

Joaquin is a modern technology veteran. Throughout his career he has built successful digital strategies with a wide assortment of transformative technologies and platforms, helping clients identify a clear path for success. Over the years he has worked with industry leaders such as DC Comics, the Emmys, Intel, Technicolor, Verizon Wireless, Habitat for Humanity, Limewire, the Linux Foundation, Sony Pictures Television, Mercy Corps, and Cisco as well as numerous small businesses, advertising agencies and internet start ups. With over 14 years of experience in his field he is still as passionate about technology as ever. Joaquin is a graduate from UCLA with a degree in design and has also served on the AIGA Portland chapter board as President. Twitter: @joaquinlippinco