Going Mobile - Part 5: Where the Magic Happens

By Eric Murrell Monday June 8, 2009

Perhaps the most intimidating part of creating a mobile site is setting out to write all of the code that will make everything tick. At the beginning on my first scheduled development week, I set out reading up on SDKs and downloading all sorts of development kits and emulators. Thankfully, around lunch time I realized that weeks of self-education wasn’t going to be necessary.

As it turns out, if you’re already familiar with trusty ole HTML and CSS, you’re fully capable of building an awesome mobile presence right out of the gate. Don’t worry about pouring weeks into learning the basics of object-oriented programming or any crazy new languages; all you need is some well-structured HTML and a little JavaScript thrown into the mix to make the magic happen.

Think of a Deck of Cards

If you’ve had a chance to check out our mobile site, you’ll find that the entire site has a consistent UI that operates in a similar way as looking through a deck of cards. For instance, if you navigate to the “More” section and select “The Good News,” the main page slides to the left to reveal another page containing a brief Gospel presentation. If you tap on a scripture reference within this page, the Gospel presentation slides to the left to reveal the scripture in full. Select “Back” at the top of either of these pages and the page previous to it will slide back into view.

There may appear to be a lot going on behind the scenes to make this stuff happen, but really it’s just one simple HTML page with three separate DIV elements within the body. The code is similar to the example below.

When a visitor selects one of the items on any of the main pages, the server retrieves the file and loads it into the “section2″ DIV element (which is hidden when it’s not being used). Once the server is done loading the information into the DIV, the DIV is made visible and the “main-page” DIV that is positioned above it slides over to the left to reveal the newly loaded content. A similar process is completed to load secondary content like a scripture reference into “section3.”

I know… this all sounds pretty easy in theory, but there’s a lot of complex stuff going on behind the scenes to make that stuff happen, right? Thankfully, this type of functionality is easier than ever thanks to a little JavaScript magic.

jQuery is Your Best Friend

If you’re a web developer and you haven’t tinkered around with the excellent jQuery JavaScript Framework yet, quit reading this article and go take a crash course on this awesome free resource. Simply put, jQuery is an incredibly powerful JavaScript framework that’s lightweight (only 19KB when compressed!) and surprisingly easy-to-use. It contains some astoundingly helpful chunks of functionality that you can take advantage of with just a few quick lines of code.

Years ago, writing advanced AJAX functionality into a web application was a complex exercise in frustration. Today, all it takes is including jQuery on your page and typing out three simple lines of code. The jQuery Site has some excellent documentation of their AJAX callbacks and even some working examples to experiment with. They’ve also created some before-and-after callbacks available that allow certain actions to execute before and after content has been loaded onto the page. I used a combination of these call backs to load the requested content on the page, and displaying animated loading indicators while the server was making everything happen.

Please don’t feel intimated by jQuery, even if you’re completely new to JavaScript. You can learn a lot just by playing around with some sample code from their site, or you can do what I did and work your way through the excellent Missing Manual for JavaScript (which goes deep into jQuery about halfway through).

That’s It… Really!

Despite what you may have heard otherwise, you can create a completely awesome mobile experience using the existing web technologies that you’re already familiar with. Once you get the basic functionality of your site built out, I think that you’ll find that the rest of your mobile site will quickly fall into place if you’re privy to a few tricks of the trade. We’ll cover those in Part 6 of Going Mobile