You are previewing Beginning Smartphone Web Development: Building JavaScript, CSS, HTML and Ajax-based Applications for iPhone, Android, Palm Pre, BlackBerry, Windows Mobile, and Nokia S60.
O'Reilly logo
Beginning Smartphone Web Development: Building JavaScript, CSS, HTML and Ajax-based Applications for iPhone, Android, Palm Pre, BlackBerry, Windows Mobile, and Nokia S60

Book Description

By the end of this book, you'll have the training, tools, and techniques for creating robust mobile web experiences on a wide array of platforms for your favorite smartphone or other mobile device.

Table of Contents

  1. Copyright
  2. About the Authors
  3. About the Technical Reviewers
  4. Acknowledgments
  5. Introduction
  6. I. Getting Started with Mobile Web Development
    1. 1. Introduction to Mobile Web Development
      1. 1.1. Mobile Web vs. Desktop Web
      2. 1.2. Mobile Markup Languages
        1. 1.2.1. HTML and XHTML
        2. 1.2.2. XHTML Mobile Profile
        3. 1.2.3. WML
        4. 1.2.4. Other Mobile Markup Languages
          1. 1.2.4.1. HDML
          2. 1.2.4.2. CHTML
          3. 1.2.4.3. XHTML Basic
      3. 1.3. Mobile Scripting Languages
      4. 1.4. Mobile Style Sheets
      5. 1.5. Mobile Industry Groups and Standards Bodies
      6. 1.6. The Mobile Ecosystem
      7. 1.7. Code Samples
      8. 1.8. Summary
    2. 2. Set Up Your Mobile Web Development Environment
      1. 2.1. Recommended IDEs
      2. 2.2. Mobile MIME Types
      3. 2.3. Web Server Configuration
        1. 2.3.1. Apache
        2. 2.3.2. Microsoft IIS
        3. 2.3.3. Nginx
      4. 2.4. Mobile Web Browsers on the Desktop
        1. 2.4.1. Firefox and Mobile Add-Ons
          1. 2.4.1.1. XHTML Mobile Profile
          2. 2.4.1.2. wmlbrowser
          3. 2.4.1.3. User Agent Switcher
          4. 2.4.1.4. Modify Headers
          5. 2.4.1.5. Live HTTP Headers
          6. 2.4.1.6. Small Screen Renderer
          7. 2.4.1.7. Firebug
        2. 2.4.2. Mobile Browser Emulators
        3. 2.4.3. Actual Mobile Devices
      5. 2.5. Other Development Tools
        1. 2.5.1. File Comparison
        2. 2.5.2. Source Code Control
      6. 2.6. Summary
  7. II. The Syntax of the Mobile Web
    1. 3. Mobile Markup Languages
      1. 3.1. Selecting a Mobile Markup Language
      2. 3.2. XHTML
        1. 3.2.1. Why Not HTML?
        2. 3.2.2. HTML 5
      3. 3.3. XHTML-MP
        1. 3.3.1. Example XHTML-MP Document
        2. 3.3.2. DTDs for XHTML-MP
        3. 3.3.3. XHTML Elements Not Supported in XHTML-MP
        4. 3.3.4. Updated and Mobile-Specific Features in XHTML-MP
          1. 3.3.4.1. URI Schemes
          2. 3.3.4.2. Forms
          3. 3.3.4.3. Tables
          4. 3.3.4.4. Links and Access Keys
          5. 3.3.4.5. Embedded Objects
        5. 3.3.5. Common Implementation Bugs
          1. 3.3.5.1. XHTML-MP 1.1
          2. 3.3.5.2. XHTML-MP 1.2
          3. 3.3.5.3. Best Practices for XHTML-MP Web Development
      4. 3.4. CSS for Mobile Devices
        1. 3.4.1. CSS2
        2. 3.4.2. Wireless CSS and CSS Mobile Profile
        3. 3.4.3. Determining CSS Support on a Mobile Device
        4. 3.4.4. Best Practices for Mobile CSS
        5. 3.4.5. External, Internal, and Inline Stylesheets
        6. 3.4.6. Media Selectors and Media-Dependent Style Sheets
      5. 3.5. WML
        1. 3.5.1. Tag Hierarchy
        2. 3.5.2. Special Characters
        3. 3.5.3. Header and Metadata
        4. 3.5.4. Text Formatting
        5. 3.5.5. Links
          1. 3.5.5.1. <a> Tag
          2. 3.5.5.2. <anchor> Tag
          3. 3.5.5.3. <do> Tag
        6. 3.5.6. Images
        7. 3.5.7. Tables
        8. 3.5.8. Timers
        9. 3.5.9. Variables
        10. 3.5.10. User Input
        11. 3.5.11. Other WML Language Features
      6. 3.6. Summary
    2. 4. Device Awareness and Content Adaptation
      1. 4.1. Device Awareness
        1. 4.1.1. Using HTTP Request Headers to Identify Mobile Devices
        2. 4.1.2. Using a Device Database to Obtain Device Capabilities
          1. 4.1.2.1. WURFL Device Database
            1. 4.1.2.1.1. Common WURFL Device Characteristics
            2. 4.1.2.1.2. Code Samples Using the WURFL API
            3. 4.1.2.1.3. Contributing Device Data to WURFL
          2. 4.1.2.2. DeviceAtlas Device Database
            1. 4.1.2.2.1. Common DeviceAtlas Device Characteristics
            2. 4.1.2.2.2. Code Samples Using the DeviceAtlas API
            3. 4.1.2.2.3. Contributing Device Data to DeviceAtlas
      2. 4.2. Content Adaptation
        1. 4.2.1. Creating Device Groups
        2. 4.2.2. Choosing Adaptation Points
        3. 4.2.3. Writing Content Adaptation Rules for Device Groups
        4. 4.2.4. Implementing Content Adaptation
        5. 4.2.5. Content Adaptation on the Mobile Web
      3. 4.3. Summary
    3. 5. Adding Interactivity with JavaScript and AJAX
      1. 5.1. Iterative Development Approach
      2. 5.2. JavaScript in Mobile Browsers
        1. 5.2.1. ECMAScript Mobile Profile
        2. 5.2.2. Embedding JavaScript in a Markup Document
          1. 5.2.2.1. Supported JavaScript Events in XHTML-MP 1.1
        3. 5.2.3. JavaScript Fragmentation in Mobile Browsers
        4. 5.2.4. Examples of Mobile JavaScript
      3. 5.3. AJAX in Mobile Browsers
        1. 5.3.1. Example of AJAX for Mobile Browsers
        2. 5.3.2. Testing AJAX Support in Mobile Browsers
      4. 5.4. Summary
  8. III. Advanced Mobile Web Development Techniques
    1. 6. Mobile Web Usability
      1. 6.1. Best Practices for Usable Mobile Web Sites
        1. 6.1.1. Case Study #1: Bank of America
          1. 6.1.1.1. Features of the Bank of America Mobile Web Site
        2. 6.1.2. Case Study #2: CNN
          1. 6.1.2.1. Features of CNN Mobile Web Site
        3. 6.1.3. Case Study #3: Wikipedia
          1. 6.1.3.1. Features of Wikipedia Mobile Web site
        4. 6.1.4. Case Study #4: Flickr
          1. 6.1.4.1. Features of Flickr Mobile Web site
      2. 6.2. Mobile Browser Layout Comparison
      3. 6.3. Designing Mobile Web pages
        1. 6.3.1. Flexible Reference Design
        2. 6.3.2. Standard Layout
        3. 6.3.3. News Web Site
        4. 6.3.4. Search Web site
        5. 6.3.5. Service Web Site
        6. 6.3.6. Portal Web Site
        7. 6.3.7. Media-Sharing Web Site
      4. 6.4. Design Guidelines
        1. 6.4.1. Tips for Developing Mobile Web Pages
        2. 6.4.2. Creating a Web Page for the Maximum Number of Users
        3. 6.4.3. Creating a Better Mobile User Experience
      5. 6.5. Summary
    2. 7. Enhancing Mobile Web Pages for Smartphone Browsers
      1. 7.1. Common Web Techniques for Smartphone Browsers
        1. 7.1.1. Viewport Meta Tag
        2. 7.1.2. Detecting Orientation Changes in JavaScript
      2. 7.2. WebKit in Mobile Browsers
      3. 7.3. Safari Mobile for iPhone
      4. 7.4. Browser for Android Mobile Devices
      5. 7.5. webOS Browser for Palm Pre
      6. 7.6. BlackBerry Browser
      7. 7.7. Nokia Web Browser on Series 60 Smartphones
      8. 7.8. Internet Explorer Mobile for Windows Mobile
      9. 7.9. Opera Mini and Opera Mobile Browsers
      10. 7.10. Summary
  9. IV. Deploying into the Mobile Ecosystem
    1. 8. Optimizing Mobile Markup
      1. 8.1. Post-Processing Techniques for Mobile Markup
        1. 8.1.1. Minimize External Resources
        2. 8.1.2. Remove Whitespace, Comments and Unnecessary Markup
        3. 8.1.3. Adapt and Transcode Images
        4. 8.1.4. MIME Multipart Encoding of a Response Document
      2. 8.2. Web Server Optimizations for Mobile Browsers
        1. 8.2.1. gzip or deflate Response Compression
          1. 8.2.1.1. Apache Web Server Configuration
          2. 8.2.1.2. Microsoft IIS Web Server Configuration
        2. 8.2.2. Caching Directives in HTTP Response Headers
          1. 8.2.2.1. The Date HTTP Header
          2. 8.2.2.2. The Last-Modified HTTP Header
          3. 8.2.2.3. The Expires HTTP Header
          4. 8.2.2.4. The Cache-Control HTTP Header
          5. 8.2.2.5. The Pragma HTTP Header
          6. 8.2.2.6. The Vary HTTP Header
          7. 8.2.2.7. Examples of Caching Directives in HTTP Response Headers
      3. 8.3. Summary
    2. 9. Validating Mobile Markup
      1. 9.1. Importance of Valid Markup on the Mobile Web
      2. 9.2. What Validation Does Not Test
      3. 9.3. Public Markup Validators
        1. 9.3.1. W3C Markup Validation Service
        2. 9.3.2. W3C CSS Validation Service
        3. 9.3.3. W3C mobileOK Checker
        4. 9.3.4. mobiReady
        5. 9.3.5. Validome
      4. 9.4. Summary
    3. 10. Testing a Mobile Web Site
      1. 10.1. Mobile Web Testing Methodology
        1. 10.1.1. Mobile Browser Testing Considerations
        2. 10.1.2. Choosing Mobile Devices to Use in Testing
      2. 10.2. Testing on Actual Mobile Devices
        1. 10.2.1. Acquiring Mobile Devices
        2. 10.2.2. Developer Programs
      3. 10.3. Testing in Mobile Emulators
      4. 10.4. Testing in Desktop Browsers
      5. 10.5. Summary
    4. 11. Deploying a Mobile Web Site
      1. 11.1. Routing Mobile Traffic to a Mobile Web Site
        1. 11.1.1. Standard Mobile Web Domain and Pathnames
        2. 11.1.2. Mobile Switching Algorithms
        3. 11.1.3. Mobile Switching Products
      2. 11.2. Mobile SEO and Traffic Acquisition
        1. 11.2.1. Mobile Search Engines and Crawlers
        2. 11.2.2. Using Link Relationships for Mobile Site Discovery
        3. 11.2.3. Mobile Sitemaps
        4. 11.2.4. SEO for the Mobile Web
        5. 11.2.5. SEO Practices to Forget
      3. 11.3. Summary
    5. 12. How to Play Well in the Mobile Ecosystem
      1. 12.1. Operators, Transcoders, and Proxies, Oh My!
        1. 12.1.1. Transcoders on the Public Internet
        2. 12.1.2. Standardizing Transcoder Behavior
      2. 12.2. Defensive Programming for the Mobile Web
        1. 12.2.1. Declaring Your Markup as Mobile-Friendly
          1. 12.2.1.1. Using a Self-Referencing Link Relationship
          2. 12.2.1.2. Using META Tags
          3. 12.2.1.3. Using Response Headers and Document Size
        2. 12.2.2. Identifying Requests from Transcoders
      3. 12.3. Summary
    6. 13. The Future of the Mobile Web
      1. 13.1. Mobile Web Experts on the Future of Mobility
      2. 13.2. Summary
  10. V. Appendixes
    1. A. Sample User-Agents from Mobile Devices
      1. A.1. User-Agents from Mobile Devices
        1. A.1.1. LG VX-9100
        2. A.1.2. Nokia 5310b XpressMusic
        3. A.1.3. SonyEricsson C905
        4. A.1.4. Motorola Droid
        5. A.1.5. Motorola Cliq (MB200)
        6. A.1.6. Android G1 Developer Edition
        7. A.1.7. Palm Pre
        8. A.1.8. Apple iPhone
        9. A.1.9. Blackberry Curve 8310
      2. A.2. How to Capture the User-Agent for a Mobile Device
    2. B. Sample Request Headers from Mobile Devices
      1. B.1. Request Headers from Mobile Devices
        1. B.1.1. LG VX-9100
        2. B.1.2. Nokia 5310b XpressMusic
        3. B.1.3. SonyEricsson C905
        4. B.1.4. Motorola Droid
        5. B.1.5. Motorola Cliq (MB200)
        6. B.1.6. Android G1 Developer Edition
        7. B.1.7. Palm Pre
        8. B.1.8. Apple iPhone
        9. B.1.9. Blackberry Curve 8310
      2. B.2. How to Capture Headers from a Mobile Device
    3. C. Glossary
    4. D. Case Study: Testing Mobile Browser Caching and Performance