Different Ways To Do RWD

Created by Phil Thompson

RWD or Responsive Web Design is the big in thing at the moment. What it means in layman's terms is adapting your sites design to work on different screen resolutions or different devices. There is 2 different ways you can approach this, one is a way known as UA (user agent) Sniffing and the other is using CSS 3 media queries and I thought it would be useful to go through these techniques and list any pro's and con's to them.  

UA (User Agent) Sniffing

This way of doing it is more of the original way of dealing with RWD. When your browser hits a web server it sends a string of data telling the server about it self this is known as the user agent data which looks a little like this:
 This is the user agent line for chrome 22 running on windows vista.

Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4 
What we can do is user a simple PHP query to get this user agent and find out what our visitor is using. In the below example it is looking to see if the visitor is using an iPhone or an iPod:
 

$ipod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iphone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");

 
Then if the person is using either iPhone or iPod you can use an IF statement to redirect them to what is commonly known as a m. site:
 

//detecting device browser
if ($ipod == true || $iphone == true){
header( 'Location: http://m.mydomain.com/' ) ;
}

 
Now we know what the visitor is using we can deliver a custom made site for that device.
Pro's Con's
  1. Fully customized layout for the device.
  2. No need to hack away as existing code.
  1. Need to make multiple versions of the same site.
  2. User Agents can be faked or hidden.
  3. More than one site to maintain

CSS 3 Media Queries

One of the new toys that came in the toolbox known as CSS 3 is the media query. What the media query allows you to do is set some rules in your CSS to only happen under certain conditions (which in the case of RWD is screen width). This is the new and some people feel the fun way to deal with RWD as a hole. First thing first the basic of how to use it. It's takes to parts to trigger this one is a meta tag and the other is the media query it self:
 

 

// This is the meta tag which must go inside the head tag of all of your pages



 
 

/* This is the actual media query which goes inside your css file */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* Insert Styles Here */

}



 
What the CSS media queries allow you to do is set what's know as breakpoints at different screen resolutions. What these breakpoints allow you to do is change what styling is sent to the page from the CSS file at these different points weather it be a different background, different font size or different positioning of items on the page.
Pro's Con's
  1. There is almost an unlimited amount of devices it can support.
  2. Not limited to which user agents you list.
  3. Can add support for different desktop resolutions.
  4. People can't hide their screen resolution unlike user agents.
  1. Not 100% supported by all browsers.
  2. Sometimes have to fight the code to get the result that you want.
There is no doubt a load more pro's and con's that what I have listed here but these are just a few of them. Which ever route you decided to go down is totally up to you but all I can say is that the tools are there for you to use so what ever you do get using them.
comments powered by Disqus