Setting up your web site to run on iPhone browser

December 10, 2009

Setting up your web site to run on iPhone browser

Posted in Web Development — one comment.

According to several researches, the iPhone is the most used mobile to navigate in the Internet. With almost 50% of smartphone web traffic in U.S. and over 30% worldwide, clients are now aware to have their own web page running on iPhone browser. You have be to prepared if requested to create an iPhone web page.

There are many companies offering that kind of mobile services, like MOBIFY and iPhoneMicrosites, but it’s not to difficult to create your own web site running on iPhone browser. It is as easy as making it to run in desktop browsers.

Layout resources and kits

The first thing you will need are resources and kits to create iPhone based layouts. Here are some useful files to assist you:

iPhone PSD Vector Kit from Smashing Magazine
iPhone GUI PSD 3.0 from teehan+lax
iPhone Icon Style .psd Kit from Keep the Web Weird

If you’re looking for some inspiration, CSSiPhone does the job very well.

Home Screen icon

It is a good idea to consider creating an icon to appear as shortcut in iPhone’s home screen. All you have to do is a 57 x 57 pixels PNG image. Safari will crop larger images, so you can create one slightly larger if you want. Then save the file as apple-touch-icon.png and add the following code inside <head></head> node:

<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

Identifying iPhone browser

Now that you have a layout, there are two possible ways to create an iPhone web page: (1) redirecting the user to a sub-domain running the (a) same content with different layout or (b) a exclusive content for mobile and different layout; (2) switch between CSS files to handle media screen and media handheld (actually, for iPhone is a different type of media). Here is how you’ll handle these two options, insert the codes inside <head></head> node.

PHP:

<?php
  $iphone = strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone');
  $ipod = strpos($_SERVER['HTTP_USER_AGENT'], 'iPod');
  if($iphone || $ipod){
    header('Location: http://m.example.com/');
  }
?>

JavaScript:

if((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)){
  document.location = "http://m.example.com/";
}

Now, if you want to keep the domain, and switch between media types, do the following:

PHP:

<?php
  $iphone = strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone');
  $ipod = strpos($_SERVER['HTTP_USER_AGENT'], 'iPod');
  if($iphone || $ipod){
    print('<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />');
  }else{
    print('<link media="screen" href="screen.css" type="text/css" rel="stylesheet" />');
  }
?>

JavaScript:

if((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1)){
  document.write('<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />');
}else{
  document.write('<link media="screen" href="screen.css" type="text/css" rel="stylesheet" />');
}

In both codes and cases we test the user agent to find iPhone or iPod. That is the way to identify if the browsers is running in an iPhone or in a desktop. But wait, there is more!

Creating a full iPhone page

Let’s use the first case, we’ll redirect the user to a new sub-domain with exclusive content for mobile only. Here is what you have to add:

Viewport meta
An iPhone icon
CSS for iPhone
Orientation code

Your HTML should look like this:

<html>
  <head>
    <title>My iPhone page</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
    <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="orientation_change.js"></script>
  </head>
  <body>
  </body>
</html>

If you have any need to use the event onorientationchange from iPhone – an event called when you turn your iPhone to the left or the right – use the orientation_change.js file:

window.onorientationchange = function(){
  /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the left, or landscape mode with the screen turned to the right. */ 
  var orientation = window.orientation; 
  switch(orientation){
    case 0:
      /* If in portrait mode, sets the body’s class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class","portrait");
      /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
      document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom).";
    break;

    case 90:
      /* If in landscape mode with the screen turned to the left, sets the body’s class attribute to landscapeLeft. In this case, all style definitions matching the body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class","landscapeLeft");
      document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right).";
    break;

    case -90:
      /* If in landscape mode with the screen turned to the right, sets the body’s class attribute to landscapeRight. Here, all style definitions matching the body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
      document.body.setAttribute("class","landscapeRight");
      document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left).";
    break;
  }
}

Code from Ajaxian.

Testing your web site

Now that we have setup the page, it’s time to test it. There are three ways to do it:

Changing the user agent on Safari
Using the iPhone Simulator app
Using the iPhone itself

Both way are very effective, but I strongly recommend iPhone Simulator app, it’s possible to rotate the iPhone to the left and to the right, making it easier to make test. And of course, you can use the iPhone itself to make more real tests – I recommend to use it on final tests only, because improves your development speed.

Enabling Develop menu on Safari

By default Safari comes with no Develop menu. To enable it following these simple steps:

Open Safari Preferences, Safari > Preferences
Select the Advanced tab
Check the option Show Develop menu in menu bar

The Develop menu will appear between Boomarks and Window menus. To change the user agent, just open the Develop menu and chose one of the four options under User Agent option.

Additional resources

Now that you have a running web site on iPhone, feel free to explore more like CSS styles and plugins like jQTouch to make your site even beautiful!

• • • • •

Tags: css, iphone, javascript, jqtouch, mobile, php

This entry was posted on Thursday, December 10th, 2009 at 15:21 and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

One response to “Setting up your web site to run on iPhone browser”

December 11, 2009 – 7:24 pm #
tecnicando » Blog Archive » Impostare il proprio sito web per girare su Safari Mobile said

[...] Articolo tratto, tradotto e adattato dall’articolo [...]