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.