We have been talking to our clients about responsive design and HTML5 as an alternative to apps, for quite a few months now. Yesterday, The Financial Times launched “a new, Web-based version of its mobile app” in HTML5 (app). HALLELUJAH! So what is the concept?
Responsive design, to make it VERY simple, is a concept based on CSS3 capabilities. The idea has first been developed by Ethan Marcotte about a year ago. You can read his blog, A list a part. The concept is to develop different templates for the same site. Each template is tailored to a specific device (computer, smartphone, tablet, etc.) and a specific orientation (vertical / horizontal). Since CSS 2.1, the style sheets (translation of the design in code) can recognize the device and now, with CSS3 (via mediaqueries), also some physical characteristics of it.
Let’s imagine that I have developed 6 templates:
- 4 columns for large computer screen display
- 3 columns for regular computer screen display
- 2 columns for horizontal tablet display
- 1 large column for vertical tablet display
- 1 medium column horizontal smartphone display
- 1 small column for vertical smartphone display
Then, based on the device the customer is going to use, a different template is displayed.
But it does not stop here. If on top of that, the site is developed in HTML5 you can add functionality that is replicating an app-like experience (for example sliding). If you are a Basecamp HQ customer, you can experiment it right away, using different devices to view your account. Impressive. By the way, HTML5 is already being used by some developers to develop apps.
You see the point. Instead of developing a site + one app for iPhone + one app for iPad + one app for Android… you develop one back-end with different CSS on the front-end. No doubt that you’re going to save some pain…and a lot of money.
But still, the beauty of the concept does not stop here. If you can do a site that looks like an app, you can also keep the transactions within your site. No need to go through the App Store or any similar stores and no need to lose a large percentage of the transaction.
HTML5 and responsive design are clearly a very smart combination. We are going to see more and more sites using it.