5 Ways to Make Your Webpage Feel Like an App

5 Ways to Make Your Webpage Feel Like an App

By myclever™ Agency

A couple of years ago, a news story broke around the web industry about Adobe purchasing a company called Nitobi, whose flagship product was a platform called PhoneGap. PhoneGap was a revolution in that it allowed standard web developers, whose programming knowledge was limited to that of the web, could now create native apps without having to learn the native languages. This opened up a whole new sector for agencies worldwide and presented a new market for them to explore to.

Since the launch of the iPhone in 2007, the divide between native app and website has become more and more blurred. Responsive design has allowed us to cater our content for a mobile screen; we can add Favicon style images to our homescreen and we can hide the location bar when viewing an app.

However, with the introduction of HTML5 and the update to the JavaScript API that followed, the web community started to find ways to integrate mobile features into web pages. Below are five standout features to help your website perform almost like it’s a native app (please note, a lot of these features are experimental with limited browser support).

1. Web Storage / WebSQL

The main concern for mobile users is what happens to their data usage when they are on the road? If they access your website, are they going to be stung with high-bandwidth downloads and lots of unnecessary resources?

Media queries in responsive design help us to flush out the unnecessary content and load compressed (smaller) assets as and when needed. But what about making data calls to and from the server? If you have a photo gallery app, will your users have to constantly download images even if they have seen them before?

The Web Storage and WebSQL objects can both help with this concern. Web Storage (also known as localStorage) works as a session store for your mobile. For example, if your user logs into your web app, you can store their user details in the phone’s session. Similar to cookies, these details will be saved even after closing your browser (although the user can manually clear this data), so a user can use your app without having to log in each time.

WebSQL is exactly how it sounds – a database object for use in the web. Based on SQLite, this allows you to create complete database schemas and store them in the browser. Rather then having to make a call to a remote server to get data, existing data can be stored in a database that mirrors the structure of your live server, which can help to reduce data downloads. Although no longer supported by W3C, it has support from the major mobile browsers.

2. CSS Animations

As mobile devices ship with more advanced GPU’s (graphic processing units), the opportunity to create fluid animation increases. When jQuery launched, it allowed us to animate objects quite easily ($.animate(), anyone?). With CSS3, keyframe animations were possible without relying on processor heavy libraries

CSS3 keyframes are the same concept as keyframes in any animation suite; at a certain point in an animation, an object is modified in a certain way. You can define a duration for the animation, and then at certain points (5% in, 10% in etc.) you can alter the value of an object, such as its width or background etc.

CSS Animations tend to appear smoother on mobile devices because they are hardware accelerated, meaning that rather then having your CPU control everything, your device will offload the processing of an animation to the GPU

JavaScript animations definitely do have their uses (Bezier path being one) but, where possible, try out CSS animations. Things might appear quite smoother

div {
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}

/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: yellow;}

3. Accelerometer

A feature we came across when working on a project at myclever™ was being able to read feedback from the devices accelerometer – basically we could detect when a user is shaking their device! This could be a great user interaction for shuffling options or modifying content colour etc. The window.ondevicemotion handler is the API that makes this possible, and can return the X,Y and Z attributes in an object. Using some calculations, you can determine when a user shakes their device.

4. Connection / Network Information API

As previously discussed, a mobile user is always concerned about how much data they are using when on the road (as an avid imgur browser, it’s something I think about every day!) So, along with the web storage object mentioned previously, you can also detect what kind of connection the user has and serve content based on that!

The network Information API tells you if the device is connected over WiFi, 3G, or if it is offline. Based on this, you can make the decision to pull data from a server, or fallback to anything stored in your localStorage cache!

5. Vibration API

The final API to explore is the vibration API. As you might expect, this allows you to control the vibration of a device – imagine a user forgetting to enter a form field, and their device vibrating as an alert! This API provides a unique way of alerting your user to any kind of interaction.

var vibrateInterval;

// Starts vibration at passed in level
function startVibrate(duration) {

// Stops vibration
function stopVibrate() {
// Clear interval and stop persistent vibrating
if(vibrateInterval) clearInterval(vibrateInterval);

// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPeristentVibrate(duration, interval) {
vibrateInterval = setInterval(function() {
}, interval);

Over to you

What do you think? Do you have any top tips?

This post was written by myclever™ Agency

Exceptional marketing is driven by human insight. myclever™ Agency craft beautiful, useful and engaging experiences with social media at the heart.