UPDATED: March 30, 2016
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 highly customized markup.
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. With Action Pack Variants serving device optimized content is amazingly simple and powerful. This article is about setting up user agent detection with variants and the Browser gem.
Browser determines what kind of device an incoming request comes from.
Add Browser to your
Through variants we can take this information and handle what to do with the request.
Add the methods
application_controller.rb as follows:
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
request.variant = :phone if browser.device.mobile?
before_action sets the
request.variant variable. We use this variable to assign a unique layout for requests coming from desktop PCs (the default layout), tablets, mobile phones (or whatever).
So if you wanted to add a tablets category just add this line to your
request.variant = :tablet if browser.device.tablet?
Finally, Your Layouts
Layouts are the crux of the entire system. You will need to create base layout templates for the different device types you are targeting. In our case we will need:
.erb if you want)
application.html+tablet.haml (if you added it)
Rails knows to respond to
request.variant with a corresponding "+<device_type>" like
application.html+phone.haml. If it cannot find it, it will serve the default
+phone instead of
+mobile? As more and more "things" are connected to the Internet the category "mobile" becomes too broad of a category (IMHO). For example, wearable devices like watches and glasses. They are
+mobile but would be better served by their own unique variants like
Why Is This Good?
What's so powerful about serving different layouts can be found in what each template brings to the table. Each can specify a different set of styles or scripts or content or whatever, which means you can highly customize the user experience for the device type the user is on. This translates to content that makes sense for different screen sizes; user flows that makes sense for the device type; and better performance on smaller devices without compromising what can be offered on desktops.
Why address mobile with separate views?
I believe doing so puts mobile development at the forefront of a development teams thought process. It's harder to ignore, and believe you me it should never be ignored. The way things are going with mobile, I bet in the next 5 years some websites will not even have a desktop version because 70% or more of its user base will access the site via mobile.
Nearly two-thirds of American adults (64%) now own a smartphone of some kind, up from 58% in early 2014. Smartphone ownership has increased by 29 percentage points since Pew Research conducted its first survey of smartphone ownership in the spring of 2011, when 35% of Americans were smartphone owners.
- Pew Research Center, "US Smartphone Use in 2015"
In other parts the world, like China, this is already occurring.
Want to know when the next article is published? Subscribe here. Thanks for reading!