The Anatomy of an iPhone Site

The Anatomy of an iPhone Site

This is part five of the week-long “Website Anatomy Class” series

In today’s world the internet travels. Not just through laptops and wireless signal, but through a growing number of smart phones. The trick? Getting your site to travel just as well.

We’ll start with a brief history lesson. In the earlier days of internet capable cell phones, the mobile versions of websites were unexciting bare-boned HTML pages. Over time, mobile designs gradually became more in depth as the hardware improved, but it still wasn’t great.

Then, about two years ago, a big change happened. Apple came in and introduced a phone with a full body web browser. For the web design world, the iPhone ‘s mobile browsing was a gift in the right direction.

Built to Touch

Navigation Built for the Platform
The iPhone did two things differently. The full browser was a good first, but the second changed the fundamentals of interaction in a new direction. The phone is driven by touch. The best applications and websites have navigations that compliment this. Buttons are larger and more accommodating, and interfaces become more intuitive when they seem tactile.

Site versus Application

Especially when a uniform design is put in place it’s harder to distinguish between a web site and a web application. The Mac application Fluid is a great example of how a site can become a full fledged application.

Facebook has an iPhone specific version of its site for the embedded browser. It also has an application with a layout that takes advantage of a touch screen, and adds some extra options to the mix.

What’s the Difference?

The standalone application version of a website is typically more comprehensive in both options and interface. An iPhone specific stylesheet is loaded in browsers, but applications are coded and accessible directly from the homepage.

For this article, you can define an application as an extension to a website. A phone specific site style is simple a different way of displaying the full blown page.

Which Should I Use?

Which one is better for you? For the average web designer, you’ll save yourself a significant amount of time and headache by simply giving the site some iPhone sensitive browser design. Applications must be approved before going live, and can require extensive knowledge of development tools.

If you’re up for the challenge, go for it! But please don’t feel like you’re missing out by only making a browser applicable design.

Smaller Resolutions

The smaller the screen, the more important it is to have highly readable text. iPhone simulations floating around help visualize the results using the mobile version of the site and a matching resolution. It’s not completely accurate, but it’s a good starting point.

The iPhone screen has a resolution of 480 by 320 pixel resolution. To put that into perspective, here’s a look at an actual size screen:

iPhone Screen Size

Take notice of the button sizes above. Since this is an exclusively touch based navigation on a smaller screen, the buttons have to be large and visible. Text cannot afford to be tiny or lightweight. Big and bold communicates much better, especially if lighting is poor. This is a design trend that shows up in almost all of the default design elements for the iPhone.

Get Your Site iPhone Ready

Now that you’ve spent some time going over the trends and basics behind iPhone websites, it’s a great time to start some real life application. Are you reading this article on an iPhone now? If so, you’ve probably noticed that Build Internet does not have a separate mobile-specific layout. Please don’t be too disappointed, because it’s on our to do list.

Vector Kit for iPhone Layouts

Thanks to some dedicated members of the design community, you can easily mock up your next mobile web project using phone specific vector kits. The iPhone is no exception. The pack below was used as the basis for several images in this post. Give it a shot for your next iPhone layout project!

Further Tutorials and Articles

Are you like us and haven’t built an iPhone version of your site yet? I’ve rounded up a few tutorials below to help you get started on the design and development.

Congratulations! You made it to the end of our Website Anatomy Class. Thanks for reading, but we aren’t quite done yet! We’ll be launching a giveaway to celebrate in the next few days, so be sure to check back soon!

Posted Friday, August 21st, 2009 · Back to Top

SPONSOR

Add Comment

10 Comments 11 Mentions

  1. Eric B. Author Editor

    Thanks for the tips! Too bad I don’t have an iphone to test on, though.
    .-= Eric B.´s last blog ..Creating a PHP CMS – Part 5 =-.

    ·

  2. Brian Muse Author Editor

    It’s been interesting watching RIM and other companies play catch up with Apple in the mobile browsing game. Apple’s really set the bar high in terms of usability.

    I’m sure competitors like Google’s Android will be great for the evolution and innovation of mobile browsing in general.
    .-= Brian Muse´s last blog ..Modern Home Studio with Computers, Turntables, and Recording Equipment =-.

    ·

  3. Glenn Author Editor

    This link features a more recent GUI (iPhone OS 3.0) of the iPhone, http://www.teehanlax.com/blog/?p=1628

    ·

  4. Sergiu Naslau Author Editor

    nice saga with the anatomy articles, but I think you should have been a doctor then a developer:)) (joke)

    Keep on the good work!
    .-= Sergiu Naslau´s last blog ..Serjeniu: RT @unmarketing: Reminder to take 5 mins and reply/retweet others. Nothing about u. Engage, interact, build relationships =-.

    ·

  5. Seattle DUI lawyer/attorney Author Editor

    Thanks for the tips! Very helpful.

    ·

  6. ryan Author Editor

    Even many bad feedback above but your tips is very useful and kindly visit our site to learn more.

    ·

  7. Michael Author Editor

    I have found this site helpful for learning how to build an iPhone website.

    http://www.combsconsulting.com/iphone-android-website-example/

    This is also a page on how to build an iPad website too.
    http://www.combsconsulting.com/ipad-website-example/

    ·

  8. Acuvue Oasys Rebate Author Editor

    That was pretty imformative. Thank you for all of the content.

    ·

  9. Han Author Editor

    Liberty is not licence.

    ·

  10. tai game mien phi Author Editor

    Great information , it’s useful for me .Thanks for tips

    ·

 

Build Internet by One Mighty Roar. Since 2008.