Creating Mobile Apps with jQuery Mobile

There was a time, not so long ago, when developers could make a product and people would use it no matter how bad it was. It would generally garner some level of success simply by virtue of its existence. We now live in an age where there is a lot more competition. Now, with tools like jQuery Mobile, anyone can quickly craft impressive-looking mobile sites in a matter of hours.

So, how do we differentiate ourselves from the competition? We could certainly compete on price. People love a good value. But there is something that has always seemed to trump price and that is the user's experience. User experience (UX) is what differentiates most of the world's most successful brands.

Which computer company is not only staying afloat but is absolutely swimming in success? Apple. This may be partially due to the fact that their products cost three times what they should. Ultimately, I believe it is because they've always been on the forefront of designing around the user.

Amazon provides a great experience by helping you find what you're looking for quickly. They give great reviews and recommendations for your purchasing decisions. Their one-click purchase is so handy that they've actually fought in court to protect it as a competition point (http://en.wikipedia.org/wiki/1-Click).

Google could have gone the way of Yahoo, AOL, MSN, and so many others. They could have promoted whatever they wanted on their homepage. Instead, they have kept their homepage almost as clean as the day they started. They have their name, a search box, and great results. At most, there's some cute rendering of their logo. They give the user what they want and pretty much stay out of the way.

It's hard! We like to think that how we make a program or web page is crucial. We like to think that, by shaving off 10 percent of our code, we're making a big difference. But have you ever tried to explain the details of your current project to a friend and just watched their eyes glaze over? Nobody cares but us. All they hear is faster, smaller, easier, simpler, and so on. They only care about things that directly bear on their life, their user experience.

The most important lesson we can learn as developers is that we can write the most elegant code, create the most efficient systems, accomplish small miracles in less than 1K of JavaScript, but if we fail in the area of usability… we will fail completely.

jQuery Mobile is not a magic bullet. It will not create an instant magnetism to our products. Technologies and libraries will not save us if we fail to realize the environment and usage patterns of our users.

Think about this: when was the last time you spent more than three continuous minutes on any one site or app on your phone that wasn't a game? We all know how addictive Angry Birds can be but, aside from that, we tend to be in-and-out in a hurry. The nature of mobile usage is short bursts of efficient activity. This is because our smartphones are the perfect time reclamation devices. We whip them out wherever we have a spare minute including:

We can easily see the microburst activity through our own daily lives. This is the environment that we have to tailor our products to if we hope to succeed. Above all else, this will require us to focus. What did the user come to us to do while they are waiting in line? What can they accomplish in a single commercial break? What task would they consider number one during their number two?

Do NOT start with the code. Being a developer, this is really hard to say. jQuery Mobile is very fast and easy. Refactoring is also very fast. However, there is something that happens when you jump right into HTML prototyping.

People who don't know code will assume that we're much closer to a complete product than we actually may be. This is especially true with jQuery Mobile because even the most rudimentary stab at a project comes out looking polished and complete.

People will start to fixate on minutia like spacing, margins, colors, logo size, and so on.

Due to the sunk cost of our time in the current design, we are less likely to make significant changes from whatever we initial coded because refactoring is easier than a do-over.

Instead, get a pen and paper. Wait, what? Isn't this a web developer book? Relax, you don't have to be an artist. Trust the process. There will be plenty of opportunities to code later. For now, we are going to draw our first jQuery Mobile site.

The great thing about starting with paper-based ideation is:

Ideally, 3x5 Post-its notes are perfect because we can easily lay them out on walls or tables to simulate site structure or process flows. We could even use them to conduct usability testing. A little later, we'll lay out our drawing for the owner to see how the whole thing could work before we get buyoff.

According to Katherine Kobe at http://archive.sba.gov/advo/research/rs299tot.pdf:

An article at http://www.msnbc.msn.com/id/16872553/ says:

Even in the land of big business, it bodes well for our craft; there is such a volume and churn of small businesses. That means an almost endless supply of mom-and-pop shops that are trying to compete. That's where we come in.

Nicky's Pizza has recently opened its doors. Like so many other businesses, the owner realized that he should have a website before it opens the doors. His friend made the website and it's actually pretty good. It's just not mobile yet.

The pizza is great and while we sit there enjoying, we bust out a pen and grab a napkin. We are about to make a mobile website right here, right now, and win some business. Let's get started.

For any small, local business there are certain staples that should probably be first and foremost on their mobile site:

Since this is a restaurant, services will be the menu. They also were smart enough to create a Facebook page. So, we'll link to that and bring in some testimonials.

Since we're drawing and not using a tool, you can choose to be as detailed as you like. The following figures are two examples of drawing the same page. Either works to communicate the core ideas.

When working with our own team, the first is probably just enough since we all know what jQuery Mobile can do. We know what details the framework will fill in and can draw just enough to tell each other what we're thinking. However, when drawing for customers (or people who you know are more visual and detail-oriented), we would do well to take the few extra seconds to add the finer details like shadows, gradient shading, and, especially, the logo. Business owners are very proud of their babies, and your effort to include it will instantly grant your drawing that little bit of extra gravity.

The first is certainly good enough to pick up, hold in the hand, and pretend it's a smartphone screen. In the second figure, we can see how much difference actually drawing out the logo can make and how adding harder edges and shadows give a sense of depth. A little polish goes a long way.

There are several ways to go about adding drop shadows to your drawings. The most artistic way is to use pencil but the problem with drawing in pencil is that it leads to smudging, and paying too much attention to fine detail. These drawings are supposed to be rough. If you screw up slightly, no big deal. After all, you've probably spent less than a minute on each drawing and that's the idea. The goal is to get to a shared, visual understanding quickly.

Here are four different ways to draw the same button: pencil, pen, Sharpie, and markers. My personal preference is to use a fine point Sharpie.

Here are some other jQuery Mobile elements and ways to draw them:

Listviews	Dialog
Navbars	Buttons
Collapsible	Grouped buttons
Input	Search
Flip switch	Slider
Checkbox set	Radio set
Select menu	Multi select
Split listviews	Bubble count listviews

The rest of the site

The Map It button will lead the user to this page where we will list the address and have a static Google map. Clicking on either the address or the map will link to the full Google Maps location.

On Android and iOS 5 systems, linking to Google Maps will cause the native system to bring up the specified location in the native interface which will allow for turn-by-turn navigation. That changed in iOS 6 but we'll get to that later.

As an added bonus, in case users don't want to go to the physical location, let's throw a telephone link on the button labeled Call for delivery.

Note the different thicknesses of lines. Also, a touch of color and our typical drop shadows. Adding these little details are not particularly hard and can make a big difference.

All of the Call buttons throughout the site will launch the native call interface. The next drawing is of the iOS view of a call dialog. Android is pretty similar.

Notice the little shiney lines on the button in the background indicating that it was clicked. Notice also, the way that we've shaded out the background (pencil work) to indicate it's modal status.

Now, let's consider the menu and what will serve as a global header. The first two links that you put into the global header will be turned into buttons. There is a setting to auto-insert a back button in the place we currently have the home button. Just add data-add-back-btn="true" to the jQuery Mobile page. However, I generally wouldn't use this. Usability testing that I've helped to facilitate shows that most people simply push their device's native back buttons. So, let's make our first link Home, the second link as Call.

Here we see the detail view for salads. It's pretty much the same as before but we've done some formatting within the list views. We'll see the actual code for that in the next chapter.

Naturally, we could use a whiteboard and markers to do all this work. We can collaboratively draw our ideas on the board and take snapshots with the very smartphones we intend to target. My recommendation is to use our faithful Post-it notes and simply stick them to the whiteboard and use the markers to indicate screen flows. The following figure shows how my board looked after mapping out the project:

If we need to remap our application flows, all we have to do is shuffle the notes and redraw our lines. It's a lot less work than redrawing everything a few feet farther down the whiteboard.

Consider what we've laid out so far. Considering the screens we've drawn and the fact that the owner was able to view and sign-off that this is what he wants, how many more questions are there to ask? Do we really need some Excel document listing out requirements or a 30-page Functional Design Spec (FDS) document to tell you exactly what everything is supposed to be and do? Wouldn't this be enough? Does it have to really be done in Photoshop and produced as a slide deck?

Consider also that what we have done so far has cost us a grand total of five Post-its, one Sharpie, one pencil, and 20 minutes. I believe the case here has been abundantly made that for most sites, this is all you need and you can do it yourself.

For those of us who have never encountered paper prototyping as a serious discipline, this can feel very weird at first. With any luck, the lessons learned here have expanded your mind and given you a new zeal for crafting a good user experience. If you would like to delve deeper into ideation techniques, the best book I can recommend on the topic is Gamestorming by Dave Gary (http://www.goodreads.com/book/show/9364936-gamestorming).

You should now be able to effectively sketch a jQuery Mobile interface for both your colleagues and customers. In the next chapter, we'll translate what was drawn here into a real jQuery Mobile implementation that goes beyond the normal jQuery Mobile look and feel. Just remember, the user experience and usability come first. Go for quick, focused bursts of intuitive productivity.