A few months ago the company I work for released, a search experienced tailored for tablet use. After the tablet version’s successful release I had the good fortune to be asked to create the mobile phone experience.
It took an embarrassing amount of time to make the phone portion of the app — almost 5 months. I started work on the first prototype (first of three) in the middle of January 2013 and the app has just been released to iTunes and Google Play as of mid-June 2013. I would attribute about 6 weeks of throwaway work, 8 weeks full-time product development and another 6 weeks of part-time development for handling scope creep, bugs fixes, and native integration.
The first prototype was difficult. We wanted to have a “card-like” experience where you would do a search and your results would be a series of decks of cards. Each category was a deck and each search result was a card. On your search you would see a single result (the top card of the first category). You would then swipe horizontally to change categories or vertically to see cards below.
The first prototype probably took almost 1 month to build and when I was done with it, it sucked. People didn’t really understand how to use it and the in-office response was luke warm. Problem was, it had no resemblance to the tablet app. The user experience wasn’t cohesive in tablet vs phone. We scrapped the whole thing. Looking back, we probably should have done more Photoshop prototyping for that one.
It sucked from a code perspective as well. I was working off a copy of existing code from the tablet version. The tablet code itself was fine but I was trying to jerry-rig Backbone.js into the existing code because I wanted to learn Backbone. The result was a pile of puke.
Additionally, CSS animations became the bane of my existence. I had no idea how hard it would be to coerce a web page into behaving similar to a native mobile app through CSS animations. CSS animations are a real brain drain and I still don’t fully understand how to use them. It’s still difficult and a hat-tip to the guy at forecast.io who appears to have a very good understanding of touch-handling and CSS transforms.
After the luke warm response from Prototype 1 we went back to the drawing board and aimed for something that looked more like the tablet. The first iteration took maybe 2 days to slap together in a very basic way. We liked the results and moved forward.
After the Marionette re-write everything fell in place afterwards. We did a few user testing sessions with people at Starbucks and around town. We got a lot of good honest feedback that changed the app UI considerably. We tacked on Local search, maps, news, and a bunch of other goodies.
iOS and Android Wrappers
To get a truly native feel on the tablet we had hired contractors to make us a native wrapper that would allow the app to slide in new windows and share pages via social media. They also did the phone version of the native wrapper. Let it be known that the browsers within a wrapper report all kinds of different numbers with regard to viewport size and ability to scroll smoothly. It took a while to nail the bugs but I think we got the app into a state where it looks pretty consistent across Web-iOS-Android.
Tools & Frameworks Used:
- in-house build script
- jquery Mobile
- Backbone + Marionette
- SwipeView + iScroll 4
- Jade template language
- Stylus CSS
Easy build script
With the help of some of our superstar build engineers at the company I had an auto-compiling script that would roll up all of the assets into one huge file that included HTML, CSS, JS, and even images (base64-encoded). All of the minified assets cram into about 600kB minified = 175kB gzipped. After the initial startup all network I/O is related to API calls and images. Pretty cool! The benefits of this build system can be similarly achieved with the bootstrap tools that I identified in a previous article.
jQuery Mobile: a minor mis-step
I initially used jQuery Mobile to organize my HTML into pages and use its CSS+animation routines to mimic smartphone styling. However, as the prototype grew and matured jQuery Mobile didn’t quite fit the needs of this project. jQuery Mobile didn’t fit for these reasons:
- The goal was to support some pretty low-end Android devices I had to ditch the nice sliding animations.
- I ended up styling 90% of the app with my own styles because we didn’t want to look too iPhone-y in the Android experience. (The app still has remnants of the iOS styling)
- Given that I’m probably using about 10% of the library’s features it may not warrant its size of 140kB minimized + image sprites. Granted, I could use its package builder tool but then I’d have to figure out each feature that I’m using and test & test. blah.
Assuming I had more time I feel like I should have built something myself to copy the features that I’m using. The app looks and functions differently from the standard jQuery Mobile experience.
Alternatives to jQuery Mobile: I considered using jQT (formerly jQuery Touch) for its animations but it seems like the project has gone stale and development and maintenance trailed off. Besides that, I couldn’t really figure out how to use it. Ratchet looks really sexy but it falls into the same problem as jQuery Mobile in that it looks too much like iOS.
Backbone.js + Marionette
I wrote a previous post a while ago about using Marionette & Backbone to lay the foundation for the Web App. All in all I am very satisfied with the combination and feel compelled to do another project with these libraries/frameworks.
Somebody left me a Facebook comment asking why I chose Marionette over the other popular JS frameworks like Angular or Ember. In a nutshell, I chose Marionette because I already learned a little bit about Backbone and Marionette solved a lot of the problems I had with Backbone.
SwipeView + iScroll 4
SwipeView and iScroll 4 were essential in the app’s development. Although these libraries took some time for me to understand and wrestle with a few bugs the result is quite smooth. The code is easy-to-read so I was able to fix & tailor it to my needs readily. I donated $10 euros to thank the author of these libraries because there is no way I would have figured out any of this stuff so elegantly.
Jade template language
Not much to say about Stylus. It’s like LESS or SASS and gets installed through npm packages.
Get Izik for your smartphone today!
Izik for iOS (Universal app)
Izik for Android (Universal app)