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.
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.