the Mobile Web - Part 2

After spending a little more time with the mobile web, there's a bit more to be said about issues surrounding designing websites for the mobile browser.  Differences in phone technology as well as new software technologies in development are changing the field of mobile web design.  This post takes a look at some of those phone issues and new developments.

Navigating the Mobile Web

As I have experienced the web a bit more on my mobile phone, I've noticed that there are interesting differences between the desktop web experience and the mobile web experience.  Some of those differences include page size, layout, and how to show dynamic content, but I think the most notable difference is navigation. 

Technology Differences

Not only is website navigation different, but it's probably the most inconsistent issue between phones.  Touch screens make it a little easier than earlier phone designs.  The standard Blackberry phone, for example, has a small track ball that you can use similar to a mouse.  However, the mobile browser doesn't treat it like a mouse.  Instead it functions more like a cursor that travels down the page, item to item.  It's more like using the tab key on a desktop keyboard than an actual trackball or mouse.  This makes navigation a bit frustrating because there's no quick way to scroll to the link of your choice or even just further down the page.  You are beholden to the order of the links as the browser reads them on the page.  Think about trying to browse the web with no mouse.  Doesn't sound fun, right?  That's the mobile web before touch screens.

Other phones may use a similar type of system that utilizes keys on the phones key pad that function like arrow keys.  Similar frustrations arise with this method.  The track ball is possibly more frustrating because of the lack of precision.  I found many times with Blackberry phones that the link I wanted would be highlighted, but when I went to select the item by depressing the track ball, it would somehow move the ball to a new link, and I'd be directed to the wrong information.  That flaw is actually inherent in the design of the track ball itself.  There's no way to lock the track ball in place while depressing it.

Touch screens can also be frustrating for navigation.  We take for granted that a mouse pointer is tiny and precise.  Fingers are large and rounded, which means precision is gone.  So it becomes the browser or the phone's job to figure out which link was your actual intent to press.  It's very easy to miss and touch the wrong item.  Touch screen keyboards are a prime example of this issue.  It takes time to adjust to using a virtual keyboard, and there are often mistyped words that need to be corrected.  Selecting text becomes virtually impossible, but big picture things like scrolling and zooming in and out of a page become very simple.  Phone designers are implementing smart software that tries to decipher your intent when you type or when you touch the screen.  There's no way to avoid the fact that there will be times when it's not perfect.  With load times currently being slow, it's easy to get frustrated when accidentally clicking the wrong link.

Suggesting Solutions

These issues make designing and working with mobile websites more of a challenge.  From my experience and observations, I think the best solution is to make everything larger and easier to touch.  In my last post, I discussed two methods of mobile web site design.  One was to create a mobile style sheet, and the other is to create a completely separate website under a separate subdomain.  I am starting to feel that the latter of these options is the better of the two.  To assist in navigation, put less information on the screen at a time.  

When it comes to design, common techniques that work for the desktop are not going to work for the mobile web.  Remember, a finger is not a mouse.  A finger can't right click nor can it hover over an object.  Fingers either click an object or don't.  Some phones offer what's called "Long Touch", which can be used as a pseudo right-click, but that's, by no means, a universal feature common to all phones.  These limitations mean there are no options for drop down menus that open up when hovered over.  Other methods have to be utilized, like dynamic menus that open up sub content when touched once and close again on second touch.  Navigation options need to be clear and large so that the thumb or finger isn't going to miss the link.

jQuery for the Phone

Dynamic content is still a larger issue, but there are options being worked on right now that I feel are going to solve that issue.  Many developers are familiar with the javascript framework called jQuery.  A plugin for jQuery is currently in development that handles animations and user interfaces solely for mobile devices that have touch screens.  It's called jQTouch and is currently in a pre Beta version.  There is a demo available at www.jQTouch.com/preview that is worth checking out if you have an iPhone, Android phone, or Palm Pre.  I have spent some time with the demo and have so far been very impressed.  jQTouch uses simple animations and easy navigation options to alleviate the need for right click or mouse over options.  It definitely seems modeled after the iPhone and the navigation system it utilizes.  Apple is known for usability.  So I'm not surprised that they seem to have gotten navigation right.

There is little glam to the immediate appearance of the jQTouch demo, but I think it demonstrates that for mobile phones, it's not so much about being graphic heavy, but instead about being simple, quick, and easy to use.  Links are larger, easy to read, and easy to touch.  Animations make it very clear that there's new information loaded.  Plus, it actually feels like you're using a native phone application instead of a website.  With this just being an alpha release of the plugin, I can't wait to see what happens with the beta and final releases.

I think jQTouch may become the thing to watch in the coming days for the mobile web.  They have an e-mail form for you to subscribe to updates as well as a twitter account if you want to follow them there.  I know I'll be watching closely.