Surviving Your First Mobile Design Project

Filed under Design Process, Mobile, Projects, Review

A few months ago I was approached by the Boston based social network Going.com, asking if I might be interested in helping to design and develop their first mobile application. Going.com is focused on letting users find interesting places and events, and connect with other users based on who is going where, and when. Since their core mechanic involves pushing users away from their computers, branching into the mobile world was their logical next step.

Let me start out by disclaiming that I had never designed anything for mobile. Ever. The closest that I had come to mobile was doing web interface design for the mobile start up Zingku a few years ago, back in the SMS days… before any graphical user interface was realistic for mobile devices.

So I had to sell myself to this potential client as honestly as possible. I know user experience design, I know graphical user interface design, and of course, I have used a mobile device plenty. Maybe it was my charm, more likely it was my ‘lower-than-normal-I’m-learning-this-as-we-go’ price quote, but they decided to let me take a crack at it.

Why use a Mobile Platform

One of the biggest issues surrounding mobile web design is that every device renders things very differently. We have all found ourselves pulling out hair trying to get a website to look right in IE6, and there simply is not enough hair on the human body to sustain the process of optimizing across the thousands of mobile devices that are out there.

A mobile platform like NetBiscuits does all of that work for you. You build the application in their development environment, and they push it out optimized for about 5000 devices. Pretty sweet.

There is a bit of a learning curve involved in getting up to speed in their proprietary markup language, BiscuitML, but its pretty much just a mix between XHTML and XML. After a few hours of poking through the documentation and looking at examples, I had a solid idea of what we were dealing with.

Understanding Limitations

While auto-optimizing for 5000+ plus devices is great, it comes at the cost of stooping to the lowest common denominator of what most mobile browsers are capable of. Images need to be used sparingly. All of my CSS knowledge would be thrown out the window in exchange for the very limited set of supported inline styles. Two column layouts were going to be happening with tables. I was entering a world of development that my older web-developing peers had spun tales of.

The limitations, however, turned out to be a mixed blessing. They dictated a lot of good practice for mobile design. Layouts must be simple. Content is king. Navigation systems have to work with a device’s D-Pad. This was not going to be a sexy iPhone or Blackberry application, but it was going work for anyone with a mobile browser, and it was going to be in-brand and as aesthetically pleasing as possible.

Designing and Developing

Since Going.com had an existing identity, my design processes consisted mostly of translating the aesthetic of their website into a very simplified one column layout, and only providing the information and features that were absolutely necessary. Two huge design considerations when dealing with mobile devices are your limited screen real estate and limited realistic navigation functionality. This ultimately broke down into only about three page layouts, depending on if we were dealing with the welcome page, a page of content, or a list of items.

Going.com

NetBiscuits has a pretty defined page structure, and limited page content types, which again enforces pretty solid mobile design practice, but also limits creativity. In the end, with the exception of a few graphical interface elements and a color scheme, all Netbiscuits applications are going to look and behave pretty similarly.

One of the nice aspects of NetBiscuits is that standard page elements are built into the markup, such as headers, footers, some pre-built menu/navigation systems, and a handful of content types such as ‘Article’ (Image with text wrapped around it), and ‘Adbanner.’ These can be helpful in speeding up the development process and guiding what is realistic in the design process.

Pros and Cons of Mobile Frameworks

As more and more people get smart phones, and devices with better browsers, this “lowest common denominator” effect of auto-optimizing for all devices is going to become more of a problem. Users with iPhones and Blackberrys are now used to richer mobile web experiences. While you might get something looking great on a middle-of-the-road Nokia device, users with more advanced phones will want more than NetBiscuits is able to deliver.

As I write this, it looks as though NetBiscuits has added some additional features for the iPhone, however by the time you start tailoring to a specific device, you negate the reasons for using a mobile framework platform in the first place (and open source frameworks such as IUI provide way better solutions for iPhone web development anyways). This means building real applications for the dominant smart phone markets (Blackberry, iPhone, Android) is still a bit of a necessity, but you could let the NetBiscuits version serve as your ‘catch everything else’ solution.

Another drawback of NetBiscuits is that they host your content (although you can connect to your own database when extending existing application). This means your looking at a monthly fee of between $645 and $2,595 depending on the use and scale of your application.

Closing

Ultimately NetBiscuits got the job done, and we were able to very quickly (about three weeks of design and development) push out a mobile version of Going.com that could be effectively used by any user with a mobile browser. The learning curve for BiscuitML was relatively painless with their comprehensive documentation, examples, and sample applications, and while things didn’t look as pretty as they could on the iPhone or Blackberry, everything definitely worked.

I can say that I recommend NetBiscuits as a solid solution for quickly pushing out simple mobile versions of web applications for small to medium-sized businesses.  While these applications can be used on any device, they will not provide a viable solution for the growing demands and expectations of smart phone users.

So the Going.com gig ran through without any major injuries or fatalities. They got their foot in the mobile world, and I learned a few things. With a medium like mobile design and development being so young, and evolving so quickly, our only real option as interaction designers is to dive right in, adapt, see what’s working right now, and try and foresee how things need to change and improve.


2 Comments

  1. Alex
    Posted October 2, 2009 at 1:22 pm | Permalink

    Aaaa

  2. Posted October 22, 2009 at 2:02 pm | Permalink

    Finally, it has been noted that recent advancements in biology have opened the door to genetic manipulation. ,

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*