We wanted to make sure that CoinSpot was just as easy to use on your iPhone, Samsung and iPad as it was in the browser.

First decision we had to make was do we go with an m dot sub domain and build a mobile version of the pages, or do we go with a HTML5 responsive web layout? We did some building of both approaches and settled on a Responsive design, it wasn't a silver bullet for CoinSpot, it comes with the main pitfall of not being able to tailor the customers journey on a mobile device without building really heavy pages, but overall it gave us a pro of being able to develop at a faster velocity which is always a decision winner at CoinSpot.

Here are the top three things which made it possible to build a mobile version of CoinSpot

Understand Twitter Bootstrap Responsive

The most important tool in our chest was our use of the twitter bootstrap framework. It does a lot of the heavy lifting for us so we don't really need to get our hands dirty with media queries (though you need to understand how media queries work). It provides an easily customisable responsive grid layout which makes our jobs really easy.

Replace tables with Lists

This had the biggest impact on the mobile experience, we show a lot of tabular data on CoinSpot like the coin prices, a list of your wallet values and more. This tabular display just doesn't work well on mobile, at best you can get it to overflow horizontally with scrollbars which you can make work but it can be challenging to ensure the right bits of information are displayed on the screen.
We systematically went through the HTML and changed the tables to lists which using the grid layout in bootstrap is really easy.
The big benefit of using lists is the overflow is a lot nicer by default and it is a lot easier to style the overflow to represent the information well on any device.

Become familiar with hidden-xs and hidden-sm

These built in bootstrap classes made it really easy for us to hide the parts of the UI which weren't relevant for mobile devices. Primarily the parts we needed to hide were the columns in the tablular data which were overflowing in mobile devices.
Some of these columns just didn't need to be visible on mobile phones and using the hidden-xs and hidden-sm classes it is easy to go and hide the data you don't want to see on the phones.