Building Mobile WebApps with HTML5, CSS3 and JavaScript

06 Jul 2010

Here at Lemberg we are pretty excited about the possibilities offered by modern web technologies like HTML5, CSS3 and newer developments in Javascript. Our team are all (lets face it) geeks, so we’ve been tracking these technologies for quite a while. We’re excited that they’ve crossed over from your laptop or desktop browser to mobile devices, as it lets us use them in our mobile development.

Some time ago we were asked to put together an e-commerce app for the iOS (iPhone/iPad) and Android platforms, and saw this as a great opportunity to develop one of the new ‘web apps’ that HTML5 makes possible. In this post we talk about some of the techniques we use for making webapps and some of the fixes for common problems.

What is mobile webapp?

A mobile ‘webapp’ is basically a website that is optimized for iPhones and other similar smart phones, but looks like a native mobile app. It is not downloaded from an app store or installed on the phone, but is loaded from an URL and can be accessed from any device with a webkit-enabled web-browser.

Current webkit devices and mobile browsers include those on iPhone & Android phones, the Nokia series 40 browser, the Iris Browser (recently purchased by RIM/BlackBerry, soon to be introduced), the Polaris Browser (Nokia, Samsung, LG Electronics, KYOCERA and other Smartphone and cellular phones in USA, China, Korea, etc) and the Palm (recent models including Pre).

Full screen mode & user-scale features

For webapps to take the place of native mobile apps, they need to run in full screen. On iOS devices, Apple offers a function to do this, and make sure your webapp doesn't mess with whatever tabs you have open in Safari:

<meta name="apple-mobile-web-app-capable" content="yes" />

This has limitation though: any normal link on the page will open in Mobile Safari, exiting your web app. On the other hand, your webapp should not feature many external links if any at all, rather links will be to other parts of the webapp.

There is also an option for turning off the user-scaling (using pinch gestures to zoom in and out) as like native apps, webapps shouldn’t and don’t scale. To deal with this, set the width to the device width:

<meta name="viewport" content="user-scalable=no, width=device-width" />

The ‘native’ look: Using CSS3 properties

Since the browser on iPhone, Android and the other devices and platforms we mentioned are based on webkit we're able to use powerful new features from CSS3. Here are some useful properties:

  • text-shadow - Much of the text on the iPhone has drop shadow, which can help text stand out from the background and be more readable
  • multiple backgrounds - Means you don’t need to use extra markup for additional backgrounds
  • border-image - Great for making scalable buttons and panels!

The ‘native’ feel: Using CSS3 transitions

In native apps, transitions between screens are accompanied by a nice sliding animation. In a webapp you could do this the old way, with the help of Javascript, but CSS3 gives us a new option. It lets us specify animation through CSS! This works significantly faster than Javascript as well as being easier to code. The simplest kind of animation is called a transition.

Normally when the value of a CSS property changes, the affected elements are re-rendered immediately using the new value. For instance if you change a background colour from black to white, it just snaps from one colour to the other. On the other hand, with CSS transitions the element smoothly transitions from its current state to its new state when you set the property value.

There are many kinds of transition in CSS3, but here is a simple example we used:

div {
    width: 100%;
    position: absolute;
    left: 100%; top: 0;
    -webkit-transition: left 1s ease-in-out;
}
div .on-screen {
    left: 0;
}

This animates the movement of a div from off-screen to on-screen by sliding it on from the left, just like an iPhone native app transitions.

Width and orientation flipping

Since you can flip between orientations on many mobile devices, these days you have to build fluid layouts with everything stretching to 100% width of the device. That's fine for the divs (as it is their default behaviour), but can cause some trouble for elements whose width is based on their content, like the floated elements, inputs or buttons. For these we have to force the width to 100% with CSS, but if the element already has a border or padding it will exceed the screen.

Happily, there is a CSS3 property that does this for us! Just apply:

-webkit-box-sizing: border-box

With this applied, the width will be calculated including padding and border, so your design will still look neat and tidy whichever way your device is turned!

Adjusting text size for iPhones

The iPhone automatically adjusts font size for readability, which is a great feature for users. Normally we want this to happen, but with a webapp when you change the orientation of device from portrait to landscape it actually scales up the text a little (due to increased width). This can mess up your layout. Luckily you can switch off this feature with:

html {
    -webkit-text-size-adjust: none;
}

Position: fixed

The webkit-based browsers for iPhone and Android don’t provide support for this quite useful CSS property. What’s more, the performance of the available Javascript workarounds leave much to be desired!

The reason is quite simple: both Android and iPhone stop timers or rendering during scrolling. This means that the div moves with the scrolled page, and only when the scroll finishes does the div come back to the position you want (if it comes back at all!). Sadly there is no fix here yet (though we’ll update this if we find one!). The best we can suggest is to think carefully whether on such small screens it makes sense to cover precious pixels with something fixed.

The last word

The emergence of “always-online “ devices like iPhones and Android devices has blurred the lines between a web page and an app become. With HTML5 and CSS3 we can build a webapp with the genuine look and feel of the native app but without the need to persuade users to download anything or get it approved by an app store. Of course you can’t use a webapp for everything – complex games and highly visual apps will remain mostly native for now – but many simpler apps can be created more cheaply and easily as webapps.

About Lemberg

Lemberg is a UK mobile and web development company with strong client base in the UK, Europe, and the USA.

Starting from 2007, Lemberg has been helping leading design and marketing agencies, start-ups, innovative businesses deliver brilliant digital solutions for a number of the world’s biggest brands.

Our goal is to go beyond clients’ expectations: as a technology partner, we take the responsibility for implementing the most ambitious, creative and innovative ideas.