Separate different version of a website

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

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

There are a few different ways, however the easiest to maintain is to use a mobile first development strategy. This means writting the css for the smallest size (using smaller image sizes where possible), and this will become the base, then using css3 media queries, override the base css with new styles.

Of course IE will have some issues, so use a conditional statement (lte ie8) after the base stylesheet (so that it overwrites the base styles) to load the desktop css for ie.

As for JS, make sure that the site can work fine with JS disabled. One bit of advice is to write the site completely without javascript, make sure it works, and then add it in after to enhance the existing functionality.

And as for the main content, keep it the same, your php doesn't need to be any different for the different devices, let the css do all the heavy lifting.

Here is a sample of what you might have

//Your Base CSS (no background images here)
.content{
  width:240px;
  margin:0px auto;
}
.logo{
  background-image:url(../logosmall.png);
}
// Smartphones (portrait and landscape)
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
// Styles
}

// Smartphones (landscape)
@media only screen 
and (min-width : 321px) {
// Styles
}

// Smartphones (portrait)
@media only screen 
and (max-width : 320px) {
// Styles
}

// iPhone 4
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
// Styles
}

// iPads (portrait and landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
// Styles    
.content{
  width:768px;
}
.logo{
  background-image{url(../logomedium.png);
}

// iPads (landscape)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
// Styles
}

// iPads (portrait)
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
// Styles 
}

// Desktops and laptops
@media only screen 
and (min-width : 1024px) {
// Styles
.content{
  width:1024px;
}
.logo{
  background-image:url(../logolarge.png);
}
}

So in this example I'm setting a base width of 240px (assuming that the smallest screen that will be used is 240px) and having it centered, then I overwrite that depending on the window size to a larger value. The same goes for the image, by default I serve the smallest image, and then scale it up depending on window size.

This is an example of a mobile-first approach, which many consider to be the best practice when working with responsive design, as it reduces the amount of background images a phone has to load.

take a look at http://mediaqueri.es/ to see some examples of responsive designs

And search around for more information, what I provided here just scratches the surface. A search for mobile first responsive design will get you a lot of info on this subject.

来源：https://stackoverflow.com/questions/8400499/separate-different-version-of-a-website

标签

php

html

mysql

mobile

adaptive-design