Programming the Mobile Web Maximiliano Firtman Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo Programming the Mobile Web by Maximiliano Firtman Copyright © 2010 Maximiliano Firtman. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Editor: Simon St.Laurent Indexer: Jay Marchand Production Editor: Loranah Dimant Cover Designer: Karen Montgomery Copyeditor: Rachel Head Interior Designer: David Futato Proofreader: Jennifer Knight Illustrator: Robert Romano Production Services: Newgen, Inc. Printing History: July 2010: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Programming the Mobile Web, the image of a jerboa, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. TM This book uses RepKover™, a durable and flexible lay-flat binding. ISBN: 978-0-596-80778-8 [M] 1279131278 For my parents, Stella Maris and Edgardo, my brother, Sebastián, and my lovely wife, Ani, who have supported me during all of my projects Table of Contents Preface . xiii 1. The Mobile Jungle . ... .................................................. 1 Myths of the Mobile Web 1 It’s Not the Mobile Web; It’s Just the Web! 1 You Don’t Need to Do Anything Special About Your Desktop Website 2 One Website Should Work for All Devices (Desktop, Mobile, TV, etc.) 2 Mobile Web Is Really Easy; Just Create a WML File 2 Just Create an HTML File with a Width of 240 Pixels, and You Have a Mobile Website 3 Native Mobile Applications Will Kill the Mobile Web 3 People Are Not Using Their Mobile Browsers 3 The Mobile Ecosystem 4 What Is a Mobile Device? 4 Mobile Device Categories 6 Mobile Knowledge 11 Display 11 Brands, Models, and Platforms 16 Apple 16 Nokia 18 BlackBerry 22 Samsung 23 Sony Ericsson 24 Motorola 24 LG Mobile 25 HTC 26 Android 26 Windows Mobile 27 Palm 28 Symbian Foundation 30 Other Platforms 31 Technical Information 31 v Market Statistics 32 2. Mobile Browsing . .................................................. 39 The Mobile Browsing Experience 39 Browsing Types 40 Zoom Experience 41 Reflow Engines 42 Direct Versus Proxied Browsers 43 Multipage Experience 43 The WebKit Engine 44 Preinstalled Browsers 45 User-Installable Browsers 51 Browser Overview 53 Mobile Web Eras 54 WAP 1 54 WAP 2.0 56 Mobile Web 2.0 59 3. Architecture and Design . ............................................ 61 Website Architecture 61 Navigation 61 Context 62 Progressive Enhancement 63 Different Version Approach 64 Design and Usability 65 Touch Design Patterns 70 Official UI Guidelines 73 4. Setting Up Your Environment . ....................................... 75 Setting Up a Development Environment 75 Working with Code 75 Emulators and Simulators 75 Production Environment 92 Web Hosting 93 Domain 93 Error Management 93 Statistics 94 5. Markups and Standards . ............................................ 95 First, the Old Ones 95 WML 96 Current Standards 102 Politics of the Mobile Web 102 vi | Table of Contents Delivering Markup 104 XHTML Mobile Profile and Basic 109 Available Tags 109 Official Noncompatible Features 111 Creating Our First Compatible Template 111 Markup Additions 112 CSS for Mobile 114 WCSS Extensions 114 Confusion 119 6. Coding Markup . ... .................................................. 121 Heading Structure 121 Icons for the Mobile Web 122 Hey! I’m Mobile Friendly 124 The Document Body 128 Main Structure 129 Images 131 Lists 138 Links 138 Forms 152 Tables 166 Frames 169 Plug-ins and Extensions 170 Adobe Flash 171 Microsoft Silverlight 174 SVG 174 Canvas 178 7. CSS for Mobile Browsers . ........................................... 179 Where to Insert the CSS 179 Media Filtering 180 Selectors 183 CSS Techniques 185 Reset CSS Files 185 Box Model 187 Text Format 187 Common Patterns 197 Display Properties 197 CSS Sprites 205 Samples and Compatibility 206 CSS Sprites Alternatives 210 WebKit Extensions 211 Text Stroke and Fill 211 Table of Contents | vii Border Image 212 Safari-Only Extensions 217 8. JavaScript Mobile . ... ................................................ 219 Supported Technologies 220 Document Object Model 220 Ajax 221 JSON 221 HTML 5 APIs 221 Platform Extensions 222 Coding JavaScript for Mobile Browsers 222 Code Execution 223 JavaScript Mobile Compatibility 225 DOM 241 Scripting Styles 246 Event Handling 247 Touch Gestures 259 9. Ajax, RIA, and HTML 5 . ............................................ 267 Ajax Support 267 XML Parsing 268 JSON Parsing 269 JSONP and Lazy Loading 270 Comet Techniques 271 JavaScript Libraries 272 Mobile Libraries 273 WebKit CSS Extensions 275 WebKit Functions 275 Gradients 276 Reflection Effects 277 Masked Images 278 Transitions 279 Animations 281 Transformations 284 Mobile Rich Internet Applications 288 JavaScript UI Libraries 289 JavaScript Mobile UI Patterns 295 HTML 5 301 The Standard 301 Editable Content 303 New Input Types 303 Data Lists 304 The canvas Element 304 viii | Table of Contents Offline Operation 308 Client Storage 311 10. Server-Side Browser Detection and Content Delivery . ... 317 Mobile Detection 317 HTTP 318 Detecting the Context 323 Transcoders 326 Device Libraries 330 Content Delivery 343 Defining MIME Types 343 File Delivery 346 Application and Games Delivery 351 Java ME 353 Flash Lite Content 356 iPhone Applications 357 Multimedia and Streaming 357 Delivering Multimedia Content 358 Embedding Audio and Video 358 Streaming 359 Content Adaptation 361 Adaptation Frameworks 362 Microsoft ASP.NET Mobile Controls 364 mobileOK Pythia 365 Yahoo! Blueprint 365 Mobilizing WordPress and Other CMSs 366 WordPress 367 11. Geolocation and Maps . ............................................ 369 Location Techniques 369 Accuracy 369 Indoor Location 369 Client Techniques 370 Server Techniques 371 Asking the User 373 Detecting the Location 375 W3C Geolocation API 375 Google Gears 379 BlackBerry Location API 382 Widget APIs 383 GSMA OneAPI 383 Multiplatform Geolocation API 384 IP Geolocation 386 Table of Contents | ix Showing a Map 387 Google Maps API v3 388 Google Maps Static API 390 Following LBS 391 12. Widgets and Offline Webapps . ... ...................................... 393 Mobile Widget Platforms 394 Pros and Cons 394 Architecture 395 Standards 398 Packaging and Configuration Standards 398 Platform Access 399 Platforms 403 Symbian/Nokia 403 iPhone, iPod, and iPad 413 webOS 418 Android 420 Windows Mobile 422 BlackBerry 424 LG Mobile 426 Samsung Mobile 427 JIL 429 Opera Widgets 430 Operator-Based Widget Platforms 431 Widget Design Patterns 431 Multiple Views 432 Layout 432 Input Method 432 One-View Widget 432 Dynamic Application Engine 433 Multiplatform Widgets 433 13. Testing, Debugging, and Performance . 435 Testing and Debugging 435 Remote Labs 436 Server-Side Debugging 443 Markup Debugging 445 Client-Side Debugging 448 Performance Optimization 451 Measurement 452 Best Practices 453 x | Table of Contents 14. Distribution and Social Web 2.0 . 457 Mobile SEO 457 Spiders and Discoverability 458 How Users Find You 459 User Fidelizing 464 Mobile Web Statistics 466 Google Analytics for Mobile 467 Yahoo! Web Analytics 467 Mobilytics 467 Motally Web Analytics 467 Pion for Mobile Web 468 Mobile Web Advertising 468 Monetizing Your Website 468 AdMob 469 Other Companies 469 Mobile Web Social Features 469 Facebook 469 Share Content 470 Appendix: MIME Types for Mobile Content . 473 Index . 477 Table of Contents | xi Preface In your pocket is a device that has changed the lives of billions of people all over the world. The third personal screen (after the TV and the computer) is the most personal one, and bringing our services to it is one of the key business priorities of this decade. Mobile development, however, is a more challenging activity than desktop develop- ment. Platforms are severely fragmented, and developers have to work with minimal resources. Fortunately, the mobile web makes it easier to deal with this fragmentation, allowing developers to create applications that run on many more platforms than native (or installable) applications. As we will see later, the mobile web and installable appli- cations are not enemies. In fact, they work together very well. All of that sounds great: billions of devices, web technologies, multiplatform solu- tions…where’s the problem? More than half of your desktop web skills and the tips, hacks, and best practices you already know simply do not apply on the mobile web. The mobile web demands new usability patterns, new programming best practices, and new knowledge and abilities. At the time of this writing there are almost no books, websites, or training courses focused on concrete mobile web