I recently had to create a mobile-optimized website, so I thought I’d jot my steps down here, for anyone else jumping into mobile web development, and looking for a quick “get off the ground” tutorial. I won’t go into specific formatting and styles used to design the mobile site – only the basic setup using PHP.

The goals were this:

1. Create iOS/Android/Blackberry friendly mobile interface.
2. Redirect mobile users accessing the desktop/full version of the site.

Step 1: Check if user is already in mobile web directory

It’s often useful to establish a distinct mobile URL, so users can opt to visit it while on a mobile device.

Often this just means appending /m to the end of the URL.

Have your system capture anyone accessing the mobile URL, and define a variable:

define('MOBILE', true);

Call it whatever you want – this is just an indicator so we know the user is already in the mobile section.

Step 2: Redirect to mobile section if not already

Next, we need to check if the user agent (the browser and operating system) accessing the site is a mobile one. There’s a handy PHP function that performs all the work. You just need to capture the return value:

$is_mobile_device = mobile_device_detect();

$is_mobile_device will then look something like this:

Array (
  [0] => 1
  [1] => Apple
)

or:

Array (
  [0] => 1
  [1] => Android
)

If the user is not already in the mobile web directory, and it’s a mobile device, redirect to the mobile web directory:

if ( !defined('MOBILE') && is_array($is_mobile_device) && $is_mobile_device[0] ) {
  header('Location: m/index.php');
  exit;
}

This simply checks if the user is mobile, but not in the mobile web directory, and then redirects them if so.

Note: It’s useful to allow the desktop/full version of the site to load on a mobile device, if the user chooses to. So your site scripts will have to conduct the redirect only at the “index” level, for example – then if the user chooses to view the desktop version while mobile, they can load the actual page, which could be something like main.php.

So, the above redirect code would occur in index.php, and the actual desktop version of the site would load from main.php. This way it’s not going in an infinite loop.

Step 3: Set variable for use in HTML

Your HTML templates may need to hide or show content depending on what version is being viewed (mobile or desktop).

Here we declare a smarty variable which can be used in the HTML:

$is_mobile_device = mobile_device_detect();

if ( !defined('MOBILE') && is_array($is_mobile_device) && $is_mobile_device[0] ) {
  $smarty->assign("is_mobile_device", true);
}
else {
  $smarty->assign("is_mobile_device", false);
}

This is the exact same test as we did for the redirect, but here we define a variable depending on the outcome.

In our HTML, we simply run tests as such:

{if $is_mobile_device}
  some HTML content
{else}
  some other HTML content
{/if}

Step 4: Set viewport width and scale

This step automatically resizes your content when viewed on a mobile device. For example, on the iPhone and iPad, a standard site will load as it would appear on a very tiny monitor:

By setting the viewport, you zoom everything in to a more snug level, so the user doesn’t have to zoom just to interact with your site.

Place this in the of your HTML document:

This will automatically zoom-in to the width of the device:

Feel free to adjust the maximum-scale if you want to allow users to zoom-in even further.

Step 5: Toggle styles for iPhone/iPad

It’s probably best to keep a global mobile stylesheet that affects all mobile devices, but often it’s useful to target specific devices.

If you’re using a single external (or embedded) stylesheet:

/* iPhone-only styles */
@media only screen and (max-device-width: 480px) {

  #example {
    width: 200px;
  }

}

/* iPad-only styles */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

  #example {
    width: 500px;
  }

}

For linked stylesheets:

Wrap-up

Again, this is just to get you off the ground. There are loads of new possibilities when you design for the iPhone and iPad, namely webkit CSS properties.

If you have suggestions or improvements on making this migration even easier, please let me know.