Select Page

Generate more traffic for your site by creating mobile device pages

The ever increasing blurring of the line between PC and Mobile phone seem to be making a bountiful of low hanging fruits that no longer exist on search engine marketing for the PC platform available once more.

When searching the Internet on a smart phone using Google, a mobile phone icon appears against listing for websites that are mobile phone friendly (this means the site has a version that is optimised for mobile phones). Even if the site is not ranked very highly, the fact that it has this mobile phone icon automatically draws attention to it, way before more highly placed listing without the mobile compatibility icon.

Working with a client that operates a network of online dating website including countryside dating, some of their website was made smart phone friendly, and investment that seem to start rewarding the client with excellent ROI withing weeks of putting the mobile version of her sites online.

To encourage webmasters who are thinking of making their website mobile phone compatible but do now know how to go about it, a quick rough and ready post about creating a mobile phone version of your website follows with some examples taken from www.verynaughty.co.uk one of the sites we made mobile phone compatible for the aforementioned client.

This single step by step guide will show you how to create web pages for mobile devices, start from first detecting which mobile device has arrived on your website and then redirecting the device to the page you have created for it.

A. Creating a mobile phone compatible version of a page or website.
At the present time, you cannot create a single universal page for all smartphones and PDAs. The devices will be able to view the page but it will not display correctly, mobile device user will have to use the zoom function to adjust the pages, so that there will be not need to use the zoom function, sadly, you have to create one page for each device. For the purpose of this article, we will treat all mobile devices manufactured after 2007 as one (this includes Android, Blackberry, Palm, Galaxy etc) but iPhone will be treated differently (because of screens size/resolution).

1.Create HTML pages for mobile phones
Creating HTML page for mobile phone is like creating HTML pages for the web but you need to bear the following points in mind:
– page WHIDTH maximum size to be 200px
– page fonts size should be from small, x-small to xx-small
– use less images and make the images much smaller than the size you would use for the web.

Create homepage of your mobile HTML site and call it index1.php (of course you can call it any other name you like).

2. Create the HTML page for iPhone
Here are things to bear in mind when creating HTML for iPhone.

– page WHIDTH maximum size to be 700px
– page BODY font size to be set to 100%
– page fonts size are prefect if you use font size between 24px to 36px
– use a few images as possible.

You can call the homepage for your iPhone version index2.php

3. Create HTML HOME PAGE for the site mobile version
This will be the homepage for all mobile devices. This will be the page mobile devices that visits you regular website from a PC will be redirected to. This page will also sort the mobile devices for example detecting iPhone and sending it to the pages designed for iPhon and detecting Android and other devices like it and sending them the the appropriate pages.

  • create an empty php page
  • add the content below to the page:

<?php
$user_agent = $_SERVER[‘HTTP_USER_AGENT’];
$iphone = preg_match(‘/ipod/i’,$user_agent)||preg_match(‘/iphone/i’,$user_agent);
?>
<?php if($iphone == ‘1’) { include(‘index2.php’); } else { include(‘index1.php’); }
?>

  • save the page as index.php

4. Edit you main website home page(in our case index.php) and add the below code to the top of the page:

<?php
include(‘mobile_device_detect.php’);
mobile_device_detect(true,true,true,true,true,true,true,’http://mobile.YOURSITE.co.uk/’,false);
?>

5. Download mobile_device_detect.php script attached, upload it to your main site, to the same folder with your main home page (in our case index.php) and you are done.

Your comments about this post is welcome at Temis UK webmaster blog, you can also discuss it at Webmaster Forum.