How to Build a website for the iPhone

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!

First thing is how to detect the iPhone on your normal website and send it to your iPhone version. I’ve added the script Below

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.landofcreativity.com/iphone/";
}

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 onorientationchange="updateOrientation();">
</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 <br class=”clear” />

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.

If you enjoyed this article, please consider sharing it!

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*