Redirect Your Website To A Mobile Version
With the growing number of web visitors using mobile devices, many sites are offering a mobile version with cut-down content. If you have built a mobile version and want an easy way to redirect your visitors, follow these simple steps.
Redirect or Restyle?
The aim of this post is to provide an easy solution to redirecting your visitors to a mobile version of your website. However, you may prefer to use media queries to style your site content to suit a range of devices.
Build Your Mobile Site
There are only a few steps to this process and the first one is of course, to build your mobile site! There are many ways of doing this and many thoughts about whether to put all the content into a single page, (this is the best method if you are using something like the jQuery Mobile Framework), or to build an entire set of mirror pages. If you are going to build a full set of mobile pages, don’t just duplicate the entire content of your main site – this will look like you are trying to trick the search engines into thinking you have twice as much content for them to read, index and offer-up to the search engine results!
Bear in mind when you build your mobile site that
- navigation should be simple
- content is best kept brief and pages should scroll up and down only
- images need to load ultra-quickly
- contact details are clear and easy to find
- clickable elements are big enough to click on!
How To Redirect Your Main Website To The Mobile Version
This is a revised version of this article, updated to make use of Serban Ghita’s Mobile_Detect.php, which you can get here: https://github.com/serbanghita/Mobile-Detect.
– – – – – – – – – – – – – – – – – –
At the main website root, add your Mobile_Detect.php file.
However you choose to build your mobile site, put it in a folder, or on a sub-domain called ‘mobile’. Make sure you have an index.php file in this location, and in this mobile index.php file you need to add a link back to the main website.
For the link text use something like “View Full Site” and for the url, type your full website address (ie. http://www.yourwebsiteaddress.com).
The first line of your mobile index.php file needs to set a cookie, to prevent visitors being stuck in a loop if they want to visit the full site.
<?php
setcookie(“mobile”,”m”, time()+3600, “/”,”.haizdesign.com”);
?>
Here, we set the name and the time before the cookie expires on our domain.
In the main website, you need to add some php to the <head> of the index.php page.
<?php
@include(“Mobile_Detect.php”);
$detect = new Mobile_Detect();
if ($detect->isMobile() && isset($_COOKIE[‘mobile’]))
{
$detect = “false”;
}
elseif ($detect->isMobile())
{
header(“Location:http://mobile.haizdesign.com”);
}
?>
Make sure the Location matches the location of your mobile site. If you have put your files into a folder called “mobile-site”, the line should read header(“Location:http://mobile-site/haizdesign.com”); or whatever you have chosen.
other page
When i click on the main site i will be redirected to the main site, what is correct, but when i click the index page I get redirected back to the mobile version.
Any fix for that?
Edwin, I have updated the article to include the method I am currently using.
I have successfully made my main site redirect to mobile, but I have an issue with the cookie.
When i put your cookie into my mobile web page I am getting an error when loading the page
“Warning: Division by zero…”
Also am I supposed to put the domain name in the cookie minus any www or mobile prefixes but with the . in front as you have in your example?
Any idea of the cause?
In PHP, when you divide by a variable, if the variable is 0 you will get that error. Check you have everything as per the article and also check the updated link to the original article.
For reference, I am no longer using this method on new sites as I have been focussing on responsive solutions for my clients.
Hi Stuart, by “responsive” you mean that the sites size automatically adjusts to fit the users screen no matter what size screen they are viewing it in?
Or is it good to have a mobile theme instead with a user-agent detection script?
I’m wondering whether to develop a separate sub domain for my growing mobile users. Or simply have the theme change to a mobile friendly version instead.
What are your thoughts on this?
Mike.
Hi Mike, responsive means adapting (responding) to viewport or browser. This involves content being reformatted to make the site design work no matter where it’s being viewed. I have mixed views on dedicated sites vs responsive designs, but from your comment guess that if your site is growing, you don’t want 2 sets of sites to maintain. A responsive site design is the way forward!
I’m getting a syntax error for this:
header(“Location:http://loudgamer.com/staging/mobile”);
it’s reporting an unexpected ‘:’
All good, I fixed it.
When I copied the text it created curly quotes, not regular ‘”‘
This is what caused the issue
Thanks for posting your solution Michelle.
Would I be correct to assume that this will only work on .php pages. .html pages would need to be changed to .php pages?
Correct. This is php and requires that page extension to work.