RSS Feed

Blog

Mobile Optimized Site Increases Visitors

Mobile Optimized Site Increases Visitors
Posted on Jan 20, 2011 by Stephen Owens
General category
   [ Return ]

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. 

If you absolutely cannot use a responsive design, then here is an article from MOZ on optimizing a site for mobile

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

  1. Android 39%
  2. iPod 33%
  3. iPhone 15%
  4. iPad 12%
  5. BlackBerry < 1%
  6. 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:

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

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:

  1. <?php
    
  2. $useragent=$_SERVER['HTTP_USER_AGENT'];
    
  3. if(... mobile browser check here ...) {
    
  4.   $smarty->assign('mobileFlag', TRUE); 
    
  5. } else {
    
  6.   $smarty->assign('mobileFlag', FALSE); 
    
  7. }
    
  8. ?>

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:

  1. {if $mobileFlag}
    
  2.   <LINK rel=StyleSheet href="mobile_style.css" ... >
    
  3. {elseif} 
    
  4.   <LINK rel=StyleSheet href="style.css" ... >
    
  5. {/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:

  1. {if !$mobileFlag}
    
  2.   ...
    
  3. {/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.

Share
Like what you read? Get updates for free!
comments powered by Disqus