Tutorial: Building a website for the iPhone
June 19th, 2008 by WillHey, we've noticed you're new around here. Why not subscribe to our RSS feed so you're always up to date with the latest Engage news. Thanks for visiting!
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 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.
Source files
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/";
}
Tags: CSS, iPhone, javascript, tutorial
July 8th, 2008 at 11:59 pm
Brilliant post! Would send you a link to my own iPhone-compatible site once its ready
July 10th, 2008 at 12:21 pm
Great tutorial! We hae been looking at embarkin into website development for mobiles and this tutorial is a great starting point for smaller agecies like ourselves who do not have the means to employ teams of developers to do the work.
Once agai many thanks for your efforts!
July 14th, 2008 at 5:23 am
Awesome post! Usefull for people dont have access to Apple Developer page.
July 25th, 2008 at 2:52 am
First of all, thank you SO much for this tutorial! Its very helpful and I was able to take advantage of it in order to hide a wide table which would be impossible to read in portrait but acceptable in landscape mode.
How would I hide not one but two div’s on one page using this method since you’re using an ID as opposed to a CLASS?
July 26th, 2008 at 9:29 am
Sorry to respond to my own question, but I have figured out how to do this for two different elements. Just in case anyone else is interested in how I did this - here’s how:
1) Changing the CSS code to relate to classes, not id’s:
.content_left,
.content_right,
.content_normal,
.content_flipped{
display:none;
}
.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}
.show_left .content_left,
.show_right .content_right,
.show_normal .content_normal,
.show_flipped .content_flipped{
display:block;
}
2) Then I replaced the end of the code on the javascript in order for it to apply to two different IDs:
document.getElementById(”page_wrapper”).setAttribute(”class”, contentType);
document.getElementById(”2ndpage_wrapper”).setAttribute(”class”, contentType);
}
3) I changed the HTML code for the content section to refer to classes instead of IDs (which ties it back to the css) for example:
Please turn your phone to see the table.
4) Lastly I gave the other section that I wanted to change on orientation the new ID that I referred to in the javascript:
That’s it. I hope that helps whoever’s interested in this. If you have any questions, please contact me on my website.
Thanks again to the Engage Interactive crew for this EXTREMELY useful and helpful tutorial. Keep up the great work guys!
July 29th, 2008 at 12:52 pm
Hi Eugene,
Sorry for not getting back to you sooner, looks like you’ve got it sorted though!
Glad you found the tutorial useful.
Will
July 30th, 2008 at 6:02 pm
Fantastic but I’ve a question. How can I implement orientation detection to switch between one css and another? Basically I’ve a page with some images; in the css I’ve an img class that set the width to 280 in portrait mode. I would like that if the user switch to landscape, this class set img width to 580 or something like that?
Any idea on how to do that?
Thanks!
July 31st, 2008 at 9:24 am
Hi Andrea,
You would do something like this:
.show_normal img, .show_flipped img{ width:280px; }When the javascript sets the class of the page_wrapper to either show_normal or show_flipped it will set the width of images to 280px.
.show_left img, .show_right img{ width:580px; }And this will set them to 580px in the left or right landscape views.
This css would resize all images, but if you only target specific class you would limit it to just the images with that class.
Hope that makes sense.
Will
August 5th, 2008 at 9:15 pm
So I dont need any specific Apple Software from the whole SDK thing to create a iphone specific site?
This tutorial should be really helpful.
August 14th, 2008 at 3:24 pm
Great tutorial!
Im using this method to do something a bit different. When the iPhone is in portrait it show a small cut down version of the site, but when in landscape, it shows a full version.
The problem i am having is that when im zoomed in on the portrait verion and rotate the phone, the landscape version is zoomed in, when i zoom out and then go back to the portrait version, it is zoomed out and only occupies about 1/4 of the screen.
Is there a way to tell the iphone to reset the zoom each time it is flipped so that in portrait its 100% and in landscape its zoomed out so its fits the screen?
Cheers
Rob
August 20th, 2008 at 11:14 pm
How do you detect if you are on a pc or iPhone, I mean when you enter to http://www.engageinteractive.co.uk from a normal web browser you see this website, but if you enter from the iPhone you see the exclusive iPhone version, how you do that detection in first place?
Thank you, great tutorial
August 21st, 2008 at 9:17 am
Oops! I seem to have forgotten to mention that bit. Simply place this code (I’ll put it in the article properly in a bit) in to the head of your normal website:
<script type="text/javascript"> if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)) { document.location = "http://www.engageinteractive.co.uk/iphone/"; } </script>August 31st, 2008 at 1:22 pm
Hey there! I love this tutorial an dam so happy to use it! I have a couple of problems though. The screen size and text stuff are working perfectly fine. But…. there are no background colors showing up or anything and it won’t change texts when I turn it. Do I have to do something else?
My codes are below (I didn’t copy and past either, its fun writing by hand
)
Test
Test
You are now holding your phone to the left.
You are now holding your phone to the right.
You are now holding your phone upright.
This doesn’t work yet.
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;
}
——————————————-
body{
background:#fff000;
font-family: Helvetica;
color:#999;
}
p{
font-size:12px;
padding-bottom:8px;
}
a{
color:#fff000;
text-decoration:none;
}
——————————————-
h1{
display:block;
width:112px;
height:41px;
background-image:url (images/logo.gif) ;
text-indent:-5000px;
}
——————————————-
#page_wrapper{
padding-top:20px;
background:#000 url(images/background.gif) repeat-x;
overflow:auto;
}
——————————————-
#content_left,
#content_right,
#content_normal,
#content_flipped{
display:none;
}
.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}
.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
display:block;
}
window.onload = function initialLoad () {
updateOrientation () ;
}
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);
}
——————————————-
window.addEventListener (”load”, function () {setTimeout (loaded, 100) }, false);
function loaded() {
document.getElementById (”page_wrapper”).style.visibility = “visible”;
window.scrollTo (0, 1);
Thanks if you can help!
September 2nd, 2008 at 6:40 pm
Great tutorial, though for some reason it doesn’t seem to be working for me. Tried rebuilding myself and the flipping change of content wasn’t working, then I downloaded the source and popped that up on my server and the same thing: no change when the phone flips.
Any idea what could be happening?
September 3rd, 2008 at 9:40 am
@Chuck,
I’m not really sure why you wouldn’t be seeing any background colour. It looks like all the necessary CSS is in place. Perhaps you haven’t closed some tags in the HTML. Have you stuck it through the validator?
@Robert,
I’m not sure what could be the problem. I’ve just checked out all the code and it does seem to be working still. It’s probably one of those annoying little errors that you don’t notice until you’ve ripped the whole thing apart and put it back together again only to find out you spelt srcipt wrong! :p
I’d make the same suggestion, check if it validates.
September 4th, 2008 at 4:15 pm
Hmmm, still have no idea what I could be doing wrong. I tried just downloading the source file and uploading that without touching it, and that’s not working either.
Here’s the URL: colinismy.name/mobile
Any thoughts?
Thanks!
September 4th, 2008 at 4:24 pm
Hi Robert,
I just had a look, and it does work… but only if you visit the actual location of the site.
For some reason you’ve got frames on that colinismy.name/mobile site. If you go to the source of that frame: http://s125533792.onlinehome.us/yesitsureis/mobile/ it works fine.
Perhaps it is something to do with your hosting?
Will
September 4th, 2008 at 5:25 pm
Ah! That’s the ticket. I had it set up on a frame redirect instead of a HTTP redirect.
Thanks a million: you’re a saint among men!
September 17th, 2008 at 7:44 pm
Ok… so I got it to finally work! You can view my website on your iphone now. I really like it. Thanks for the tutorial. Maybe you wouldn’t mind buying it for $2.50, no one has yet. Thanks for the tutorial! http://www.madchucksailing.com/iphone/index.html
September 28th, 2008 at 8:18 am
I love my iPod Touch so it feels natural for me to create things for the iPhone.
This article has kicked me in the right direction towards creating websites that are iphone ready.
Thank you so much for taking the time to write this and making it so easy to understand.
I can’t wait to create my first iPhone based design.
Thanks again.
October 20th, 2008 at 6:18 am
we find a lot of improvement in the technology using the mobile is prevalent in present day life but creating a website to know about it. I need to know more about this site can any one tell me about it briefly.
julianrobert
[url=http://www.widecircles.com]Link Building[/ul]
October 20th, 2008 at 6:21 am
we find a lot of improvement in the technology using the mobile is prevalent in present day life but creating a website to know about it. I need to know more about this site can any one tell me about it briefly.
julianrobert
Link Building
October 23rd, 2008 at 3:04 am
Thanks for all this. A number of the links you provided are no longer working.
Do you know how to code phone numbers so that they appear as links on the iPhone?
I love it when sites let me do this, and want to implement.
Thanks!
October 23rd, 2008 at 11:27 am
Yea, apple are a pain. They change their development site almost daily!
To create a phone number you can just type it out and the phone will automatically format it into a link. I think there are a few options available but I never needed to use them.
Sorry not to be of more help.
Will
November 10th, 2008 at 8:41 am
Hi,
Thanks for the tutorial. I was pretty sure I followed all steps, and when I view it on my iPhone it works perfectly. But when my friend views my website on her iPhone the page doesn’t show. I’ve asked her to clear her history, cookies and cache and still doesn’t show.
Is there an online iPhone screen shot website where I can view the appearance? Or does anyone know why its not working on her iPhone but works on mine? I don’t know anyone else that can check it out for me. website is: http://www.logomotion.net.au
Any tips much appreciated.
Thanks, Kylie
November 11th, 2008 at 8:31 pm
Hi ,
Thank you very much. Very nice tutorial. Keep Posting.
November 19th, 2008 at 9:35 am
Dear,
I want to create a website for the iphone, i found this tutorial is very interesting, but please i need more details because it is my first time. what is the first step to start, like what is the first file i have to write and his name with the extension..and where i can do the test?
i’ll be more than happy if anyone can help me to start…
Thankyou
November 19th, 2008 at 10:18 am
hi again,
i downloaded the source and when run it i got a yellow page, but empty nothing inside..by the way i ‘m using wamp server..our website is done using PHP..
please if you can put me on the right track to start,
thanks a lot
November 19th, 2008 at 10:22 am
I’m not sure what could be the problem.
First thought is that the way we have referenced the files is not correct for how you have set up the folder structure on your website.
Try turning on the developer mode in safari on your iPhone. It is in the options > safari menu page. This will show any javascript errors in case that is what’s going on.
Good luck
November 19th, 2008 at 10:51 am
thank you, but i really want to know how can i do test on the iphone, i mean shall i have an iphone on the web, because i dont have one..i want to start building an iphone website, but i dont know how to start..
thanks a lot for your attention and reply
November 20th, 2008 at 6:31 pm
A general question… why is that when I view the finished example on your site it appears correctly, but when I download the source files and upload them to my site (unaltered) to test them, the content does not fill the iPhone screen?
Thanks!