Thoughts on Doing a Mobile Web Version of Your Rails App

Recently i started working on making a mobile web version of one of the in-house rails apps that i have been developing for a while. I’ve never done this before (a mobile web version of a rails app, with separate mobile optimised web pages/views served when you access the site via a mobile device).

The problem was simple enough. Figure out the user agent and then serve the proper view. But then it wasn’t that simple (as always). Googling on how to do this the proper way (rails way..etc) gave me some leads.

Choices

There seems to be two problems that we are faced with here. The first one is figuring out the user agent. This is easy and quite straight forward. You can use a gem to do this for you or you can just DIY. I went the DIY way.

When it comes to displaying/organising the mobile views there seems to be at least three popular approches.

The first option involves you defining a custom MIME type for mobile. This is all fine and dandy but this also means you will end up with .mobile view templates in your view folders. In the same folders that have your normal views. I don’t like this approche purely because i feel this is too messy. Also you can’t share views across the two versions of the site.

Having a custom domain (m.yourapp.com) didn’t appeal to me either. Having just one site with one domain that will look different depending on what devise you use to access it is, IMHO much better.

So i went with the prepend_view_path. Thanks to the blog post by scottwb.com. We have almost finished the mobile site version of our app and so far haven’t come across any major hurdles.

Some notes about using prepend_view_path

  • Recommend reading A Better Way to Add Mobile Pages to a Rails Site
  • You will have app/views and something like app/views_mobile
  • If you have prepend_view_path app/views_mobile rails will first look for a matching template there, and if it can’t find one will fallback to app/views
  • The above applies to assets as well.
  • In my experience it helps to have different application.js and application.css for your mobile version. This will let you only include the stuff thats need for mobile. And also include things that are only needed in mobile, only in the mobile version of the app.
  • You can create something like application.mobile.js and application.mobile.css to include all the assets needed for your mobile web version.
  • Be sure to add the above to files to production.rb like:
[production.rb]
1
2
3
  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  # config.assets.precompile += %w( search.js )
  config.assets.precompile += %w[application.mobile.js application.mobile.css]
  • You cab also look in to sensa touch, jquery mobile.. et al. If thats your thing.

Thats all!

Comments