How to Setup Your Site for the iPhone

iphone appI’ve been working on some mobile apps lately and realizing how simple it is to get started making your site more iPhone compatible. You can either create a separate site specifically for mobile or create a mobile stylesheet to be applied to specific devices. There are some great arguments out there for each option, but what I’m discussing here is just the introductory steps that work for either method. In writing this I’m also considering how I’d like to apply those ideas to my site here.

If you’re planning to create an additional stylesheet rather than a completely new codebase, you’ll want to start by specifying the stylesheet to use with a media query. Ethan Marcotte has a great article called Responsive Web Design that expands upon this idea on A List Apart. To target an iPhone/iPod specifically you can use this code right after your main stylesheet in your header:

<link href="iphone.css" rel="stylesheet" media="only screen and (max-device-width: 480px)" type="text/css" />

Control the Page Size

Next you’ve got a handful of settings that will help make your site similar to a native iPhone app. If you want your page to resize to the device, you can use this line in your header:

<meta name="viewport" content="width = device-width" />

or if you’re setting your page width in CSS and would prefer to use a specific scale (with or without the option to disallow users from zooming the page) you can use:

<meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />

Add a Custom Icon & Startup Image

There are also meta tags for use when your site is added to the home screen of a user’s device (press the ‘+’ in mobile safari to add to the home screen). The first is adding a custom icon to your site that I wrote a previous post about. In addition, you can add a startup screen to give an app like feel. To add a startup image create a png that is 320 x 460 pixels and add this line of code to the header:

<link href="/your_image.png" rel="apple-touch-startup-image" />

Make it Look Like an App

You can make your site look more like an app when people save it to their home screen by hiding the top bar that loads with safari and changing the color of the status bar. Before you do this you’ll want to make sure you’re site is setup so it can be easily navigated without needing the back button. To remove the Safari controls add this meta tag to your header:

<meta name="apple-mobile-web-app-capable" content="yes" />

And to change the status bar (network name, time, battery level) from the default grey to either “black” or “black-translucent”:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Note that if you change the status bar to translucent the site will sit underneath it. Make sure that there is no critical content hidden behind the bar.

These simple lines of code are a great way to get started setting up your site for Apple’s devices. If you’d like to go into some more detail, Apple’s Safari Reference Library is a great place to get started. Then to take this to the next level I’d recommend digging into jQTouch or Sencha. Both of these tools will create an even more app-like experience with animated transitions and app-like bars & buttons using javascript (which you’ll want to have a strong knowledge of to use to their full potential).

Tags: , , ,

« Older     Newer »

Leave a Reply


Back to top