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.
- 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
- Introduction to Mobile Web Development
Introduces the mobile industry, mobile users, and the Mobile Web.
- 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
- 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.
- 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.
Part 3: Advanced Mobile Web Development Techniques
- 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.
- 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
- 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.
- Validating Mobile Markup
Validates mobile markup syntax, styles, and overall site readiness using validation services from W3C, dotMobi and other organizations.
- Testing a Mobile Web Site
Tests a Mobile Web site using mobile browser emulators and actual mobile devices.
- 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.
- 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.
- The Future of the Mobile Web
Explores industry projections and expert opinions about the future of the Mobile Web.
Part 5: Appendices
- Sample User-Agents for Mobile Devices
Provides user-agents from smartphone and featurephone mobile devices.
- Sample HTTP Requests from Mobile Devices
Provides HTTP request headers from smartphone and featurephone mobile devices.
Definitions for mobile industry acronyms, jargon and technical terms.
- 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
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/.
- 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
- Listing 4-2: WURFL Configuration XML File
- Listing 4-4: WURFL Property Viewer
- Listing 4-5: WURFL Switcher
- Listing 4-7: DeviceAtlas Property Viewer
- Listing 4-8: DeviceAtlas Switcher
- Listing 4-9: Content Adaptation with WURFL
- Listing 5-1: EcmaScript MP Example
- Listing 5-2: Tabs in EcmaScript MP
- Listing 5-5: AJAX Tabs
- 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
- Listing 8-11: Example XHTML-MP Document with Two Externally Linked Resources
- Listing 8-13: Example XHTML-MP Document in MIME multipart/related Envelope
- Listing 8-11 served with GZIP Response Compression
- Listing 9-1: Invalid XHTML-MP Markup
- Listing 9-1a: Invalid CSS
- Listing 9-2: Valid XHTML-MP Markup
- Listing 9-2a: Valid CSS
- Listing 12-1: Transcoder Identification using WURFL
- Listing 12-2: Transcoder Identification using DeviceAtlas
All source code is copyrighted. Copyright © 2009-2010 Gail Rahn Frederick, all rights reserved.