The Anatomy of an iPhone Site

Zach Dunn on August 21st, 2009 Posted in Articles

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

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:

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!

• iPhone PSD Vector Kit from Smashing Magazine

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.

• How to Instantly iPhone-ize Your Site
• Building a Website for the iPhone with Orientation Detection
• Apple’s Official iPhone Human Interface Guidelines
• How to Create Your First iPhone Application

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!