background

Device Detection with WURFL.js

WURFL.js is a JavaScript file that provides information about the device that is accesing your page. Whether it is a desktop browser, a tablet, a mobile phone, a smart TV, game console or someone with his wristwatch.

Those familiar with WURFL will recognize the venerable Server-Side Device Detection solution, but, at the same time, they will be pleased to discover that there is no need to mess with PHP, Java or .NET code this time. All you need to do is adding the following script to your page

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

You can use this information to fine-tune the user experience with Javascript. In fact, this very page is using WURFL.js and the UX is being optimized depending on what web enabled device you are using to visit it.

In particular:

  • Desktop devices get at fancy video background on the top of the page
  • Mobile devices get a background image.
  • Paralax scrolling is disabled for mobile devices.
  • Navigation is optimized to your device`s form factor.
  • You get different ads based on your device`s capabilities.
  • Google Analytics is collecting information about the device through custom variables.

Doing a "view source" on this page will reveal how this works, or simply jump to the Getting Started section

Personalization

Based on information WURFL.js provides, such as a device make and model, form factor and whether it is mobile or not, you can create a personalized experience for your users. You can even use it to increase speed and performance for your mobile users, just as we did on this demo page.

Analytics

Designing a great user experience starts with knowing your users. WURFL.js provide information that is not available elsewhere. This information can be put into analytics tools such as Google Analytics and be the basis for custom reports that are more accurate than the standard ones.

Advertising

If you monetize your site or blog though advertising, you may be relying on multiple ad networks. Some networks are better at targeting mobile traffic, while others do a better job with regular desktop web traffic. WURFL.js helps you decide which one is better for each user. This may increase your CTR.

Getting Started

First, include the script in your markup (https is suported):

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

...and start JavaScripting:

console.log(WURFL);

You can for example use the object to check if it is a mobile device like this:

if(WURFL.is_mobile){
	//dostuff();
}

View source on this page to see more examples on how to use WURFL.js.

For this particular browser/device, the WURFL object looks like this:

Below are the capabilities and values you can make use of.

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, or other mobile device.

Further, you can control caching by adding this parameter to the query string.

debug=true
Any cache is switched off. Useful while developing

Optimize with WURFL Image Tailor

WURFL Image Tailor (WIT) is an automatic image tailor based on WURFL device detection. WURFL will detect the device, and its screen size, resize and optimize the image accordingly. That's why we call it the Image Tailor.

Images weight is by far the most important challenge to address to optimize a web page for the plethora of devices on the web today. This is why WIT will instantly give your users a better experience by reducing load time of your page. Not to mention the reduced data cost.

WURFL Image Tailor works like a proxy. By referencing the WIT servers and providing the full URL to the original image as a parameter, WIT will identify the device, and its capabilities, and resize and optimize the image accordingly.

Getting started

To start using WIT, the only thing required is to prefix your image URL with the URL to the WIT service:

<img src="//wit.wurfl.io/[full-url-to-your-image]">
		
For example:
<img src="//wit.wurfl.io/http://wurfl.io/assets/sunsetbeach.jpg">
		

The above example is the simplest possible use case. The size of the image will be equal to the detected screen size of the requesting device.

However, you can be more specific. WIT take the parameters listed below. The parameters are added to the url. The below example would return an image sized to 50% of the screen width.

<img src="//wit.wurfl.io/pc_50/http://wurfl.io/assets/sunsetbeach.jpg">
		

Full list of parameters:

w
Desired width of resized picture. .../w_200/... would resize the image to 200 pixels wide.
h
Desired height of resized picture. .../h_200/... would resize the image to 200 pixels tall.
pc
This field will use WURFL to calculate the screen width and then scale the image accordingly. .../pc_20/... would resize the image to 20% of the screen width of the requesting device.
m
This setting determines how the engine will resize the images. Legal values are box, letterbox, cropbox. .../w_100/h_200/m_box/... would fit the box defined with w and h parameters.
box
The image is scaled to fit within the specified dimensions. Note that the image that is returned will not necessarily be the same size as the requested dimensions, but it will fit inside a box of those dimensions.
This method is default if only ONE dimension is specified (either width, height, or percentage) without an explicit fit mode setting.
cropbox
The cropbox method will resample the image as small as possible while showing no canvas. This will result in some cropping if the source and output aspect ratios differ.
letterbox
Same as box, except the returned image is exactly the size specified. bars of white are placed around the image if necessary, but the image will not be scaled up. To use a color other than white, you can specify the HEX color code after the letterbox directive, like this for red: /m_letterbox_ff0000/. The canvas opacity can also be specified for images that support transparency. This is would be specified as a third parameter of m: /m_letterbox_ff0000_65/.
stretch
The stretch method will resample the image to fit the specified size by distorting the source image.
This method is default if BOTH with and height are specified without an explicit fit mode setting.
f
Desired format of picture (jpg, gif, png, bmp). If no format is provided, the format of the original picture is used.

Examples

Original image
Image credits: Leguth Edson commons.wikimedia.org
Fully automatic.
src="//wit.wurfl.io/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org
20% of screen size
src="//wit.wurfl.io/pc_20/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org
300 px wide
src="//wit.wurfl.io/w_300/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org
150 px high
src="//wit.wurfl.io/h_150/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org
Letterbox 300x100 px
src="//wit.wurfl.io/w_300/h_100/m_letterbox/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org
Cropbox 300x100 px
src="//wit.wurfl.io/w_300/h_100/m_cropbox/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org
Box 300x200 px
src="//wit.wurfl.io/w_300/h_200/m_box/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org
Strecth 300x100 px
src="//wit.wurfl.io/w_300/h_100/m_stretch/http://wurfl.io/assets/sunsetbeach.jpg"
Image credits: Leguth Edson commons.wikimedia.org

Did we mention it's free?

You can use the service free of charge, as long as your website is publicly available and does not require fees or paid subscription to access. Read the complete license here.

Oh, you don't need to register either. Just copy, paste and go!

What about support?

For WURFL.js, you can use the WURFL.js forum at the ScientiaMobile Support Portal if you have questions or need support.

Similarly, there is a dedicated forum for WURFL Image Tailor.