Developing for the iPhone / iPod Touch is quite easy because you’re only developing for one platform and only 2 variations of resolutions.

Having recently started developing for the said platform, I had to trawl through tons of blogs, resource sites and source code to get find out what I need to start work.

This is a list of stuff I’ve found useful or would have found useful to know before starting, and yet sometimes still need reminding about.

1. Screen Dimension

320px by 480px Important for layouts, but also good to keep in mind, so you’ll think about font sizes etc in terms of a much smaller screen. Especially important with buttons. Don’t make them too small or too close to each other for obvious reasons. I believe the minimum button size recommended by Apple was 20px by 20px (?).

2. Viewport Setup

<meta id="viewport" name="viewport" content="width=device-width"; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" >

If you’ve designed your page to fit right the dimensions prescribed in Tip 1, it should just be a matter of adding some meta details into your header. This is a necessity for the page to display properly. Mine is a pretty basic setup, and it’s set up so that the scaling is fixed.

3. Webkit is Your Friend

* {
     -webkit-box-sizing: border-box;
}

Some people might not agree, but I just applied this to everything because this makes layout somewhat less taxing mentally.

For example, traditionally when you want a div to be 50px wide and you want to have 5px of padding on each side, you have to define the width as 40px so that you make space for the padding outside. What this box sizing thingie does is it puts all the padding inside the box, so you if you say 50px with 5px of padding, the box still comes out 50px, except that the padding is on the inside. It’s alot more intuitive.

There are also tons of other webkit goodies that you can use on the iPhone that can potentially make your life alot easier. I found this page particularly useful.

I especially like -webkit-border-radius: 3px; It creates boxes with rounded corners in a snap. Great for content and buttons.

4. Orientation & Toolbar Hiding with Javascript

This code will hide the toolbar and increase (somewhat) your screen real estate and make your site feel more like a native app (again this is subjective).

More importantly, it will allow you to switch CSS styles according to the orientation of your screen.

<script type="application/x-javascript">
  addEventListener("load", function()
    {
        setTimeout(updateLayout, 0);
    }, false);
    var currentWidth = 0;
    function updateLayout()
    {
        if (window.innerWidth != currentWidth)
        {
            currentWidth = window.innerWidth;
            var orient = currentWidth == 320 ? "profile" : "landscape";
            document.body.setAttribute("orient", orient);
            setTimeout(function()
            {
                window.scrollTo(0, 1);
            }, 100);
        }
    }
    setInterval(updateLayout, 400);
   </script>

I generally design everything in portrait, but for elements that require it create another copy I add body[orient="landscape"] in front of it like so:

#subnavbar li{
        padding: 10px;
}
 
body[orient="landscape"] #subnavbar li{
	padding: 15px;
}

5. Think in Percentages

Number 4 allows you to create custom styles to suit each viewport orientation, but if you think about it. It doesn’t make much sense to go and create a totally different layout for each orientation. I’ve found especially with horizontal nav bars and things you want to keep centered/evenly spaced, it’s good to use percentages because they allow for more graceful scaling.

When starting, I still thought alot in terms of fixed widths, but later on it became apparent to me that a lot of the stuff I did could have been pulled of with less sweat if I’d thought in percentages.

Conclusion
iPhone development is an exciting new thing for me. It’s somewhat less annoying because I don’t have to think about IE6 all the time, and yet it comes with a whole slew of new restrictions.

If you’ve stumbled across this post and have something to add, put it in the comments. Or if you’ve noticed that I’ve got something wrong, leave a comment as well. I’m always glad to learn something new.