Frederick with Lal Smartphone Web Development Companion eBook Available Beginning Building JavaScript, CSS, HTML, and Ajax-Based Applications for iPhone, Android, Palm Pre, BlackBerry, Windows Mobile, and Nokia S60 Beginning Smartphone Web Development Gail Rahn Frederick with Rajesh Lal Trim: 7.5 x 9.25 spine = 0.84375" 368 page count COMPANION eBOOK SEE LAST PAGE FOR DETAILS ON $10 eBOOK VERSION US $39.99 Shelve in Mobile Computing User level: Beginner Intermediate www.apress.com http://learnthemobileweb.com/books/ SOURCE CODE ONLINE BOOKS FOR PROFESSIONALS BY PROFESSIONALS ® this print for content only—size & color not accurate CYAN MAGENTA YELLOW BLACK PANTONE 123 C SPOT MATTE ISBN 978-1-4302-2620-8 9 781430 226208 5 39 9 9 T his book will save you countless hours of wondering, “Why doesn’t this web site work on my phone?” I explain how Web trac travels from your phone through the mobile network, out to the Internet and back, where disruptions occur along this path, and how a clever programmer minimizes these risks. Web browsers in mobile devices aim to comply with web and mobile industry stan- dards. This book teaches you the standards, best practices, and development tech- niques for building interactive Mobile Web pages for browsers in smartphones and other mobile devices. The standards-based Mobile Web browser is the most promising cross-platform (and cross-cultural) mobile technology. It can reach more of the world population than any other digital medium. With this book, you will: • Build interactive Mobile Web sites using web technologies optimized for browsers in smartphones • Learn markup fundamentals, design principles, content adaptation, usability, and interoperability • Explore cross-platform standards and best practices for the Mobile Web authored by the W3C, dotMobi, and similar organizations • Dive deep into the feature sets of the most popular mobile browsers, including WebKit, Safari Mobile, Chrome, webOS, IE Mobile, and Opera Mobile The book is based on my Mobile Web development courses currently taught at Portland Community College in Portland, Oregon. In turn, the courses are based on knowledge gained from my experiences deploying Mobile Web sites and mobile applications in the United States and Europe. I advocate for standards-based Mobile Web development because I believe the Mo- bile Web is a fundamentally dierent medium than the Desktop Web. The Mobile Web is a thrilling and chaotic ecosystem. It races where the Desktop Web plods. Syn- tax, semantics, design, user behavior, defensive programming, and even SEO are all new on the Mobile Web. This book helps you survive in the ecosystem by address- ing these topics. I consider this book to be “boot camp” for the Mobile Web. My hope is that this book gives you the skills and condence to develop Mobile Web applications for all kinds of mobile devices, especially smartphones. RELATED TITLES www.it-ebooks.info www.it-ebooks.info i Beginning Smartphone Web Development Building JavaScript, CSS, HTML and Ajax-based Applications for iPhone, Android, Palm Pre, BlackBerry, Windows Mobile, and Nokia S60 ■ ■ ■ Gail Rahn Frederick with Rajesh Lal www.it-ebooks.info ii Beginning Smartphone Web Development: Building JavaScript, CSS, HTML and Ajax-based Applications for iPhone, Android, Palm Pre, BlackBerry, Windows Mobile, and Nokia S60 Copyright © 2009 by Gail Rahn Frederick with Rajesh Lal All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-2620-8 ISBN-13 (electronic): 978-1-4302-2621-5 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. President and Publisher: Paul Manning Lead Editor: Tom Welsh Technical Reviewer: James Pearce Editorial Board: Clay Andres, Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Jonathan Gennick, Jonathan Hassell, Michelle Lowman, Matthew Moodie, Duncan Parkes, Jeffrey Pepper, Frank Pohlmann, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Coordinating Editor: Debra Kelly Copy Editors: Patrick Meader, Katie Stence, and Sharon Terdeman Compositor: MacPS, LLC Indexer: BIM Indexing & Proofreading Services Artist: April Milne Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit http://www.springeronline.com. For information on translations, please e-mail info@apress.com, or visit http://www.apress.com. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales– eBook Licensing web page at http://www.apress.com/info/bulksales. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is available to readers at http://www.apress.com. A “live” version of the source code is maintained by the author at http://learntheweb.com/books. www.it-ebooks.info iii For Kim, Nixon, and Fish and Chips.—Gail Rahn Frederick To Lakshmi: Kaise Mujhe Tum Mil Gayee (how I found you).—Rajesh Lal www.it-ebooks.info iv Contents at a Glance ■Contents at a Glance iv ■Contents v ■About the Authors x ■About the Technical Reviewers xi ■Acknowlegments xii ■Introduction xiiii Part I: Getting Started with Mobile Web Development 1 ■Chapter 1: Introduction to Mobile Web Development 3 ■Chapter 2: Set Up Your Mobile Web Development Environment 15 Part II: The Syntax of the Mobile Web 45 ■Chapter 3: Mobile Markup Languages 47 ■Chapter 4: Device Awareness and Content Adaptation 97 ■Chapter 5: Adding Interactivity with JavaScript and AJAX 135 Part III: Advanced Mobile Web Development Techniques 161 ■Chapter 6: Mobile Web Usability 163 ■Chapter 7: Enhancing Mobile Web Pages for Smartphone Browsers 187 Part IV: Deploying into the Mobile Ecosystem 211 ■Chapter 8: Optimizing Mobile Markup 213 ■Chapter 9: Validating Mobile Markup 239 ■Chapter 10: Testing a Mobile Web Site 259 ■Chapter 11: Deploying a Mobile Web Site 273 ■Chapter 12: How to Play Well in the Mobile Ecosystem 289 ■Chapter 13: The Future of the Mobile Web 303 Part V: Appendixes 315 ■Appendix A: Sample User-Agents from Mobile Devices 317 ■Appendix B: Sample Request Headers from Mobile Devices 321 ■Appendix C: Glossary 325 ■Appendix D: Case Study: Testing Mobile Browser Caching and Performance 333 ■Index 337 www.it-ebooks.info v Contents ■Contents at a Glance iv ■Contents v ■About the Authors x ■About the Technical Reviewers xi ■Acknowledgments xii ■Introduction xiii Part I: Getting Started with Mobile Web Development 1 ■Chapter 1: Untroduction to Mobile Web Development 3 Mobile Web vs. Desktop Web 4 Mobile Markup Languages 6 HTML and XHTML 7 XHTML Mobile Profile 7 WML 8 Other Mobile Markup Languages 9 Mobile Scripting Languages 10 Mobile Style Sheets 11 Mobile Industry Groups and Standards Bodies 11 The Mobile Ecosystem 12 Code Samples 13 Summary 13 ■Chapter 2: Set Up Your Mobile Web Development Environment 15 Recommended IDEs 16 Mobile MIME Types 19 Web Server Configuration 21 Apache 21 Microsoft IIS 21 Nginx 22 www.it-ebooks.info ■ CONTENTS vi Mobile Web Browsers on the Desktop 22 Firefox and Mobile Add-Ons 23 Mobile Browser Emulators 34  Actual Mobile Devices 39 Other Development Tools 39 File Comparison 39 Source Code Control 40 Summary 43 Part II: The Syntax of the Mobile Web 45 ■Chapter 3: Mobile Markup Languages 47 Selecting a Mobile Markup Language 47 XHTML 48 Why Not HTML? 49 HTML 5 49 XHTML-MP 51 Example XHTML-MP Document 51 DTDs for XHTML-MP 52 XHTML Elements Not Supported in XHTML-MP 52 Updated and Mobile-Specific Features in XHTML-MP 53 Common Implementation Bugs 59 CSS for Mobile Devices 61 CSS2 62 Wireless CSS and CSS Mobile Profile 62 Determining CSS Support on a Mobile Device 68 Best Practices for Mobile CSS 68 External, Internal, and Inline Stylesheets 69 Media Selectors and Media-Dependent Style Sheets 70 WML 71 Tag Hierarchy 74 Special Characters 74 Header and Metadata 75 Text Formatting 76 Links 78 Images 83 Tables 84 Timers 86 Variables 87 User Input 90 Other WML Language Features 95 Summary 96 ■Chapter 4: Device Awareness and Content Adaptation 97 Device Awareness 98 Using HTTP Request Headers to Identify Mobile Devices 98 Using a Device Database to Obtain Device Capabilities 99 Content Adaptation 120 Creating Device Groups 122 Choosing Adaptation Points 124 Writing Content Adaptation Rules for Device Groups 125 Implementing Content Adaptation 126 www.it-ebooks.info ■ CONTENTS vii Content Adaptation on the Mobile Web 129 Summary 134 ■Chapter 5: Adding Interactivity with JavaScript and AJAX 135 Iterative Development Approach 136 JavaScript in Mobile Browsers 136 ECMAScript Mobile Profile 137 Embedding JavaScript in a Markup Document 138 JavaScript Fragmentation in Mobile Browsers 142 Examples of Mobile JavaScript 144 AJAX in Mobile Browsers 148 Example of AJAX for Mobile Browsers 154 Testing AJAX Support in Mobile Browsers 158 Summary 159 Part III: Advanced Mobile Web Development Techniques 161 ■Chapter 6: Mobile Web Usability 163 Best Practices for Usable Mobile Web Sites 164 Case Study #1: Bank of America 165 Case Study #2: CNN 166 Case Study #3: Wikipedia 168 Case Study #4: Flickr 170 Mobile Browser Layout Comparison 172 Designing Mobile Web pages 174 Flexible Reference Design 174 Standard Layout 175 News Web Site 176 Search Web site 177 Service Web Site 178 Portal Web Site 179 Media-Sharing Web Site 180 Design Guidelines 181 Tips for Developing Mobile Web Pages 181 Creating a Web Page for the Maximum Number of Users 183 Creating a Better Mobile User Experience 184 Summary 186 ■Chapter 7: Enhancing Mobile Web Pages for Smartphone Browsers 187 Common Web Techniques for Smartphone Browsers 188 Viewport Meta Tag 188 Detecting Orientation Changes in JavaScript 190 WebKit in Mobile Browsers 195 Safari Mobile for iPhone 199 Browser for Android Mobile Devices 200 webOS Browser for Palm Pre 201 BlackBerry Browser 202 Nokia Web Browser on Series 60 Smartphones 204 Internet Explorer Mobile for Windows Mobile 206 Opera Mini and Opera Mobile Browsers 207 Summary 210 www.it-ebooks.info ■ CONTENTS viii Part IV: Deploying into the Mobile Ecosystem 211 ■Chapter 8: Optimizing Mobile Markup 213 Post-Processing Techniques for Mobile Markup 214 Minimize External Resources 214 Remove Whitespace, Comments and Unnecessary Markup 216 Adapt and Transcode Images 223 MIME Multipart Encoding of a Response Document 224 Web Server Optimizations for Mobile Browsers 229 gzip or deflate Response Compression 229 Caching Directives in HTTP Response Headers 232 Summary 238 ■Chapter 9: Validating Mobile Markup 239 Importance of Valid Markup on the Mobile Web 240 What Validation Does Not Test 244 Public Markup Validators 245 W3C Markup Validation Service 246 W3C CSS Validation Service 248 W3C mobileOK Checker 250 mobiReady 252 Validome 254 Summary 257 ■Chapter 10: Testing a Mobile Web Site 259 Mobile Web Testing Methodology 260 Mobile Browser Testing Considerations 262 Choosing Mobile Devices to Use in Testing 262 Testing on Actual Mobile Devices 263 Acquiring Mobile Devices 264 Developer Programs 265 Testing in Mobile Emulators 268 Testing in Desktop Browsers 269 Summary 272 ■Chapter 11: Deploying a Mobile Web Site 273 Routing Mobile Traffic to a Mobile Web Site 273 Standard Mobile Web Domain and Pathnames 274 Mobile Switching Algorithms 276 Mobile Switching Products 279 Mobile SEO and Traffic Acquisition 280 Mobile Search Engines and Crawlers 280 Using Link Relationships for Mobile Site Discovery 282 Mobile Sitemaps 283 SEO for the Mobile Web 284 SEO Practices to Forget 285 Summary 287 ■Chapter 12: How to Play Well in the Mobile Ecosystem 289 Operators, Transcoders, and Proxies, Oh My! 289 Transcoders on the Public Internet 292 Standardizing Transcoder Behavior 295 Defensive Programming for the Mobile Web 297 Declaring Your Markup as Mobile-Friendly 297 www.it-ebooks.info [...]... define the Mobile Web and the Desktop Web) www.it-ebooks.info CHAPTER 1: Introduction to Mobile Web Development Desktop Web filtering software can prevent viewing of objectionable web pages, but web filters work by blocking page access rather than adapting page syntax Mobile Web development is a new discipline for these reasons: The Mobile Web ecosystem is totally new The Mobile Web uses the plumbing... www.it-ebooks.info 13 14 CHAPTER 1: Introduction to Mobile Web Development www.it-ebooks.info 15 Chapter 2 Set Up Your Mobile Web Development Environment In this chapter, you’ll learn how to set up your Mobile Web development environment Mobile Web development requires many of the traditional tools for web development: a server-side scripting language, a robust integrated development environment (IDE) with support... with web pages see Chapter 11 for more information about testing Mobile Web pages) Recommended IDEs An IDE is a set of developer tools that facilitate designing, programming, executing, and debugging a web application (or any other type of software) Mobile Web development does not require a specific IDE The choice is yours, provided that the IDE supports web development in any markup language Web development. .. 2: Set Up Your Mobile Web Development Environment Figure 2–1 Eclipse PHP Development Tools 3.3 viewing an XHTML-MP 1.1 markup document Figure 2–2 NetBeans PHP 6.7 viewing an XHTML-MP 1.1 markup document www.it-ebooks.info CHAPTER 2: Set Up Your Mobile Web Development Environment Mobile MIME Types Mobile MIME types (or content types) identify the format of Mobile Web content Text documents containing... users A standards-based approach to Mobile Web development ensures compliance and usability across mobile browsers and platforms Knowing all the rules—and knowing when to ignore the rules—is necessary for success on the Mobile Web 3 www.it-ebooks.info 4 CHAPTER 1: Introduction to Mobile Web Development Mobile Web vs Desktop Web Fundamentally, there is one Web Its content is standardized markup, styles,... describing the file type of the document transmitted to the client The Mobile Web uses the plumbing of the Desktop Web and adds new MIME types, markup languages, document formats, and best practices to provide web content optimized for the small screens, resource constraints, and usability challenges of web browsers on mobile devices The Mobile Web introduces new components into the web ecosystem, including:... You will spend a lot of time building your Mobile Web development project in the IDE, so it is important to choose one that supports efficient web development Web developers usually choose an IDE based on its support for a server-side runtime language Markup language support is built into every mature IDE Table 2-1 lists popular web development IDEs by development platform and their runtime language... 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 Gail teaches Mobile Web development for smartphones and other devices, including defensive programming and other survival tips for the mobile ecosystem, at Learn the Mobile Web (http://learnthemobileweb.com)... viewable using web browsers In this book, by convention, we call this the Web the Desktop Web It is what we surf in Firefox or Opera or Internet Explorer on our desktops, laptops, and netbooks The Web is a vast collection of servers linked by TCP/IP computer networks Many of these servers, known as web servers, implement the Hypertext Transfer Protocol (HTTP) to share documents and files Web servers provide... device Advanced web features such as JavaScript and AJAX are highly desirable but drain battery life With more than a dozen mobile browser vendors in the marketplace, the burden of ensuring compliance with web standards falls to OEMs and operators www.it-ebooks.info 5 6 CHAPTER 1: Introduction to Mobile Web Development Table 1-1 Characteristics of the Mobile Web and Desktop Web Mobile Web Average Session . Getting Started with Mobile Web Development 1 ■Chapter 1: Introduction to Mobile Web Development 3 ■Chapter 2: Set Up Your Mobile Web Development Environment. Getting Started with Mobile Web Development 1 ■Chapter 1: Untroduction to Mobile Web Development 3 Mobile Web vs. Desktop Web 4 Mobile Markup Languages