Time to Mobilize!
By Jimmy Marks, DigitalMailer
No more waiting. It’s time to mobilize!
I don’t mean getting a crowd together and throwing things … I mean making our websites accessible via mobile devices and smartphones. It used to be enough to make a website cross-browser compliant. But those days are long gone, as mobile encroaches on the domain once ruled by desktop and laptop computers. A 3Q 2010 report by Nielsen Company found more than a quarter of all mobile subscribers were using smartphones, along with 41 percent of new mobile phone purchasers choosing smartphones – numbers I’m sure have since grown. Apple’s done its part by making the iPad and iPhone 4 hot properties, along with Google and its Android platform. And don’t count out Blackberry, which has its new Playbook. Together, they make up 77 percent of the mobile market, so adapting to these three platforms should be a big part of any company’s website mobilization.
DigitalMailer didn’t build separate websites for its mobile users. Instead, we enhanced our existing website with an eye toward mobile and smartphone users. There’s no need for separate websites, just a need to know how they look on various devices.
At DigitalMailer, we have access to an iPad and two iPhones of different generations. We also have an Android phone, a few Blackberrys, and even the odd 2G phone with limited web capability. We used them all when mobilizing our website … and it didn’t take long to figure out what worked and what didn’t.
Right off the bat, a few items stood out:
- Wasted time – Accessing a website from a mobile device sends the server a request for information it needs to open a page. If a page has a lot of elements or doesn’t have expirations set, time is wasted downloading information that could be stored locally in your browser’s cache. By adding expirations, we were able to speed up our website’s download.
- Menu mix-ups – Not all platforms (iPhone or iPad, for example) allow for “hovering” over the menu bar, so we had to create a work-around. After some research, we discovered that changing the Javascript used for our menus by one string would change how these menus displayed on mobile Safari.
- Fuzzy views – Resolutions and readability are important issues for small-screened devices. We were mindful of size and scale, and worked to make our buttons plainly visible and easy to read without too much “smudging” needed to enlarge or shrink the content.
- Flash vs. HTML 5 – HTML 5 means video no longer requires Flash player to display, so we worked on ways to display HTML 5 video on the various platforms. (We held off on working with Internet Explorer because it is undergoing a transformation stage.)
Looking back, not everything worked as planned (things seldom do in the world of UI development). But through my “mobilizing “experience, I can offer three tips to help in the transition:
- Strengthen your understanding of HTML5 and CSS3. These are processes of the future, so it is beneficial to get to know them now. A variety of great books are available – and well worth the expense. Check out online magazine A List Apart (www.alistapart.com).
- Use a live testing/preview site. This way, you can see your work in its different development stages. It will be easier to share links across platforms and devices. Also consider creating a sub-domain.
- Feedback, feedback, feedback. You need people to tell you what they see and share their thoughts when it comes to viewing your website from a mobile device. Don’t hesitate to ask for their help; most likely, they will gladly offer it.
Jimmy Marks is Creative Director at DigitalMailer, a digital communications and electronic marketing firm, specializing in credit union eStrategy development. He can be reached at jmarks@digitalmailer.com.
