Make Your Website Mobile-Friendly

Small business owners have been advised that more than 10m people (in the UK alone!) are using their phone to surf the internet, according to figures released by Nielsen.

The data means that around 20% of those with a mobile use it to access websites and that all small businesses must have a site that is compatible with mobile technology.

There are now 6.2m smartphone users in the UK after 600,000 people bought one of the latest technology phones since last summer.

It’s a fact:

10 million people (in the UK) are accessing the internet on mobiles

“The era of the handset as a truly multi-media device on a mass-market level lies somewhere on the horizon,” said Edward Kershaw, head of mobile media at Nielsen.

So I set out to find just how this was accomplished.   I personally have a potentially large commercial website due for launch in a month or two, and have always wanted to find out just how I was going to make it friendly to mobile users – especially when you learn that there are more people in the world who own a mobile device than who own a credit card.  Big numbers.  Also, take a look at the Japanese at the moment (who are normally two steps ahead of the Western world when it comes to technology) – only a small percentage now have home PC’s, as mobile devices are the norm for all their internet / communication needs.

Let’s get stuck in:

You may think that since you write valid code and separate structure from presentation at all times, your site already works great on mobile devices. You may also think bad things don’t happen to good people. In both cases, you’d be wrong.

The fact of the matter is that the state of HTML rendering in the wireless world is all over the map right now. Some browsers, like Pocket Internet Explorer, are actually pretty good at parsing through standard web pages. Others can scarcely handle layout rules at all. And still worse are the mobile browsers that load all CSS and javascript files, attempt to use them, and screw up the experience even more in the process.

What’s really needed until HTML/CSS/JS support is improved in mobile devices is a little server-side filtering. By pulling out everything a mobile device can possibly choke on before it even gets to the mobile device, we can create a mobile version of our site which is not only viewable on more devices but is much quicker to download as well.

And you know what? The mobile version of your site is probably going to be much easier on screenreaders too.

Four easy steps

Outlined below are the four steps to get this done in a matter of minutes, provided you are in an Apache environment and can run PHP.   If you’re not, these steps can easily be adaptable to other technologies.

Step 1: Set up a domain mirror

If your site lives at

www.theonemanmission.com

you’re going to want to set up a subdomain at:

mobile.theonemanmission.com

How you accomplish this is usually pretty straightforward but differs depending on your host. You want to set up your subdomain as a “mirror” of your main site, meaning the subdomain is really just pointing to your existing site.

Step 2: Create a global_prepend file

The next thing we’re going to do is a create a PHP file which will be automatically prepended to every page of our site. Call this file something like "global_prepend.php"

and throw it at the root of your server:

<br />
<?php<br />
function callback($buffer) {<br />
if ($_SERVER['SERVER_NAME'] == ‘mobile.owendevelopment.com’) {<br />
$buffer = str_replace(‘http://www.myawesomeblog.com’, ‘http://mobile.myawesomeblog.com’, $buffer);<br />
$buffer = preg_replace(‘/[\n\r\t]+/’, ”, $buffer);<br />
$buffer = preg_replace(‘/\s{2,}/’, ‘ ‘, $buffer);<br />
$buffer = preg_replace(‘/(<a[^>]*>)(<img[^>]+alt=”)([^"]*)(“[^>]*>)(<\/a>)/i’, ‘$1$3$5<br />’, $buffer);<br />
$buffer = preg_replace(‘/(<link[^>]+rel=”[^"]*stylesheet”[^>]*>|<img[^>]*>|style=”[^"]*”)|<script[^>]*>.*?<\/script>|<style[^>]*>.*?<\/style>|<!–.*?–>/i’, ”, $buffer);<br />
$buffer = preg_replace(‘/<\/head>/i’, ‘<meta name=”robots” content=”noindex, nofollow”></head>’, $buffer);<br />
}<br />
return $buffer;<br />
}<br />
ob_start(“callback”);<br />
?>

This code uses a PHP function called

ob_start()

to read in your entire HTML source, run some rules on it, and then send the output to users’ web browsers… all in real time.   The first

"if"

statement simply checks to see if the user is coming from our special “mobile” URL, and if so, runs seven replace statements on the code.   Here’s what each line does:

1. Changes all URLs to “mobile”-ized URLs.Strips all linefeeds, carriage returns, and tabs.Trims multiple spaces down to one (HTML doesn’t recognize more than one space in a row).Changes any anchored images with alt text to plain text anchors.Strips all stylesheets, images, inline styles, scripts, and comments (including RDF).Tells search engine robots not to index or crawl the mobile version of the site so as to not create duplicate listings.

Step 3: Create global_append file

Next, we need to create a tiny PHP file which will automatically get added to the end of every file on our site. This is the code that actually outputs the page to the browser. So the flow is like so: Suck code into buffer, siphon fat away, spit contents of buffer into browser.

The code for the global_append file is below. Call it something like

"global_append.php"

and throw it at the root of your server:

<br />
<?php<br />
ob_end_flush();<br />
?>

Step 4: Enable prepends and appends using .htaccess

If you don’t already have an

.htaccess

file at the root of your server, open up a new text file and add these lines to it:

php_value auto_prepend_file /localfilepath/global_prepend.php
php_value auto_append_file /localfilepath/global_append.php

Then save it to the root of your server with the filename ".htaccess"

If you already have an .htaccess file, just add the above lines to it.

* Important Note: If you copy these two lines from your web browser, you might need to delete the carriage return and make your own. Sometimes a browser’s carriage return will cause your .htaccess file to fail (you’ll know immediately if it has failed because your site won’t come up).

Assuming your subdomain is live, you should now be able to hit your site in a web browser using the special mobile URL and see a nice, compact, imageless, styleless, scriptless version of your site. Voila!

Many thanks to the Genius of  http://www.mikeindustries.com for this useful info.