jQTouch and Mobile Design

Jan 18, 2010
Episode 8
Jim covers jQTouch, a plugin for jQuery that enables quick iPhone websites, and Nick talks about how to design for the small screen.
Spotlight

Thanks to those who make Doctype possible!

jQTouch - Quick and Easy Mobile Development

jQTouch is a plugin for jQuery that allows you to build mobile websites for the iPhone and iPod Touch. There are plans to also support Google Android and Paml WebOS browsers in the future. jQTouch was written by David Kaneda and is completely open source and MIT licensed. If you are familiar with the iUi Framework, jQTouch should look very familiar. It shares many of the same conventions but packs a lot of new features and leverages recent advancements in the Mobile Safari browser.

Markup

The markup for a jQTouch site is pretty simple. Each "page" on your site is a div with an ID in the body of the document. Links point to the id of the div you want to show, and jQTouch automatically transitions the view using a slick animation. jQTouch allows you to easily create native looking elements like buttons, links, and forms using very simple html structures and CSS classes. Pages can be loaded via AJAX as well. Simply put a url as the href for a link and jQTouch will automatically fetch and load your page. AJAX pages should just be the HTML fragment that contains your page, not a full HTML document.

Animations

jQTouch utilizes the power of 3D CSS transformations and CSS3 animations to build very smooth page transitions. Since CSS3 animations run natively on the iPhone, not in the slower JavaScript interpreter, the animations don't jump and stutter like they often do when running in JavaScript. By default pages load with a right-to-left slide, but jQTouch offers several other animations including dissolve, pop, swap, cube, and flip. You can choose which animation to use by applying the name of the animation as a class on a link. Animations will run in reverse when going backwards in the history.

Resources

Mobile Web Design

Not every website needs a mobile version, because modern smart phones and other mobile devices are capable of making normal websites look good. However, if the site you're designing is content heavy or if it's for a brick and mortar business, a customized mobile experience is worth considering. The reason I've singled out these two cases, is because they're commonly accessed by people on the go (I'm drawing on personal experience, here). If a user is browsing the web while waiting in line at the cinema for example, content sites are a first choice. Additionally, if a user is looking for a nearby bookstore or restaurant, it's important that they're able to easily access information like addresses, phone numbers, and menus.

Designing for Mobile

There are a lot of considerations when designing for mobile devices, but the most obvious is the limited screen real estate. Designing for the small screen can be a challenge for beginners, and it's still a relatively new area of design, but the easiest thing to do is to cut out as many elements as possible. For most websites, there's no way you'll be able to include all the features in a mobile version.

Another interesting feature of newer mobile devices is that many of them support for the Geolocation API in HTML5. This means that, with the user's permission, you can use their current location to present them with more relevant information. For example, if you're designing a site for a restaurant chain, you could provide the user with 3 nearby locations or maybe some discounts that are exclusive to locals.

Mobile Pitfalls

Most mobile devices don't support Flash yet, notably the iPhone, so mobile websites should avoid this. Restaurants, band websites, and other consumer facing sites tend to gravitate towards Flash and other browser plugins, which is to be expected. This isn't OK when there isn't a mobile version that's free of these plug-ins, however, which is all too often the case.

Additionally, many mobile websites don't support the same URL structure as their desktop companions. For example, when tapping a link to a video that's on College Humor, the mobile site redirects you to an index of videos. I consider this to be bad practice. Why not just go straight to the link the user wanted in the first place?

Lastly, it's important to keep file sizes down. Most modern websites are fairly conscious of this, but still, it's possible to crash a mobile browser by loading in too many images or running too much JavaScript. Remember, it's not just bandwidth over a cellular network that you have to think about. Mobile devices still have a relatively small amount of memory.

Resources