Let’s review an example of content adaptation on the public Mobile Web. Amazon.com is a worldwide Internet-retailing powerhouse. Its content-adaptive Mobile Web presence targets three groups of mobile devices: touchscreen smartphones, smartphones without touchscreens, and featurephones.
For all device groups, Amazon.com makes its Mobile Web site available at the same URL as the Desktop Web site (http://amazon.com), implementing user-agent switching to route mobile browsers to one of the three mobile user experiences. Mobile Web pages are lightweight desktop HTML and served with the text/html MIME type.
Amazon.com enables mobile commerce using cookies and HTTPS. The site assumes that all mobile browsers support HTTPS and cookies, even when user-agents are provided that are known not to implement these Web technologies properly. (In addition, HTTPS transactions and cookies could be transformed or blocked by mobile operator
Figure 4-14 captures the Amazon.com touchscreen-user experience for the home page, search results for teddy bear, and a teddy bear product page, respectively. You can view the Amazon.com touchscreen-user experience by browsing to http://amazon.com using a touchscreen smartphone. Impersonate the Apple iPhone, Palm Pre, or Android G1 to observe the Amazon.com touchscreen experience.
Figure 4-14. Amazon.com user experience for touchscreen smartphones
You can see content adaptation occurring within the touchscreen-optimized
Amazon.com site. Figure 4-15 shows subtle icon variations on the Amazon home page between the Android G1 and Palm Pre touchscreen smartphone models.
Figure 4-15. Amazon.com home pages for an droid G1 and Palm Pre touchscreen smartphones
Amazon.com provides a similar user experience for smartphones without touchscreens.
Mobile Web pages are image-rich and provide product details, but provide fewer instances of JavaScript interactivity. Page design is optimized for non-touch devices, and it features smaller fonts, smaller clickable images, and the increased use of background colors to distinguish page sections.
Figure 4-16 captures the Amazon.com touchscreen user experience for the home page, search results for teddy bear, and a teddy bear product page, respectively. You can view the Amazon.com smartphone user experience by browsing to http://amazon.com using a touchscreen smartphone; you can impersonate the BlackBerry Curve 9800 or Nokia N96 to observe the Amazon.com smartphone experience.
Figure 4-16. Amazon.com user experience for smartphones without touchscreens
For featurephones, Amazon provides a lean Mobile Web experience with minimal images and external resources. Amazon.com’s featurephone Mobile Web pages average about 2K of markup, reference only one external style sheet, and link to two or fewer images. Product pages show only product information summaries and require the user to click links to view reviews and product details. Amazon.com targets casual browsers in its featurephone user experience. Its content adaptation choices create a streamlined user experience that loads quickly on mobile devices and minimizes vertical scrolling, but requires multiple Web transactions to view the complete product
information.
Figure 4-17 captures the Amazon.com featurephone user experience for the home page, search results for teddy bear, and a teddy bear product page, respectively. You can view the Amazon.com featurephone-user experience by browsing to http://amazon.com using a mobile device. In this case, you impersonate the Nokia 5310 to observe the Amazon.com featurephone experience.
Figure 4-17. Amazon.com User Experience for Featurephones
Two facets of the Amazon.com content adaptation strategy stand out. First, some touchscreen mobile devices with Web-capable browsers are miscategorized as
featurephones at the time of this writing. The Samsung T919 (marketed as the Behold) is one example of a popular touchscreen mobile phone that would be better served with the touchscreen smartphone version of Amazon.com. Second, outside of its compact size, nothing in the featurephone Amazon.com site indicates that its HTML markup is already optimized for mobile devices. This might make the Mobile Web site a target for transcoding. In contrast, the Amazon.com sites for smartphones and touchscreens contains <meta> tags indicating that the markup is already mobile-optimized. Chapter 12 discusses transcoding and defensive programming techniques.
EXERCISE 4: ANALYZE CONTENT ADAPTATION ON THE MOBILE WEB
This exercise challenges you to find and analyze an example of content adaptation on the Mobile Web. Can you find an adaptive Mobile Web site? When you are browsing an adaptive site, can you deduce its content adaptation rules by browsing the site as you impersonate various mobile devices?
Impersonate mobile devices in Firefox as you browse the Mobile Web, using the user-agents from Appendix A and the request headers from Appendix B, as necessary.
Browse Mobile Web sites until you find a content-adaptive site.
View the adaptive Mobile Web site impersonating a wide variety of smartphones and featurephones. At a minimum, view the site as an iPhone, Blackberry, or other smartphone, and LG VX9100.
4. Does the Mobile Web site conditionally include advanced features such as JavaScript or AJAX for supported mobile browsers?
For extra credit, deduce a Mobile Web site’s device groups and content adaptation rules by impersonating mobile devices with different screen sizes, markup-language support, and input methods.
Summary
This chapter introduces device awareness, a method to identify mobile devices and query device and browser capabilities. You learned how to implement device awareness in PHP using two industry-leading device databases: WURFL and DeviceAtlas. Mobile Web sites use device awareness to implement content adaptation.
Content adaptation groups mobile devices by shared capabilities and adapts Web content to provide the best possible user experience for each supported mobile device.
You learned how to create a content adaptation strategy using a three-step process:
classifying mobile devices into groups, identifying site adaptation points, and writing rules to customize the design and functionality of the adaptation points for each device group. Finally, you reviewed a real-world example of content adaptation on the Mobile Web by browsing Amazon.com’s touchscreen, smartphone, and featurephone Mobile Web sites.
The next chapter examines JavaScript and AJAX support in Web browsers on mobile devices.
135