JavaScript libraries and the mobile U/X

Why JavaScript libraries are keeping us from a good mobile experience

Responsive (or RWD) is the new black. Every designer is talking about it and every company wants it. And for good reasons: the percentage of mobile visitors is increasing dramatically! But, as many have said before, RWD might not be the best user experience for your visitors as mobile visitors might need a completely different approach in comparison to people at their desks. And secondly, using display:none doesn’t prevent it from being loaded: it’s just hidden – this means that mobile visitors might see less, in the background everything is still being loaded which kills the experience on a mobile device.

My specific objection against jQuery (or any javascript library) for mobile devices is in line with the latter. Personally I have no issues with jQuery in general. The contrary is true, I find it one of the best JavaScript libraries which truly simplifies using JavaScript and really makes it accessible to anyone. But all this benefit comes at a price: the library is now (current version: 1.7.2) 32kb in size (minified and Gzipped). By just including this in your page your visitor is now required to download an additional 32kb without seeing any difference yet. Then, the foundation is put in place to start deploying jQuery code and plugins which all have to be downloaded as well.

I’ve been playing with jQuery’s mobile framework. This is another great piece of work and allows you to create a mobile website that gives your visitors an app-like experience. But it does required the standard jQuery library plus an additional 24kb plugin and another 7kb for the CSS (all minified and Gzipped). That’s your basic foundation for your website at the cost of 63kb of bandwidth. And at that point you still have to start coding your markup, adding pictures and your own stylesheet.

Another option that is currently widely used are jQuery plugins for enhancing a site’s responsiveness. One example is the earlier described TinyNav.js which makes a select menu from a list menu. It’s a super tiny script at just 362 bytes, but of course this is on top of the 32kb of the basic jQuery library. Another (really cool) jQuery plugin is slabText which calculates and resizes text so that the lines keep the same appearance and that line breaks stay at the same location. A great piece of code at the price of 2kb (minified and Gzipped) + the standard jQuery library.

Other very useful plugins are actually developed to optimize the mobile user experience by only loading what is actually needed. These are all serious attempts to create an optimal experience for each device, however, as long as they depend on downloading a big script such as the jQuery library the experience will by default be less than perfect.

Responsive web design is a great way for making your content accessible to mobile visitors, but the basics for a good mobile experience in order of importance are:

  1. Lowest possible number of files (less http requests)
  2. Lowest possible file size
  3. Sized to fit the mobile screen

With proper CSS and a tiny bit of media queries you can definitely cater for the mobile screen, but that’s only a small part of the experience.  Taking care of the number of http requests and the amount of kilobytes to be downloaded is crucial to provide a sound mobile website that works even for people in areas with the lowest signal reception.

By using jQuery you are taking a huge step away from the perfect experience, and with that you’re basically excluding a part of your audience.

I am therefore arguing that in order to cater for every visitor irrespective of their device and screen size, we need to step away from using jQuery in the smaller screen resolutions. That means that all JavaScripts intended to create a better mobile experience need to function independently. In order to keep the http-requests low we should put all scripts together in one single file and as bandwidth is more expensive than mobile processing power it should always be minified and Gzipped.

jQuery – and other Javascript libraries – are a fantastic and easy way to improve the interface and experience for your visitors that are connected to the web through wifi or a wire. But for all of those that depend on a 3g connection and are browsing via a device with limited capabilities a website need to be a light as possible.