Tutorial: Building a website for the iPhone
…written by Will and has 230 comments so far

How to build an iphone website!

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.

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: , , ,

Have your say
  1. Vinci Says:

    Brilliant post! Would send you a link to my own iPhone-compatible site once its ready :)

  2. MEL Says:

    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!

  3. Mohd Heidzir Says:

    Awesome post! Usefull for people dont have access to Apple Developer page.

  4. Eugene Gordin Says:

    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?

  5. Eugene Gordin Says:

    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!

  6. Will Says:

    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

  7. andrea Says:

    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!

  8. Will Says:

    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

  9. CT Says:

    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.

  10. Rob Blakeney Says:

    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

  11. Guisella Says:

    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

  12. Will Says:

    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>
    
  13. Chuck Says:

    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!

  14. Robert Says:

    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?

  15. Will Says:

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

  16. Robert Says:

    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!

  17. Will Says:

    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

  18. Robert Says:

    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!

  19. Chuck Says:

    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

  20. Ryan Bollenbach Says:

    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.

  21. julianrobt Says:

    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]

  22. julianrobt Says:

    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

  23. jen Says:

    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!

  24. Will Says:

    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

  25. Kylie Cooper Says:

    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

  26. Aman Patel Says:

    Hi ,

    Thank you very much. Very nice tutorial. Keep Posting.

  27. nana Says:

    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

  28. nana Says:

    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

  29. Will Says:

    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 :)

  30. nana Says:

    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

  31. kyle Says:

    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!

  32. Chad Says:

    I have everything working for a new iPhone design for my portfolio site except for the content. I can’t get any of the content to show up when I go to the site on the iPhone browser… rotated or not, makes no difference. Any ideas why?

    http://www.chadgilldesign.com/iphone

  33. Will Says:

    Nana: You can download the iphone sdk from the apple development centre but I don’t think that will support the javascript that this uses. Failing that, you’ll need an iPhone, either a local or web server and notepad. :p

    Kyle: I’m not sure what’s happening. Perhaps try setting a min-height on the wrapper see if that helps.

    Chad: Taking a quick look at your CSS it looks like you’ve gone a little wrong somewhere. Your hiding all the content areas, but then there is no way of showing them again. It should look something like this:

    .show_left .content_left{
    	display:block;
    }
    .show_right .content_right{
    	display:block;
    }
    

    And then you’ve got to hide the content that’s not needed with something like this:

    .show_left .content_right,
    .show_left .content_portrait{
    	display:none;
    }
    

    You’ll need to adjust classes and id’s to your suiting obviously, but that should get you on the right track.

  34. Amar c Says:

    Hello there,
    I had a question in my mind. If the browser is redirected to the
    iphone designated page, how can one get back to the original
    if they wanted to?

    Thanks in adv
    and great job!

  35. Barbara Says:

    Found this particular iPhone gaming website pretty cool on an iPhone… iPhone browsing is real fun

  36. Barbara Says:

    Found this particular iPhone gaming website (http://www.99games.in) pretty cool on an iPhone… iPhone browsing is real fun…

  37. theturninggate Says:

    Great tutorial!

    I’d like to second Amar C’s question. If desiring to do so, how does one access the full site from the iphone without being redirected?

    Could the script be setup so that a special URL might allow access of the full site, maybe something like http://www.domain.com/?=fullsite … ?
    Thanks!

  38. Will Says:

    Good question!
    A variable in the url is probably the best bet, however, I wouldn’t be sure how to implement such a thing. Dave would know, but he’s still holidaying! I’ll let you know what he says.

    If I was to do it without Dave’s help though I would use a cookie. The jquery cookie plug-in is really easy to use and would probably be a good bet.

    Something like:

    
    //Create a variable for the cookie
    var whichSite = 'whichSiteCookie';
    
    //Check if the cookie exists
    if($.cookie(whichSite ) == 'fullSite'){
    	//Stay on the full site
    }else{
    	//Go to the iphone site
    }
    
    //Buttons to take you to the different versions.
    $('a.iphonesite').click(function(){
    	$.cookie(whichSite , 'iphonesite', { path: '/', expires: 365 });
    });
    
    //I've set these cookies to last a year. For a session cookie you just take out that bit.
    $('a.fullsite').click(function(){
    	$.cookie(whichSite , 'fullsite', { path: '/', expires: 365 });
    });
    

    None of that is tested by the way, but it’s on the right track. (Work to do!)

  39. theturninggate Says:

    Thanks for the quick response, Will. I’m good with XHTML and CSS, but my Javascript is lacking. The presented solution sounds like a good start, though. I’ll definitely be looking forward to the follow up once Dave gets back.

    Happy new year!

  40. Hunter Says:

    Could some one post the css coding from that rounded corners thing he talks about near the end of the tutorial? I cant access it.

  41. Will Says:

    Hi Hunter,
    Apple are a pain, they have once again changed the structure of their developer area rendering all the links useless.

    The rounded corners CSS is

    -webkit-border-radius: 5px;
    

    If you Google that you’ll find more information on how to use it. It is webkit browser specific though, so only safari and Google chrome. For firefox you can use -moz-border-radius.

    Thanks for reading.

    Will

  42. Jon Says:

    copied you code and it works great on my iphone, but in a normal web browser no text shows up. would love some help.

  43. Will Says:

    Hi Jon,
    The code is specifically for the iPhone as a normal web browser does not have any ability to detect orientation.
    What we’ve done is used http://www.engageinteractive.co.uk/iphone/ I think this is the best approach and then have a normal website on the root.
    Cheers
    Will

  44. Lion King Says:

    hi, thanks for such a great tutorial, I found this very helpful and hopping that you keep posting great tutorials like this in future too!

  45. Rob Says:

    Hi: Really simple simplification you can do – instead of:

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

    you can do:

    window.onload = updateOrientation;

    Great article!

  46. Tenaya Says:

    hiya,
    I’m completly retarded.
    thechillinchair.com

    gets error with your script

  47. Will Says:

    I’ve just had a look at your website and I can’t see any code at all. It just looks like a blank page.

  48. Jaz Says:

    I do not understand why. I have put the script :

    in the head section for the website, but steel i does not get connected from my iphone to the iphone site. Why? Please check out: http://www.livetsgang.no

  49. theturninggate Says:

    Hi Will,

    Did you or Dave ever come up with a complete solution for re-routing an iPhone to the full version of the site via URL, as we discussed above?

    Thanks,
    Matt

  50. Liz Says:

    This tut was awesome. The redirect is fab. Thanks so much for posting!! :o )

  51. iTod Says:

    Your tutorial put me on the right path but because I am such a novice I have a couple of questions?

    1. please look at my mobile site http://www.gibbonsadvertising.com/iphone2/index.html. How do you make the white box with the black boarder expand as the phone is rotated to the left or right?

    2. How do I link to secondary pages? I will have a navigation on the front page and want to link to more information?

    Any help would be greatly appreciated. Thank you.

    iTod

  52. daddy design Says:

    GREAT TUTORIAL!!! question.. what if i’m on the iphone version of site and i made a link for people to view the site in full website view? how do i make this possible, since it has the redirect. I see it all the time like foxnews.com has the link on bottom, for full view of website.

  53. Alex Says:

    Hiya,

    Great tutorial! Very easy to follow and to get your head around. However my question is:

    Based on your tutorial you are basically showing 3 versions of the same content (for normal view, left view, right view), which – depending on the content – may be loading a hell of a lot of data (you are basically serving the normal DIV, the left DIV and, if it is looking different, the right DIV). Is there a way to show the content only once, but somehow refresh the page using a different stylesheet when tilting the phone to the left or right to reduce the amount of markup?

  54. Will Says:

    The best way of doing that would be with javascript and ajax.
    If you look at the functions at the moment, you could add in some extra code and very quickly get jquery to load in external content. Check out docs.jquery.com and look for the load function. That will get you going in the right direction.

  55. syncbox Says:

    Does anyone have links to methods for slideshows to replace something like a SlideshowPro (flash) based element on a website? I tried a simple jquery+css based slideshow but it’s slow as a dog — though it at least displays.

    Any solution to NO FLASH on iPhone?

    Also, what’s the best iPhone emulator to use? I’ve tried a few and they actually DO show flash where I know that the iPhones I’ve tried DO NOT.

  56. Steve Says:

    are you available to do custom work for my site? implementing this capability into multiple places of godfuel website

  57. Fiona Says:

    Hi,

    How to deploy the code in iphone? Its same like website design..where you put ur code under c:/inetpub/wwwroot/? I am unable to undersatnd how to deploy and wat folder the code shud be in…

    any input is highly appreciated…

    reply soon…thanks

  58. tolucophoto Says:

    My site is a photography portfolio.
    Is there any script to stop people saving the images with touch and hold?

    Also, is there anyway to control what touch and hold does? For example, could i have information about the photo show up instead of ‘save image’?
    If not, do you know any script that can make an info box appear over the site when something is pressed (eg. like the low battery box)

    thanks

    toluco.co.uk

  59. Brandon Says:

    my site succesfully forwards iphone to the iphone enabled site…. but what if they want to view the desktop version? how can i impliment a “desktop” mode link that will take them to the original page with out re-forwarding them to the iphone enabled page?

  60. Jason Minor Says:

    I don’t know if this question has been asked so I’m sorry if I’m repeating information. I am not specifically building my website for the iphone, however when I view the site on my iphone the background image is scaled down and breaks the look of the site.

    Can anyone tell me why this is happening and let me know if there is a way to make the site render on the iphone in the same manner it does on a PC??

    thanks any help is appreciated

  61. mixle Says:

    Hey Will,

    This got me really excited about iphone web dev. Thanks a lot. :) I’ve already started coding up a fun soccer substitute app for coaches that shows different data depending on the orientation.

    Cheers,
    mixle

  62. Chad Says:

    Thanks so much for this. You have a great gift for explaining things!

  63. Abacus Says:

    Nice article and I’m trying to get my head round it but I am not a programming person. One thing baffles me and that is where the “Oh, and I completely forgot!” piece of script goes?

  64. Will Says:

    Hi Abacus,
    That is meant to go in the head between some tags on any page where you want people with mobiles to be redirected from. For example, the home page of your main website.

    However! I found this just the other day:

    http://detectmobilebrowsers.mobi/

    It is a far more robust method. I’d suggest using that instead now.

  65. BoomBox-Creations Says:

    I have one question. Ok im making my site iPhone compatible with Dashcode.

    Now its all set, and when i simulate it, it works fine in portrait then when i simulate a rotation, everything stays the same size, just moves to the left of the screen simulator.

    Now my question is, i have made several other images that fit into the landscape view also, how will i set those images to be either portrait specific, or landscape specific mode with CSS?

    Thanks, all help appreciated :D

  66. ITCard Says:

    First off – hands down THE BEST tutorial I personally have read concerning this topic. Second, curios as to whether there is a page loading script that can contain information that proceeds the intended website. Thank you for your help!

  67. Greg Says:

    Works like magic. Thanks a million!

  68. Will Says:

    @BoomBox
    I’m not entirely sure what you mean, do you have 2 different images, one for landscape and one for portrait? Or you just want to size them differently?

    Either way, you’ve got the main container class/id to play with so you can just have something like:

    #landscape img{
    width: 200px;
    }

    #portrait img{
    width: 100px;
    }

    The height will be scaled automagically.

    @ITcard: There will be scripts like that arround, just remember that the iPhone does have limited memory, so if you’re trying to preload a lot of images, you might cause a bit of a slowdown. If you are worried about slow load times, you could give jquery’s lazyload plugin a try. It loads images as you scroll them into view. Quite useful when there are a lot of images involved.

  69. ITCard Says:

    Will, thanks for the suggestion. One more question…why is it that when I zoom in on content using the 2 finger split method, can I not pan left/right to view the rest of the content? Is there a piece of code that restricts this? I have tried setting different dimensions for both landscape/portrait and even the initial and max scale widths. Any solutions?

  70. Will Says:

    Yea, there are a few bits of code I’ve used. I didn’t want people to be able to zoom as I wanted to give it more of an application feel. The iphone also resizes text to fit the width of the screen when you turn the phone landscape.

    -webkit-text-size-adjust: none;
    This bit stops safari deciding what text size to use. For example; if you make a really basic page, in landscape the text will be one size, rotate the phone and it will become larger. I’ve no idea why anyone thought this was a good idea, but regardless, that line will fix that.

    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    This bit of code sets up the viewport. The initial width is 320, I’ve not tested it too much, but perhaps your content is wider than the iPhone is being told with this line. Or something is set to overflow hidden…
    The rest is simply because I didn’t want zooming, so it’s disabled with those last three settings.

    Those are the only things I can think that might cause the problem you’ve described…

  71. ITCard Says:

    Very good, I will try that. Thanks for everything

  72. Ritesh S Says:

    Read on to know more:
    http://website-engineering.blogspot.com/2009/07/stop-adjusting-text-size-in-iphone-when.html

  73. NiCc Says:

    Dave forgot the important thing for his redirection code: opening and closing javascript

    if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)) {
    document.location = “http://m.fastrecipes.co.cc”;
    }

  74. ITCard Says:

    Quick question…I purchased a domain name and have it hosted where my other sites are hosted. When I type in the URL of my web address, the iPhone/iPod displays the entire URL path instead of just the domain name. Is there any way to display only URL?

    Ex: domain name is ttpromos.com

    Diplay reads: http://www.hostname/indexfile/iphonefiles/indexfile

    Any suggestions would be greatly appreciated!

  75. ITCard Says:

    Disregard the last post…got it figured out. Thanks!

  76. Mike Says:

    Hello Will!

    First off, wonderful tutorial! it was very informative and one of the only tutorials for building an iPhone site that is available.

    I had one quick question that I was hoping you could help me out with… I made a iPhone version of my website “www.greenwellgraphics.com and when accessed it works and all the image buttons i made show up! one issue, the links to other pages do not work. I made a test link to the portfolio page which was put into the iPhone folder and named portfolio.html. so the link i used was “www.greenwellgraphics.com/iPhone/portfolio.html.

    What do you think im doing wrong here?
    Thank you!
    -Mike

  77. Will Says:

    I’ve just taken a look at your site. I can’t see anything that would stop those links from working, they do on my computer. The only thing that came to mind was that your file names are case sensitive and perhaps you weren’t linking to them correctly, but it seems to be working now so I assume you sorted it out.

  78. Mike H Says:

    There is one serious flaw with this code which manifests itself in mobile WebKit, affecting both Android and the iPhone from what I’ve seen. It seems that when the page is cached, WebKit does not execute the page onLoad for performance, I’m guessing. For example:

    1. Load the page in portrait
    2. Navigate to another page
    3. Change orientation to landscape
    4. Use the browser’s back button to return to the previous page (don’t use a link)
    5. The previous page, held landscape, reports that it’s still being held portrait. Whoops!

    The solution seems to be to use a setInterval to poll the orientation – not ideal, but it works. I also use window.onorientationchange to hook the changing, as it’s cleaner than using explicity HTML. Similarly, I set a class on the body tag instead of relying on a cruft element (#page-wrapper). Here’s the head of the mobile WebKit-specific code:

    window.addEventListener(“load”, function() { setTimeout(webkitBodyLoaded, 100) }, false);
    window.onorientationchange = webkitUpdateOrientation;
    setInterval(webkitUpdateOrientation, 500);

    One other tweak I made just in case was to check the class before setting it – if it’s the same as what is to be set, it ignores the set command. Juuust in case.

    Hope that helps! :)

  79. Will Says:

    Hi Mike,
    Thanks for that, looks like a good improvement.

    We are planning to move this tutorial more permanently over into our labs section and re-write it with more up-to-date code, so this will make it in there I would think.

    Cheers,
    Will

  80. Geoff Says:

    Your tutorial is great, but when I uploaded the files to a server for testing, the safari menu bar does not hide (i’m running OS 3.0), am i missing something? I have not altered any code whatsoever.

  81. Fiona Says:

    Hi Will,

    I am also building a website in the iphone, the problem is with orientation. In the below tag I have used width=device-width. I have created a basic login and password with the table in .net. When I compiled and saw the website in iphone, orientation doesnt look good. If its Portrait, its going beyond the width, like I need to drag ,usually for height we dont need to set the value as we can keep moving downwards. But for width it has to be fixed right? same with landscape. I tried width = 320 but still prob with orientation for portrait and landscape. I would really appreciate if you give some input.

    // this is in master.template

    This is aspx page. // its in content place holder

    Username 

    Password 

     

    Please let me know where I am getting problem with orientation.

    Thanks

  82. Ryan Says:

    I cant do this! iT’S TOO CONFUSING! Why dont someone make a website designer where you can just drag things to places?! What about for us? the people that arent so good at codes?

  83. Matthew Says:

    Ryan,

    People like you are the reason web-designers have jobs. So, what about you, “the people that aren’t so good at codes?” Hire a web-designer, same as you’d hire a plumber or an electrician to work on your home because you’re not good at pipes or wires, or an auto mechanic to work on your car because you’re not good at engines.

  84. Chris Says:

    I agree with Matthew.

    Ryan, things have gotten vastly easier over the years when it comes to building sites and programming. There is also a vast amount of generous folks out there who work very hard and spend the time, money and energy to learn their trade who then create tutorials such as this one to make it even that much easier for people like you and I to learn for free.

    I for one am very grateful for the knowledge I have due to people like will and the other readers who contribute. Thank you!!!!!!!

    Be grateful for what you can learn and know when its time to bring in the big guns to get the job done at the level you wish you could.

    Just my 2 cents worth…

  85. Simon Says:

    Hi – great code – thanks.

    Any idea how to use javascript to enable people to view the regular site on their iPhone should they choose to do so?

  86. Simon Says:

    Update – this does the job:

    if ( window.location.href.indexOf(“noiphone”) == -1 ){
    if ((navigator.userAgent.indexOf(‘iPhone’) != -1) || (navigator.userAgent.indexOf(‘iPod’) != -1)) {
    document.location = “http://www.engageinteractive.co.uk/iphone/”;
    }
    }

    Then on your iPhone pages put something like:

    View Regular Site

    Hope ths helps.

  87. Fiona Says:

    Can anyone tell me about the orientation, I am getting horizontal scroll, where we shud have fixed width(no scrolling horizontal)…somehow my contents are not fixed when i change from landscape to portrait view. please help anyone…I would really appreciate..thanks!

  88. studio-Cs Says:

    Great sharing! A quick start on developing website for iphone.
    Thanks. :)

  89. Fiona Says:

    Hi Will,

    Please answer to my question…Thanks

  90. Will Says:

    Hi Fiona,
    I’m sorry, but I’m not sure what to suggest without seeing your code, could you post a link to it?
    My only guess is that you haven’t set the -webkit-text-size-adjust: none; in the CSS.

    This allows the phone to set the font size (and more I think) depending on orientation.

    Other than that, you may be getting classes and id’s mixed up perhaps.

    Sorry I couldn’t be more help.
    Will

  91. Fiona Says:

    Thanks Will..Finally you replied. I have pasted the code in the above messages. My code is in asp.net with c#. But in asp.net it doesnt have OnOrientationchange which you mentioned the body tag. If you got any email id I can fwd my code to you. Please let me know.

    Thanks for ur response.

  92. Will Says:

    Hi Fiona,
    I’m sorry I took a while to reply, we have been quite busy here in the office.
    Unfortunately though I’m afraid we can’t really support our tutorials to this extent. I’m happy to give a few tips here and there, but email support would take quite up a bit too much time.
    Good luck though,
    Will

  93. Noah Shrader Says:

    Love this tutorial. I implemented it on my website at http://www.webdesignersknoxville.com. Check it out on your phone.

  94. manju Says:

    I have a html template with links that i embed while sending email. The links doesnt seem to work on iphone. I was not able to navigate to the url when i click on the link. Do i need to add some additional code to make it work on smart phones?

    Please do reply.

  95. manju Says:

    I have a html template with links that i embed while sending email. The links doesnt seem to work on iphone. I was not able to navigate to the url when i click on the link. Do i need to add some additional code to make it work on smart phones?

  96. Angela Garza Says:

    Hi, is there a code that I can put on my iPhone site that stop the horizontal orientation. I want my site only vertical so when I flip my phone stays on vertical position???

  97. r4 Says:

    Thanks for tutorial. I’ll try this code to build a website for my new iphone. I want to creat a website for the academic purpose.

  98. Kevin Zurawel Says:

    Wow, I learn something new about mobile web development every day. I’m very interested to try out this technique with a mobile site I’ve been working on. Thanks!

  99. manoj Says:

    hi!! will

    thanks or tutorial..

    as a developer what sort of things i have to focused about to make iphone enabled site….

    not in designing par t in php coding part…….in my web site i want user login,user registration,product showing,profile updating,and log out things…………please help me out….

  100. Fredrik Says:

    Love your tutorial! Realy helped me!

  101. John Says:

    I am building an app with tabs. One of the tabs has a browser that seems to work fine with all content (view rotates, etc.), but it always reports ‘You are now holding your phone upright’ . Is there a problem loading your page with tabs? I’m using the latest 3.1.2 build of XCode. Any help would be appreciated… Thanks

  102. Anne Says:

    Will, I love the idea of having a special small website alternative for iphone users. I especially love the idea of the content changing automatically when you reorient the phone. I can see these working well for getting out the basic information needed about missing persons.

    Within the content parameters, do you have to do something special to insert an image instead of the text examples? I can’t get it to work.

    Right now, as I’m working through this I simply put an example up telling users to click and re-orient their phone.
    http://www.rachelfind.com/iphone

    In addition 320×480 seems too big? Are there more than one size of iphone screens? If so, what is the smallest/largest?

    Thanks for any info you have.

  103. Anne Says:

    Never mind. I must have made a typo before that caused it not to work. I tried just copying the code instead and then it worked fine.

  104. Jim Says:

    How would I start the youtube app palying a specific file from within my iphone web site?

  105. Anne Says:

    This message is for Jim. The only way I could get youtube and sound links to work is by putting a regular url link. See http://www.rachelfind.com/iphone. the links are above and below the pic of rachel playing guitar. Still making changes. What happens is the youtube player or media player shows when you click. I wanted to make background sound play once automatically, but could never figure it out.

  106. vagkavan Says:

    Is it possible to have a menu bar (navigation bar) on a web site that is independent of iPhone’s zoom (i.e. with fixed width and height) while the rest of the site can be zoomed in and out?

    With meta “viewport” I can set the zoom of the whole website, but I want to exclude some parts. It also seems that it can’t be done by using iFrames or CSS transforms. Is it possible to be done by tracking Gestures that scale elements, and using javascript to rescale my menu?

  107. fjpoblam Says:

    Just tapping in to say thanks. I’ll propagate parts of this across six client websites within the next two days. Won’t steal all yer code, though. Thanks again.

  108. Russ Says:

    Hi,

    I’m working on a website-based flash card system for iPhone, and for the sake of the flow of the system it would be preferable to:

    1) Have everything fit on one screen (Portrait mode)

    2) Because of this, do not allow the user to switch to a landscape mode.

    I’ve done quite a bit of searching but haven’t come up with anything yet. Does anyone know of a way to “lock” the orientation in portrait?

    http://depts.washington.edu/llc/external/flashcard/Flashcard_Mobile_Russian.php

    Thanks!

  109. will Says:

    I don’t know of anything like this off the top of my head. Check out the apple developer pages, there might be something you can stick in the meta.

    Alternatively, you could use this tutorial code to just show a simple message. “Please return to portrait view.”

    Not ideal, but gets the job done until you find a better solution.

  110. neil Says:

    Thank you for giving me the golden ticket of code
    “-webkit-text-size-adjust:none;”

    This is the only site that has it, and it fixed my problem that I spent days working on. It’s so simple and effective too!

  111. Thorsten Says:

    For me (using a new ipod touch with latest OS) the safari menu bar does not hide – nothing is scrolling to the named element. I tried your demo-site.

    Any ideas??

  112. Will Says:

    It’s working here on the iPhone 3g with latest OS…
    Maybe an update on the touch has caused an issue, but we can’t really test. Let us know if you find a solution.

  113. shannon Says:

    Just want to say thanks for the tutorial!

  114. slyistheman Says:

    Hi there

    Everything is fine but one problem.. when I turn the Iphone to the right it doesn’t display nothing
    unless I click refresh then it displays. if I turn to the normal mode it’s fine but when I turn to the right again it doesn’t display nothing.. I have to click refresh once again..

    How can I fix that..

  115. slyistheman Says:

    Hi there. nevermind I fixed it.. everything is good

  116. MediaNovak.com Says:

    Hey thnx for the post, it really helped us a lot! here is the last mobile site we’ve done:

    http://www.art-studio.tv/mobile

  117. anu Says:

    Hi,

    This is an amzing article. It answered a lot of my queries.
    There’s another issue I ma having with my website and hoping to find an answer here.
    I have a website in .NET code. It has a search box and a search button. when the user taps into the search box the iphone virtual keyboard shows up. If the user taps the search button on the keyboard he is logged out of the app. I am using usersession in my search function.

    Is there a way to integrate the iphone search button with the search button on my app?
    please help!!

  118. anu Says:

    Hi,

    An update to my earlier post.
    I had a logoff button on my page.
    The user was getting logged off because the virtual keyboard search button was picking the Logoff button as the default button.

    How can i make the submit button as my default button?

  119. Will Says:

    Hi Anu,
    Are the buttons in seperate forms & fieldsets?
    That would be my best guess…
    Next guess: Have you set a tab-index?
    Hope that solves it,
    Cheers,
    Will

  120. iDea Digital Says:

    Thank’s so much!

  121. Karram Says:

    I really appreciate your post, I have got a lot more info after reading this tutorial.

  122. Code( Says:

    Hi, i just downloaded your tutorial. i havent modified it in anyway. i got your icon to come up. but why doesn’t the text in the paragraph tags show up?

    Sorry, im a total n00b.

  123. Montana Burr Says:

    You know, you could get away with just checking for the presence of “iPhone” in the User-Agent string, since the iPod touch UA string states that it is compatible with iPhone.

  124. Jacob Says:

    The code that was supposed to send my iPhone to the iPhone page didn’t work in , , , or just out in the open. It just showed up as text.

  125. tr3 Says:

    Hi Will,
    I’m trying to port my portfolio website to an iPhone app and have had pretty good success up until now. Your tutorial is great, and works perfect.

    My problem is, I’m using the script to load div’s with images embedded dependant on the orientation ( 300 x 115 for portrait, 460 x 175 for landscape ) and it only works for the first instance of my images. Everything past the first instance of page_wrapper is blank. I’ve tried adding document.getElementById(“page_wrapper2″).setAttribute(“class”, contentType); , etc. but it still doesn’t work. Is there any way to modify the javascript or any aspect of this so that I can have it apply to multiple versions of page_wrapper[1,2,3,4,...]?

    Please let me know. You can contact me by email if you want.

    Thanks again,

    Tre

  126. Michael Says:

    I have found this site helpful for learning how to build an iPhone web site.

    http://www.combsconsulting.com/iphone-android-website-example/

    This is also a page on how to build an iPad website too.
    http://www.combsconsulting.com/ipad-website-example/

  127. Joel Says:

    Thanks for a great script! It is working very good, except for one thing, I need to change the orientation of the iphone once before the content shows up, i.e. if I have the phone upright and loads my site, it’s blank. If I then put it sideways, the site shows up and if I put it upright again the site is loaded and vice versa.

    I figure it has something to do with my site not getting the current orientation at load. Do you have a solution?

    http://www.jchristoffersson.com

    the script:

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

    function updateOrientation(){
    var contentType = “show_”;
    switch(window.orientation){
    case 0:
    contentType += “upright”;
    break;

    case -90:
    contentType += “flip”;
    break;

    case 90:
    contentType += “flip”;
    break;
    }

    document.getElementById(“wrapper”).setAttribute(“class”, contentType);
    }

  128. Dipayan Mallick Says:

    Hi,
    Thanks for your great tutorial. But I have one problem that, although I have created my iphone version of my website by creating a .htaccess to force iphone visitor to /iphone directory, but I dont know how to enable normal site looks on ipone browser if user wishes to view. Like from the iphone directory if user wants the original home page look of the site instead of the iphone version homepage. Can you please guide me?

    Thanks in advance.

    Dipayan

  129. peter chon Says:

    Now that we have the ipad (with it’s larger dimensions) can we specifically leave out the ipad from re-directing to the smaller site?

  130. MikeV2 Says:

    I didn’t have an iphone for testing, so needed to work with this so I had to make it visible in a standard browser. NOTE: this may well look different on an iphone, than in a standard browser, but it gave me something to work with.

    Just in case somebody wants the page to display if someone was visiting it from a non-iphone make the following tiny change to the orientation function…

    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;

    default:
    contentType += “normal”;
    break;
    }
    document.getElementById(“page_wrapper”).setAttribute(“class”, contentType);
    }

  131. Lesya Says:

    Thanks! This blog helped me a lot!

  132. Sharif khan Says:

    Excillent post. I got this from google search. Thanks a lot.

  133. breat Says:

    Very useful tutorial for website creating.
    I like it.
    Thanks for great sharing.

  134. Bruce Sommer Says:

    Great post thanks, used your code to create a “sample” for a prospect with log-in required to test database connectivity and basic features. I tested on an Android and works as well. Any pointers on accessing the shake features and GPS? I suspect any handset with an accelerometer should use similar detection schema… I’ll shoot a note off to inquire regarding collaboration and more details.

    Thanks again!

  135. Matt Says:

    Hey

    Trying to build this mobile website for a charity, and I’m sure I’m missing something obvious but it’s not displaying at all, just getting a blank screen! Just want it to zoom when orientated sideways, any help appreciated.

    hosted here:
    http://www.barecreative.co.uk/toughstuff/

    Thanks!

  136. Will Says:

    Looks like your orientation.js isn’t linked up properly Matt.
    That might help :)

  137. Matt Says:

    thanks for the quick response! :)

  138. Matt Says:

    One more question if it’s alright, when tilted sideways the phone seems to still have a limit of 320px, as I’m trying to float the sidebar right and it doesn’t seem to want to go there, any ideas?
    http://www.barecreative.co.uk/toughstuff/

    Thanks again!

  139. MikeV2 Says:

    In your CSS it looks like you’re stating the width of #page_wrapper as 320px. That doesn’t change when you rotate the phone, so I’d guess that’s where your problem’s coming from.

  140. Will Says:

    Hi Matt,
    Taking a quick look at your code, and the site, I’m actually thinking that using the orientation detection isn’t really that necessary. Like Mike mentions, the width of your page_wrapper seems to be issue though.

    The way you have things organised at the moment with the triplication of all your content is a messy.

    My suggestion would be to simply let the iPhone do it’s thing in this case. Float those icons right and leave the content on the left flexible so that it will fill the remaining space. Keep the text size adjust line in the css to stop the fonts jumping about.

    If you wanted to have the orientation change something, perhaps set the width of the icon container to double that of the icons and set them to display inline when the phone is held on it’s side. This will stop people having to scroll as you’ll have rows of two.

    Cheers,
    Will

  141. Matt Says:

    It is indeed, thank you very much!

  142. Matt Says:

    Hi Will

    I didn’t think it was either, but I was having some problems when clicking a link and rotating the phone, then returning using the back button, which didnt update the orientation, and caused a big whitespace when held horizontally. This could be zoomed out to see the portrait version aligned left. This wasn’t an issue as long as the links weren’t used though. Is there a fix for that?

    Thanks

  143. Victor Reyes Says:

    So if I got right, there are 4 containers for iphones 4 different sides. Does this mean that every container (div) contains exactly the same information that is styled differently? Isnt that bad from SEO point of view, dublication the content or might be seen as spam, etc?

  144. Eric Evenson Says:

    Thank you so much for the tutorial…it is awesome! I have one quick question. I have an image at the top that is 320px wide in normal view. When I turn my iPhone right or left the image stays fixed at 320px. How do I get it to show the same image, but has a size that goes to 480px?

  145. Victor Reyes Says:

    I guess ull have to re-do the image to 480 px and place it in and/or containers

  146. Victor Reyes Says:

    Sorry i wrote some html but id didnt showed up = content_left and content_right divs

  147. Eric Evenson Says:

    Thanks Victor for the help! I was able to figure it out. Maybe not the best way, but I definitely am able to get the image in the header to spread out when I turn it left or right…thanks again!

  148. Hadley Says:

    Question, if I may. I really appreciate this website for sharing this knowledge. Thus far it has helped me considerably with my iphone project. I do have one question – please see the following link and you can see the page “sizes” properly. However, when viewing a page that exceeds the height of the iphone screen size – one cannot scroll down…. Is there a specific code I would need for this feature? Sorry if I overlooked it in the materials. http://www.swiftreport.net/m/
    Thanks!

  149. jan Says:

    any ideas how to add support for opera? i guess that requires an extra jscript

  150. Centrio Says:

    Is that also supported on Nokia E-Series?

    _ _ _ _ _
    Tomy
    Centriohost – Cheap Master Reseller Hosting / Reseller Hosting / Alpha Master Reseller Hosting

  151. gehang Says:

    Anyone know how to set focus to a control after a page is loaded on the iphone?

    Normally I would use javascript (form.element.focus();

    I’ve tried it in the head, in the body tag, and in a script tag in the body. The control never seems to get the focus. I would like to load a web page, then bring up the keyboard for input without the user having to click the textbox first.

    Anyone have an idea?

  152. Chris Says:

    Thank you so very much for a very useful tutorial!

    The new iPhone 4 was just released, and, of course, it has a much higher screen resolution. Is there a way to detect which screen the user has, and re-create the content accordingly?

    I have an image heavy site (I’m a photographer and need to show some samples), and it would be nice to be able to present the images larger than the old 320px wide if the user’s screen allows for it!

  153. Duc Says:

    I am a novice to css. I have been learning html/css on the net. However, I have not done a site for iPhone. Thanks for the tutorial. I will start making a site in for the iPhone for training purposes.

  154. Heathcliff Says:

    Great tutorial!

    But I was wondering if I could use the exact same javascript to control a variable that would change an include to actually change the page that is shown when changing the iPhone direction…
    (I mean when using php and not xHTML)

  155. Saurabh Says:

    good post…since the css has used absolute width, it will not work on iPad
    can anyone make the code compatible with iPad also?

  156. Manish Says:

    This is awsome. I tried on my iPad and works great and since the iPad in addition to the other angles of iPhone also allows flip mode (Vertically upside down), i tried it and IT WORKS!!!!

  157. pixeleffect Says:

    Hi one thing i noticed was not said in this tutorial was the iPhone screen size in pixels is 480H by 320W i know some websites say 940 by 620 or something those are completely wrong.

    this is mainly for the ones who are using adobe fireworks or photoshop

    just to notify everyone hope this helps.

  158. pixeleffect Says:

    hi one thing i forgot to ask was do you know the code so that when you type in the regular desktop website ont he iphone it takes you directly to the iphone website instead of having to click the link to get to the mobile site

  159. James Says:

    Does that set the width to 320 or 480 regardless of the width of the site? i have tried a few different examples and seem to get different results, can anyone let me know?

    Cheers

  160. James Says:

    sorry last message got rid of code

    meta name=”viewport” content=”width=device-width”

    Does that set the width to 320 or 480 regardless of the width of the site? i have tried a few different examples and seem to get different results, can anyone let me know?

    For example if i had a site with a fixed pixel width of 700px would it force it to fit or would it only show 320/480?

    Cheers

  161. Adam Says:

    no the width must always stay at 320px. the iphone does not automaticly format the site to fit the screen.. you can have the width set to 700px but you will have 370px of excess on your page.

  162. Izaak Says:

    Hi,
    First of all, great tutorial, just a quick question though.

    How can I make it scroll if I have alot of content? Mine just sits there and doesn’t show all of it.

  163. InomoEscows Says:

    The Rise Of The Organization A man gave the route of [B]ed hardy clothing[/B] range his very own name. Later on he joined by [B]ed hardy hoodies[/B] Producing clones for other brand name names like Urban Outfitter, Von Dutch and Diesel was his previously operating. He find out a fine possibility in [B][URL=http://www.edhardystore.uk.com]ed hardy hoodies[/URL][/B] masterpieces. He talked such tricky within the yr 2004 having a considering foe a clothes layout dependent on his outstanding art and tattoo [B][URL=http://www.edhardystore.uk.com]christian audigier[/URL][/B] Quickly following that speak, Hardy [B]ed hardy hoodies[/B] an authorization to make use of his very own styles and from then on, the Ed Hardy garments was born.

    Together using the success of [B][URL=http://www.edhardystore.uk.com]ed hardy clothes[/URL][/B] outfits stytle you will find troubles linked with them. [B]ed hardy hoodies[/B] excellent outcomes of [B]ed hardy clothing[/B] clothes collection is due to Christian Audigier’s distinctive marketing designs, you will discover so several who argue this. Audigier very own very a few [B][URL=http://www.edhardystore.uk.com]ed hardy t shirts[/URL][/B] buddies and he hold them. [B][URL=http://www.edhardystore.uk.com]christian audigier[/URL][/B] just provides his close friends no price goods and take pictures from them wearing his types rather than spending so a lot of quantities of dollars for your style who will [B][URL=http://www.edhardystore.uk.com]ed hardy clothes[/URL][/B] the clothes collection.

  164. Martyn Says:

    With the new iPhone having a larger resolution, how do we combat the resolution differences? :(

  165. Midhun Says:

    I don’t have any idea how to work with CSS. My requirement is to change design of existing mobile application into rich design of iPhone.

  166. Pixeleffect Says:

    hey, midhun

    dreamweaver is made sothat you do not need to to any css(well if you really wanted to customize) if you can afford this then you will have to learn css. My knowledge of css came from looking at what dreamweaver spit out then i just learned like that

    if you aew a student then adobe gives students up to 80% off all adobe products just go to adobe.com and search student

    hope this helps,
    Pixeleffect

  167. Eric Evenson Says:

    Tutorial was awesome and have most things figured out. One thing that I am struggling with is having a table. I am working on a movie website and trying to display two movie posters with the names of the movies underneath them. This is pulled from a MySQL database and this process works fine. The problem is when I hold the iPod touch vertically, it looks good. When I turn it right, it still looks fine, but when I turn it left, the movie posters get centered in the screen and the names of the movies are generally to the left of the image instead of the bottom. To see an example on an iPhone or iPod, go to http://www.essexcinemas.com/phone/comingsoon.php – any help in this matter would be greatly appreciated!

    Eric

  168. Martyn Says:

    Just thought I’d share the website I made using this tutorial for my university project.

    I made a user controlled radio station, the playout system was the difficult half but the iPhone website was a big hit!

    http://www.martynlittlewood.com/iphone

    Upright is information. Left tilt is music voting, Right tilt is topics voting.

    It won “Best In show 2010″ thanks! :)

  169. sesen Says:

    i’m a new iphone 。。websize developer。I hava an problem , how to make the text show on the center of iphone screen,(the pictures has already center on the screan,i don’t know how to make text align center the screen by css)

  170. Pixeleffect Says:

    ok witth css iam guessing ur using html to center you text go make a div tag for your text and enter all the text u want the size put the size of the div tage so it stays within the screen or whatever u want to do then go and type padding-left: auto; then enter padding-right: auto; and that div tag will center itself inside the parent div tag.

  171. Pixeleffect Says:

    i forgot to say that u need a parent div the width of the iphone and to push ur website to the corner click in the first div tage on the page and put in a new css rule call it body set the pading to 0 on all sides heres the css code for body if u are not using dreamweaver:

    padding-top: 0Px;
    padding-bottom: 0Px;
    padding-left: 0Px;
    padding-right: 0Px;

    hope this helps
    pixel effect

  172. sesen Says:

    thanks Pixeleffect
    thanks for your help ,but i don’t know how to get the width of the iphone, so ,although i did a job as you said above ,it still can’t work; the text still can’t show on center of the iphone,but it center when use other phone,likes anycall / nokia and so on!!

  173. Jobs In Manchester Says:

    Brilliant post. Extremely useful for anyone designing a mobile site with orientation and lets face it if you’re building a mobile site these days orientation is a must. Other phones are cottoning on too Android etc. Reece

  174. Pixeleffect Says:

    Hmm… thats weird it should work i use it all the time for regular websites to center the whole div on the page maybe someone else could help at least i tried

  175. Pixeleffect Says:

    the width of the iphone btw is 320px exactly

  176. leslie Says:

    well i tryed your code on http://brewscape.com/ipod today and it didnt work im using 2ed gen ipod with iOS 4.0.2

  177. Bruce Says:

    you guys Rock, great article! Do you know of anyway to listen for an iPhone (or any mobilephone with accelerometer) shake event with javascript? i want to have a shake event to be the same as a next button tap…I don’t wantot build an app the user has to download…

  178. Will Says:

    I don’t think it’s possible sorry…

    I did think of a way, involving text inputs and that shake to undo thing that the iPhone does, but there are so many issues that I just don’t think that can be overcome.

    All that said, I’d actually advise against the idea of shake to go next. That’s against all the iPhones current conventions. Swipe left or right is next or previous. Shake is generally something like undo, or start again, or return to the homescreen. People don’t like to have to learn new things.

  179. Ankinanti Says:

    just what i’ve been looking for..

    will studying it later..meanwhile,bookmarked..

  180. Atul Bhalerao Says:

    wow i like it

  181. Ghansham Gagnani Says:

    Thanks for great resources for web development community.

(Trackbacks / pingbacks)

  1. Tutorial: Building a website for the iPhone | Gearfire.com
  2. 5 raisons pour ne plus coder pour Internet Explorer 6 | nyamsprod's web labs
  3. Engage iPhone site takes center stage | Engage Interactive Blog | Web design Harrogate
  4. Criando um site para iPhone passo a passo (parte 2) | MobileDev
  5. links for 2009-01-05 « I do
  6. A Web Developer’s Bookmarks « Hired Guns Creative
  7. The Anatomy of an iPhone Site | Build Internet!
  8. Showcase of Designs Optimized for iPhone « Smashing Magazine
  9. Showcase of Designs Optimized for iPhone « Tech7.Net
  10. Devils Backyard » Blog Archive » Showcase of Designs Optimized for iPhone
  11. Showcase of Designs Optimized for iPhone - Programming Blog
  12. iPhone网页与软件界面设计欣赏与最佳实践 | 非原创无线互联网观察
  13. 5 Tips for Mobile Success | Fresh
  14. Pyramid Consulting R&D Labs
  15. Showcase of Designs Optimized for iPhone - az84.com
  16. Flogging English | » Designing mobile websites for the iPhone
  17. Web Development for the iPod Touch/iPhone | michael greene
  18. Showcase of Designs Optimized for iPhone « Vibbit Social Networking and Website Design for Under 89.00
  19. Sites utiles pour dev iphone (web) @ Crazy-dev blog
  20. Tutorial per creare siti internet per iPhone - Mondo3 Forum
  21. Website Design For The iPhone - Craig Dennis
  22. tecnicando » Blog Archive » Impostare il proprio sito web per girare su Safari Mobile
  23. Dostosowywanie WWW dla iPhone'a | Bushman Editing
  24. Bearmangler » Building websites for iPhone
  25. iPadify » Blog Archive » Building sites with Orientation Specific Content OSC
  26. Tendencias del Diseño Web. iPad, iPhone, iTouch « Blog de Diseño Web
  27. 10+ useful code snippets to develop iPhone friendly websites
  28. 10+ useful code snippets to develop iPhone friendly websites | Experts Developers
  29. Prepara tu sitio para iPhone | Ayuda WordPress
  30. Build Your Own iPhone Specific Website - FrancescoMugnai.com - Graphic Design Inspiration and Web Design Trends
  31. iPhone网页设计欣赏与最佳实践 Showcase of Designs Optimized for iPhone - 奇亚-申力军的博客-SLJ.me
  32. 2010/03/11に気になったこと | debeso
  33. 10+ useful code snippets to develop iPhone friendly websites | Web Development News
  34. 10+ useful code snippets to develop iPhone friendly websites … | Template Blog
  35. Build Your Own iPhone Specific Website - Macz.net
  36. Créer un site pour iPhone : Bonnes pratiques
  37. Himiko Server / Screen Rotation and Browser Scaling
  38. Himiko Server / Development Links
  39. Javascript's kiss » Blog Archive » iPhone网站开发点滴
  40. Is your site on-the-go? « Breaking the Dial
  41. iphoneやiPadに対応したWEBサイトを作るスニペット11選 | KRUZ-GRAPHIX
  42. Creating an iPhone Website/App | beccablog, teacher-librarian
  43. Web Design for iPhone
  44. iphone/ipad网站开发技巧
  45. How to build a website with orientation specific content especially for the iPhone…
  46. How to build a website for the iphone with orientation detection | Engage Interactive Blog | Web design Harrogate « Linkaty
  47. Creating iPhone-ready sites using CSS media query | CarbonGraffiti
  48. WEB Visual Feast » Blog Archive » 10条小代码开发iPhone友好的网站
  49. B3Graphics » Blog Archive » Building a website for the iPhone
Have your say