Before we started building Roveb, we spent some time researching and studying mobile Web usability on smartphones. Our main focus was on hand-held usability, small-screen aesthetics and Web standards. During the initial prototyping phase, we reviewed jQuery Mobile and Sencha Touch as two of the many mobile Web development frameworks out there.
We found that both of these frameworks are better for native app development (with the Web app running in a container) rather than for mobile Web apps or mobile websites, since they are not optimized towards a great user experience. Both try to mimic the native app look & feel, but in most cases their shortcomings make their use counter-productive for the mobile Web in its current state.
Here’s a summary of our analysis:
1. Size and Speed
- jQuery Mobile (1.0.1) CDN-Hosted CSS with Default Theme is 48.6KB (minified) in size or 7KB minified and gzipped.
That’s a total of 220KB (minified) or 61KB minified and gzipped, to be delivered on an average mobile network (remember smartphone users are most active outdoors, away from their home or office WiFi).
The sheer size of these libraries made it unacceptable for real-world use cases. Even if the files are served from a CDN, it still leaves room for improvement, until 4G becomes a widespread standard.
So why is file size a major consideration for mobile Web apps and sites? Because not only does it affect the download time of the resources on mobile bandwidth, but it significantly increases the parse & render time (see below) in mobile browsers.
Sure, a CDN (with local fallback ofcourse) will provide slightly better downloads, increased parallelism and better caching, but those advantages are mostly made redundant due to the increased mobile network latency, mobile browser gzip decompression and script parse time.
2. Parse Time
That would roughly equate to 171ms of load time for jQuery Mobile and jQuery (minified and decompressed), and around 370ms+ for Sencha Touch, on each page request. Add the mobile browser gzip decompression time along with load time for other content on the mobile page and those numbers would go up even more.
Google found that moving from a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20%. Tests at Amazon revealed similar results: every 100ms increase in load time of Amazon.com decreased sales by 1%.
In our prototype testing on iPhone and Android, we found that while Sencha-based pages were pretty responsive and swift, jQuery Mobile operated with sluggish transitions, scrolling issues with fixed toolbars and inconsistent look & feel between the two devices.