Separate different version of a website

Question

I want to make sure I want to optimize and make my site very easy to maintain for different version of my site.

I have few version of my site:

• iphone/ipod/android etc...
• ipad/tablets etc...
• other small devices like old clap phone
• default

I use ubuntu server with MySQL 5, PHP 5 and Apache + Memcache.

What would be the best way to implement my site so they all use the same base functionality:

• PHP
• JS (for common)
• CSS (for common)
• etc...?

thanks

Answer 1

Note: this solution is more about performance than quick fix and I'm finally done

I assume since your are using memcache you get your content from a MySQL Database, then parse it in PHP and save it to the cache and display it.

Each version would have a different domain. iPhone/Android (and other smartphone) will use the m.domain.com domain, tablets (iPad, galaxy etc...) will use t.domain.com, all others will use o.domain.com and the default will use www.domain.com or domain.com.

All these sub-domains can point to the same folder (/var/www/ - the default one). What will do the trick is how you call it.

Add this your .htaccess or apache config:

SetEnvIf Host ^www\. page=www SetEnvIf Host ^o\. page=others SetEnvIf Host ^m\. page=mobile SetEnvIf Host ^t\. page=tablets rewriterule ^.*$ index.php?subdomain=%{ENV:page} [QSA,L] 

So in your PHP file you can use the $_GET['subdomain'] and decide what you need to do to generate your page. This way, it is very easy to maintain, you have 1 point of entry and you can setup rules in PHP to retrieve information on what you need to display (the content will be the same, only the layout will change).

One thing I recommend will be to optimize your files. The mobile version of your site should be ligher in any way (CSS, Images, JS). You don't want your user to load big CSS, JS and images from a mobile device with a slow network. You want to optimize as much as possible for slower network device. In other words, you don't want to display a 300x200 logo on a 176x220 flip phone device. One way will be to name your file based on the domain they are in. For example:

• file.css (4k) V.S. file-m.css (0.4k)
• logo.jpg (300px * 300px 15k) V.S. logo-m.jpg (100px * 40px 2k)

And in your PHP code you can have a logic to dynamically load JS, Images and CSS files. As a remember, the faster you load your mobile site, the better it is. Maintability is important but your users are too. If you have a slow mobile site, they will trend to not go to your site and go somewhere else. Not everybody is using 3G/4G network or WiFi on their phone. Also, I recommend to use output compression (like deflate) when you want to access your files.

This will improve your loading time, specially for the mobile devices. Now, if you use the same file, let's say a Javascript file for submit a news letters, you don't want to duplicate it nor copy it with the name. Instead of creating an extra logic in your PHP, you can create a symbolic link like this:

ln -s /var/www/js/file.js /var/www/js/file-m.js

With this solution, you will need to redirect to the appropriate site depending on the type of device they use. You don't want a flip phone view an iPhone version of your site. Here's a couple trick you can do to accomplish this:

// PHP version - also make sure the current domain is checked otherwise you will be in an infinite loop! if(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE) {   header('Location: http://m.domain.com/');   exit(); } 

OR in the .htaccess/apache config under the default site:

RewriteEngine On RewriteCond %{HTTP_USER_AGENT} "iphone|android" [NC] RewriteCond %{HTTP_HOST} !^mobile.domain.com RewriteRule ^(.*)$ http://m.domain.com/ [L,R=301] # or 302 if you want temporary # etc... 

I recommend to look at http://detectmobilebrowsers.com/ to find out what you can use for the mobile devices and you can check http://validator.w3.org/mobile/ to make sure everything looks good for your mobile device.

As of the common PHP files, I will recommend to use a centralize place, a specific path you can use and the outside world can't. You can put all this code in a common folder where all the sites can access these files. Example:

/web/lib/

This way, nobody, except you, can access directly your files. In your PHP code you will do something like (for example the login script):

<?php  define('BASE_PATH', '/web/lib/');  require(BASE_PATH . 'filex.php');  // etc...