Mobile version of views for Ruby on Rails

Question

I'm after some validation that I'm doing the right thing. I have my Ruby on Rails application in the following structure:

/home
   about.rhtml
   index.rhtml
/display
   index.rhtml
/data <--This is called by jQuery from the display\index page to provide the data to render
   push.js.erb
   pull.js.erb
/layout
   home.rhtml
   display.rhtml

Everything is working fine, but I now want to add a site targeted for mobile devices. While the iPhone renders the website correctly, it would be nice to provide a more targeted experience. Ideally, I'm thinking about having an iPhone.domain.com which would be redirected to via .htaccess.

For this, I was thinking about adding another view for each device
/iPhone
   home.rhtml
   about.rhtml
   display.rhtml

However, it feels like a lot of the data would be duplicated, for example the about page would be in two places. I guess I could have a partial and do something like render :partial => 'home/about' but that seems a little hacky.

How can I develop my site to support this?

I was thinking about a structure such as, but again not sure how to structure the code - how do I tell it to render the view in the iPhone directory... while not having the master layout applied
/display
   /iphone
      index.rhtml

I would really like some advice on the best way to approach this and structure the application. While the applications follow a structure at the moment, they could go off in different directions..

Thank you

Ben

Answer 1

I would strongly recommend leaving the controller structure the same across all device types. Particularly if you are using Rails' RESTful routes your controllers should be closely matched to the domain model of your data. Whether that data is then presented to a desktop browser, to an iPhone, to a different type of mobile device, to a JSON/XML REST API client etc. is mostly a matter of the presentation layer, not the controller/routing layer.

So an elegant solution would be:

1. Detect device type based on User Agent (you may want to refer to the WURFL User Agent database);
2. use Rails' respond_to mechanism to render a different view format for each device type;
3. define a layout for each device type (e.g. using the XHTML Mobile Profile doctype for mobile devices);
4. include different CSS files depending on device type.

There are some plugins which try to make this easier: have a look at brendanlim's Mobile Fu and noelrappin's Rails iUI (both on GitHub). Also Brendan Lim's presentation at Rails Underground has a few ideas.

What you should be aiming for is something like:

def show
  @foo = Foo.find(params[:id])
  respond_to do |format|
    format.html       # => show.html.erb
    format.iphone     # => show.iphone.erb
    format.blackberry # => show.blackberry.erb
  end
end

You should also allow users on mobile devices to override the user agent detection if they really want to see the desktop version of the site. A cookie with a long expiry time is probably the best way to do this, so that the site remembers the choice next time the user returns. Some mobile devices have rubbish cookie support, but then they probably won't want the desktop version of the site anyway because it probably won't work.