Deciding on a great look and feel is only half of the battle; the other challenge is to figure out how to trim the fat from your content to make it shine within the boundaries of your mobile site. With a few compromises here and there, it may not be as difficult as you think.
100% Real Content
One of my pet peeves is coming across a watered down mobile site when I’m browsing on my iPhone. It’s frustrating that some designers have decided that their content needs to be chopped up and diluted in order to deliver a satisfying mobile experience.
Nothing could be further from the truth; your visitors are looking to receive the same content, just through a medium that is better suited for their device. If your mobile site is just a teaser for the real content, your visitors are going to be hitting that “skip to the full site” button every time. So how should you approach your content?
Breaking Things Up
As I discussed in previous posts, we nailed down the content we wanted early on and decided on a design that we liked soon after. However, a few things did change in the transition from mock up to the final product.
One of the most immediate changes was the way I planned to do our navigation. As you can see from the mock ups in Part 3, the original plan was to have only 5 content sections (news, prayers, media, directions and contact), with only 4 of those visible depending on where you were within the mobile app.
This plan changed as I realized I had a lot more content to show, but a navigation solution that was limited to a small amount of space. After kicking around several ideas, I replaced “Directions” with a “More” category that could serve as a “catch all” for additional content as the mobile site grows over time. This left our most popular content as a top level navigation item, with all of the other great content just one tap away from anywhere within the app.
All of the Flavor, Half of the Fat
Moving on to the meat of the mobile site, it was time to figure out what could stay and what needed to be thrown out. It turns out that you don’t have to lose much in the transition to mobile.
News/Events
Thankfully I found that it wasn’t necessary to sacrifice much when formatting the content on the mobile homepage. The information is surprisingly similar to what can be found on our full website, just slightly condensed by removing the thumbnail beside the teaser paragraph. Once visitors tap on a news or event item, the screen slides away and they’re treated to the same article and artwork they would find on the full site.
Prayer Requests
Prayer requests also turned out to be a great fit for the mobile format, using a similar setup to news and events from the home page. I initially planned to include our “Praise Wall” (as you can see in the sketch below), but decided to leave that for another time in order to keep things clear and easy-to-use.
Audio and Video
Although mobile browsers are limited compared to their big brothers, that doesn’t mean you have to leave out multimedia altogether. I was able to include a nice list of direct links to our recent audio podcasts, and our visitors using Apple’s devices get direct links to the full audio and video podcasts directly within the iTunes store. It turned out to be a pretty good compromise.
The Best of the Rest
The other content was just as easy to lay out once I finalized some common templates and user interface items. You can see the before-and-after of our “Directions” section below. It’s not apparent from the screen grab here, but we were able to do some great stuff by linking directly to the Google Maps app that is so common now on most devices.
You’ll be surprised at how rich your mobile content can be just by taking advantage of the features found within modern mobile software. Keep reading in Part 5 as we take a peek under the hood to discuss the code and technologies that make a mobile site tick!
More from “Going Mobile:”
Going Mobile - Part 1: Why Do a Mobile Site?
Going Mobile - Part 2: What Matters Most?
Going Mobile - Part 3: Big Design on a Tiny Canvas
Going Mobile - Part 4: Not From Concentrate
Going Mobile - Part 5: Where the Magic Happens
Going Mobile - Part 6: Final Touches
[...] Going Mobile - Part 4: Not From Concentrate [...]
[...] Going Mobile - Part 4: Not From Concentrate [...]
[...] Going Mobile - Part 4: Not From Concentrate [...]
[...] Site? Going Mobile - Part 2: What Matters Most? Going Mobile - Part 3: Big Design on a Tiny Canvas Going Mobile - Part 4: Not From Concentrate Going Mobile - Part 5: Where the Magic Happens Going Mobile - Part 6: Final Touches 4 [...]