Now that we have Mobvious set up – if you've been following along from the last article – here is how we will use it:
- Rails detects the device type through Mobvious
- If the device is a standard desktop computer, Rails will serve regular view files
- If the device is a mobile device, then Rails will serve files from a special folder dedicated to mobile
The origins of the method I describe below comes from Ryan Bates mobile solution, but instead of registering a new mime type:
:mobile like Ryan does, we will direct requests to a dedicated mobile folder cleverly called
Before we begin, a bit on the base files. In my articles:
I set up foundation HTML and CSS for a Rails project based on HTML5 Boilerplate. We will do the same here for mobile based on Mobile Boilerplate...
A best practice baseline for your mobile web app
Of course our mobile boilerplate will be configured specifically for Rails.
To begin, clone my base-mobile files, then copy and merge the
base-mobile/foundation folders into your application.
git clone email@example.com:maxxiimo/base-mobile.git
Serving Mobile Specific Files
Now that we have mobile specific boilerplate code in our application we want to serve those files, and not our desktop views, when mobile requests are detected. We accomplish this by writing a method that uses the Mobvious detection strategy that we set up in the last article to direct Rails to serve files from the new
mobile folder. Here's how:
Step 1: Add the following
before_filter and private method
class ApplicationController < ActionController::Base
# Prevent CSRF attacks by raising an exception.
# For APIs, you may want to use :null_session instead.
protect_from_forgery with: :exception
if request.env['mobvious.device_type'] == :mobile
The key to this method is the
prepend_view_path which tells Rails where our mobile views are located. As an FYI, if you prefer to organize your mobile views outside of the regular
app/views path, for example in
app/views_mobile, you could prepend your views with the following:
prepend_view_path Rails.root + 'app' + 'views_mobile'
Step 2: Add the following assets to your precompile list:
Rails.application.config.assets.precompile += %w( modernizr-2.8.3.min.js mobile.css mobile.js )
Step 3: Restart your server.
...and with that, requests from mobile devices detected by Mobvious will be served
mobile folder views.
TIP: If you use Firefox try User Agent Switcher to test on your desktop.
On top of being nifty, I find separating mobile files into their own folder helps keep things organized by reducing clutter in our views and with our assets. The biggest win, however, comes from Rails template inheritance – your application will default to regular views when mobile views are not available. This is especially useful when making an existing app mobile friendly; a little bit at a time, but it also allows for a mobile hybrid approach to handling mobile requests. Something that I touched upon in my article:
Different Approaches to Mobile Development for the Web
... and will explain in detail in the next article. Cheers!
Want to know when the next article is published? Subscribe here. Thanks for reading!