Part of the fun of being fluent in various programming languages is messing around with new toolsets. I’ve talked many times about making a mobile friendlier version of the tracking system, to encourage users to submit on the fly rather than having to boot up the old pc. The Twitter Bootstrap API is a code framework that is geared toward responsive web design.

What is responsive design? 

Responsive design is an approach to developing web content that in simple terms, looks sexy on any device used to view. With the rise in tablets, mobile devices, laptops of all sizes and strengths, it is increasingly becoming a baseline requirement to make websites viewable across all of them.

Responsive design is a solution for this design challenge. Formerly, each device type would require a complete dedicated code base to handle rendering the website. This would mean duplication or even triplication of code to accomplish this. That is a ton of effort to maintain, which is why previously most websites simply were for desktop only, requiring users on mobile devices to “pinch in” to read and reformat on their own.

responsive-design-website

Starbucks has a uniform look and feel regardless of device.

For my own application, I choose Twitter Bootstrap, which is a pretty flexible and lightweight framework for rapidly deploying responsive websites. Instead of launching an android app, an iphone app, and a mobile site, I’ve decided for now a slick mobile-web interface would be a step forward.

What I Like

The documentation for the API is extensive. It has been extremely easy to dive right in with their available templates, and a transition to a responsive theme is going to be fairly seamless.

bootstrap

What I  Don’t Like

This is more of a critique for my existing system, than for Twitter Bootstrap, but some of the nitty gritty server-side model-view-controller setup that i have already installed needs to be completely overhauled. This is much more of a function of me hacking things together, without a great design, so I guess I can’t really count this as a negative against bootstrap.

The only other complaint is that data submission  (forms) on mobile devices still sucks. No one likes it, and theres no way around it to make it better. I am open to ideas for better ways to submit data via mobile devices.

My Goals

I want to get an update out for the tracking system very soon. The mobile version of the site is rough right now, and it is long overdue for an update. A list of things I want to change:

  • Upon submission, give a detailed breakdown of key statistics
  • Easily edit and delete weight and workout submissions
  • Chatter Feed for Mobile
  • Integration into external APIs (weather.io for one)
  • Introduce Achievements