19th June 2008

Tutorial: Building a website for the iPhone

Roughly a 11 minute read by Will

Well, we did promise we'd get around to a tutorial eventually, so here you have it! The Engage Interactive school for all things internet proudly presents: How to build a website with orientation specific content especially for the iPhone!

This tutorial will cover the basic setup and creation of a web page for the iPhone that will detect and change the content based on the phones orientation. You will need some way of viewing your files on the iPhone or you wont see the fruits of your labour. We'd suggest uploading it to a location on the web and browsing to it on the phone. Other than that everything else can be done with any old text editor. Anyway, enough chat - Onward to the tutorial!

UPDATE:

I completely forgot to mention how to detect the iPhone on your normal website and send it to your iPhone version. I've added the script here.

Setting up your page

Just like any other web browser, Safari needs all the usual html code at the top and bottom of the page and there's still no harm in throwing a few keywords in for good measure as Google will still be able to spider your content. In addition there are also some iPhone specific meta tags you can use to control the way content is rendered. I have an example of what the code in the head tag should look like below.

<head>
    <title>Engage Interactive</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    <link rel="apple-touch-icon" href="images/template/engage.png"/>
</head>
<body>
</body>

If you look at lines 3, 4 and 6 you'll see a few lines you probably haven't come across before.

Line 3 tells Safari that the viewport should be the same size as the iPhone screen. Usually the iPhone's screen acts like a window and the web page is the background scenery. Setting this line forces the content to always fit the window. The next part of that line sets the scale of the page. Because we are making this website specifically for the iPhone's small screen we don't need to have the page zoomed in.

Line 4 is for creating webclip icons when you bookmark a site. The image should be 57px by 57px in .png format. You do not need to add the shine or corners as the iPhone will do that for you.

Line 6 is part of the orientation detection. Safari simply executes a javascript function each time you turn the phone. This however doesn't have any way of acting upon which way the phone is being held. The javascript has to take care of that aspect. More on that later.

For more options on the viewport check out this page (you need to be registered with the apple developer program).

Laying out the content

Before we get into the clever javascript and CSS we need to get the content in place and set the initial styles that will be default so that you can't see everything at once before the site has finished loading.

<div id="page_wrapper">
    <h1>Engage Interactive</h1>
    <div id="content_left">
        <p>You are now holding your phone to the left</p>
    </div>
    <div id="content_right">
        <p>You are now holding your phone to the right</p>
    </div>
    <div id="content_normal">
        <p>You are now holding your phone upright</p>
    </div>
    <div id="content_flipped">
        <p>This doesn't work yet.</p>
    </div>
</div>

First, we need a wrapper that will contain all the content on the page. This is very important as the javascript will be changing the class of this wrapper which will effect a lot of elements inside of it.

Next, I've put in a logo. This is optional obviously, but it's an example of content that will always be visible regardless of the orientation should you want it to be.

Lastly, we have all the content areas. Although at the moment the iPhone only supports left, right and upright orientations there is a chance that it might eventually support a flipped over orientation (holding the phone upside down) so I've put it in just in case. Each of these content areas are unique so we may as well use ID's rather than classes.

These will be set to display:none and display:block and apart from that it's probably best to avoid anything more complicated than background colours/images and dimensions. Leave that to the content within them.

Onto the CSS

The CSS is very important in switching the content. Using classes and ID's we can make sure that only the correct content is being displayed. First though, we need to set up the page so that none of the iPhone's default styles will interfere.

/*-----------------------------
    RESET STYLES
-----------------------------*/

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
    -webkit-text-size-adjust:none;
}

body {
font-size: 10px;
}

ul, li, ol, dl, dd, dt {
    list-style:none;
    padding:0;
    margin:0;
}

a {
    text-decoration:none;
}

The most important part in that is the -webkit-text-size-adjust:none; This line stops Safari from adjusting the text size when you rotate the screen. By default it assumes that holding the iPhone on it's side requires larger text size - which is true in most cases as the sites become more zoomed out - but in this case we are fitting the website to the screen so it's not necessary.

/*-----------------------------
    BASIC PAGE STYLING
-----------------------------*/

body {
    background:#fff000;
    font-family: Helvetica;
    color:#999;
}

p {
    font-size:12px;
    padding-bottom:8px;
}

a {
    color:#fff000;
    text-decoration:none;
}

/*-----------------------------
    HEADINGS
-----------------------------*/

h1 {
    display:block;
    width:112px;
    height:41px;
    background-image:url(images/logo.gif);
    text-indent:-5000px;
}

/*-----------------------------
    BASIC LAYOUT
-----------------------------*/

#page_wrapper {
    padding-top:20px;
    background:#000 url(images/page_background.gif) repeat-x;
    overflow:auto;
}

These styles simply set the colours and font sizes for a few elements and also style the logo and page wrapper. You may have noticed, I've used the font Helvetica. It's already on the iPhone and it's a great font so I might as well. No more Ariel!

Using overflow:auto on the #page_wrapper is simply so that any floated elements do not overflow the containing div. It's the (far better) alternative to

The complicated CSS

The following CSS controls which containers are currently on display and which are hidden which will be controlled by the javascript we'll get to in a bit.

/*-----------------------------
    ORIENTATION CLEVERNESS
-----------------------------*/

#content_left,
#content_right,
#content_normal,
#content_flipped {
    display:none;
}

First we need to hide everything by default. When the page loads this will ensure that you don't get an ugly flash of content before it is hidden.

.show_normal,
.show_flipped {
    width:320px;
}

.show_left,
.show_right {
    width:480px;
}

Next the width of the containers is specified. If you're building a site that fits the screen exactly you might want to put some heights in here.

.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
    display:block;
}

Finally the clever bit (well, not that clever really). This simply shows the containers if the #page_wrapper has the correct class. These classes are going to be set by the javascript. It would be possible to do it all with javascript, however I built the Engage site with several little tricks in place that needed the classes to apply certain styles.

The grand finale: Orientation Detection (and another useful trick)

This is the genuinely clever bit! Now I must admit, I didn't write all of this myself, various parts have come from numerous examples and samples from around the web. I've listed a few of the resources I used at the end of this article. The concept however is a genuine Engage Interactive exclusive!

window.onload = function initialLoad(){
    updateOrientation();
}

This first line initialises the orientation change. Without this, the orientation wouldn't be detected on load, only on the first time it is changed.

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
    case 0:
        contentType += "normal";
        break;
    case -90:
        contentType += "right";
        break;
    case 90:
        contentType += "left";
        break;
    case 180:
        contentType += "flipped";
        break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

This is the function that actually makes the changes to the page that allow the different content to be displayed. Lets go over it step by step:

Line 1 names the function which is run each time the phone is turned. This was what we enabled earlier in the body tag.
Line 2 sets the variable contentType to the default show_
The following lines check the case (orientation) until it finds the appropriate one and breaks out of the out of the switch block appending the relevant term to the end of the contentType variable
Finally the javascript finds the page_wrapper div and sets the class to the value of contentType. From there the CSS takes over and styles the page accordingly.

Clever huh?

There is also one more little trick we've used to make the most out of the iPhone's nice big screen.

window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);
function loaded() {
    document.getElementById("page_wrapper").style.visibility = "visible";
    window.scrollTo(0, 1); // pan to the bottom, hides the location bar
}

This javascipt waits until the page has loaded and then scrolls to the named element. In this case, page_wrapper. This hides the location bar straight away rather than having to scroll it manually off the screen. Handy if you want to make a page that fits the iPhone exactly.

To view the finished example head to www.engageinteractive.co.uk/tutorials/iphone/ on your iPhone. It wont work on your computer obviously, but you can still have a look at all the code.

Right click and save as on the following files to download the source.

The HTML: index.html
The CSS: iphone.css
The javascript orientation.js
The tutorial: tutorial.html
Everything zipped up: source.zip

So that was the technical side of building a website for the iPhone, you'll have to come up with creative stuff yourselves. I've listed a few helpful pages and resources that should help you on your way below.

Things to remember

Before you embark on your own iPhone website, here are a few things I had to keep reminding myself:

Every single iPhone is the same. If it works on one, it works on all the others. How nice it is to not have to bug check!
You can design your site to fit pixel perfectly to the width and height.
Don’t worry about using image replace for usability reasons (SEO reasons still apply however), the iPhone doesn't cater to people who would use screen readers so it’s not necessary. On a related note; there is no way of increasing text size, so feel free to use pixel sizes instead of em's or percentages.
There is no :hover status! The iphone only has on or off. Your finger is the mouse and dragging is how we scroll the page. Thus, no need for hover states in your CSS.
The iPhone has limited processing power and memory. Regardless of internet speed, large images or complicated javascript does slow down the iphone. Sometimes even cause it to crash.

Useful resources

Apple has kindly supplied a whole host of information for people to use when they embark on a web application for the iphone. Hidden away under many layers helpful hints though I've found the most important pages (which you have to register to use):

These links worked at the time of writing, but as I've discovered over the last few months, Apple seem to insist on reorganising everything on what seems to be a weekly basis. So what is there one week might be mysteriously moved the next. They have a pretty good search though so you shouldn't have much trouble re-discovering the pages linked above.

And absolutely nothing to do with Apple themselves, I found this little gem. A great source of examples for Safaris abilities. My favourite being the ability to round corners with a simple line of CSS!

I hope you found this little tutorial useful, and don't forget to post a comment with a link to your own creation, we love to hear from you!

Oh, and I completely forgot!

This little bit of script will detect the iPhone or iPod touch and send it on it's merry way to whatever page you wish.

if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)) {
    document.location = "http://www.engageinteractive.co.uk/iphone/";
}