In 2007 I worked for Fidelity Investments, helping develop their then new mobile offering. Our goal was to cover 99.999% of all web-enabled mobile phones that Fidelity customers used. To accomplish this we developed a super dumbed down HTML 1.0 template that would render correctly on at least 90% of mobile devices (then), and for the remaining edge cases serve alternative templates. We were able to do this by analyzing device HTTP_ACCEPT and HTTP_USER_AGENT headers, i.e. user agent sniffing.
The User-Agent request-header field contains information about the user agent originating the request. This is for statistical purposes, the tracing of protocol violations, and automated recognition of user agents for the sake of tailoring responses to avoid particular user agent limitations.
- Hypertext Transfer Protocol -- HTTP/1.1, Section 14.43 User-Agent
Over time Fidelity developed an extensive database of devices their customers used which included information about the devices screen size, OS, browser, protocol support, and more. Armed with this information Fidelity could serve markup depending on the device request and the information it contained.
Fast-forward to today and you can still effectively use device user agents and third-party databases to serve your users device appropriate scripts, markup and styles. In fact in Rails this is not difficult...
For our device detection implementation we will use a gem called Mobvious. It is a rack-based solution, easy to set up, and highly configurable. It is also versatile in how you detect mobile requests:
- User-Agent sniffing
- URL pattern matching
- Remembering a user's manual choice
In other words it gives us options.
Mobvious Set Up
Step 1: Add the following gems to your
Gemfile and then bundle install:
Step 2: Add the following to
# Tell your app to use Mobvious::Manager as Rack middleware.
Step 3: Add the following includes:
Step 4: Create an initializer file
config/initializers/mobvious.rb and configure it as follows:
Mobvious.configure do |config|
config.strategies = [ Mobvious::Strategies::MobileESP.new(:mobile_desktop) ]
Don't forget to commit your changes, restart your application and wallah! You have a detection strategy that will return a variable of
:desktop depending on the device type of the request. Through these variables, as we will discover in the next article, we can customize what is served to perspective clients.
NOTE: Tablet devices as configured here will return :desktop as well, although you can easily change this.
To test that Mobvious is working you can add the following helper method in
no_device = "What!? That's nil bro."
Then in one of your controller actions add the following instance variable:
@device = request.env['mobvious.device_type']
Call it in the corresponding
And there it is, device detection with Mobvious. Now you can differentiate between different types of devices hitting your application. What you do with this information is entirely up to you. In the next article we will start you off on the right foot.
Want to know when the next article is published? Subscribe here. Thanks for reading!