I’ve been working on a side project, targetedhunt.com, to visualize hunting statistics and recently pushed it to heroku.
Although I’m using bootstrap I haven’t paid much attention to what the app looked like on phones or tablets. Honestly, I’ve just been too busy with the basics. Now that I’m showing the app to people I decided it’s time to take advantage of bootstrap’s responsive utilities.
First off, I’m using Chrome’s build-in device emulator to test what the app looks like on various devices. The device emulator is available by clicking the “Toggle device mode” icon on the upper left of the console.
When I looked at the app on the iphone the data table had too many columns to display. This told me i need to remove and/or combine some columns.
You can also see the emulator tells us where the page’s content ends with the dark gray “shadow” that goes beyond the border of the device’s dimensions.
So now I needed to decided what columns to get rid of. Since you can only search on one species I removed that column but adding hidden-xs css class to the header and data columns.
Most hunters care about success rates and the number of bulls killed so I kept those columns and combined the cows and calves columns. For the cows and calves columns I again used hidden-xs css class. To only show the combined “cow & calf” column we need to hide the column when the device is larger than a phone and hide it when the device is a phone. To accomplish this I used visible-xs-block css class.
<td class="visible-xs-block"><%= h.try(:calves)+h.try(:cows) %></td>
As you can see this got me pretty close but the table is still a bit wide.
I could have messed with the font size and spacing but this is a side project and I didn’t have enough time. Instead, I removed the “cows & calves” columns.