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.
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.
$detect = new Mobile_Detect();
if ($detect->isMobile() && isset($_COOKIE[‘mobile’]))
$detect = “false”;
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.Website Advice Media Queries, Mobile Devices, Web design, Website designer