Making a Site Bawler on Mobile, Jquery Mobile = Easy-Breezy

Ok, so we got this website right. Most of the content being powered by an existing CMS, with the exception of a couple of unique pages (E.g. the homepage). Well, we had to figure out a way to easily get this site with ever-changing content to be tailored for display on all those fun little mobile devices. You know; iphone, blackberry, droid, windows mobile, palm web os, whatever.

At the same time, it needed to look good on the iPad. This of course, brought up a completely different discussion since the existing site looked and functioned quite nicely using the iPad safari browser. The only downside, from the clients perspective (and potential users), it didn’t give the feeling of an Ipad app, which in itself, gives the website a substantial amount of value (real or illusional). So the solution; allow the user to easily switch between the mobile and full version of the site. I foresee this becoming a standard practice. ESPN.com does an excellent job of executing this with a nice splash screen prompting the user to choose either mobile or standard.

Anyway, back to making it feel like a mobile app/experience without creating a drastically different version of the site. Yall ready know what it is, Jquery Mobile. Jquery, surely becoming one of those buzz words which can be thrown around vicariously with absolutely no knowledge of what-the-heck it is. It’s cool. I get it. I appreciate the effort. Jquery mobile, however, is a slightly different can of worms.

I’ll let http://jquerymobile.com/ explain it best:

“A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

I gotta say, the setup was a breeze. The only modifications we made to the html were adding a few html 5 attributes such as:

‘data-role=”page” data-role=”listview” data-theme=”c”

Jquery Mobile takes care of the rest.

The majority of the work lies in rethinking the way your users will interact with the site now that it’s displayed with ¼ of the screen real estate. In addition, users interacting with your site on a mobile browser are more likely to be looking for a very specific snippet of information and they will want to find it fast. In other words, you need to remove all the fluff. Once you get the whole ux dilemma resolved, your 90% of the way there.

Of course, it’s always good to specify your own mobile css overrides for certain scenarios. One good example is; the CMS required the contact information be editable in one large CK editor rich text block. The contact information was formatted in tables (oh no). For the mobile devices these tables where too wide to fit the smaller screen size effectively without zooming. So, throw in a lil:

table.contact td {display: block !important;}

BAM! We are good.

There is one caveat. Jquery mobile, it’s in alpha release (ughh). A little bit of risk, very little, but based of our testing with multiple mobile platforms, there have been no glaring issues. So Jquery Mobile, I’m an official fan.