25 Tricks for Designing Responsive HTML5 Mobile Apps

Asynchronous programming

The notion of asynchronous programming has gone from a somewhat obscure technique to nearly a requirement for mobile and web applications. The general idea is that function calls should return almost immediately, and any results which are not yet available should be later passed to the caller through a callback function which the caller originally provided as an argument to the function call. Although asynchronous programming has been used for a long time, AJAX (the first 'A' represents 'Asynchronous') helped to popularize it, and it is now used in libraries such as jQuery and jQuery Mobile.

Autocomplete

Anticipating type-ahead and providing a set of choices when a user enters text is both convenient for users, and makes an app seem responsive since the text can be almost immediately displayed and changed as typing proceeds. The jQuery Mobile Autocomplete library supports both local and remote data sources for autocompletion.

Canvas tag

The canvas tag is used to specify graphics commands which are rendered by the browser. Canvas can also be used to render other content, including text. For pages that contain a large number of objects, consider using the canvas tag.

CDN (Content distribution network)

Hosting services are often designed as general purpose platforms to host content. By contrast, CDNs are optimized to quickly serve static content. CDNs may use highly optimized web servers, fast hardware, or be located on the internet backbone at important junctions. See an example

Code minification

Minimization libraries such as Google Closure Tools, YUI Compressor, and Dojo ShrinkSafe can reduce downloaded file size and improve code efficiency even when used with other strategies such as HTTP compression.

Code packing

Concatenating code files together reduces the total number of files that must be loaded from a server. Since this may impact some debugging tools, it can be applied for production systems.

Content caching

Browsers offer an enormous amount of memory which can be used in various ways. For examples, caching long JavaScript strings (such as HTML) rather than reconstructing them on-the-fly can improve app speed dramatically. For the case of HTML, in many situations, it is not even necessary to remove it from the DOM, but if needed, the content (as a String) can be kept in a JavaScript object.

CSS

There are several benefits of using CSS in addition to its primary function of separating page content from presentation. First, CSS classes can be used to define an entire theme, so the theme can be changed with one or a few lines of code ('element.className=new-class-name'). This behaviour is the same as with normal web apps. But in addition, many devices are now processing CSS with hardware acceleration, which can easily improve performance by a factor of 10 or more. So, some of the advanced CSS properties (e.g. translate3d) can now be computed very quickly. This makes it possible to add special effects without degrading rendering performance.

CSS sprites

The img tag is used to display image files (.gif, .png, .jpg). However, a large number of img tags with different images requires many source files to be downloaded. One alternative is to "pack" a set of images into one or more files and use CSS to reference each image. These are called "sprites", stemming from an implementation of images on old microcomputers. The CSS background-image specifies the packed image file, and the background-position is set to specify a particular image. Some UI libraries include built-in support for sprites using CSS class naming conventions such as a 'ui-icon-' prefix for sprite names (jQuery Mobile Custom Icons).

Device testing

There is no substitue for testing apps on as many devices and platforms as possible. Differences in OS, version, and device characteristics (e.g. hardware acceleration) can have large impacts on responsiveness. Although it is likely impractical to test on all possible devices, a representative sample of the devices expected to be most frequently used is well worth undertaking.

DOM changes

Clustering a large number of DOM changes together can reduce the number of times a page must be re-rendered. Since user response may be degraded or suspended while rendering, it should be avoided whenever possible.

DOM ready

Checking DOM "readiness" can allow code to execute sooner than using the standard page "onload" event. Since DOM ready is detected differently in different browsers, it may be easier to use a JavaScript library function to do so, if one is available. jQuery uses a .ready() function to enable code execution when the DOM is fully loaded. jQuery Mobile uses a 'pageinit' event, which is triggered when any page (even pages loaded with AJAX) are initialized (and after any library-related initialization is complete).

FastClick

The Assanka FastClick library makes touch events more responsive by eliminating delays on the order of 250ms placed on click events in mobile devices. FastClick can be combined with other techniques such as a 'Loading...' or other image to provide fast visual feedback.

Files

Each file that must be loaded from a web server obviously causes a delay. Various techniques such as Code packing, Code minification, and CSS sprites can be used to reduce downloaded file count and size.

HTML5 tags

Standard HTML5 page and header tags are cues to the renderer, and will allow it to optimize behaviour. Basic tags include:
  • <!DOCTYPE html>
  • <html lang="xxx">> where "xxx" is the language supported
  • <meta name="viewport" content="width=device-width, initial-scale=1">
  • <meta charset="utf-8">
Each HTTP transaction with a remote server requires a round-trip delay (request to the server, and response from the server) before results can be processed. Even if asynchronous HTTP calls are used (the default AJAX behaviour), this can cause substantial performance lags, especially when slower communication links are involved. Although all types of mobile apps (web apps, hybrid apps, and native apps) suffer this delay, it is particularly important to minimize it for hybrid apps since they are often labeled as slow (users may expect web apps to be slow, and most native apps hide network delays with display techniques). In addition to keeping the user informed of server calls with visual cues, the number and frequency of these calls should be carefully monitored.

HTTP cache headers

Various HTTP headers can be used to indicate page cacheability throughout a network (e.g. in proxies and web browsers). When possible, the 'Cache-control', 'Expires', 'ETag' and 'Last-Modified' HTTP response headers should be sent by a web server to provide browsers with information that can be used for caching.

HTTP compression

Nearly all web browsers now support gzip compression on data transfers, and many web servers enable it by default. To see if gzip compression is used on a particular page, check that the HTTP Accept-Encoding request header and the HTTP Content-Encoding response header both use gzip. These headers can be found using a browser debug tools such as the Chrome Developer Tools for Chrome, or Firebug for Firefox.

Image caching

Long used in web apps to speedup image display, image caching works on mobiles too. The idea is to use CSS positioning to place an image "off page" until it is needed and then to set the "on page" position. Since the image is kept in the browser, no apparent loading delay is experienced.

Multiple servers

Loading files from multiple servers avoids or minimizes browser limitations for the maximum number of open connections to a specific host. Although these numbers have been increasing (Chrome is reported to support 32 while Firefox varies) apps that require a large number of files (even after Code packing, Code minification, CSS sprites) may benefit from such file distribution.

Profiling

Many development tools provide a code profiler that can be used when previewing code on a desktop web browser. Optimizing code based on profiling results can be difficult, and is generally used late in the development process after other methods have been tried, but nonetheless is helpful even if only to get the "low hanging fruit" or find obvious programming problems.

Single page design (hash tag)

Many HTML5 mobile apps are 'single-page' or re-use each page heavily by organizing the page into sections and modifying certain sections, rather than loading a new page each time a section changes. This avoids a round trip server delay due to page reloading. Since page navigation can be accomplished using the URI hash tag ('#'). Browsers (or WebViews) do not change URL location when the contents of a has tag are modified.

Touchstart

Certain web apps use the mousedown event as a signal to take action, prior to the mouseclick event (which occurs sometime later). On mobile devices, the touchstart event can play a similar role. Using tochstart, an app can get early notification of user intentions, although it may not yet be able to predict the final action (click or swipe). If only a click is suppported, however, actions (or visual cues) may occur on touchstart.

Visual cues

Some operations (such as querying a server for data) are inherently slow, and must be performed at a certain time. A lag cannot be avoided, but it can be masked with visual cues. First, some information can be displayed to indicate that a request for action was accepted (e.g. highlight and un-highlight a button press). Next, an in-progress indicator can be displayed (e.g. the infamous "Loading..." image). If any intermediate results are available, they can be presented while final results are obtained or calculated. Checking results with and without such display activity can show quite perceptible differences.

Web workers

HTML5 web workers provide 'threads' with which an app can compute or perform I/O. Not only can this improve responsiveness when the main JavaScript thread is executing, it can also help reduce complexity by eliminating the need for setTimeout calls and other techniques used to make behaviour more asynchronous.

Web sockets

A relatively new communication mechanism, web sockets provide a full duplex streaming communication channel, keeping connections open across transactions rather than setting up and tearing down connections for each transaction. Although web sockets are not yet well supported across mobile platforms, expect them to play a major role for future network communications.