Designing For The iPhone
Yep, we have done it again, Tweetmeme has just landed another new feature, a mobile version specifically designed for the iPhone. How did we do it? Well it’s really easy, and just like building a normal website but with a couple of extra snippets of code.
The Design
The hardest part of building a website specifically for the iPhone is coming up with the design. The screen real estate on the iPhone is very limited so you have to start by being creative. Focus on the content, components such as sidebars, large pictures and small text should be avoided, keep in mind that buttons should be big.
If you are using photoshop i have created a template for you to easily visualise your designs, which you can download here, based on the iPhone GUI PSD, if you are not the set the canvas size of your design to 320px width and 480px height. Remember to images to a minimum and that the iPhone uses the WebKit rendering engine which supports some CSS3 tags, like rounded corners.
The Code
Lucky you are still dealing with a HTML page which uses HTML and CSS like any other webpage you may build.
<html> <head> <title>My iPhone Page</title> <meta name="viewport" content="320; initial-scale=1.0; maximum-scale=1.0;"> <link rel="apple-touch-icon" href="images/icon.png"/> </head> <body> </body> </html>
Notice that line 4 and 5 include some magical meta tags which you may not of seen before. Line 3 sets the width of the viewport so it matches the screen width of the iPhone the second parameter sets the scale of the page.
Line 5 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. The iPhone adds the shine and the rounded corners.
Redirect
You want to redirect users on a iPhone to be redirected to the correct version. For this you will need a nice redirect script, normally detecting browser type based on user agent shouldn’t be done, you should detect browsers based on their capabilities.
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://yoursite.com/iphone";
}
That’s it’ really just buy added a couple of extra lines of HTML and a rejig of the design and CSS you can easily optimise your website for the iPhone.
Notes
There are a few things to remember when building a website for the iPhone:
- It’s a iPhone they are all the same, no multi browser checking, if it works in one it will work in them all! If only all web development was like this!
- There is no :hover pseudo class in CSS
- Keep images and JavaScript to a minimum, you don’t want to wait for ages for images/JavaScript to download.
I tried this out on my iphone and tweetmeme.com isn’t detecting it’s an iPhone forwarding me to m.tweetmeme.com.
I also tried adding it to my home screen expecting a icon to appear like most iphone optimises websites. Instead the icon was just a generated screenshot of the website.
Hi Tim,
Tweetmeme doesn’t use the redirect script, or a home screen icon.
Daniel
Great Framework!!!
http://code.google.com/p/iui/