Learn the Mobile Web

My first book, Beginning Smartphone Web Development: Building Javascript, CSS, HTML and Ajax-Based Applications for iPhone, Android, Palm Pre, Blackberry, Windows Mobile and Nokia S60, was published by Apress in December 2009.

This book is a “boot camp” for the Mobile Web and mobile ecosystem. Using this book, you will build interactive Mobile Web applications that comply with industry standards and best practices and optimize Mobile Web sites for performance on smartphones and the mobile network.

Beginning Smartphone Web Development is written for Web developers and designers who are beginning to explore the Mobile Web. No prior experience with mobile devices is assumed. The first two parts of the book introduce you to the basic concepts, standards and conventions of Mobile Web development. The third part of the book teaches you mobile design and usability principles and specialized enhancements for powerful Web browsers on smartphones. The fourth part of the book shows you how to optimize, validate, test and deploy a Mobile Web site on the public Internet and into the mobile ecosystem. The appendices in the final part of the book contain reference material, including user-agents and request headers from smartphone browsers, a glossary of mobile industry terms and a case study about the caching and concurrency behavior in mobile browsers.

You’ll learn to:

• Identify web traffic from mobile devices.
• Develop web sites using the markup languages of the Mobile Web: XHTML, XHTML-MP and CSS.
• Use Mobile JavaScript and AJAX for client-side web interactivity.
• Adapt the syntax and design of mobile web pages to target smartphone models.
• Design Mobile Web pages for optimal usability on the form factors of smartphone screens.
• Enhance mobile web pages to target advanced features of smartphone browsers.
• Validate and compress mobile markup to optimize for network transmission and browser performance.
• Simulate smartphones in the mobile ecosystem.

Table of Contents

Part 1: Getting Started with Mobile Web Development

1. Introduction to Mobile Web Development
   Introduces the mobile industry, mobile users, and the Mobile Web.
2. Set Up Your Mobile Development Environment
   Prepares for Mobile Web development by setting up your desktop and server environment.

Part 2: The Syntax of the Mobile Web

3. Markup Languages for Mobile Web Development
   Teaches the markup and style languages of the Mobile Web: HTML, XHTML, XHTML-MP, WML, CSS2, Wireless CSS and CSS Mobile Profile.
4. Device Awareness and Content Adaptation
   Uses the WURFL and DeviceAtlas mobile device databases to identify web traffic from
   mobile phones and adapt mobile markup to target specific mobile devices and browsers.
5. Adding Interactivity with JavaScript and AJAX
   Enriches a Mobile Web site with interactivity powered by mobile JavaScript and AJAX.

Part 3: Advanced Mobile Web Development Techniques

6. Mobile Web Design and Usability (authored by Rajesh Lal)
   Improves the design and usability of your Mobile Web pages to help the mobile user easily and rapidly achieve their goals.
7. Enhancing Mobile Web Pages for Smartphone Browsers
   Investigates the advanced features of smartphone browsers, including iPhone, Android, Palm webOS, BlackBerry, Nokia Series 60, Opera Mobile, and Windows Mobile.

Part 4: Deploying into the Mobile Ecosystem

8. Optimizing Mobile Web Pages
   Optimizes a Mobile Web page by compressing document size, reducing web server transactions, and coercing
   mobile browsers into caching Mobile Web content.
9. Validating Mobile Markup
   Validates mobile markup syntax, styles, and overall site readiness using validation services from W3C, dotMobi and other organizations.
10. Testing a Mobile Web Site
    Tests a Mobile Web site using mobile browser emulators and actual mobile devices.
11. Deploying a Mobile Web Site
    Releases a Mobile Web site into the ecosystem, distinguishes between Desktop and Mobile Web traffic and acquires mobile traffic using on-page and off-page mobile SEO.
12. How to Play Well in the Mobile Ecosystem
    Identifies and adapts to requests from transcoders. Defensively fortifies a Mobile Web site to discourage transcoding of mobile markup.
13. The Future of the Mobile Web
    Explores industry projections and expert opinions about the future of the Mobile Web.

Part 5: Appendices

1. Sample User-Agents for Mobile Devices
   Provides user-agents from smartphone and featurephone mobile devices.
2. Sample HTTP Requests from Mobile Devices
   Provides HTTP request headers from smartphone and featurephone mobile devices.
3. Glossary
   Definitions for mobile industry acronyms, jargon and technical terms.
4. Case Study for Smartphone Browser Caching
   Examines the actual caching and concurrency behavior in smartphone browsers.

About the Authors

Gail Rahn Frederick is a mobile software architect, Mobile Web enthusiast and instructor of standards-based Mobile Web development. Her mobile applications and Mobile Web sites have been deployed to 10+ mobile operators in 6+ countries in North America and Europe. At Learn the Mobile Web and Portland Community College, she teaches Mobile Web development for smartphones and other devices, including defensive programming and other survival tips for the mobile ecosystem. At Medio Systems, she leads a mobile software team developing personalized search and discovery products with a focus on mobile analytics.

Rajesh Lal is an author, designer, developer, and a technology evangelist with a decade of experience in desktop, Web and mobile devices. He has received numerous awards for his work on Windows Vista and sidebar gadgets. Rajesh has been involved in mobile UI/UX design for past five years and has expertise with a variety of mobile devices, namely Sony Mylo, Windows Mobile, Apple iPhone, Nokia Series 60, and Maemo devices. Rajesh has a master’s degree in computer science, holds MCSD and MCAD titles. He currently works as a Senior Engineer at Nokia, Mountain View, California. You can find Rajesh at his mobile user interface and Vista gadget blogs. Rajesh authored the Mobile Web Usability chapter of Beginning Smartphone Web Development.

About the Technical Reviewers

I was fortunate to have three mobile technology experts reviewing the chapters in the book: James Pearce, Rocco Georgi and Todd Emerson.

Related Links

See the Resources section of Learn the Mobile Web for links to related Mobile Web, Web standards, mobile standards, mobile applications and mobile industry sites.

Errata

Check the Apress errata page for the book to review or submit errata for Beginning Smartphone Web Development.

Source Code

Source code from the book is available at the following links. To view code samples on a mobile device, browse to http://learnto.mobi/books/bmwd/.

Chapter 3

• Listing 3-1: Example XHTML Document
• Listing 3-2: XHTML Forms
• Listing 3-3: XHTML Table
• Listing 3-4: XHTML Access Keys
• Example Invalid WML Document
• Example Valid WML Document
• Listing 3-5: Annotated Sample WML Document
• Listing 3-6: WML Document Header
• Listing 3-7: WML Text Formatting
• Listing 3-8: WML Links
• Listing 3-9: WML Images
• Listing 3-10: WML Tables
• Listing 3-11: WML Timers
• Listing 3-12: WML Variables
• Listing 3-13: WML Text Input
• Listing 3-14: WML Select One from List
• WML Select Many from List
• WML Fieldsets

Chapter 4

• Listing 4-2: WURFL Configuration XML File
• Listing 4-4: WURFL Property Viewer
  • PHP source code
  • Web page
• Listing 4-5: WURFL Switcher
  • PHP source code
  • Web page
• Listing 4-7: DeviceAtlas Property Viewer
  • PHP source code
  • Web page
• Listing 4-8: DeviceAtlas Switcher
  • PHP source code
  • Web page
• Listing 4-9: Content Adaptation with WURFL
  • PHP source code
  • Web page

Chapter 5

• Listing 5-1: EcmaScript MP Example
  • PHP source code
  • Web page
• Listing 5-2: Tabs in EcmaScript MP
  • PHP source code
  • Web page
• Listing 5-5: AJAX Tabs
  • PHP source code
  • Web page

Chapter 7

• Listing 9-2 without Viewport Meta Tag
• Listing 7-1: Detecting Orientation Changes using onorientationchange and window.orientation
• Listing 7-2: Detecting Orientation Changes using onresize, screen.width and screen.height
• Listing 7-3: WebKit CSS Extensions

Chapter 8

• Listing 8-9: XHTML-MP with Inline CSS and JavaScript
• Listing 8-10: XHTML-MP with Inline CSS and JavaScript after Minification
• Listing 8-11: Example XHTML-MP Document with Two Externally Linked Resources
• Listing 8-13: Example XHTML-MP Document in MIME multipart/related Envelope
  • PHP source code
  • Web page
• Listing 8-11 served with GZIP Response Compression

Chapter 9

• Listing 9-1: Invalid XHTML-MP Markup
• Listing 9-1a: Invalid CSS
• Listing 9-2: Valid XHTML-MP Markup
• Listing 9-2a: Valid CSS

Chapter 11

• Listing 11-1: Mobile Switcher using WURFL
  • PHP source code
  • Web page

Chapter 12

• Listing 12-1: Transcoder Identification using WURFL
  • PHP source code
  • Web page
• Listing 12-2: Transcoder Identification using DeviceAtlas
  • PHP source code
  • Web page

All source code is copyrighted. Copyright © 2009-2010 Gail Rahn Frederick, all rights reserved.