www.it-ebooks.info www.it-ebooks.info Programming the Mobile Web Maximiliano Firtman Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo www.it-ebooks.info 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 corporate@oreilly.com. Editor: Simon St.Laurent Production Editor: Loranah Dimant Copyeditor: Rachel Head Proofreader: Jennifer Knight Production Services: Newgen, Inc. Indexer: Jay Marchand Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Robert Romano 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 www.it-ebooks.info 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 www.it-ebooks.info www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info 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 www.it-ebooks.info [...]... that can trip up even the most experienced desktop web developer Myths of the Mobile Web As the Web has moved onto mobile devices, developers have told themselves a lot of stories about what this means for their work While some of those stories are true, others are misleading, confusing, or even dangerous It’s Not the Mobile Web; It’s Just the Web! I’ve heard this quote many times in the last few years,... later, the mobile web and installable applications are not enemies In fact, they work together very well All of that sounds great: billions of devices, web technologies, multiplatform solutions…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. .. devices on the market today The worst part of this story is that these developers think that this is the markup language 2 | Chapter 1: The Mobile Jungle www.it-ebooks.info for the mobile web Wrong! WML development was called mobile web (or WAP) development a couple of years ago, when the first attempt at building a mobile web was made (We will talk more about history in the Mobile Web Eras” on page 54 section... 451 452 453 14 Distribution and Social Web 2.0 457 Mobile SEO Spiders and Discoverability How Users Find You User Fidelizing Mobile Web Statistics Google Analytics for Mobile Yahoo! Web Analytics Mobilytics Motally Web Analytics Pion for Mobile Web Mobile Web Advertising Monetizing Your Website AdMob Other Companies Mobile Web Social Features Facebook Share Content... Creating a book about the mobile web was really a challenge, but it was worth it Enjoy! xx | Preface www.it-ebooks.info CHAPTER 1 The Mobile Jungle Isn’t the mobile web the same web as the desktop one? It does use the same basic architecture and many of the same technologies, though mobile device screens are smaller and bandwidth and processing resources are more constrained There’s a lot more to it... separate them by version number) Creating one HTML file as your mobile website will be a very unsuccessful project In addition, doing so contributes to the belief that mobile web browsing is not useful Native Mobile Applications Will Kill the Mobile Web Every solution has advantages and disadvantages The mobile web has much to offer native applications, as Chapter 12 of this book will demonstrate The mobile. .. too, like the notebooks Where do tablets, like the iPad, fit in? They are not so personal (will you have one tablet per member of the family?), and they may not be so portable But, as they generally use mobile instead of desktop operating systems, they are more mobile than notebooks or netbooks So, I don’t have the answer They are in the middle The Mobile Ecosystem | 5 www.it-ebooks.info Mobile Device... Eras” on page 54 section of Chapter 2.) There are still a small proportion of WML-only devices available in some markets, but WML is definitely not the mobile web today Just Create an HTML File with a Width of 240 Pixels, and You Have a Mobile Website This is the other fast-food way to think about the mobile web Today, there are more than 3,000 mobile devices on the market, with almost 30 different browsers... ambitious claim, but it is the truth This book draws upon a mix of experience and very detailed research and testing not available in other books, websites, or research papers about the mobile web Programming the Mobile Web will teach you how to create effective and rich experiences for mobile web browsers, and also how to create offline applications or widgets that will be installed in the devices’ applications... people have mobile devices? 4,600,000,000 (68% of the population) at the beginning of 2010 (U.N Telecommunications Agency, http://www.itu.int) So, one of the reasons why people are not using their mobile browsers may be because of us, the web producers We are not offering them what they need There are other factors, but let’s talk about what we can do from our point of view Opera Mini is a mobile browser . 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. research and testing not available in other books, websites, or research papers about the mobile web. Programming the Mobile Web will teach you how to create