Designing a Mobile Web App

As we continue to refine the UC BackChannel, I thought I’d post a little bit about how we are creating the mobile side of things.

At this point, we’ve got the “desktop” version of the BackChannel built out and are focusing on tweaking the look and feel. Since this application is built on ASP.NET MVC, what this also means is that our controllers are all built out so that they return data to the views.

Mobile Specific Views

As I noted in an earlier post, we are using a custom View Engine in this site. Basically this View Engine inherits from WebFormViewEngine and overrides FindView. In the override it looks at the User Agent, and then based on what it finds, looks for a more specific View if it exists.

This is the “guts” of FindView

var request = controllerContext.HttpContext.Request;                        if (UserAgentIs(controllerContext, "iPhone")){    result = base.FindView(controllerContext, "Mobile/iPhone/" + viewName, masterName, useCache);}if (UserAgentIs(controllerContext, "Android")){    result = base.FindView(controllerContext, "Mobile/Droid/" + viewName, masterName, useCache);}

So, for the Home controller, we normally would have a /Views/Home folder, in which we’d have views which correspond to the controller method that was invoked. With this enhanced ViewEngine, we can add a /Mobile folder, under which we add device specific folders – one for iPhone and another for Android. The following graphic shows how this all lays out.

For more information about implementing this View Engine, check out this post by Scott Hanselman.

Designing the Mobile Views

Now that we know we can have mobile specific views, the next thing is to decide how to render things. We want the mobile version to look and feel like a native iPhone app (Android will look more or less the same too).

So, we fired up Balsamiq (disclosure: Balsamiq sent me a license way back in November so I could check out the app) and used their iPhone templates to rough in things. Big props to Balsamiq because the tool worked great, and only took about an hour to lay things out.

This shows the wireframes for one of the apps, the actual “Back Channel” live group chat for the Plenary and other major sessions.

Styling the Mobile App

Now that we had a target in terms of layout, we needed some styling. We looked at a few iPhone Web-App templates, including jQTouch, but they tended to be pretty Ajax focused, and since we have multiple views (desktop & mobile) we needed something that would work smoothly while navigating between URLs. In the end we settled on the Universal iPhone UI Kit, aka UiUIKit. (you can check out UIUIKit here http://dev.dtsagile.com/uiuikit) This is less a framework than a set of CSS styles which make laying out the app very easy. This is what the chat screen looks like in MobiOne (iPhone Simulator that runs on Windows)

Summary

We’re still working on the mobile side of the site, but we’re getting really excited about releasing it into the wild, and creating a little “behind the scenes” mayhem at the UC