Mobile SEO is a tricky subject when it comes to best practices. There is no “set in stone” method that we should take to ensure our websites are fully optimised for mobile devices and each of their methods have their own drawbacks and weaknesses.
Typically there are two ways of optimising your website for mobile content.
- Create special css stylesheets using @media handheld
- Redirect to a mobile url.
Method One: Special Stylesheets Using the CSS Command @media handheld
@media handheld is the CSS command that will only display for handheld devices. Using this method we can create two separate stylesheets, one for desktop browsers and one for handheld devices. This is a pretty neat solution, not only does it shave off the load time of using a script it also saves us having to create 2 versions of our website and reduces the amount of url’s needing to be crawled and indexed.
Is this the perfect solution? Well it’s not that simple, not every phone supports the handheld media type or CSS at all.
Method Two: Create A Mobile URL & Mobile Website
One for Desktop browsers and the other for mobile browsers. You can use scripts to recognize smartphone user-agents accessing the desktop version and redirect them to your smartphone url. There is a few different ways to redirect the user to the mobile version of the site. I will explain them below.
Redirecting Mobile User-Agent With JavaScript
We can use a simple JavaScript that will redirect the user to a mobile page of the website.
That script would look a little like this:
<script type="text/javascript">// <![CDATA[
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); if (mobile) { document.location = "http://www.yoursite.com/mobile.html"; }
// ]]></script>
The problem however is that to attempt to detect every smartphone device there is on the market, all using only one JavaScript script, could turn all your pages into a downloading nightmare. Also not every mobile supports JavaScript.
Server Side Language Like PHP, JSP, ASP, etc. to Detect the User-Agent
The main benefit of using a server side scripting language like PHP or ASP is that you don’t need to rely on something that the phone supports. The script is already on the web server, all it needs to do is detect the mobile device and point it to the correct mobile optimised web page.
A simple PHP mobile redirect script would look a little like this:
<? if (
stristr($ua, "Windows CE") or
stristr($ua, "AvantGo") or
stristr($ua,"Mazingo") or
stristr($ua, "Mobile") or
stristr($ua, "T68") or
stristr($ua,"Syncalot") or
stristr($ua, "Blazer") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='mobile/index.php';
header ('Location: '.$location);
exit;
}
?>
Similar to JavaScript we have to add each mobile user-agent we want to redirect to the script. With all the new devices coming out all the time this would mean we’d have to keep adding each new phone to the script in order to redirect everything. Well I don’t know about you but I like things a bit more automated.
Using WURFL (Wireless Universal Resource File)
For the mobile url method this has to be the best solution for the job. WURFL is an XML configuration file plus a set of programming APIs which has access to a database of information about thousands of mobile devices and the user-agents they might be using. This is totally open source and constantly updated thus eliminating the need for us to manually add new mobile user-agents to our own scripts.
You can find all the information about getting to grips with WURFL on their website but for a small website with a minimal amount of pages you might not want to go through the trouble of having to deal with the fiddly bits, in this case you might opt for a mobile solution such as GetMo from Google or something like Wapple if you know a thing or two.
However a content heavy website will have many pages to maintain, large amounts of traffic and a heavy page load time could hurt your revenue.
What would you do? Create custom mobile CSS (having to update user-agents manually) or do you create two versions of your website which could mean a lot of extra work. I guess the jury is still out on this one…