Blog

Mobile Optimized Site Increases Visitors

Posted on Jan 20, 2011 by Stephen Owens
General category
[ Return ]

Even a simple mobile optimized site is better than no mobile optimized site. I created a rough mobile template, and even though I threw it together in about 30 minutes as an experiment, I've seen the unique mobile visitors climb about 261%. I did it by adding: one style sheet, a mobile browser check script, and setting some mobile exclusion if statements. Read more for details.

NOTICE: The procedure I describe below is old and out of date. It would be much better to create a CSS3 + HTML5 responsive design. One site across all devices. Delivering a unified experience is much better for keeping and retaining your site visitors than trying to maintain a mobile optimized site.

Quick Overview Of My Mobile Visitors

To help illustrate the increase in site traffic here is a snippet of the chart showing the Mobile Devices that visited my site from my Google Analytics account.

Increased Traffic After Creating A Simple Mobile Optimized Site

Mobile Devices Used By My Visitors

Android 39%
iPod 33%
iPhone 15%
iPad 12%
BlackBerry < 1%
Danger Hiptop < 1% (re-branded T-Mobile Sidekick)

My 30 Minute Setup Mobilization Experiment

I started by downloading the a PHP based mobile detection script from detectmobilebrowser.com. This script checks for mobile web browsers and does a simple header redirect to a mobile version of the site. Resembles something along the lines of:

```
<?php
```

$useragent=$_SERVER['HTTP_USER_AGENT'];

```
if(... mobile browser check here ...)
```

  header('Location: http://website.com/mobile');

```
?>
```

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(... mobile browser check here ...)
  header('Location: http://website.com/mobile');
?>

Instead of using it to do the header redirect, I did a quick change and made it set a boolean flag. CMS Made Simple uses the Smarty Template Engine, and I stored the flag check into a Smarty variable with some code equivalent to:

```
<?php
```

$useragent=$_SERVER['HTTP_USER_AGENT'];

if(... mobile browser check here ...) {

  $smarty->assign('mobileFlag', TRUE);

```
} else {
```

  $smarty->assign('mobileFlag', FALSE);

```
}
```
```
?>
```

<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(... mobile browser check here ...) {
  $smarty->assign('mobileFlag', TRUE); 
} else {
  $smarty->assign('mobileFlag', FALSE); 
}
?>

Then I created an alternative CSS file that contains optimized settings for mobile browsers. When the flag is set, I have it load my alternative style sheet which pushes the site into a simple single column layout. The code basically looks like:

```
{if $mobileFlag}
```

  <LINK rel=StyleSheet href="mobile_style.css" ... >

```
{elseif} 
```

  <LINK rel=StyleSheet href="style.css" ... >

```
{/if}
```

{if $mobileFlag}
  <LINK rel=StyleSheet href="mobile_style.css" ... >
{elseif} 
  <LINK rel=StyleSheet href="style.css" ... >
{/if}

Then I edited my template files and on any section that I felt would hinder the mobile experience, I added a simple if statement. This would hide undesired elements from the mobile devices. I accomplished it with something similar to:

```
{if !$mobileFlag}
```
```
  ...
```
```
{/if}
```

{if !$mobileFlag}
  ...
{/if}

That's it. Finished.

Final Thoughts On My Mobile Site

I was a huge skeptic of creating a mobile optimized version of my website. However, after seeing the fast increase in traffic from the mobile browers, I'm going to have to commit to the mobile site, and create a good design that's worthy of a smart phone wielding web warrior.

I will keep the full detection script in place for a few more months. However, if the Andriod and i products continue to be the top devices, I will trim the detection script down to just those devices.

Most likely I will add in an option to switch between the mobile and full site for mobile visitors. Sometimes it's just nice to have options.

Like what you read? Get updates for free!