Websitez.com
A Tale of Genius – jQuery Mobile Themes
Posted November 23, 2010, 9:33 pm in jQuery Mobile
There have been countless amazing applications that have been developed based on the jQuery framework.
When I read that jQuery released their mobile framework, I thought to myself, this could be the start of something amazing.
At first glance, the UI is simply breathtaking. On a mobile phone, their new framework looks fantastic. Specifically, on an iPhone the jQuery Mobile framework performs above expectations in all respects.
After using their demo for a matter of minutes, I became inspired and wanted to build a mobile website using their framework. At that time, I happened to be working on a WordPress project, so I thought to myself, I wonder how difficult it would be to build a jQuery Mobile Theme.
I began at once by taking an existing theme and manipulating it into the jQuery Mobile framework. First was to adopt their naming convention and nesting convention. This is almost identical to how you would build a standard mobile website, but they have unique attributes on HTML elements that trigger their own styling. In a matter of hours, I had a full-blown WordPress mobile theme that utilized the jQuery Mobile framework.
It was at this point that I found the most ambitious aspect of the jQuery Mobile framework. jQuery Mobile intercepted all links and forced them into hash tag navigation.
So if you’re on websitez.com, and you click a link for the contact page at “http://websitez.com/contact/” the link gets turned into “http://websitez.com/#http://websitez.com/contact/”. And once you do this, a magical “Back” button appears in the top left of the screen that takes you to a previous page.
Now, if you think about this feature, it is actually a massively ambitious decision that jQuery made. They came to the conclusion that they were going to change the entire navigation of a mobile website into hash tag navigation. This gives a standard website an instant AJAX feel to it. They included a cool ‘loading’ functionality that displays each time you click a link. From what I can tell, this is by far the most ambitious thing jQuery has done with any of their frameworks. They opted to completely change the navigation that every mobile website uses if you install the jQuery Mobile framework.
Even though this hash tag navigation created a number of issues for my WordPress site that I had to figure out, I am still a fan of the decision to use this navigation. I was able to override this by setting “rel=’external’” on the link.
So at this point after having developed my 6th jQuery Mobile theme, I can tell that this will be the future of mobile interaction on websites. In the same way that jQuery revolutionized Web 2.0 for developers, this jQuery Mobile framework is going to revolutionize Web 3.0 by giving mobile websites some of the most advanced features available with the assurance that it is going to be cross-device compatible.
The jQuery Mobile framework has an alpha release right now and is currently shooting for a January 2011 final 1.0 release.
Get on the band wagon, this is the future of open source mobile web development.