Beginning Smartphone Web Development: Building Javascript, CSS, HTML and Ajax-Based Applications for iPhone, Android, Palm Pre, Blackberry, Windows Mobile and Nokia S60

366 Pages·2010·8.06 MB·English

by  Gail Frederick

CYAN YELLOW SPOT MATTE
MAGENTA BLACK
PANTONE 123 C
BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Companion
eBook
Available Building JavaScript, CSS, HTML, and Ajax-Based
S This book will save you countless hours of wondering, “Why doesn’t this web B Applications for iPhone, Android, Palm Pre, BlackBerry,
LE e
TIT site work on my phone?” I explain how Web traffic travels from your phone g Windows Mobile, and Nokia S60
D through the mobile network, out to the Internet and back, where disruptions i
E n
AT occur along this path, and how a clever programmer minimizes these risks. n
REL Web browsers in mobile devices aim to comply with web and mobile industry stan- in
dards. This book teaches you the standards, best practices, and development tech- g

niques for building interactive Mobile Web pages for browsers in smartphones and
other mobile devices. S
m
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
a
than any other digital medium. With this book, you will:
r
•
Build interactive Mobile Web sites using web technologies t
optimized for browsers in smartphones p
• Learn markup fundamentals, design principles, content adaptation, h
usability, and interoperability o
•
Explore cross-platform standards and best practices for the Mobile n
Web authored by the W3C, dotMobi, and similar organizations e
•
Dive deep into the feature sets of the most popular mobile
W
browsers, including WebKit, Safari Mobile, Chrome, webOS, IE
Mobile, and Opera Mobile
e
The book is based on my Mobile Web development courses currently taught at b
Portland Community College in Portland, Oregon. In turn, the courses are based on Beginning
knowledge gained from my experiences deploying Mobile Web sites and mobile D
applications in the United States and Europe. e
I advocate for standards-based Mobile Web development because I believe the Mo- v Smartphone
bile Web is a fundamentally different medium than the Desktop Web. The Mobile e
Web is a thrilling and chaotic ecosystem. It races where the Desktop Web plods. Syn- l
tax, semantics, design, user behavior, defensive programming, and even SEO are all o
new on the Mobile Web. This book helps you survive in the ecosystem by address- p
ing these topics.
m
I consider this book to be “boot camp” for the Mobile Web. My hope is that this book
Web Development
gives you the skills and confidence to develop Mobile Web applications for all kinds e
of mobile devices, especially smartphones. n
t
F
r
e
w d
ith e Gail Rahn Frederick with Rajesh Lal
Lri
COMPANION eBOOK SEE LAST PAGE FOR DETAILS ON $10 eBOOK VERSION ISBN 978-1-4302-2620-8 alck
53999
US $39.99
Shelve in
Mobile Computing
SOURCE CODE ONLINE
User level:
www.apress.com Beginner--Intermediate
9 781430 226208
http://learnthemobileweb.com/books/
this print for content only—size & color not accurate Trim: 7.5 x 9.25 spine = 0.84375" 368 page count

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

i
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 [phone], e-mail [email protected], or visit
http://www.springeronline.com.
For information on translations, please e-mail [email protected], 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.

ii
For Kim, Nixon, and Fish and Chips.—Gail Rahn Frederick

To Lakshmi: Kaise Mujhe Tum Mil Gayee (how I found you).—Rajesh Lal

iii
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(cid:1)
■Chapter 1: Introduction to Mobile Web Development...........................................................................3(cid:1)
■Chapter 2: Set Up Your Mobile Web Development Environment.........................................................15(cid:1)
Part II: The Syntax of the Mobile Web...................................................................................................45(cid:1)
■Chapter 3: Mobile Markup Languages................................................................................................47(cid:1)
■Chapter 4: Device Awareness and Content Adaptation......................................................................97(cid:1)
■Chapter 5: Adding Interactivity with JavaScript and AJAX..............................................................135(cid:1)
Part III: Advanced Mobile Web Development Techniques...................................................................161(cid:1)
■Chapter 6: Mobile Web Usability......................................................................................................163(cid:1)
■Chapter 7: Enhancing Mobile Web Pages for Smartphone Browsers...............................................187(cid:1)
Part IV: Deploying into the Mobile Ecosystem.....................................................................................211(cid:1)
■Chapter 8: Optimizing Mobile Markup..............................................................................................213(cid:1)
■Chapter 9: Validating Mobile Markup...............................................................................................239(cid:1)
■Chapter 10: Testing a Mobile Web Site.............................................................................................259(cid:1)
■Chapter 11: Deploying a Mobile Web Site........................................................................................273(cid:1)
■Chapter 12: How to Play Well in the Mobile Ecosystem...................................................................289(cid:1)
■Chapter 13: The Future of the Mobile Web.......................................................................................303(cid:1)
Part V: Appendixes..............................................................................................................................315(cid:1)
■Appendix A: Sample User-Agents from Mobile Devices...................................................................317(cid:1)
■Appendix B: Sample Request Headers from Mobile Devices............................................................321(cid:1)
■Appendix C: Glossary........................................................................................................................325(cid:1)
■Appendix D: Case Study: Testing Mobile Browser Caching and Performance.................................333
■Index.................................................................................................................................................337
iv
Contents
■Contents at a Glance..............................................................................................................iv(cid:1)
■Contents..................................................................................................................................v(cid:1)
■About the Authors...................................................................................................................x(cid:1)
■About the Technical Reviewers..............................................................................................xi(cid:1)
■Acknowledgments................................................................................................................xii(cid:1)
■Introduction.........................................................................................................................xiii(cid:1)

Part I: Getting Started with Mobile Web Development...............................................................1(cid:1)
■Chapter 1: Untroduction to Mobile Web Development............................................................3(cid:1)
Mobile Web vs. Desktop Web..................................................................................................................................................................4(cid:1)
Mobile Markup Languages......................................................................................................................................................................6(cid:1)
HTML and XHTML...............................................................................................................................................................................7(cid:1)
XHTML Mobile Profile.........................................................................................................................................................................7(cid:1)
WML....................................................................................................................................................................................................8(cid:1)
Other Mobile Markup Languages.......................................................................................................................................................9(cid:1)
Mobile Scripting Languages..................................................................................................................................................................10(cid:1)
Mobile Style Sheets...............................................................................................................................................................................11(cid:1)
Mobile Industry Groups and Standards Bodies......................................................................................................................................11(cid:1)
The Mobile Ecosystem...........................................................................................................................................................................12(cid:1)
Code Samples........................................................................................................................................................................................13(cid:1)
Summary...............................................................................................................................................................................................13(cid:1)
■Chapter 2: Set Up Your Mobile Web Development Environment...........................................15(cid:1)
Recommended IDEs..............................................................................................................................................................................16(cid:1)
Mobile MIME Types...............................................................................................................................................................................19(cid:1)
Web Server Configuration......................................................................................................................................................................21(cid:1)
Apache..............................................................................................................................................................................................21(cid:1)
Microsoft IIS.....................................................................................................................................................................................21(cid:1)
Nginx................................................................................................................................................................................................22(cid:1)
v
■ CONTENTS
Mobile Web Browsers on the Desktop...................................................................................................................................................22
Firefox and Mobile Add-Ons.............................................................................................................................................................23
Mobile Browser Emulators...............................................................................................................................................................34(cid:1)
Actual Mobile Devices......................................................................................................................................................................39(cid:1)
Other Development Tools......................................................................................................................................................................39(cid:1)
File Comparison................................................................................................................................................................................39(cid:1)
Source Code Control.........................................................................................................................................................................40(cid:1)
Summary...............................................................................................................................................................................................43(cid:1)
Part II: The Syntax of the Mobile Web......................................................................................45(cid:1)
■Chapter 3: Mobile Markup Languages..................................................................................47(cid:1)
Selecting a Mobile Markup Language...................................................................................................................................................47(cid:1)
XHTML...................................................................................................................................................................................................48(cid:1)
Why Not HTML?................................................................................................................................................................................49(cid:1)
HTML 5.............................................................................................................................................................................................49(cid:1)
XHTML-MP.............................................................................................................................................................................................51(cid:1)
Example XHTML-MP Document........................................................................................................................................................51(cid:1)
DTDs for XHTML-MP.........................................................................................................................................................................52(cid:1)
XHTML Elements Not Supported in XHTML-MP................................................................................................................................52(cid:1)
Updated and Mobile-Specific Features in XHTML-MP......................................................................................................................53(cid:1)
Common Implementation Bugs........................................................................................................................................................59(cid:1)
CSS for Mobile Devices.........................................................................................................................................................................61(cid:1)
CSS2.................................................................................................................................................................................................62(cid:1)
Wireless CSS and CSS Mobile Profile...............................................................................................................................................62(cid:1)
Determining CSS Support on a Mobile Device..................................................................................................................................68(cid:1)
Best Practices for Mobile CSS..........................................................................................................................................................68(cid:1)
External, Internal, and Inline Stylesheets.........................................................................................................................................69(cid:1)
Media Selectors and Media-Dependent Style Sheets......................................................................................................................70(cid:1)
WML.......................................................................................................................................................................................................71(cid:1)
Tag Hierarchy...................................................................................................................................................................................74(cid:1)
Special Characters...........................................................................................................................................................................74(cid:1)
Header and Metadata.......................................................................................................................................................................75(cid:1)
Text Formatting................................................................................................................................................................................76(cid:1)
Links.................................................................................................................................................................................................78(cid:1)
Images..............................................................................................................................................................................................83(cid:1)
Tables...............................................................................................................................................................................................84(cid:1)
Timers...............................................................................................................................................................................................86(cid:1)
Variables...........................................................................................................................................................................................87(cid:1)
User Input.........................................................................................................................................................................................90(cid:1)
Other WML Language Features........................................................................................................................................................95(cid:1)
Summary...............................................................................................................................................................................................96(cid:1)
■Chapter 4: Device Awareness and Content Adaptation.........................................................97(cid:1)
Device Awareness.................................................................................................................................................................................98(cid:1)
Using HTTP Request Headers to Identify Mobile Devices.................................................................................................................98(cid:1)
Using a Device Database to Obtain Device Capabilities...................................................................................................................99(cid:1)
Content Adaptation..............................................................................................................................................................................120(cid:1)
Creating Device Groups..................................................................................................................................................................122(cid:1)
Choosing Adaptation Points............................................................................................................................................................124(cid:1)
Writing Content Adaptation Rules for Device Groups.....................................................................................................................125(cid:1)
Implementing Content Adaptation..................................................................................................................................................126(cid:1)
vi
■ CONTENTS
Content Adaptation on the Mobile Web..........................................................................................................................................129(cid:1)
Summary.............................................................................................................................................................................................134(cid:1)
■Chapter 5: Adding Interactivity with JavaScript and AJAX................................................135(cid:1)
Iterative Development Approach.........................................................................................................................................................136(cid:1)
JavaScript in Mobile Browsers............................................................................................................................................................136(cid:1)
ECMAScript Mobile Profile..............................................................................................................................................................137(cid:1)
Embedding JavaScript in a Markup Document..............................................................................................................................138(cid:1)
JavaScript Fragmentation in Mobile Browsers...............................................................................................................................142(cid:1)
Examples of Mobile JavaScript......................................................................................................................................................144(cid:1)
AJAX in Mobile Browsers....................................................................................................................................................................148(cid:1)
Example of AJAX for Mobile Browsers...........................................................................................................................................154(cid:1)
Testing AJAX Support in Mobile Browsers.....................................................................................................................................158(cid:1)
Summary.............................................................................................................................................................................................159(cid:1)
Part III: Advanced Mobile Web Development Techniques......................................................161(cid:1)
■Chapter 6: Mobile Web Usability.........................................................................................163(cid:1)
Best Practices for Usable Mobile Web Sites........................................................................................................................................164(cid:1)
Case Study #1: Bank of America....................................................................................................................................................165(cid:1)
Case Study #2: CNN........................................................................................................................................................................166(cid:1)
Case Study #3: Wikipedia...............................................................................................................................................................168(cid:1)
Case Study #4: Flickr......................................................................................................................................................................170(cid:1)
Mobile Browser Layout Comparison...............................................................................................................................................172(cid:1)
Designing Mobile Web pages..............................................................................................................................................................174(cid:1)
Flexible Reference Design..............................................................................................................................................................174(cid:1)
Standard Layout.............................................................................................................................................................................175(cid:1)
News Web Site...............................................................................................................................................................................176(cid:1)
Search Web site..............................................................................................................................................................................177(cid:1)
Service Web Site............................................................................................................................................................................178(cid:1)
Portal Web Site...............................................................................................................................................................................179(cid:1)
Media-Sharing Web Site.................................................................................................................................................................180(cid:1)
Design Guidelines................................................................................................................................................................................181(cid:1)
Tips for Developing Mobile Web Pages..........................................................................................................................................181(cid:1)
Creating a Web Page for the Maximum Number of Users..............................................................................................................183(cid:1)
Creating a Better Mobile User Experience......................................................................................................................................184(cid:1)
Summary.............................................................................................................................................................................................186(cid:1)
■Chapter 7: Enhancing Mobile Web Pages for Smartphone Browsers.................................187(cid:1)
Common Web Techniques for Smartphone Browsers.........................................................................................................................188(cid:1)
Viewport Meta Tag.........................................................................................................................................................................188(cid:1)
Detecting Orientation Changes in JavaScript.................................................................................................................................190(cid:1)
WebKit in Mobile Browsers.................................................................................................................................................................195(cid:1)
Safari Mobile for iPhone......................................................................................................................................................................199(cid:1)
Browser for Android Mobile Devices...................................................................................................................................................200(cid:1)
webOS Browser for Palm Pre..............................................................................................................................................................201(cid:1)
BlackBerry Browser.............................................................................................................................................................................202(cid:1)
Nokia Web Browser on Series 60 Smartphones..................................................................................................................................204(cid:1)
Internet Explorer Mobile for Windows Mobile.....................................................................................................................................206(cid:1)
Opera Mini and Opera Mobile Browsers..............................................................................................................................................207(cid:1)
Summary.............................................................................................................................................................................................210(cid:1)
vii
■ CONTENTS
Part IV: Deploying into the Mobile Ecosystem.......................................................................211(cid:1)
■Chapter 8: Optimizing Mobile Markup................................................................................213(cid:1)
Post-Processing Techniques for Mobile Markup.................................................................................................................................214(cid:1)
Minimize External Resources.........................................................................................................................................................214(cid:1)
Remove Whitespace, Comments and Unnecessary Markup..........................................................................................................216(cid:1)
Adapt and Transcode Images.........................................................................................................................................................223(cid:1)
MIME Multipart Encoding of a Response Document.......................................................................................................................224(cid:1)
Web Server Optimizations for Mobile Browsers..................................................................................................................................229(cid:1)
gzip or deflate Response Compression..........................................................................................................................................229(cid:1)
Caching Directives in HTTP Response Headers..............................................................................................................................232(cid:1)
Summary.............................................................................................................................................................................................238(cid:1)
■Chapter 9: Validating Mobile Markup.................................................................................239(cid:1)
Importance of Valid Markup on the Mobile Web..................................................................................................................................240(cid:1)
What Validation Does Not Test............................................................................................................................................................244(cid:1)
Public Markup Validators.....................................................................................................................................................................245(cid:1)
W3C Markup Validation Service.....................................................................................................................................................246(cid:1)
W3C CSS Validation Service...........................................................................................................................................................248(cid:1)
W3C mobileOK Checker..................................................................................................................................................................250(cid:1)
mobiReady......................................................................................................................................................................................252(cid:1)
Validome.........................................................................................................................................................................................254(cid:1)
Summary.............................................................................................................................................................................................257(cid:1)
■Chapter 10: Testing a Mobile Web Site...............................................................................259(cid:1)
Mobile Web Testing Methodology.......................................................................................................................................................260(cid:1)
Mobile Browser Testing Considerations.........................................................................................................................................262(cid:1)
Choosing Mobile Devices to Use in Testing....................................................................................................................................262(cid:1)
Testing on Actual Mobile Devices........................................................................................................................................................263(cid:1)
Acquiring Mobile Devices...............................................................................................................................................................264(cid:1)
Developer Programs.......................................................................................................................................................................265(cid:1)
Testing in Mobile Emulators................................................................................................................................................................268(cid:1)
Testing in Desktop Browsers...............................................................................................................................................................269(cid:1)
Summary.............................................................................................................................................................................................272(cid:1)
■Chapter 11: Deploying a Mobile Web Site...........................................................................273(cid:1)
Routing Mobile Traffic to a Mobile Web Site.......................................................................................................................................273(cid:1)
Standard Mobile Web Domain and Pathnames..............................................................................................................................274(cid:1)
Mobile Switching Algorithms..........................................................................................................................................................276(cid:1)
Mobile Switching Products.............................................................................................................................................................279(cid:1)
Mobile SEO and Traffic Acquisition.....................................................................................................................................................280(cid:1)
Mobile Search Engines and Crawlers.............................................................................................................................................280(cid:1)
Using Link Relationships for Mobile Site Discovery.......................................................................................................................282(cid:1)
Mobile Sitemaps.............................................................................................................................................................................283(cid:1)
SEO for the Mobile Web..................................................................................................................................................................284(cid:1)
SEO Practices to Forget..................................................................................................................................................................285(cid:1)
Summary.............................................................................................................................................................................................287(cid:1)
■Chapter 12: How to Play Well in the Mobile Ecosystem......................................................289(cid:1)
Operators, Transcoders, and Proxies, Oh My!.....................................................................................................................................289(cid:1)
Transcoders on the Public Internet.................................................................................................................................................292(cid:1)
Standardizing Transcoder Behavior...............................................................................................................................................295(cid:1)
Defensive Programming for the Mobile Web.......................................................................................................................................297(cid:1)
Declaring Your Markup as Mobile-Friendly....................................................................................................................................297(cid:1)
viii