Going Mobile - Part 3: Big Design on a Tiny Canvas

By Eric Murrell Thursday May 28, 2009

Now that we know why we’re doing a mobile site and have our content and target platforms pinned down, it’s time to get to the fun stuff. It’s always invigorating to start with a blank canvas on any project, and designing around the strengths and weaknesses of a mobile device can be a unique challenge.

Working Within Your Canvas

The most obvious limitation of our target platforms are the native screen resolutions of the devices themselves. 320px wide can seem quite restrictive when your used to 1024px at the bare minimum.

After much deliberation, I decided that several key elements belonged on my mobile homepage:

Our Church Branding - A logo that also doubles as a sort of “home” button from anywhere else in the mobile app.
The Main Navigation - An attractive navigation bar, designed for touch, that can be displayed in various forms on the sub-pages.
News and Events - There’s a strong chance that this is the number one thing my visitors are looking for when they hit the mobile site, so it’s good to make that available right off the bat.
A Link to the Full Site - Mobile apps are great, but sometimes visitors are looking for something obscure that may only be found on our full site. Make it easy to get to that information.

After a few hours of deliberation and a lot of sketching, I finally landed on a layout that seemed like it was heading in the right direction. You can see my sketch and the rough comp from our designer (my wife, Lauren ) below.

The first mobile site mockup.

As you can see in my early rough sketches, the original plan was to conserve some screen real estate by having the main navigation hidden on the initial load of the site. Once users tapped the “Menu” button in the top right corner, the navigation would slide down as it was needed.

While this seemed like a great concept, I eventually became afraid that visitors would hit the mobile home page, overlook the menu button, and assume that was the extent of the content on the mobile site. The mobile navigation turned into a permanent fixture on the home page and the top level sub-pages, and I think that was a wise move.

A Fresh Coat of Paint

Now that the mobile home page was structurally complete, it was time to throw on a coat of paint to make everything pop. Since our visitors are looking at things on such a small screen, I wanted a sleek but attractive design that served to magnify our content rather than distracting from it.

We initially wanted it to match the colors from our full site (like in the early mock up above), but decided a different color scheme was probably the best way to go. Check out the early mock ups below to see some of the colors we experimented with; you can see a clear path to where we ended up.

Three Other Mockups

Shortly after the creation of the mock up with the blue circle navigation, we settled on rounded squares instead and added a few other visual tweaks which made it into the final mobile site. With a sleek design in place, it was time to flesh out the look of the other content sections within our mobile app.

Join us next week as we take a look at more of the design process and how we developed the code that powers the app!