Make Your Web Site Mobile

Members want an easy-to-use experience for their devices.

With 28 percent of mobile subscribers in the United States now using smartphones, and forecasts indicating smartphone use will surpass feature phones sometime in 2011, it's time to mobilize ... your Web site, that is.

What I mean is making Web sites accessible from mobile devices and smartphones.

In the past, you only had to ensure your organization s site looked the same to members no matter what browser they used.

But now, mobile is intruding into the territory that used to be the domain of desktop and laptop computers.

Apple has the iPad and iPhone, Google has responded with the Android platform, and BlackBerry refuses to be counted out, with such new devices as its Playbook.

Together, these three make up most of the mobile market - 77 percent, according to The Nielsen Company - so making sure your Web site appeals to users of all three platforms should be a high priority for marketing, for service, and for the benefit of your potential member.

It is for me, as I continue working to mobilize DigitalMailer's site.

As an e-marketer, you don't have to make separate versions of your Web site; you just have to know how it looks on various mobile devices.

At DigitalMailer, we're using our same site, but retooling some of its components to smooth the user experience across the board.

At work, I have access to an iPad and two iPhones of different generations. I also have use of an Android phone, a few BlackBerrys, even a few of what are now unfairly referred to by some as "dumb phones."

With this assortment, I can check both the appearance and functionality of our Web site on multiple mobile platforms.

While it took some time to sort out what worked and what didn't, I immediately noticed a few areas for improvement:

1. Dropdown menus - When you can't "hover" over the menu bar (not possible on an iPhone or iPad), you have to find a workaround.

With a little research, we found that by changing the JavaScript in our menus by a single string, we could change how the menus worked.

The result is our menus are more userfriendly on a variety of mobile devices without losing the same functionality a user gets on a laptop or desktop.

2. Flash video vs. HTML 5 video - Apple has been very vocal in its criticism of Adobe's Flash player.

The advent of HTML5, which displays video with no special software required, means Flash will further lose its grip as the premier way to display video on line.

For our Web site, we wanted to keep Flash video around for older browsers and Internet Explorer (which is undergoing changes of its own), so we had to segment by browser types and operating systems using JavaScript.

I'm still ironing out kinks, but we're getting closer to universally displayed video.

3. Shrinky dinky display - There's bound to be readability issues with small-screen devices, and with today's mobile resolutions increasing, we need to be mindful of size and scale.

* How much does a user have to enlarge or shrink the page to see content?

* Can you keep the reading experience simple while letting the user know what the next steps are?

* How easy is it for a user to initiate a conversation with you?

You always want to grab the user's attention quickly, but on a small- screen device, this is even more important, as many on-the-go mobile users may be multi-tasking.

For our Web site, we tried to make buttons plainly visible and easy to read without having to enlarge the body content too greatly.

We kept an eye on our headers and larger text to make sure you could get the gist of the content without too much exploration.

4. Repeating ourselves - When you access a Web site, your device sends a request to a server for the content of the page. Our site pages had many elements that directly referenced the server or didn't have expirations set.

By storing certain items in our browser's cache for quick future reference, we save time for mobile users because we eliminate repeated downloads of information.

Think of it this way: Each time you bake a cake, do you drive to the store and buy all the ingrethents, or do you keep the basic ingrethents on hand for quick access when the time comes?

Adding expires, which determines how long items should be cached, greatly speeds up the download of your Web site.

So, has it been a perfectly smooth process? No. Things rarely are in the world of Web design. But through my experience of mobilizing our site, I can share three tips to help you make the "mobile-ready" transition:

1. Create a live testing/preview site so you can view developing work. This makes it easy to share links across platforms and devices.

Creating a sub -domain or separate Web site for testing makes a big difference in how preview pages can be shared and improved, as well as commented on by your testing group.

2. Build your knowledge ofHTML5 and CSS3. HTML and CSS are your stock in trade, but the next generations of both can shave hours off your design time and increase your mobile compatibility.

Invest in some of the great books and easy-to-follow guides now available. A great place to start is A List Apart (http:// books.alistapart.com/), an online magazine that offers excellent resources for Web designers and even whole books on these subjects.

3. Ask for feedback. And ask for it more than once. Your members/customers, internal staff or vendors can tell you what they're seeing when they visit your site from a mobile device and provide you with insights about the user experience.

Ask for their help ... they'll give it. And once you have that help, put it to work.

With growing numbers of people turning to smartphone technology, it's time to go mobile.

Your Web site is your most valuable resource of information, so make sure that everyone - from text- hungry teens to their wired grandmas and grandpas - can get the information they desire.

[Sidebar]

DigitalMailer's Web site as shown on an iPad. The site is designed to work smoothly across various platforms. Instead of creating different mobile versions of your site, you can tweak your current site to work better on multiple devices.

[Sidebar]

Video content is displayed with Flash on Internet Explorer and with HTML 5 video on other browsers.

[Sidebar]

Resources

Read more articles about mobile when you search the Credit Union Management archives, cumanagement.org/archive.

[Author Affiliation]

Jimmy Marks is creative media director at CUES Supplier member DigitalMailer, Inc. (www.digitalmailer.comJ, Herndon, Va.