- Adapting to Mobile Users Needs
- Knowing Your Audience
- Designing the User Interface
- Implementing the Gateway
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Knowing Your Audience
Unless you’re designing your web applications for a well-known fixed audience, those pages are probably full of extra content that should grab the attention of sporadic visitors sent to you from search engine portals, as well as ensure that the search engines will correctly classify your content and discover the whole depth and breadth of your web site. The first page of a typical blog site is crammed with content and links designed to persuade visitors to spend some of their valuable time reading this particular page. For example:
- The first page contains a number of blog posts, in hopes that the visitor will be interested enough to scroll down the page.
- Sidebars usually contain a list of recent posts, recent comments, post archive, and listing of categories.
On top of all that, if blog authors produce content in order to get ad-related income, they tend to cram their pages with ads served from various marketing services. Even forgetting about the extra screen real estate lost to ads, squeezing a typical blog site onto the 480-pixel screen width of an iPod or 200-pixel screen width of a mobile phone is close to impossible.
Obviously, you can’t expect to grab the attention of mobile users with a classic web page. You could try rearranging the content a bit to make it fit onto a smaller screen; for example, Apple suggests deploying alternate CSS stylesheets for iPod visitors. (See the section "Optimize for Page Readability" on Apple’s "Resources and tools for developing web apps" page.) However, a much better approach is to redesign your application from scratch to address the needs of a mobile audience.
The first decision you need to make is whether you’ll target the mobile version of your web pages to your loyal visitors (to allow them to stay in touch even when they’re on the road), or try to attract new visitors:
- If your primary audience is your existing user base, focus on a stripped-down design that will present as much content as possible on the small screen of a mobile device.
- If you’re targeting new mobile visitors, you’ll need an extremely good designer to help you get the best of both worlds.
To illustrate these concepts, I’ve decided to offer the readers of my XML/XSLT blog a simple user interface that can be used on a variety of mobile devices. Because I’m using a Blogger-hosted blog, it’s easy to get the blog contents in an Atom feed, which is pure XML data with no extra markup—obviously, a perfect scenario whenever you want to repurpose existing content in a new format.
I wanted to test the final user interface in a realistic environment, so I’ve set up a Windows Mobile emulator provided by Microsoft on my Windows XP workstation. If you don’t have a PDA but would like to test my examples in practice, do the following:
- Install the Windows Mobile OS images (download just the images, not version 1 of the emulator).
- Install Virtual PC 2007 (needed to support LAN connectivity of the Pocket PC).
- Install Microsoft Device Emulator 2.0.
- Install Microsoft Loopback Adapter on your Windows workstation and configure Network Address Translation (NAT) on it. (Ben Armstrong’s blog provides complete instructions.)
- Configure the Pocket PC following steps 13–18 from this Microsoft TechNet forum post.
You can view my blog through its Blogger interface or through a mobile-friendly interface. You also can view or download the source code I’m describing in this article.