Observations, tips and opinions
From the Limewheel team

It has been 3 months working here and I am really enjoying it so far. On my second week working for Limewheel, Danny told me that I would be revamping the front-end code of the LW site to make it  responsive. I was very excited when he told me that. I knew it was going to be a challenging project, but I have already created a few responsive websites, and I thoroughly enjoyed it. 

The process

The first step was to prepare the layouts. I got the PSD files for the old site (based on 960 grid) and used them to create new responsive layouts for each page. I set grids at 320px, 480xpx, 768px, 1024px, and min 1200 px in Photoshop. I created layouts for each blocks at all grids. 

I used the Twitter Bootstrap framework to build the responsive LW site. Why did I choose Twitter Bootstrap out of all frameworks? It's very flexible, easy to use, and makes for rapid development. There's great documentation on it. It supports a fluid grid system. A fluid grid is more flexible, and allows the user to resize the site on a desktop computer, but it requires a lot of CSS fine tuning to make sure that the layout doesn’t get messed up.

Bootstrap has a great foundation that saved me a lot of time. Also, there are good media queries in Bootstrap. I will definitely use it again for my next RWD (responsive web design) project (hint… flavour of Lemon). 

There were some challenges while building the responsive LW site. The main challenge was that some of the jQuery plugins were not responsive friendly. I spent a fair amount of time trying to make these plugins responsive friendly, but after a couple of hours I found it was a waste of time and energy. So I found a sweet responsive slider plug in to replace it.  

I used Refineslide for the main slider, and it has awesome CSS3 transitions with 3D transform, and of course it supports RWD. The only thing is that the plug in doesn't support the swipe function for mobile, so I had to add the swipe function to make it work.  

To make the RWD LW site look nice on retina devices, I had to add Retina.js which provides high resolution retina images for retina screens such as the New iPad and iPhone 4. It really makes images look better on these devices. It's easy to use. Only need to add the script, then create 2 images, one normal res and high res (double size). Then for double size add '@2x' at the end of the file name of the image. Retina.js will find if there is '@2x' image available, and use for retina screens. 

I also used Font Awesome to replace images to iconic font so the icons are sharper on any screen. Previously, LW used images for icons, so I tried to cut out images as much as possible and replace it with equivalents from this icon font. 

… Internet Explorer

Then finally, of course it has to be cross browser compatible.  Internet Explorer was a total pain in the ass to figure out. I had to add stylesheets and scripts for only IE to fix many issues. I started with IE9, then down to IE8, then IE7. Luckily, there are 2 awesome scripts that I used: respond.js and selectivizr.js , respond.js support media queries for IE 8 and below. And Selectivzr supports CSS3 pseudo classes for IE 8 and below that I used for layout. Finally, I created a fixed layout at 960 px for IE7 and below. 

Wrapping up

Of course the new RWD LW site is built on awesome CMS (and eCommerce platform), LemonStand. And CSS was written in LESS. 

Lastly, this project was built using an awesome app, CodeKit, that does all the LESS compiling, live browser reloads, optimizes images and compresses CSS files (and more!).  

In my own personal opinion, you should use the RWD approach for any projects in the future, and don't even think about a separate mobile website approach. :)