#38: Basics & Tips on Designing for the iPhone

Designing a web page that is optimized for the iPhone isn't rocket science. It's the same HTML, CSS and JavaScript that you already know. The difference is that browsers and screens do not vary, you know exactly what you are dealing with. You can use that to your advantage and think about that experience when you create your UI. I start out with how to get your page formatted correctly, how to have differnet stylesheets for portrait and horizontal mode, how to create a "Back to Top" button, and then show some iPhone pages I've made.

Links from video:


  1. User Avatar
    Craig Allen
    Permalink to comment#

    Awesome tutorial! I'm addicted to your videos. Is there any way to simulate an iPhone on a Windows machine? I found "http://testiphone.com/" which is a web-based tester, so that'll have to do for now.

  2. User Avatar
    Morgan Daly
    Permalink to comment#

    Loved this tutorial. Inspired me to attempt my first iPhone website straight away and have been very happy with the results. Just to confirm it seems that animate({scrollTop doesn’t work as a nice smooth animation for some reason.

    Someone also pointed out to me that you can also use Dashcode but I am not sure if that is more for iPhone Apps as opposed to just websites for the iPhone.

  3. User Avatar
    Morgan Daly
    Permalink to comment#

    Hey Chris,

    Will you be revisiting this iPhone thing again? I have been thinking about it and while, like you said, Apple doesn’t really want it done this way I think it makes sense for some sites. Like small business sites that are really just online business cards. Here is my example after having watched your tutorial: http://portalpie.com/brisvegas

    Makes for a very clean informative site with ability to link in to google maps on the iPhone and to make a call by clicking on the phone number. I think it is a nice interface for this platform and such a purpose.

    Some things I would like to understand better is handling for the Landscape mode. You can turn the phone and it looks pretty good but the iPhone is zooming in so some of the images can start to look funny if they have been set to 320px wide. You can play with your css for layout images using the orientation stuff, but what about inline images?

    Anyway, just some thoughts and ideas. Had a lot of fun building my first iPhone site. Thanks

  4. User Avatar
    Bjørn Endre
    Permalink to comment#

    2 things about stautsHQ: why isn’t Oslo (capital city of Norway) in the option list for time zones, and how does the group members join my group – do they get an invite with a link, or do they need to sign up for them selves?

  5. User Avatar
    Chris Coyier
    Permalink to comment#

    @Bjørn – The time zone thing has been on our list for a while, we’ll be visiting that at some point.

    Regarding adding people to a group, when you add someone they will receive an email with their log in details.

  6. User Avatar
    Morgan Plant
    Permalink to comment#

    Hey Chris thanks for the tips!! just one question though.. I put a small 75px X 75px image in the root folder of the website and named it apple-touch-icon.png but it is not showing up when I bookmark the page. Guess it’s not a big deal, but just curious what I’m doing wrong.
    Cheers and thanks again!

  7. User Avatar
    anand sagar
    Permalink to comment#

    Hey Chris, How to browse iphone simulator in window xp.

  8. User Avatar
    Permalink to comment#

    How can I design this using wordpress ?


  9. User Avatar
    Cameron Zotter
    Permalink to comment#

    Great video. I’m wondering though, how relevant is this after the introduction of Media Queries?

    Keep up the great work Chris. I really enjoy css tricks!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.