Creating a mobile web application is fairly simple – just scale a website for a smaller screen and it works flawlessly. But there is a problem – a mobile web application still feels and acts like a website, it is just smaller version of a desktop website. It is slow when displaying some kind of simple animations – for example slide toggle.
Nowadays it is fairly easy for developers to create a responsive website (e.g website, which scales itself automatically according to the screen size). Some people just use media queries , another use ready-made boilerplates like Bootstrap, Skeleton or Bones (for creating responsive WordPress template).
To get best experience from your mobile web/html application, using CSS3 transitions is the key. When usual transitions are just changing DOM and usage of hardware acceleration is minimal, CSS3 transitions are always using hardware/GPU acceleration and this gives a very big performance improvement and your application becomes very responsive.
To start using CSS3 transitions, we have to check if browser is capable of handling CSS3 transitions (most browsers do, except IE, which supports CSS 3 transitions starting from version 10.0). This is not a problem with mobile browsers – almost always they can handle CSS3 transitions without any problem.
|
1 2 3 |
var docBody = document.body || document.documentElement; // detect transitions support var hasTransitions = docBody.style.WebkitTransition !== undefined || docBody.style.transition !== undefined; |
Now we have to setup document to use CSS3 transitions.
|
1 2 3 4 5 6 |
if(hasTransitions){ // jquery code $("body").addClass('css3_support'); // dom code // document.body.className = "css3_support"; } |
Simple CSS3 accordion
Easiest way to use CSS3 transitions is to create an accordion. We will start by creating basic HTML structure.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<section> <h2><a href="#">Accordion 1</a></h2> <p>Lorem ipsum... </p> </section> <section class="hidden"> <h2><a href="#">Accordion 2</a></h2> <p>Lorem ipsum... </p> </section> <section class="hidden"> <h2><a href="#">Accordion 3</a></h2> <p>Lorem ipsum... </p> </section> |
Next step is to write CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
section { border-bottom:1px solid #ccc; overflow:hidden; height:200px; } section p { padding:0 10px; } section h2 { font-size:18px; background-color:#e8e8e8; margin:0; padding: 10px 10px 10px 20px; cursor:pointer; } section h2:before { content: "▾";padding-left:5px; } section h2:hover { background-color:#e3e2d8; } section h2 a { margin-left:10px; color:#000; } section:not(.hidden) h2 { background-color:#f4f3e3; } section.hidden { height:44px; overflow:hidden; } section.hidden h2:before { content: "▸" } .css3-support section, .css3-support section h2, .css3-support section p { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } |
Notice that last declaration (.css3-support) contains transitions. This declaration creates 0.5 second transition, which is applied to all parameters that have been changed (height currently).
Last step is to write JavaScript code, which is triggered when title is clicked.
|
1 2 3 4 5 |
$("section h2").click(function(e) { $(this).parents().siblings("section").addClass("hidden"); $(this).parents("section").removeClass("hidden"); e.preventDefault(); }); |
You can check out my final demo here. If your browser is displaying animations, it is supporting CSS3 transitions.
Using CSS3 transforms and transitions in jQuery
By default jQuery does not support CSS3 transitions and it still relies on DOM manipulation when making animations. This approach works good for a desktop application, but mobile applications are suffering a big performance hit.
The easiest way to solve this problem and to add CSS3 transforms and transitions support to jQuery is to use excellent jQuery Animate-Enhanced plugin. Using this plugin is easy, because it changes how default animate method is working – it transforms default DOM animations into powerful CSS3 transitions.
This plugin is working for most of the situations, but sometimes you may encounter flickering when performing more complicated animations. Usually these problems are related to CSS backface-visibility and are easy to solve. If some transition does not work at all, it is very easy to fall back on legacy DOM animations.
How to give a html/web application “mobile application” look
If an application needs more “mobile” look, it is smart to use touch optimized framework, such as jQuery Mobile framework. It includes set of templates to make applications look like iOS or Android applications and also it supports custom CSS3 transitions. It is very good framework if you want to create an application, which has look and feel like a native application (headers, footers, buttons, sliders,transitions).
Use HTML5 application cache to add offline support
HTML5 specification provides an application caching mechanism, that lets applications to run offline. The basic concept behind application cache is to create a cache manifest file, which defines all resources, which should be available offline and which not.
Manifest file should be defined in <html> element
|
1 2 3 |
<html manifest="myapp.appcache"> ... </html> |
A manifest file can have three distinct sections: CACHE, NETWORK, and FALLBACK.
CACHE:
Files listed under the CACHE: section header are explicitly cached after they are downloaded for the first time.
NETWORK:
Files listed under the NETWORK: section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline.
FALLBACK:
The FALLBACK: section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback.
Typical cache manifest file is looking like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
# always cache CACHE MANIFEST index.html style.css image.png # Use from network if available NETWORK: network.html # Fallback if resource is not available FALLBACK: / fallback.html |
PS. Cache manifest files must be served with the text/cache-manifest MIME type, otherwise you may run into problems.