Earlier today news of an imminent Flash upgrade from the iPhone was flooding the Internet, though no concrete dates were specified. When a Flash plug-in is released it will open the doors for a lot of game programmers who are unfamiliar with coding using Javascript and the HTML DOM. But for now, this is all that's available. So, let's continue with our tutorial...

When designing games for the iPhone keep in mind that although the screen's resolution is 320x480 pixels, some of the vertical pixels are lost to the status bar, address bar and lower toolbar... 64 pixels are lost, to be exact. So, if you want your entire game to display "above the fold," design it to be 320x416 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.")


If you look at a printed crossword puzzle you'll notice that the game consists of two main parts: 1) the grid, and 2) 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 15x15 matrix will fit within the design. They also need to be large enough so that even a person with fat fingers -- *cough* Scott *cough -- 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 19x19 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 17x17. This means that we loose 271x271 pixels to the grid.

Since a title is required for 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. Coding goodies will come tomorrow.

// Ryan Jennings

Labels: crossword, design, game, how to, iphone development

Since Apple announced custom Web Clips for your website everyone has been scrambling to write articles on how to do it even though almost everything you need to know is on Apple's own iPhone Dev Center site.

If you were paying attention, you noticed I said "almost". What no one has managed to do yet is tell you why your icon looks chopped and funky.

Well, after exhaustive testing, we've figured it out. The iPhone cuts off 1 pixel on the left and right and 3 pixels at the bottom of your icon. It also rounds the corners and overlays a "glossy" appearance that makes it difficult for you to truly showcase your amazing design skillz in Corel Draw. Many people have posted that they created icons with larger dimensions (128x128 or 158x158) to solve the problem. Don't bother. It's a larger download for users and now more difficult for you to figure out how your graphic will render. Apple says build them 57x57. So our advice is to build them 57x57 - or keep reading...

We've created a Web Clip Photoshop template for you to utilize to create your own Web Clip Bookmark Icon masterpiece. The graphic below shows you the opened file. We've included the overlay, rounded corners and guides to help you find the exact center of your icon.



Click here to download

In order to use the template, you'll need to be familiar with Photoshop layers. Make sure you turn off the "overlay" layer before exporting as a PNG. The corners of your icon should NOT be rounded. The iPhone takes care of that.

I realize you may have stumbled across this post trying to figure out how to actually get a web clip icon on your site, so let use save you an extra click and just post Apple's instructions here:



BTW... as of the writing of this post, we have not put up a decent web clip for this site. Cut us a little slack, we've been busy.

//scott

Labels: design, how to, webclip

So the number one question asked of me by other iPhone owners is "how'd you get that fancy desktop?" I'm paraphrasing slightly, sue me. Based on the amount of times I've been asked that question, I thought it would be appropriate to get things rollin' on this blog by covering this very topic.

How to get a "fancy" wallpaper
Many people just take photos and then select the option to set photo as their wallpaper. That's ghetto. Yeah... I said it. Ghetto.

In order to do what all the cool kids are doing, you just need to follow a few quick and simple steps:

1. Create a folder on your desktop (or wherever) and title it something that implies "wallpapers". "things on a wall" is acceptable.


2. Find a fancy wallpaper online or create your own (instructions to follow).


3. Save wallpaper to previously created folder.


4. Open iTunes and plug in your iPhone/iPod Touch.


5. Go to the "Photos" tab and select your newly created folder (illustrated below).


6. Once the photos are sync'd up with your iPhone, open the photo gallery and select your image.


7. Tap the icon in the bottom left of your photo and select "Use As Wallpaper".

You're done. If these instructions didn't work for you, then do the following:

1. Turn off iPhone/iPod Touch.


2. Place into original packaging or similar size box.


3. Wrap in colorful paper.


4. Give to someone else on Dec 25th because you don't deserve to use it.

Couple quick additional notes. You do not need to keep the photo on your iPhone/iPod Touch in order for it to stay in place as your wallpaper. Once you set it as a wallpaper, it's copied to some fantasy world inside the iPhone where we don't have to worry about it. If you replace a wallpaper with a new image, the old one is lost. The fantasy world only keeps track of one at a time.

Wallpaper Design
You'll find wallpapers for your iPhone and iPod Touch all over the internet. However, these are wallpapers that have simply been cut or designed to 320x480. "Why's this wrong" you might ask? I'm so glad you feel comfortable enough in our relationship to interupt already. Anyhow... the reason this is wrong is because the basic dimension of 320x480 doesn't take into account key elements that will cover up your wallpaper.

I've provided a graphic below to illustrate the various aspects and dimensions of the interface where the wallpaper is shown. The 2 biggest elements to be concerned with are the Date & Time and the Slider. Although your wallpaper is seen under them, you obviously don't want to put your personal tagline or company logo under these.



Now you're ready to create your own wallpapers. You can download a PSD template with guides for your wallpaper here. If you do not own and know how to use a decent graphics application such as Photoshop, please leave wallpaper design to the experts. Speaking of which...

Free iPhone / iPod Touch Wallpapers
I'm sure the first wallpaper below looks familiar. Ever since the first demonstration of the iPhone, it has been shown with the fish wallpaper. However, you may have noticed it's not on your phone. Many people have posted it on their sites since, so I felt compelled to do so here as well.

To download wallpapers from this site, just click the image to view the full size version and then right-click and select "Save as...". Then proceed with the first step 3 up above.



Well, that's it for now. This seems to be an awfully big post for something that only shows up on your iPhone / iPod Touch for a second. Oh well. Ryan is working on posting an intro to iPhone web design and coding later on today that will be far more insightful... hopefully.

//scott

Labels: design, how to, specs, wallpapers