by Jimmy Marks
No, I don't mean get a crowd together and start throwing things (or overthrowing them) - I mean make my websites accessible via mobile devices/smart phones. It used to be enough to make a website cross-browser compliant. But nowadays, mobile is encroaching on the territory once reserved for the desktop and laptop personal computer. Apple's done their part by making the iPad and iPhone 4 the hot property. Google's responded with the Android platform. Blackberry refuses to be counted out. The three make up the lion's share of the mobile market, and appealing to users of all three platforms/phones is a big part of our company's next phase.
Now, when I say we're "mobilizing", I don't mean we built a separate website for mobile use. We're using the same website but with an eye to mobile and smartphone users. Increased ubiquity is a good thing - it means you don't need to make separate versions of your websites, you just need to be aware how they look on mobile devices.
We have an iPad here in our offices (it's neat!) and two iPhones of differing generations. We have an android phone, a few Blackberry phones, and even the odd 2G phone with limited web capability.
One of the big learning curves was figuring out what worked and what didn't. Right off the bat, we noticed a few hampered aspects of the site:
- Dropdown menus - When you can't "hover" (which you cannot do on an iPhone or iPad), you have to find a work-around. Changing the Javascript used for our menus by one string changed how these menus displayed on mobile Safari. A little research, you'll often find, goes a long way.
- Flash video vs. HTML 5 video - With the advent of HTML 5, video will no longer require Flash player to display. Which is good, because Apple products aren't supporting Flash player with increasing frequency (if I'm the first you're hearing of the war on Flash, I'm sorry, but where've you been?). I'm working on a way to display HTML 5 video on everything BUT Internet Explorer, which is undergoing a metamorphosis. Different writers and tech gurus are promising different things from the newer versions of Internet Explorer which continues its reign as king of the browsers for who knows how much longer.
- Shrinky Dinky Display - With resolutions increasing, we should always be mindful of readability as it applies to small-screened devices. How much does a user have to "smudge" to see content? Can you keep the reading experience fairly simple and give that user a clear indication of the content and next steps they need to take to initialize a conversation with you? Let's hope so.
Has everything gone smoothly? No. Things rarely do in the world of UI development. If I can impart on you the wisdom of my experience, I say you need three things to really make things easy on a "mobile ready" transition:
- A live testing/preview site that you can see developing work on. That makes it easy to share links across platforms and devices. Create a sub-domain. Easy.
- Knowledge of HTML5 and CSS3. These are the future, you need to know them now. Great books are available everywhere, the ones I'm buying are from A List Apart. Easy-to-follow guides are the best guides. Spend the money.
- Feedback, feedback, feedback. You need people to tell you what they're seeing and provide you with insight on their user experience. Ask for their help, they'll give it.
Which reminds me, go to DigitalMailer.com on your mobile device and let us know what you think in the comments section. We'd appreciate it!
