When I originally posted part two of this tutorial last year, I prefaced it with news of an “imminent” release of Adobe’s Flash for the iPhone. Well, a year has passed and still no Flash. Around a month ago, MacRumors announced a collaboration with Adobe and Apple on a Flash solution, but I’ve since read that business negotiations are delaying that initiative. So we’re still a no go.

I mention Flash because it would seem that the inclusion of the plug-in would open the door to many established and seasoned Flash developers who are not savvy with HTML/CSS/JavaScript or Objective-C (for SDK development). But with the introduction of CSS animation, which the iPhone (and now Safari 4 beta) already support, creating visually intriguing web user interfaces (for games or other web apps) is more plausible than ever before, even without Flash.

It may not seem realistic to create iPhone web app games anymore, since the release of the SDK over a year ago, but iPhone Web designers and developers can still strive to create visually impressive web experiences. And some of these tips may help towards that cause.

Part 2: Design Considerations

When designing web app games for the iPhone keep in mind that although the screen’s resolution is 320×480 pixels, some of the vertical pixels are lost to the status bar, address bar and lower toolbar… 64 pixels to be exact. So, if you want your entire game to display “above the fold,” design it to be 320×416 pixels. (Above the fold is a reference web designers throw around a lot to appear cool. It refers to the topmost part of a Web page. The area that is initially viewable. The content that shows up as you scroll down the page is “below the fold.”)

Figure 1. Crossword puzzle user interface components
 

If you look at a printed crossword puzzle you’ll notice that the game consists of two main parts: the grid, and the “across” and “down” clues. Both take up a lot of real estate. So how do we fit everything onto the iPhone screen?

First let’s discuss the grid (or board, whatever you’d like to call it). The squares that make up the grid need to be small enough so that a 15×15 matrix will fit within the design. They also need to be large enough so that even a person with “fat fingers” can press a single square. After mocking up a number of grid sizes I realized that although I could theoretically size each individual square at 19×19 pixels and still fit all 225 (15 rows x 15 columns) on the screen, I didn’t have much room for anything else. So I settled on 17×17. This means that we loose 271×271 pixels to the grid.

Since a title also accompanies each puzzle, very little room is left for the clues. It will be impossible to display them all at once, so instead let’s display relevant clues when the user clicks on a particular row/column. We’ll talk about how this is going to work later.

That’s all for today. We’ll start coding tomorrow.

—Ryan