We haven't forgot those of you looking for information on horizontal, or landscape view specs for building their iPhone site or webapp.

You'll have to wait for a post that shows you how to build a site that accommodates both or utilizes different stylesheets. We're currently planning on posting that tutorial with an actual template for you to download and use. Coming Very Soon, we promise.

For now, if you prefer to build a site or application that is supposed to be utilized in landscape view, just copy the text below into your HTML - before the </head> tag and your ready to go.



The script for removing the URL bar below works in either orientation of the iPhone or iPod Touch.

Also, we've put together the specs diagram for this view as well.


* the alternate content dimensions are if you hide the URL text field bar using the code above.

Labels: how to, iphone development, specs

There are a few first steps you need cover in your code for an iPhone specific website or application. These keep the screen from zooming out and set the presentation to the best possible for the user.

Make your site fill the entire screen - no zooming
by default, the iPhone Safari browser zooms a webpage out to 25% of actual size. There are times when you may want it to zoom out or in for various needs, but for a starter, we're just going to show you how to make it zoom to a 1-to-1 ratio. This means that if you build the site at 320 pixels wide, a user will view the site at full width on load - no interaction required. If this seems unclear, please scroll down to the post about wallpapers and begin with the second Step 1 listed.

So, what do you need to do? Just copy the text below into your HTML - before the </head> tag and your ready to go.



One thing to note, this only covers the site in the basic portrait view mode. If a user turns the phone sideways, it will not scale to fit. We'll cover how to do that in a another post.

Hide that unsightly URL field
Okay, it's not really unsightly, but when dealing with limited space, every pixel (or 60 pixels in this case) counts. This one is as simple as the previous code snippet. Again, just place this before the </head> tag and your ready to go. On load the browser bar will still appear, but once the page has loaded it will slide up like magic and make your friends want to buy you expensive gifts. Seriously.



These are just the very basics of developing for the iPhone. In the future you can look forward to full site templates you can download here that allow you to just drop in images and links and you're ready to go. We're good like that.

As one last helpful reference, we've supplied an image below that outlines the iPhone specs and dimensions when in browser mode.


* the alternate content dimensions are if you hide the URL text field bar using the code above.

If you've developed a site or application for the iPhone, let us know. We'd love to help you show it off. We also like to keep an eye on the competition. ;)

//scott

Labels: how to, iphone development, javascript, specs

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