Over a million developers have joined DZone.

Ingenious HTML5 Techniques for an Optimal Mobile Web Experience

These resourceful tips and tricks will help you develop an optimal HTML-based mobile web application.

· Mobile Zone

With a huge range of web app platforms, browsers, wireless networks, etc., the Mobile Web features a far more intricate environment as compared to the typical web arena. This has certainly caused performance bottlenecks due to the delayed tap events, sluggish loading, and rough page transitions, to mention a few issues. While developers are endeavoring to deliver a native user experience with their mobile web applications, there are certain factors that become hard to break through.

The limited screen real estate, battery life, radio packet latencies, and so forth are some reasons that have encouraged users to expect an expeditious performance from mobile solutions. A poor loading time can drastically impact your conversion rate and profits, and it can also hamper your search ranking. Another fact to consider is that the mobile users are more impatient, only a few accept actual delays, while the rest gets frustrated and instantly abandon the website. Moreover, with an incessantly elevating mobile traffic on the Internet, it has become more than imperative to optimize the mobile web experience, or else you will risk your potential business.

While there are several frameworks available out there that support mobile web application development, there are certain hidden complexities involved that these frameworks try to escape from you. In this article, I will unmask resourceful tips and tricks to help you develop an optimal HTML-based mobile web application.

Let's delve deep into the topic.

1. A Connection Detection Feature – For A Smarter App

You can optimize the connection speed by thoroughly considering this point. Here is the essential step required to address the most of the connection plans.

window.addEventListener('load', function(e) {
 if (navigator.onLine) {
  // call different page
  funcOnline();
 } else {
   // call available page
   funcOffline();
 }
}, false);

window.addEventListener("offline", function(e) {
  // go offline and links not working
  funcOffline(e.type);
}, false);

window.addEventListener("online", function(e) {
  // comeonline and links working
  funcOnline(e.type);
}, false);

The EventListener will execute the suitable set of functions depending upon the point from it has been called, like whether an event has occurred, a page request has been made, or refresh request has been made.

You can implement the aforementioned piece of code to accomplish the following tasks.

    • Get access to Offline access via the applicationCache

    • Determine if the app is offline and bookmarked

    • Identify while switching from online to offline mode and vice versa.

    • Analyze slow network connections, and fetch the content by taking the network type into account.

2. Hardware Consideration

There is a wide array of device constraints that must be considered while developing a mobile web application. The topics like memory allocation, battery consumption, etc., create great challenges and if they are not handled appropriately, they can mess up with the overall performance of your application. Wondering how?

For instance, let's consider battery consumption. Hardware involves battery, it is essential to consider the power consumption while developing an app. This is so because, the modern age browsers have got a greater access to device hardware, so it can hinder the web performance.

In order to generate hiccups-free, consistent UX, you must allow the mobile device CPU to configure the initial animation, and then involve the GPU to propagate various layers while running an animation process. This assigns a layer to each animated element so that the device can flawlessly render everything.

3. Define Flawless Page Transitions

Developers often choose to create either a flip, rotate or slide effect while defining page transitions. All the three effects can be commonly seen in several application designs. Here I will enlighten the flipping effect.

To flip a page is quite similar to swipe a page. This effect can be easily handled by implementing the simple JavaScript code on Android and iOS devices. Since, we have touchscreen devices all around, it is imperative to get a grip on the current position of the UI elements while creating such effects.

This can be done with the below mentioned chunk of code.


function slidePage(event) {
  // calculate position when move page
  var curEffect = new WebKitCSSMatrix(window.getComputedStyle(page).effect );
  var pagePos = curEffect.m41;
}

Now our goal is to determine the direction in which the user will flip the page, and accordingly set an appropriate threshold to perform a suitable page navigation.

if (pagePos >= 0) {
 //move effect
   if (( pagePos > pageFlip) || ( hitTime < hitThreshold)) {
     //slide right
     slideWay = 'right';
   } 
} else {
  if ((hitTime < hitThreshold) || (pagePos < pageFlip)) {
      // slide left
    slideWay = 'left';
  } 
}

Here the hitTime is measured in milliseconds. This will help instantly fire the navigation event, according to the way a user swipes the screen to flip through a page. Moreover, after each event firing, the CSS3 transitions are implemented to create a native look and feel.

Code Snippet for CSS3 transitions:
function setPage(end) {
  page.style.effect = 'translate3d('+ presentPos + 'px, 0, 0)';
  if (end) {
    page.style.effect = 'all 0.5s linear';
  } else {
    page.style.effect = 'all 0.4s linear';
  }
  page.style.effect = 'none';
}

In order to activate this navigation, call the swipeTo().

track.ontouch = function(event) {
  slidePage(event);
  if (slideWay == 'left') {
    slideTo('inner');
  } else if ( slideWay == 'right') {
    slideTo('index');
  }
}

This will create a ravishing flipping page transition, while generating a native experience to mobile users.

Conclusion

There are several key factors that when considered appropriately can help optimize HTML5 mobile web applications. I hope a few of the techniques included in this post will help you improve the performance of your mobile web app, and deliver a stunning performance.

Topics:
html5 ,mobile ,mobile web

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}