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.
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:
- Lowest possible number of files (less http requests)
- Lowest possible file size
- 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.