Designing and Developing for the iPhone from Scratch

Designing and Developing for the iPhone from Scratch: New Premium Tutorial

on Oct 21st 2009 with 26 comments

In this tutorial, we are going to design a website for the mobile Safari browser (found on the iPhone and the iPod Touch). We’ll start from scratch in Photoshop and work our way, step-by-step, to a finished product complete with an animated jQuery image slider. Join today!


sample

sample

sample

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!


 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Tylor. I am an avid Website designer from Michigan USA. Everyday, I am learning something new and hope to continue growing my passions forever. You can follow my various ramblings and helpful link findings at my Twitter account @TylorSkory. Thanks!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://sffarlenn.net Laneth

    This looks fantastic – and may just push me over the edge to get a Mac… Thanks Tylor!

    • lkaz

      Don’t need a Mac to develop sites/web apps for iPhone..

    • http://relevantdevelopment.co.uk Ash

      You don’t need a Mac to develop a website for mobile Safari.

      • Eric

        Ash,

        He is just looking for any reason to buy a Mac. I understand where he is coming from.

      • http://nathanledet.com Nathan Ledet

        But I think you need a mac to develop for the iPhone.

      • http://nathanledet.com Nathan Ledet

        OH snap.

        I guess I should have paid closer attention to what this article is about. i thought it was literally Designing and developing apps for the iPhone.

      • Sean

        In order to use the Iphone SDK you need to be running OS X

    • Jaimie

      not only running OSX you need to have an intel based mac..

  • http://www.webanddesigners.com Web and designers

    Looks awesome, will have a look tonight

  • Evan

    Designing web pages for the iPhone? There’s an app for that.

  • Evan

    Designing web pages for the iPhone? There’s an app for that.

  • Ian

    From Michigan aye… very nice. I live in Michigan as well.

  • http://www.imblog.info Muhammad Adnan

    This is a good tutorial for Iphone apps..

  • Padfoot

    Interesting….
    Though i’m not a member :(

    • Nori Silverrage

      Great time to become one then. They got lots of great tutorials and its rather inexpensive.

      • Usman

        Paypal not supported in our country .. and editor of this site said ” We can’t help you” :(

  • http://consolegaming.eu Michael

    Nice one, I might have a go at this tutorial. Good to see a tiny bit of Norway being used in your example as well. :-)

  • http://www.nouveller.com/ Benjamin Reid

    I don’t think you can beat http://jqtouch.com/ for developing websites on the iPhone or http://iwebkit.net/

  • http://os.laroouse.com/ esranull

    thanks I will add it to my site

  • awake

    I’ve been waiting for something like this

  • http://www.sitebase.be Sitebase

    Or you can buy my Mobile site script on themeforest and create your own mobile website in seconds ;).

    http://themeforest.net/item/mobile-site/63316

  • http://autonomywebdesign.com/ Autonomy

    I’m excited to check this out. Thanks Tylor.

  • http://www.idevgames.com Carlos

    Recommended site would be iDevApps (http://www.idevapps.com)
    Good community site for developers of iPhone and iTouch apps.

  • Ramon

    There is also http://www.mobify.me and http://www.wapple.net to build your own mobile sites.

  • http://webtosmartphone.com Ethan

    Published in 2009 and still relevant! Thanks a lot for the reference!

  • Yhosibell Prieto

    Create your mobile website in just a few minutes. Check out http://www.buil.mobi and start building your mobile site. This platform allows you to easily create and manage hundreds of mobile websites through a central interface. For multiple websites build.mobi users may use our CSV bulk upload or for single sites, we have a simple 5 step process.