I'm impressed with mobile webapps like and FT. I wanted to find out more about how they are built, and after some digging, I found three simple things that can bring a native-like experience to mobile webapps. But first, why build a webapp?

  1. Number one has to be the cross-platform abilities of webapps. Write it once, run it on anything with a web browser.
  2. Webapps can be deployed instantly, everywhere. Not having to support old versions takes a giant monkey off developers' backs.
  3. The internet doesn't require a membership fee or have an opaque app store approval process, so anyone can build a webapp. Whether this is good or bad for app developers can be debated in other blog posts, but it definitely makes things easier.
  4. And without an approval process, you can crank out iterations quickly. Experimentation and AB testing come much more naturally to the web.
  5. Building webapps is fast. Well, fast compared to building native apps. This might be a personal judgement, but the tools are well tuned to get shit done.

Here are three simple things to get started.

1. You shall not side scroll

First outfit your mobile webapp with a viewport meta tag. Most mobile browsers assume that you're not looking at a page optimized for a small screen, so they allow the user to scroll around and check out other parts of the page. Your webapp should not require any horizontal scrolling. This tag disables side scrolling.

<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">

2. Smooth operation

The biggest complaint I hear with webapps is that they aren't smooth. Using hardware accelerated animations can get pretty close. And CSS makes it pretty easy. Let's say you want an element to slide horizontally off screen. Start by defining a class of things that will be “slidable”.

.slidable {
  transition: all 500ms ease-out;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;

  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
.slide-left {
  transform: translate3d(-2000px, 0, 0);
  -webkit-transform: translate3d(-2000px, 0, 0);
  -moz-transform: translate3d(-2000px, 0, 0);

The slide-left class is an example of how to slide an element off screen horizontally. The translate3d value tells modern browsers to use GPU to perform animations. Everything is ready to add the slide-left to perform the animation. In this example, the class will be added when the element is clicked using jquery.

$('.slidable').on({click: function(e) {

And after the animation is complete, you can remove the elements from the dom.

$('body').on({'transitionend MSTransitionEnd webkitTransitionEnd': function(e) {;

Here is the code in action.

3. There's no place like homescreen

OK, with your non-side-scrolling viewport and your elements GPU-power sliding, your app deserves its place on a device homescreen. iOS and Android let you do it with some more meta tags.

<meta content="yes" name="mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">

<link rel="shortcut icon" sizes="196x196" href="icon-android-highres.png">
<link rel="shortcut icon" sizes="128x128" href="icon-android.png">

<link rel="apple-touch-icon" href="icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-ipad-retina.png">

Now a user can open your app in Safari (on iOS) or Chrome (on Android) and add it to their homescreen. has a nice modal that prompts users to do this. The app will launch in a fullscreen version of the mobile browser without an address bar or any other navigation chrome.


I won't say that webapps in general are a one-size-fits-all solution. But they are getting closer to being able to compete with the performance of native apps. The speed of development and rapid release cycles make webapps particularly well suited for idea validation and prototyping. Content delivery is also a good use case, as displayed by and FT. Developers should ultimately make the call based on the goals of their project.