| Analysis of Web Content Delivered to a Mobile Computing Environment Page 8 of 9 |
| Written by Anthony Perreault |
|
Conclusions Designing for the mobile environment is similar to designing in the early days of the Internet when monitor resolution was small and the available color palette was limited, especially if you wanted to make sure that the colors were correct across multiple platforms. Design for mobile web doesn't have to be ineffective or inelegant. Special considerations, however, have to be made when addressing the concern of the mobile user. From the survey I was able to determine the following common threads for those sites that delivered content that was optimized for the mobile environment. Browser detection. The optimized sites detected that I was using a mobile browser and delivered content that was specifically designed for this environment. Browser detection scripts are not new; it is common to use Javascript within the <head> section of a web site to detect whether the browser is Internet Explorer and, if so, to use a known "hack" to get Internet Explorer to render the cascading style sheet box model correctly. The sites that used browser detection redirected me to a subdirectory of the main web site that provided mobile content. The use of browser detection in order to provide targeted content should be considered as a mandatory step in order to optimize content for mobile browsers. An alternative is to maintain a secondary web site with the .mobi extension and, upon detection of a mobile browser, automatically redirect the browser to this secondary web site. (The .mobi top-level domain was created by the Internet Corporation for Assigned Names and Numbers (ICANN)). Think small and simple. The optimized sites had minimal content for the mobile environment. Google, for example, had a navigation bar across the top with four options and the ubiquitous search box in the center of the mobile page. CNN and Fox News made minimal use of images—CNN had scaled images—with illustrations being small and monochromatic and the news headlines were short and scanable. Walmart used a clean color scheme with only three basic colors: blue, yellow, and white. Microsoft used icons to effectively identify their product line with linked options that were easily selectable. The needs of the mobile user demand that the content be specific, clear, and identifiable. Even without Walmart labeling the icons of the mobile site I suspect that the majority of users would understand their meaning—perhaps the only one that would be confusing would be the store locator that resembled a location icon. On top of Amazon’s mobile site there is an icon of a shopping cart—a metaphor that online shoppers instantly understand: this area is where I have stored things that I probably want to buy. Device-specific design. An option for delivering web content to an Apple iPod Touch or iPhone is to design an application, or "app," for this device. Apple provides a free software development kit (SDK) for the iPod Touch / iPhone and encourages third parties to develop and market applications from the Apple iTunes App store. For example, there is a NY Times app that downloads content from the nytimes.com web site and that is formatted for the iPod Touch / iPhone display. The May 2009 issue of Mac|Life has an article about designing web content for the iPod Touch / iPhone called, appropriately enough, “How to iPhone-ize Your Website.” The author Mike Lee deals with particular issues about designing for the iPod Touch / iPhone such as the design interface: “There are also interface differences, given the use of finger taps instead of mouse clicks. Controls must be large enough—and far enough apart—to be tapped by a finger. And because there’s no cursor, hover styles and mouse-over events will happen in unexpected ways, if at all” (48). I discovered this last feature when viewing a page from my work web site where I use a cascading style sheet that incorporates a hover style to hide or display lists as drop-down menus. While this works just fine in a normal web browser with a cursor and mouse clicks, with the Safari Mobile browser this page did not work at all. Still, designing an app for the iPod Touch/iPhone platform needs to adhere to good design principles. It is possible to design content for the mobile computing environment; my survey and analysis has proven such. I was pleasantly surprised to see that nearly half of the web sites that I surveyed delivered content that was optimized for the mobile environment. It is also obvious from my survey that sites that are not optimized for the mobile environment almost universally fail at some degree in providing context relevant content. Some are marginally usable, such as the nytimes.com web site while others, such as craigslist.com, are not usable at all. In his book Mobile Web Design, Cameron Moll tackles the issue of designing content for the mobile environment. While other books focus on designing for a single platform, such as software development for the iPhone, Moll’s book presents a clear overview on the issues inherent with the mobile environment and addresses the resolution of these issues across a variety of mobile platforms. On pages 31-42 he summarizes four options the designer can take and evaluates the pros and cons for each option. The first option is to do nothing, or as Moll says “Summon the WAP gods and pray the site renders well” (32). The idea here is that the browsers on the most recent generation of mobile computing devices are “fairly adept at repurposing sites on the fly to fit the smaller width of mobile screens”(33). The mobile browser reformats the content into a single column and images are reduced and optimized for the display. The same content that is provided to the desktop environment is provided to the mobile environment. Moll notes that while this means that the designer doesn’t have to optimize the design for the mobile environment, “Doing nothing does nothing to address the contextual relevance of mobility, nor does it exploit the unique abilities of mobility” (34). Moll’s second option is to “reduce images and styling” in order to create “raw, minimally styled content” (35). Here he advocates using sites such as Bare Site and Google’s site extraction web site to strip the content from a site and present it in the format that the mobile browser defaults to, that of a single column display with scrolling along the vertical axis. Moll acknowledges that this option “ignores the contextual relevance of mobility” and that the file size of the stripped down site can still be large if there is a lot of content (36). The third option that Moll advances is to use a subset of cascading style sheets (CSS) that is targeted specifically for mobile devices. This CSS uses the media=“handheld” attribute in order to load a set of CSS instructions that would be applied in a mobile environment. Moll once again acknowledges that using handheld CSS instructions “ignores the contextual relevance of mobility” and admits that as of right now the media=“handheld” attribute is inconsistent in its support and is unreliable (38). Moll’s fourth and final option is to design content for a mobile device. Here he states that designing content targeted for a mobile device is “contextually relevant—addresses first how content is consumed, second what it looks like” (41). Mobile content can be stripped down to the bare essentials that result in the use of less bandwidth and provide the user with a faster browsing experience—Moll reminds us that most users pay per kilobyte of data downloaded. The drawbacks to designing content for mobile devices is that the designer has to make assumptions about the mobile device and browser that in turn might dictate what content to provide. There is also a duplication of effort in that two sets of files have to be maintained, one for the desktop / laptop environment and one for the mobile environment. And alternate URLs will be needed which places the burden on the user to try to remember the mobile URL for any given site. In his conclusion Moll advises the pursuit of either option one (to do nothing and hope that the site will render acceptably well) or option four and specifically design for the mobile browser. From the survey and analysis that I have performed, it is obvious that the content for sites that have been optimized for the mobile computing environment—Moll’s option four—does not break down, or lose contextual relevance—when displayed within the mobile computing environment. Content for sites that have not been optimized—Moll’s option one—vary in usability but, in general, there is a loss of contextual relevance and the site is unusable without a significant amount of magnification that can result in a loss of navigational awareness. The result of the magnification translates into additional scrolling along both the vertical and horizontal axes in order to situate where you are spatially on the page. You might have to reduce the screen magnification until you see most or the entire page again before being able to use the page. The W3C maintains a Mobile Web Initiative (www.w3.org/Mobile/) and from this page there is a link to a downloadable PDF file (www.w3.org/2007/02/mwbp_flip_cards.pdf) that is a series of flip cards containing 60 guidelines that summarize the guidelines from W3C’s Mobile Web Best Practices 1.0 (www.w3.org/TR/mobile-bp/). Anyone who is thinking about designing mobile web content should become familiar with the Mobile Web Best Practices guidelines provided by W3C and should download and print out the PDF file as a handy reference. Many of these guidelines reinforce what we as technical communicators learn in designing web content, while some are targeted directly for mobile web content. The following three sets of guidelines come directly from the W3C Mobile Best Practices flip cards. Optimize navigation.
Use the network sparingly.
Think of users on the go.
Suggestions for Further Research My research can be used as a starting point for future scholars in their research into the delivery of content within the mobile environment. One area of research would be to take the sites from the survey that I found unusable and redesign them specifically for the mobile user. Sites such as Craigslist and Wikipedia, for example, could be designed for the mobile user. Craigslist could take advantage of the built-in positioning that mobile devices come with and provide content that is targeted for the location of the user. Wikipedia could use Google’s mobile page as a model and provide a simple front-end that is little more than a search field with a submission button. Once the sites have been redesigned then an evaluation should be conducted on how improved the usability of the redesigned site is within the mobile environment. Another area of research would be to perform another survey and analysis several years from now to see if more sites have recognized and altered content delivery for the mobile user. Examples here would be the web portal sites such as Yahoo!, Time Warner’s rr.com and others. These sites are content-heavy and while usable on a desktop or laptop environment, they are almost currently impossible to use in the mobile environment. These could be redesigned similar to CNN’s mobile site to deliver current news or weather with a login and password field. Once inside, the user could then use current Web 2.0 practices to organize the content to how they would like to see it displayed. A survey could be performed, this one deep rather than shallow. A comparison could be made against web sites of a selected genre, such as news sites, entertainment sites, or shopping sites in how content is delivered to a mobile device. Does the content lose context once past the initial home page of the site? How easy is it to perform online shopping on a mobile device from Amazon, WalMart, and Target? Once Flash is supported, how good is the streaming video and audio quality? Are there significant signal dropouts as the user is handed off from one cell to another while watching the latest episode of House from Hulu? Final ThoughtsThe role of the technical communicator is that of performing and facilitating knowledge transfer. Our tools are as varied as the mediums that we use in order to attain this transfer. When the audience is left without the knowledge that we wished to impart, then we have failed in our task as communicators. This should never be the case. Regardless of the medium, we should always be able to ensure that the audience can understand the content, no matter their environment. Through effective design, content can be understood. As my research has shown, content does not have to lose relevance when presented on a mobile computing device, so long as good design principles are followed. The technical communicator should look at designing for the mobile computing environment as a motivational challenge, for arguably it is one of the hardest environments to design for, and can validate the designer's skill as a communicator.
|