“Marriage is a wonderful institution, but who wants to live in an institution?” – Groucho Marx
by Jon Arne Saeteraas, VP of Innovation, and Luca Passani, CTO, Scientiamobile
One month ago, we announced WURFL.js (pron: WURFL DOT J-S), but we had not mentioned it on our blog yet. The “trial period” is over and it is time to promote the new beautiful creature a bit more prominently. There’s a lot to be gained for developers here.
Let us back up a little bit. There was a time when mobile web development done right implied the usage of server-side detection in order to work around the limitations of mobile devices. The predominance of smartphones on one side and the advent of Responsive Web Design (RWD) and Progressive Enhancement (PE) on the other have made the situation simpler for developers who prefer to avoid having to deal with server-side techniques to handle issues related to user-experience. As we discussed multiple times, server-side adaptation introduces a cost that many, particularly small and medium-sized organizations, are not that willing to pay.
Does this mean that optimizing UX for tablet and mobile devices is a bad idea? no, it does not. It simply means that optimization has a cost. As everything in life, cost must be stacked up against the benefit that a solution provides, and server-side is often expensive for those who want to make their site mobile-friendly, particularly when compared to the advantages of managing all the adaptation logic within the boundaries of one single page.
Being conscious of this, we decided to apply the old saying “If the mountain won’t come to Muhammad then Muhammad must go to the mountain” and created a solution that marries the power of WURFL with the model that most web developers love: solve the problem by throwing a little Javascript at it.
This is how WURFL.js was born. With WURFL.js, the only thing one needs to do is to include this script on one’s page:
<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>
For those not familiar with it, the “//” syntax will allow one to embed the script in pages served through both HTTP and HTTPS.
The WURFL.js script will contain a JavaScript object with the following properties: the complete device name, form factor and a boolean is_mobile:
{"is_mobile":true,
"complete_device_name":"Google Nexus 7",
"form_factor":"Tablet"}
That’s of course assuming you are browsing the page with a Nexus 7, or the object will return the properties that relate to the HTTP client you are using at the moment.
If you are familiar with WURFL already, you may wonder what capabilities are these. These are three virtual capabilities that we have introduced for the purposes of WURFL.js and that are derived from the capabilities you are already familiar with, such as brand_name, model_name, is_wireless_device and so on.
Here are the possibile values of the WURFL.js properties:
complete_device_name
The name the device is known by. Typically make and model, a “group” of devices, or a more generic definition.
form_factor
Desktop
App
Tablet
Smartphone
Feature Phone
Smart-TV
Robot
Other non-Mobile
Other Mobile
is_mobile
true or false. True if the device is a tablet, Smartphone or other mobile device.
Once again, the data you get in the JavaScript object is unique to your device and browser. The content of the JavaScript file is generated server-side after the WURFL API (which one exactly is transparent to you) has analysed the HTTP request and determined the client capabilities.
Once the script is loaded, you will be able to do things like:
if(WURFL.is_mobile){
//dostuff();
}
or
if(WURFL.form_factor == ‘Tablet’){
//domorestuff();
}
Which has been the Holy Grail of web developers going mobile-friendly for quite some time.
Better iOS device detection
For reasons that were probably only known to Steve Jobs, Apple has always gone out of its way to disguise the hardware of its devices in HTTP requests. For example, at the time of this writing, iOS 7 can run on 5 different iPhone hardware specs, going all the way from iPhone 4 to iPhone 5C. This is an issue that has always made us (and most WURFL users) very sad.
Having WURFL.js delivered to the client, gives it the ability to identify tricky detection cases and sniff a little bit around once the script lands on the client. In the case of iOS devices, we are often able to detect the actual device and we happily reflect that knowledge in the Javascript WURFL object itself. For example, in the case of an iPhone 5C, you will find:
"complete_device_name":"Apple iPhone 5C",
Believe us. This is cool.
Demo of WURFL.js
The wurfl.io web site is a demonstration of WURFL.js . If you view source, you will see how we used WURFL.js.
The most common way to use this kind of contextual data is to tweak user experience based on what the device or browser is capable of. On wurfl.io, for example, we are disabling background video and parallax scrolling for mobile devices. Further, advertising is included as a demo since that is also a common issue for many webmasters. More interesting, possibly, is the Google Analytics example where we show how WURFL data easily can be put into Google Analytics for custom processing.
Google Analytics has some mobile metrics built in, but the WURFL data can give your reports an extra gear. WURFL.js enables new reports that gain better insight into how your users access your content. Below is an example of different form factors on a web page:
Believe us. This is cool too.
Did we mention it’s free?
WURFL.js is essentially a free service. As long as your site is publicly available and does not require users to access its content through payment or paid subscriptions, you can use WURFL.js free of charge (you might want to read the License, though). Again. This is very very cool.
Conclusions
WURFL.js Community Edition is a cool new service launched by ScientiaMobile. WURFL.js can be perfectly integrated in websites that use techniques such as Responsive Web Design and Progressive Enhancement to deliver further optimization through Javascript. If you adopt it on your site, feel free to drop us a note. We will happily feature it in our blog.
Enjoy
Jon Arne and Luca
PS: Note from Luca. You guys noticed that we snatched @jonarnes and he now works for ScientiaMobile, right?
