How to Create an iPhone Website

Building a website optimized for the iPhone is easier than you think. All you need to do is load the iPhone CSS via the media type and load 300 DPI images for retina display iPhones… Pretty simple. I promise. Let me show you by walking you through the steps I took to launch an iPhone version of my new website.

1. Set Your Media Type

The iPhone site started with a basic user agent detect for iPhone and iPod. Then, the loading of the CSS followed.

If you’re not familiar with Media Types, take a look at the W3C’s Media Types explanation to get up to speed. I have a main CSS file that I call in for all my iPhone styles, and I also have a Portrait and Landscape CSS file for iPhone user orientation. These two files are called in via media type declaration of max and min widths.

2. Set Your Retina Display

The next thing to think about was the retina display on the iPhone 4. The iPhone 4 requires 300 DPI images that are double the size of normal images. This means that if you have a 100×100 pixel image that is 72 DPI, you need to create a 200×200 image that is 300 DPI for the iPhone 4 retina display. So open up FireWorks, create a 300 DPI file and double the size of your images.

Next you will need a way to display your very large images at a normal size. If you have a 200×200 image that needs to echo out at 100×100, then it better echo at 100×100. Simply use the background size property along with your background image call.

3. Set Your Viewport

The last bit of code to think about is the viewport. This is one little line of code that is very important.

The viewport code tells the user’s device how to behave when viewing your site. You want your site to be the correct width so the user doesn’t need to zoom into your content. 
 

Want More

Watch this video tutorial of how to create an iPhone website. Hit me up for tips if you have any questions on creating an iPhone website, happy to help. And, if you want more CSS and usability tips from yours truly–pay me a visit at my blog.

Be Sociable, Share!

• 

Related posts:

1. Could DROID Sidekick the iPhone?
2. 5 Tricks to Reboot Your Website
3. 3 iPhone Apps for your MIND, BODY, & SPIRIT
4. 16 iPhone Apps to Rock Your Productivity
5. 10 Photo Apps for Awesome Pictures on the Go

Frederick's persnickety programming is stricter than your fourth grade English teacher, meaning it meets all accessibility guidelines and renders just as designed across all browsers in all platforms… and smelling like chalk on a blackboard. Frederick has over a decade of development experience as a web guru and holds a fine arts degree from the Ringling College of Art and Design. When Frederick isn't programming, he is dreaming of programming... seeking truth in code.

Published by Frederick Weiss Comments:0 Comments
Published in Mobile Marketing, Technology, Usability, Web & Mobile Applications, Web Trends