Artikel in Serie Mobile

Mobile Version 1.0: jQuery Mobile

As an experiment, I have implemented a „mobile version“ for my website with jQuery Mobile. The downside of that framework is that even the customized (stripped-down), minimized format that I am using still consumes about 200 kilobytes, and that is more than the entirety of my desktop-version start page altogether.

This excessive network traffic consumption is mitigated to some degree by the DEFLATE filter active on my webserver for everything Javascript and CSS. I also do a lot of caching, so all the framework stuff is loaded only once even though my mobile version does a page reload on every navigation action (hitting a hyperlink or swiping to a different page).

Roundabout, swiping through the first 10 blog posts consumes 520 kilobytes of network traffic, which, if you ask me, is somewhere between „Well …“ and „Meh“. Being in part about music and hi-res photography, about half of my posts are featuring some sort of media, so it’s probably appropriate.

If you use one of the usual suspects in mobile webbrowsing (I mainly use Chrome on Android), the webserver should recognise this and send you off to the mobile version immediately. The mobile version then works like a slideshow that you can swipe to the right, browing backwards through the history of blog-postings. You can switch back to the desktop version at any time using the button conveniently placed at the start of each mobile page. You can also switch from the desktop- to the mobile version using the link at the bottom of every Desktop page.

Mobile Version 2.0: jQuery With Specialized Plugins

I have rewritten the mobile version of this website.

Changes in Version 1.9

  • Progress: Content updates are loaded into the existing DOM using AJAX improving loading and layout speed.
  • Progress: Swiping gesture support was re-implemented using Ramp Interactive’s excellent touchSwipe plugin for jQuery. This allows me to drop the requirement for jQuery mobile.
  • Progress: CSS was straightened up, improving layout speed.
  • Regress: There is no visual feedback for sliding, which makes swiping through the history of blog-postings less accessible but saves me the trouble of implementing a replacement for the relevant jQuery mobile FX.

Overall, the progress outweights the regress, so I put it live. 🙂

Changes in Version 2.0

  • Progress: If user has enabled cookies in webbrowser, user can switch back and forth between desktop and mobile view of single post.
  • Progress: Mobile-specific Javascript is completely minified, improving loading speed.