The website is now responsive :) I have used the Bootstrap responsive CSS framework to achieve this.

Link to article "How Facebook Ships Code"

Found an interesting article about company culture and web development practices at Facebook. A very interesting read (including the comments)....FrameThink - How Facebook Ships Code

Detecting User Agent in Server side or Client side code

If you are writing code that requires information about the type of browser, application or operating system that is accessing your website, you need to detect User Agent information from the client device. You may be doing this to load different stylesheets based on the type of browser, load extra functionality for more modern browsers, display a 'please upgrade' message in older browsers, or for a multitude of other reasons.

Obtaining User Agent information can be achieved in a number of ways. The methods shown here include using server-side code such as Java, PHP or C#, and using client-side JavaScript code.

1. Get User Agent information from Request Headers

In server-side code such as C#, PHP or Java, you can access the User-Agent (or client browser) using the following syntax or similar:

PHP: $_SERVER['HTTP_USER_AGENT']

C#: Request.UserAgent;

Java: request.getHeaderNames(), find User-Agent

You can also access other useful information from the Request Headers such as the Accept value, which informs the server which data types the client browser is willing the accept.

Once you have the User Agent information, you can set the list of CSS files to load in the server side code.

2. Detect User Agent using JavaScript

For some media types such as desktop and laptop screens or hand-held mobile device display panels, you might be able to use JavaScript code to detect the User Agent or media type.

The navigator object is used often in JavaScript to detect browser or operating system type information using the following navigator properties:

• appCodeName, e.g. Mozilla
• appName, e.g. Netscape
• appVersion, e.g. 5.0 (Windows)
• platform, e.g. Win32
• userAgent, e.g. Mozilla/5.0 (Windows NT 5.1; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

A disadvantage of this method is that you are relying on your browser to support JavaScript, which is probably not the case for all media types. Browser detection scripts are also often unreliable and prone to bugs.

References:

MSDN - HttpRequest.UserAgent Property

http://msdn.microsoft.com/en-us/library/system.web.httprequest.useragent.aspx

About.com - $_SERVER['HTTP_USER_AGENT']

http://php.about.com/od/learnphp/p/http_user_agent.htm

Reading HTTP Request Headers

http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/Servlet-Tutorial-Request-Headers.html

Wikipedia - MIME

http://en.wikipedia.org/wiki/MIME

W3Schools - JavaScript Browser Detection

http://www.w3schools.com/js/js_browser.asp

Wikipedia - User Agent

http://en.wikipedia.org/wiki/User_agent

CSS Media Types

A media type is a type of visual or audio output device such as a computer screen, printer, mobile phone display panel, TV or a projector. With CSS you can define which type of media uses which set of CSS rules for display.

The reason for using media type rules is so that your webpage can be output to as many different types of media as possible and still remaining visually usable. Since it is virtually impossible to cater for every different type of media and device currently in the world, a good general rule is to cater for 95-99 percent of your users.

If people frequently print pages of your website, it is logical to make sure that pages of your website print well. Similarly, if many people use mobile phone browsers to visit your website then lots of development and testing is needed to ensure the website is usable with a mobile phone browser. Enabling this media flexibility is the purpose of CSS media types.

There are a few media types that you can apply to CSS. A list of them is provided in the table below:

Media Type Description

all - Used for all devices (default value if media type is not set)

aural - Used for speech and sound synthesizers

braille - Used for braille tactile feedback devices

embossed - Used for paged braille printers

handheld - Used for small or handheld devices

print - Printers and print preview

projection - Projected presentations, e.g. slideshow presentations

screen - Used for computer (desktop, laptop) screens

tty - Used for media using a fixed-pitch character grid, like teletypes and terminals

tv - Used for television-type devices

There are at least 2 ways of setting the media rule for different media types. One way is to use the @media rule in the CSS code, another is to use the media attribute of the link tag that loads the CSS files.

An example of how to use the @media rule is shown below:

<style type=”text/css”>

h1 { font-size: 32px; font-family: Arial; }

@media print {

h1 { font-size: 22px; font-family: Times, serif; }

}

</style>

You can use this method either with CSS in the HTML code or in a CSS file.

An example of using the media attribute is shown below:

<link rel="stylesheet" type="text/css" href="css/core.css" media="screen">

<link rel="stylesheet" type="text/css" href="css/print.css" media="print, handheld">

References:

W3Schools - CSS Media Types

http://www.w3schools.com/css/css_mediatypes.asp

JavaScript Kit - CSS Media types and printer friendly pages

http://www.javascriptkit.com/dhtmltutors/cssmedia.shtml

HowToCrate - Media Types

http://www.howtocreate.co.uk/tutorials/css/mediatypes