Beginning Smartphone Web Development (eBook)

Gail Rahn Frederick is an expert web developer and software architect in the mobile industry. Her products target 500+ device models and have been deployed at 10+ mobile operators in North America and Europe. She advocates standards-based mobile development techniques as a blogger and conference presenter. Gail teaches standards-based mobile web development in Portland, Oregon. Her students learn mobile markup languages, mobile design and usability, content adaptation, best practices, advanced web development for smartphones and defensive programming for the mobile ecosystem.

Dadication Page 4
Table of Contents 6
About the Authors 11
About the Technical Reviewers 12
Acknowledgments 13
Introduction 14
Part I: Getting Started with Mobile Web Development 15
Chapter 1: Untroduction to Mobile Web Development 16
Mobile Web vs. Desktop Web 17
Mobile Markup Languages 19
HTML and XHTML 20
XHTML Mobile Profile 20
WML 21
Other Mobile Markup Languages 22
HDML 22
CHTML 23
XHTML Basic 23
Mobile Scripting Languages 23
Mobile Style Sheets 24
Mobile Industry Groups and Standards Bodies 24
The Mobile Ecosystem 25
Code Samples 26
Summary 26
Chapter 2: Set Up Your Mobile Web Development Environment 27
Recommended IDEs 28
Mobile MIME Types 31
Web Server Configuration 33
Apache 33
Microsoft IIS 33
Nginx 34
Mobile Web Browsers on the Desktop 34
Firefox and Mobile Add-Ons 35
XHTML Mobile Profile 36
wmlbrowser 37
User Agent Switcher 37
Modify Headers 39
Live HTTP Headers 41
Small Screen Renderer 43
Firebug 45
Mobile Browser Emulators 46
Actual Mobile Devices 51
Other Development Tools 51
File Comparison 51
Source Code Control 52
Summary 55
Part II: The Syntax of the Mobile Web 56
Chapter 3: Mobile Markup Languages 57
Selecting a Mobile Markup Language 57
XHTML 58
Why Not HTML? 59
HTML 5 59
XHTML-MP 61
Example XHTML-MP Document 61
DTDs for XHTML-MP 62
XHTML Elements Not Supported in XHTML-MP 62
Updated and Mobile-Specific Features in XHTML-MP 63
URI Schemes 63
Forms 64
Tables 66
Links and Access Keys 67
Embedded Objects 69
Common Implementation Bugs 69
XHTML-MP 1.1 70
XHTML-MP 1.2 71
Best Practices for XHTML-MP Web Development 71
CSS for Mobile Devices 71
CSS2 72
Wireless CSS and CSS Mobile Profile 72
Determining CSS Support on a Mobile Device 78
Best Practices for Mobile CSS 78
External, Internal, and Inline Stylesheets 79
Media Selectors and Media-Dependent Style Sheets 80
WML 81
Tag Hierarchy 84
Special Characters 84
Header and Metadata 85
Text Formatting 86
Links 88
< a>
< anchor>
< do>
Images 93
Tables 94
Timers 96
Variables 97
User Input 100
Other WML Language Features 105
Summary 106
Chapter 4: Device Awareness and Content Adaptation 107
Device Awareness 108
Using HTTP Request Headers to Identify Mobile Devices 108
Using a Device Database to Obtain Device Capabilities 109
WURFL Device Database 110
Common WURFL Device Characteristics 115
Code Samples Using the WURFL API 117
Contributing Device Data to WURFL 120
DeviceAtlas Device Database 121
Common DeviceAtlas Device Characteristics 125
Code Samples Using the DeviceAtlas API 126
Contributing Device Data to DeviceAtlas 129
Content Adaptation 130
Creating Device Groups 132
Choosing Adaptation Points 134
Writing Content Adaptation Rules for Device Groups 135
Implementing Content Adaptation 136
Content Adaptation on the Mobile Web 139
Summary 144
Chapter 5: Adding Interactivity with JavaScript and AJAX 145
Iterative Development Approach 146
JavaScript in Mobile Browsers 146
ECMAScript Mobile Profile 147
Embedding JavaScript in a Markup Document 148
Supported JavaScript Events in XHTML-MP 1.1 149
JavaScript Fragmentation in Mobile Browser 152
Examples of Mobile JavaScript 154
AJAX in Mobile Browsers 158
Example of AJAX for Mobile Browsers 164
Testing AJAX Support in Mobile Browsers 168
Summary 169
Part III: Advanced Mobile Web Development Techniques 170
Chapter 6: Mobile Web Usability 171
Best Practices for Usable Mobile Web Sites 172
Case Study #1: Bank of America 173
Features of the Bank of America Mobile Web Site 173
Case Study #2: CNN 174
Features of CNN Mobile Web Site 175
Case Study #3: Wikipedia 176
Features of Wikipedia Mobile Web site 177
Case Study #4: Flickr 178
Features of Flickr Mobile Web site 179
Mobile Browser Layout Comparison 8
Designing Mobile Web pages 182
Flexible Reference Design 182
Standard Layout 183
News Web Site 184
Search Web site 185
Service Web Site 186
Portal Web Site 187
Media-Sharing Web Site 188
Design Guidelines 189
Tips for Developing Mobile Web Pages 189
Creating a Web Page for the Maximum Number of Users 191
Creating a Better Mobile User Experience 192
Summary 194
Chapter 7: Enhancing Mobile Web Pages for Smartphone Browsers 195
Common Web Techniques for Smartphone Browsers 196
Viewport Meta Tag 196
Detecting Orientation Changes in JavaScript 198
WebKit in Mobile Browsers 203
Safari Mobile for iPhone 207
Browser for Android Mobile Devices 208
webOS Browser for Palm Pre 209
BlackBerry Browser 210
Nokia Web Browser on Series 60 Smartphones 212
Internet Explorer Mobile for Windows Mobile 214
Opera Mini and Opera Mobile Browsers 215
Summary 218
Part IV: Deploying into the Mobile Ecosystem 219
Chapter 8: Optimizing Mobile Markup 220
Post-Processing Techniques for Mobile Markup 221
Minimize External Resources 221
Remove Whitespace, Comments and Unnecessary Markup 223
Adapt and Transcode Images 230
MIME Multipart Encoding of a Response Document 231
Web Server Optimizations for Mobile Browsers 236
gzip or deflate Response Compression 236
Apache Web Server Configuration 237
Microsoft IIS Web Server Configuration 238
Caching Directives in HTTP Response Heade 239
The Date HTTP Header 239
The Last-Modified HTTP Header 239
The Expires HTTP Header 240
The Cache-Control HTTP Header 240
The Pragma HTTP Header 242
The Vary HTTP Header 242
Examples of Caching Directives in HTTP Response Headers 243
Summary 245
Chapter 9: Validating Mobile Markup 246
Importance of Valid Markup on the Mobile Web 247
What Validation Does Not Test 251
Public Markup Validators 252
W3C Markup Validation Service 253
W3C CSS Validation Service 255
W3C mobileOK Checker 257
mobiReady 259
Validome 261
Summary 264
Chapter 10: Testing a Mobile Web Site 265
Mobile Web Testing Methodology 266
Mobile Browser Testing Considerations 268
Choosing Mobile Devices to Use in Testing 268
Testing on Actual Mobile Devices 269
Acquiring Mobile Devices 270
Developer Programs 271
Testing in Mobile Emulators 274
Testing in Desktop Browsers 275
Summary 278
Chapter 11: Deploying a Mobile Web Site 279
Routing Mobile Traffic to a Mobile Web Site 279
Standard Mobile Web Domain and Pathnames 280
Mobile Switching Algorithms 282
Mobile Switching Products 285
Mobile SEO and Traffic Acquisition 286
Mobile Search Engines and Crawlers 286
Using Link Relationships for Mobile Site Discovery 288
Mobile Sitemaps 289
SEO for the Mobile Web 290
SEO Practices to Forget 291
Summary 293
Chapter 12: How to Play Well in the Mobile Ecosystem 294
Operators, Transcoders, and Proxies, Oh My! 294
Transcoders on the Public Internet 297
Standardizing Transcoder Behavior 300
Defensive Programming for the Mobile Web 302
Declaring Your Markup as Mobile-Friendly 302
Using a Self-Referencing Link Relationship 302
Using META Tags 303
Using Response Headers and Document Size 303
Identifying Requests from Transcoders 303
Summary 307
Chapter 13: The Future of the Mobile Web 308
Mobile Web Experts on the Future of Mobility 309
Summary 318
Part V: Appendixes 319
Appendix A: Sample User-Agents from Mobile Devices 320
User-Agents from Mobile Devices 320
LG VX-9100 320
Nokia 5310b XpressMusic 320
SonyEricsson C905 321
Motorola Droid 321
Motorola Cliq (MB200) 321
Android G1 Developer Edition 321
Palm Pre 322
Apple iPhone 322
Blackberry Curve 8310 322
How to Capture the User-Agent for a Mobile Device 322
Appendix B: Sample Request Headers from Mobile Devices 324
Request Headers from Mobile Devices 324
LG VX-9100 324
Nokia 5310b XpressMusic 325
SonyEricsson C905 325
Motorola Droid 325
Motorola Cliq (MB200) 326
Android G1 Developer Edition 326
Palm Pre 326
Apple iPhone 326
Blackberry Curve 8310 327
How to Capture Headers from a Mobile Device 327
Appendix C: Glossary 328
AJAX (Asynchronous JavaScript and XML) 328
CHTML (Compact HTML) 328
CSS (Cascading Style Sheets) 328
CSS Mobile Profile (or CSS MP) 328
D-Pad (Directional Pad) 329
Desktop Web 329
Device Database 329
Device Description Repository 329
Emulator 329
Featurephone 329
Hard Key 330
HDML 330
HTML 330
HTTP 330
Hybrid Application 330
i-mode 330
IDE 330
JavaScript 331
Microbrowser or Mobile Browser 331
MIME Type (or Media Type, Content Type) 331
Minification 331
Mobile Web 331
Native Application 332
OEM 332
OTA 332
RFC 332
Simulator 332
Smartphone 332
Soft Key 332
Software Keyboard 332
User Agent Profile 332
WAP 333
WBMP 333
Web Application 333
Wireless CSS (or WAP CSS) 333
WML 333
XHTML 334
XHTML Basic 334
XHTML Mobile Profile (XHTML-MP) 334
Appendix D: Case Study: Testing Mobile Browser Caching and Performance 335
Index 339