Mobile Dev Easter Eggs | NetEngine

Mobile Dev Easter Eggs

Rowan Thursday, 28 March 2013

So you want to take your existing desktop web app and make it Mobile Friendly™. Let’s say, its had a killer responsive design for some time – well, even just the landing page. It just needs to feel ‘snappier’… More responsive… What to do? Create a separate experience? Re-write?

Maybe. But that’s expensive, time-consuming and soul-destroying (maintenence-wise).

Rejoice! A few wonderful libraries exist to take an established desktop web application and help them run a little smoother on modern smartphones.

FastClick

We are all familiar with that annoying (300ms) delay you get in mobile browsers when 'clicking’ on links – FastClick to the rescue! Where you could specifically handle touch events in your javascript, this library tests if the current device is touch enabled, and fires a click event immediately on touchend. This makes your exisiting code feel closer to a native app experience. Adding FastClick to your project is easy:

  window.addEventListener('load', function() {
      new FastClick(document.body);
  }, false);

The browser/OS support is fantastic, and reading through the source illuminates a bunch of the idiosyncrasies of the weird and wonderful world of mobile browsers.

jQuery UI Touch Punch

This one could possibly be the Second Coming. jQuery UI is fantastic for all the reasons we already know; It’s well structured, provides heaps of events and configuration options, and (unsurprisingly) integrates well with everyone’s favourite DOM traversal/Event Handling/AJAX library.

However, it breaks on every mobile browser I’ve ever used. jQuery UI Touch Punch makes it work smoothly on every mobile browser I’ve ever tried. 'Nuff said.

It’s laughably easy to add in, but order is important:

  <script src="..jquery.js"></script> <!-- (1) -->
  <script src="..jquery-ui.js"></script> <!-- (2) -->
  <script src="..jquery.ui.touch-punch.min.js"></script> <!-- (3) -->

  <!-- Later (of course in a separate script and not inline!) -->

  <script>$('#widget').draggable();</script> <!-- (4) -->

Some Others…

Smooth touch-ready image slider. Uses CSS transitions for animation, which negates the need for you (the developer) to think about framerates! IE7+.

Like Bootstrap but built for iOS prototyping. Potentially useful CSS/JS inspiration for your project. Really nice docs!

These and other great tools will not only help you drag existing apps kicking and screaming into the mobile world, but are great for building new ones with the tools you already know.

comments powered by Disqus