Well, then here’s your answer!

With the advancement in technology the use of mobile phones has increased drastically. Now, with smart phones available in the market, more and more number of people are using their phones to access internet. Now, here it is important that your website be mobile friendly. Browsers, like Pocket Internet Explorer, are good when it comes to parsing through standard web pages. Others can scarcely handle layout rules at all. Mobile browsers that load all CSS and JavaScript files, attempt to use them, and screw up the experience even more in the process.

So, what’s the solution? 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 screen readers too.

Here are some steps which will help you in making your site mobile friendly. But there are a few assumptions like – you are in an Apache environment and can run PHP. However, these steps can also be easily adapted to other technologies.

If your site lives at www.mysite.com, you’re going to want to set up a sub domain at mobile.mysite.com. How you accomplish this is usually pretty straightforward but differs depending on your host. You can use Dream host and from their control panel, can add sub domains effortlessly until you pass out from excitement. You want to set up your sub domain as a “mirror” of your main site, meaning the sub domain is really just pointing to your existing site.

The next thing we’re going to do is create a PHP file which will be automatically prep ended to every page of our site. Call this file something like “global_prepend.php” and throw it at the root of your server:

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

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 browser 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:

»  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.

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:

and throw it at the root of your server:
<? PHP
ob_end_flush();
?>

In case 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 file name “.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 sub domain 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, image less, style less, script less version of your site. That’s it your job is done.

Consult us at Biztech Consultancy. We are a leading web development company providing web design solutions and mobile website design services to our clients across the globe.