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 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 contained herein.
TM
This book uses RepKover™, a durable and flexible lay-flat binding. ISBN: 978-0-596-80778-8 [M] 1279131278
Table of Contents
1. The Mobile Jungle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Myths of the Mobile Web It’s Not the Mobile Web; It’s Just the Web! You Don’t Need to Do Anything Special About Your Desktop Website One Website Should Work for All Devices (Desktop, Mobile, TV, etc.) Mobile Web Is Really Easy; Just Create a WML File Just Create an HTML File with a Width of 240 Pixels, and You Have a Mobile Website Native Mobile Applications Will Kill the Mobile Web People Are Not Using Their Mobile Browsers The Mobile Ecosystem What Is a Mobile Device? Mobile Device Categories Mobile Knowledge Display Brands, Models, and Platforms Apple Nokia BlackBerry Samsung Sony Ericsson Motorola LG Mobile HTC Android Windows Mobile Palm Symbian Foundation Other Platforms Technical Information
1 1 2 2 2 3 3 3 4 4 6 11 11 16 16 18 22 23 24 24 25 26 26 27 28 30 31 31
Market Statistics
32
2. Mobile Browsing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 The Mobile Browsing Experience Browsing Types Zoom Experience Reflow Engines Direct Versus Proxied Browsers Multipage Experience The WebKit Engine Preinstalled Browsers User-Installable Browsers Browser Overview Mobile Web Eras WAP 1 WAP 2.0 Mobile Web 2.0
39 40 41 42 43 43 44 45 51 53 54 54 56 59
3. Architecture and Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Website Architecture Navigation Context Progressive Enhancement Different Version Approach Design and Usability Touch Design Patterns Official UI Guidelines
61 61 62 63 64 65 70 73
4. Setting Up Your Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Setting Up a Devel