Design cross devices web sites

The devices are still on the rise and our web sites have to be compatible with all of devices like desktop, mobile, ipad ,pda and etc. I will make some summary of hints and tips used by some popular sites.

Device Detection:

1.Use JavaScript to detect the devices and create one site for each device:

function fCheckBrowser(){
	gbForcepc = fGetQuery("dv") == "pc";
	if(!gbForcepc){
		var sUserAgent = navigator.userAgent.toLowerCase();
		var sUrlRedirect;
		var oUrlRedirect = {
			"ipad" : "http://ipad.mail." + gOption["sDomain"] + "/?dv=ipad",
			"pad"	: "http://pad.mail." + gOption["sDomain"] + "/",
			"smart" : "http://smart.mail." + gOption["sDomain"] + "/?dv=smart",
			"m" : "http://m.mail." + gOption["sDomain"] + "/"
		};
		var aClient = ["ipad","iphone os","android","ucweb","rv:1.2.3.4","windows ce","windows mobile","midp"];
		for(var i=0;i<aClient.length;i++){
			if(sUserAgent.indexOf(aClient[i]) != -1){
				switch(aClient[i]){
					case "ipad" : 
						sUrlRedirect = oUrlRedirect["ipad"];
						break;
					case "iphone os" :
						sUrlRedirect = oUrlRedirect["smart"];
						break;
					case "android" :
						if(!oUrlRedirect["smart"]){
							oUrlRedirect["smart"] = 'http://email.163.com/?dv=pc';
						}
						if(!oUrlRedirect["pad"]){
							oUrlRedirect["pad"] = 'http://email.163.com/?dv=pc';
						}
						oAndroidRedirect = {
							sPhoneUrl	:	oUrlRedirect["smart"],
							sPadUrl		:	oUrlRedirect["pad"]
						};
						top.location.href = 'http://mail.163.com/html/android_device/v1.htm?smart=' + encodeURIComponent(oAndroidRedirect.sPhoneUrl) + '&pad=' + encodeURIComponent(oAndroidRedirect.sPadUrl);
						return false;
						break;
					default :
						sUrlRedirect = oUrlRedirect["m"];
				}
			window.location.href = sUrlRedirect;
			}
		}
	}
}

2.Use HTTP request agent parameters and create different themes and adapation within one site

function lite_detection_ua_contains() {
  return implode("|", array(
    'android',
    'blackberry',
    'hiptop',
    'ipod',
    'lge vx',
    'midp',
    'maemo',
    'mmp',
    'netfront',
    'nintendo DS',
    'novarra',
    'openweb',
    'opera mobi',
    'opera mini',
    'palm',
    'psp',
    'phone',
    'smartphone',
    'symbian',
    'up.browser',
    'up.link',
    'wap',
    'windows ce',
  ));
}

3.Responsive Design

Responsive web design is the approach that suggests that design and development should respond to the user's behavior and environment based on screen size, platform and orientation.The practice consists of a mix of flexible grids and layouts, images and  an intelligent use of CSS media queries.

We can get the introduction here : http://en.wikipedia.org/wiki/Responsive_Web_Design