mediasalt

In the previous 5 parts of this series, we’ve discussed building a mobile site for your ministry from start to finish. Let’s wrap this series up by looking at a few quick ways to add an extra coat of polish.

Since the majority of my mobile audience (95%) accesses our site on an iPhone or iPod touch, I wanted to take special care in creating an experience that was optimized to take advantage of all that the Apple platforms have to offer. Thankfully, Apple offers some great functionality and documentation that make it easy to create a mobile site which behaves similarly to a native application.

Enabling Web App Functionality

First things first… You’ll want to insert a meta tag into your code that let’s Mobile Safari know that your site can behave as a mobile web app. Simply open your index file in a text editor and add the following line of code in the “head” section of your HTML:

   <meta name=”apple-mobile-web-app-capable” content=”yes” />

So what does this code actually do? If your visitors add your site to their home screens, the mobile site will now take up the entire screen when it’s launched and mimic an app they might have downloaded from the App Store. Although it’s still technically running within Mobile Safari, the title bar and navigation is no longer displayed.

AJAX Required

The downside to running the site as a mobile web app is that you can’t link to anything else without having to close out of the app and open the link in a fresh instance of Mobile Safari (which takes away from the app-like experience). Thankfully, it’s easy to get around this limitation if you’ve built your entire mobile site using AJAX. Your mobile web app will run faster since it’s pulling in minimal information with every request, and only links to external sites will open a new window.

The Fun Part: Creating Your Icon

After writing thousands of lines of code and debugging JavaScript for hours on end, you’re going to want something fun to work on. Creating a home screen icon for use with your web app will be the perfect break.

It couldn’t be more simple. Be as creative as you like with a 57×57 png graphic and upload it to a directory on your server. Don’t worry about adding rounded corners or a touch of gloss… Apple takes care of that for you! Once you have your new icon uploaded, simply link to it in the “head” section of your HTML:

   <link rel=”apple-touch-icon” href=”/directory/youricon.png” />

That’s it! Whenever visitors add your mobile site to their home screen, their device will automatically download your super-cool custom icon to go along with it.

Point Your Users in the Right Direction

Now that your mobile site is ready for prime time, you’ll want to make it easy for folks to find it. There are a few great ways to do this.

Sniff and Redirect

Probably the best way to get folks to your mobile site is to simply redirect them to it if they’re trying to access your site from their mobile device. At longhollow.com, if you’re visiting our site on an iPhone, iPod Touch, Android Device or Palm Pre, you’ll immediately be redirected to our mobile site instead. There are dozens of ways you can do this, so I won’t get into the specifics here; you can probably find a script tailored to your platform with a simple Google search.

Mobile URLs

The other avenue is to create a mobile-specific URL that is easy to remember on the go. The emerging standard for this these days tends to be m.yoursite.com (the idea being to have as short of an address as possible to save some time on the go). I took a shotgun approach and created several URLs that all point back to our mobile site (longhollow.com/mobile, m.longhollow.com, mobile.longhollow.com, etc).

Don’t Be Annoying

Although you’ve put so much work into creating an awesome mobile presence, the fact of the matter is that some folks will always prefer looking at your full website when they’re on the go. Nothing is more annoying to me than checking some of my favorite sites and being forced to use their mobile version when I’m on my phone.

We’ve tried to make things as user-friendly as possible by providing a link to the full longhollow.com at the top of each of our mobile sections. If a visitor decides to click through to the full Long Hollow site, we add a cookie to their browser that will push them straight through to the full site on all future visits from their mobile device. Although the mobile site isn’t shown automatically for them any more, they can still access it any time they like from the mobile URL.

Mobile sites are great, but they may not be for everyone; make sure you don’t frustrate your visitors.

Go Forth and Be Mobile!

After 6 posts and 4000+ words, I think I’ve finally hit all of the high points of our mobile design process. I realize that all of you don’t come from a development background, but I hope that you were able to get something out of this series.

Is there anything I haven’t discussed that you would like me to cover? Let me know in the comments below!

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