cool tech graphics

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.

Date posted: November 17, 2011

Comments

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.

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

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.

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

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.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

About the Author

Joaquin Lippincott, CEO

Joaquin is a 20+ year technology veteran helping to lead businesses in the move to the Cloud. He frequently speaks on panels about the future of tech ranging from IoT and Machine Learning to the latest innovation in the entertainment industry.  He has helped to modernize software for industry leaders like Sony, Daimler, Intel, the Golden Globes, Siemens Wind Power, ABC, NBC, DC Comics, Warner Brothers & the Linux Foundation.

As the CEO and Founder of Metal Toad, an AWS Advanced Consulting Partner, his primary job is to "get the right people in the room".  This one responsibility is cross-functional and includes both external business development functions as well as internal delegation and leadership development.

A UCLA alumni, he also serves in the community as a Board Member for the Los Angeles Area Chamber of Commerce, the Beverly Hills Chamber of Commerce, and Stand for Children Oregon - a public education political advocacy group. As an outspoken advocate for entry-level job creation in tech he helped found the non-profit, P4TH, an organization dedicated to increasing the number of entry-level jobs in the tech industry, and is in the process of organizing an Advisory Board for the Bixel Exchange, a Los Angeles non-profit that provides almost 200 tech internships every year.

 

Schedule a Free Consultation

Speak with our team to understand how Metal Toad can help you drive innovation, growth, and success.