jQuery Mobile – Should I Use it on My Landing Page?

Well, the short answer is No.

Looks like a lot of marketers are expanding their horizons and trying to figure out the mobile game. Good for you, there’s a lot to figure out. That’s why I wrote this Mobile Marketers Resource to try and keep everyone updated.

It just seems so easy, doesn’t it? Throw up a mobile-formatted version of your working landing page, add jQuery mobile to handle everything, and walllll-a! Sick looking website bro! Now trying running it on a smart phone built in 2009….

jQuery Mobile, at the time of writing this, is at Release Candidate 2. That’s not an official release… so the stuff is still in Beta.

But it’s so shiny!

And that is the allure of jQuery mobile. Seems like it can do everything! But everything comes at a cost. There is so much overhead in jQuery Mobile to make sure it works on every smartphone, which means it doesn’t work well on any smartphone.

Don’t get me wrong. I love jQuery, and when jQuery Mobile is ready, it will be bad ass. But for now, it is definitely not the way to go, especially when money is an issue. Simplicity is crucial on mobile devices. You want as little code as possible so your page works on every device that lands on your page. Not just that it works, but it actually works without 6.3 second delays between pages.

Ghetto Speed Test – jQuery Mobile vs XUIjs

So I concocted this ghetto speed test just to compare jQuery Mobile to another framework.

The test is simple:

I start on this page in the jQueryMobile docs. I navigate to “page two.” I go back to “page one.” I go to “show Popup (as a dialog)” I go back to “page one.”

Simple enough, right? I am using the “Profile” feature of Firebug to see what the Javascript is doing. This plugin has been crucial for me while messing with my own mobile framework.

jQuery Mobile Results

Almost 30,000 calls to functions to navigate about 4 or 5 pages. That doesn’t seem like trouble for a desktop computer, and it’s not. But you have to think mobile, and to most mobile devices in use today, 30,000 calls to functions to navigate a few pages is a killer on its tiny little processor.

XUIjs Results

XUIjs is a lightweight framework from the makers of PhoneGap. It’s what I’m using to build up my personal jQuery Mobile alternative. Before you jump into XUI.js, be forewarned the documentation is lacking and not nearly as good as jQuery’s.

Anyway, for this test – I had to replicate it on my own page. I did the same thing though: navigate back-and-forth between a number of pages:

The result is under 1,000 functions calls. That’s 1/30th less processing power to do the same exact thing! While XUI.js lacks many of the neat features (ease-of-use, slick willy transitions) that jQuery Mobile provides, the trade off can be the difference between life and death of your landing page.

The saddest part is that the “formatPage” function is my own that I wrote, and it’s taking up most of the processing power. Imagine if i was actually a good coder?

So What the Hell Do I Do for my Mobile Landing Page?

Why is jQuery Mobile so damn slow anyway? For one, it’s based on jQuery itself. You not only need the jQuery Mobile script, but original jQuery as well. Then it comes packaged with a massive CSS file that’s about 3,000 lines long. When you package it all up, that’s quite a payload to deliver to processing and bandwidth-limited devices.

If they build jQuery Mobile from the ground up (not basing it off jQuery which has a lot of cleanup for desktop browsers), or at least remove all the junk that tries to make it work in IE6 (why, why, why are we still bothering?), then maybe it will improve.

Anyway, there are plenty of other mobile frameworks out there each with its pros and cons. More keep coming out and I can barely keep my list updated. XUIjs is definitely one of the more “lightweight” ones. This is another “lightweight” framework I stumbled across.

The trade-off is speed for fancy-ness. You have a lot of options and I don’t have any answers. All I’m saying, for now, is that jQuery Mobile is not the best option.

The mobile game is a mess. I believe it will just become a bigger mess. But there’s gold in them hills!

  • Ah eff that. Mobile can barely handle p202 redirects. With Mobile landing pages you really wanna keep it super super simple.

  • Is there a reason we need to us javascript for any of this? Do mobile browser have trouble with html/css standards or something?

  • Did you see the ThemeRoller they just released?
    http://www.jquerymobile.com/themeroller

    I saw on the jQueryMobile twitter a few days ago they’re expecting the official release soon. Can’t wait. I’ve been using it successfully for months, so even with the speed issue you can still get it to work. I used all my own tracking (not p202) and kept it super simple, but there’s still definitely some room for improvement.

  • I’ve used jQTouch for a small project. It works pretty good on droid and iphones (I didn’t need to test other devices).
    But I wouldn’t use it for anything traffic heavy.
    I guess small css and some good old javascript would perform the best.
    And if phone-like UI is needed maybe it’s better to develop a mobile app instead of a mobile site.