How To Create A Mobile Website In Php

Make Your Site Mobile-Friendly in Two Minutes

After checking out B. Adam Howell's excellent IYHY.com site a couple of weeks ago, I thought it might be a good idea to write a little tutorial about how to make your entire site more mobile-friendly without even touching your pages. 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.myawesomeblog.com, you're going to want to set up a subdomain at mobile.myawesomeblog.com. How you accomplish this is usually pretty straightforward but differs depending on your host. I use Dreamhost and from their control panel, I can add subdomains effortlessly until I pass out from excitement. 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 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:

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:

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:

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!

Here is what Mike Industries Mobile looks like.

A look at the results

Let's look at some before and after shots of Mike Industries and a few other notable sites when taken "under the knife" (screenshots are from a Treo 600):

Mike Industries
Size: 72k Time to render: 33 seconds	Size: 26.1k Time to render: 5 seconds
Mezzoblue
Size: 31k Time to render: 22 seconds	Size: 8.3k Time to render: 5 seconds
Stopdesign
Size: 68k Time to render: 28 seconds	Size: 15.7k Time to render: 5 seconds
Zeldman
Size: 29.8k Time to render: 17 seconds	Size: 25.3k Time to render: 13 seconds
Shaun Inman
Size: 101k Time to render: 39 seconds	Size: 18.9k Time to render: 5 seconds
Joe Clark
Size: 97.1k Time to render: 23 seconds	Size: 58k Time to render: 7 seconds
Gizmodo
Size: 177.6k Time to render: 62 seconds	Size: 46.2k Time to render: 7 seconds

The figures above illustrate both speed and compatibility improvements in all cases and this is with image loading turned off on my device. Flip image rendering back to its default setting of "on" and the improvements are staggering.

It's important to note that the tests above do not point to any coding problems or inefficiencies on the part of the site authors (except for mine, which is just a big pile of crap). The fact that sites above average about 30 seconds to even begin rendering is more a function of the speed of cellular networks and the inability of some mobile devices to efficiently display content. Since we can't change either of those things, we do what we can in the meantime, and that's what this is all about.

Notes and thoughts moving forward

I openly invite anyone reading this article to suggest improvements to my replace statements in the ob_start() code. The Wolf has spit milk through his nose checking my regular expressions in the past, but with his help and the help of the best tutorial in the world, the regexes are pretty tight now. If you have any modifications or additions, post them in the comments and I'll merge them in if appropriate.
Using ob_start() requires PHP to parse through your pages, thus creating additional server load. Dreamhost lets me test CPU load and I don't notice any problems or performance degradation, but if you're hosting on a Commodore 64 or in an extremely high traffic environment, just make sure everything is still humming along after you're all set up.
In order to use auto prepending and auto appending, you must be running PHP as a standard Apache module and not "as cgi". If need be, you can run PHP as Apache sometimes and CGI other times by using your .htaccess file to specify rules.
I specifically left out much mention of accessibility in this article because each site and each screenreader are different, but you can begin to see how radically we can simplify pages on the server-side to improve such things. In the world of accessibility, simpler is almost always better. It's the reason why Joe Clark's name is only two syllables.
Finally, there are all sorts of ways to expose your "lite" version to users. I ~~will probably simply add a "lite" theme~~ have added a "Mobile Version" link to my selection of themes in the sidebar, but you could just as easily write a snippet of javascript to automatically send people with screen resolutions of less than 640×480 or certain known wireless user agents to your lite site.
Note to Dreamhost users: Dreamhost runs PHP as CGI by default. To switch it over so it runs as an Apache module, just go to "Domains > Manage > Edit" in the control panel. Then, uncheck the "run PHP as CGI" box. Also, if you have HTML pages on your site that aren't PHP, you can force them through the PHP interpreter by adding this line to your .htaccess file: AddType application/x-httpd-php .html .htm

Enjoy this? Subscribe to Mike Industries updates via email, or follow me on Twitter @mikeindustries.