Beginning Smartphone
Web Development
I3.|jl!c;llirici JavaScript C;SS,
f
HTML and A-,
p p I i с at i о n s f о r«P ri о n e,, А л ei ro i ci, P a ! ei P re, Eli ас к I
Windows Мкаане, and iNotaa S60
Gail Rahn Frederick
with Rajesh Lai
Contents
Contents at a Glance iv
Contents v
About the Authors x
About the Technical Reviewers xi
Acknowledgments xii
Introduction xiii
Part I: Getting Started with Mobile Web Development 1
Chapter 1: Untroduction to Mobile Web Development 3
Mobile Web vs. Desktop Web 4 Mobile Markup Languages 6
HTML and XHTML 7 XHTML Mobile Profile 7
WML 8 Other Mobile Markup Languages g
Mobile Scripting Languages 10 Mobile Style Sheets 11 Mobile Industry Groups and Standards Bodies 11
The Mobile Ecosystem 12 Code Samples 13 Summary 13
Chapter 2: Set Up Your Mobile Web Development Environment 15
Recommended IDEs 16 Mobile MIME Types 19 Web Server Configuration 21
Apache 21 Microsoft IIS 21 Nginx 22
CONTENTS
Mobile Web Browsers on the Desktop 22 Firefox and Mobile Add-Ons 23 Mobile Browser Emulators 34 Actual Mobile Devices 39 Other Development Tools 39
File Comparison 39 Source Code Control 40
Summary 43
Part II: The Syntax of the Mobile Web 45
Chapter 3: Mobile Markup Languages 47
Selecting a Mobile Markup Language 47
XHTML 48 Why Not HTML? 49 HTML 5 49 XHTML-MP 51 Example XHTML-MP Document 51 DTDs for XHTML-MP 52 XHTML Elements Not Supported in XHTML-MP 52
Updated and Mobile-Specific Features in XHTML-MP 53
Common Implementation Bugs 59
CSS for Mobile Devices 61
CSS2 62 Wireless CSS and CSS Mobile Profile 62
Determining CSS Support on a Mobile Device 68
Best Practices for Mobile CSS 68 External, Internal, and Inline Stylesheets 69
Media Selectors and Media-Dependent Style Sheets 70
WML 71 Tag Hierarchy 74
Special Characters 74 Header and Metadata 75 Text Formatting 76 Links 78 Images 83 Tables 84 Timers 86 Variables 87 User Input 90 Other WML Language Features 95
Summary 96
Chapter 4: Device Awareness and Content Adaptation 97
Device Awareness 98 Using HTTP Request Headers to Identify Mobile Devices 98
Using a Device Database to Obtain Device Capabilities 99
Content Adaptation 120 Creating Device Groups 122 Choosing Adaptation Points 124 Writing Content Adaptation Rules for Device Groups 125
Content Adaptation on the Mobile Web 129
Summary 134
•Chapter 5: Adding Interactivity with JavaScript and AJAX 135
Iterative Development Approach 136 JavaScript in Mobile Browsers 136
ECMAScript Mobile Profile 137 Embedding JavaScript in a Markup Document 138
JavaScript Fragmentation in Mobile Browsers 142
Examples of Mobile JavaScript 144 AJAX in Mobile Browsers 148
Example of AJAX for Mobile Browsers 154 Testing AJAX Support in Mobile Browsers 158
Summary 159
Part III: Advanced Mobile Web Development Techniques 161
•Chapter 6: Mobile Web Usability 163
Best Practices for Usable Mobile Web Sites 164 Case Study #1: Bank of America 165
Case Study #2: CNN 166 Case Study #3: Wikipedia 168 Case Study #4: Flickr 170
Mobile Browser Layout Comparison 172
Designing Mobile Web pages 174 Flexible Reference Design 174
Standardlayout 175 News Web Site 176 Search Web site 177 Service Web Site 178 Portal Web Site 179 Media-Sharing Web Site 180
Design Guidelines 181 Tips for Developing Mobile Web Pages 181
Creating a Web Page for the Maximum Number of Users 183
Creating a Better Mobile User Experience 184
Summary 186
Chapter 7: Enhancing Mobile Web Pages for Smartphone Browsers 187
Common Web Techniques for Smartphone Browsers 188
Viewport Meta Tag 188 Detecting Orientation Changes in JavaScript 190
WebKitin Mobile Browsers 195 Safari Mobile for iPhone 199 Browser for Android Mobile Devices 200
webOS Browser for Palm Pre 201 BlackBerry Browser 202 Nokia Web Browser on Series 60 Smartphones 204
Internet Explorer Mobile for Windows Mobile 206 Opera Mini and Opera Mobile Browsers 207
Summary 210
CONTENTS
Part IV: Deploying into the Mobile Ecosystem 211
Chapter 8: Optimizing Mobile Markup 213
Post-Processing Techniques for Mobile Markup 214
Minimize External Resources 214 Remove Whitespace, Comments and Unnecessary Markup 216
Adapt and Transcode Images 223 MIME Multipart Encoding of a Response Document 224
Web Server Optimizations for Mobile Browsers 229 gzip or deflate Response Compression 229 Caching Directives in HTTP Response Headers 232
Summary 238
Chapter 9: Validating Mobile Markup 239
Importance of Valid Markup on the Mobile Web 240
What Validation Does Not Test 244 Public Markup Validators 245
W3C Markup Validation Service 246 W3C CSS Validation Service 248 W3C mobileOK Checker 250
mobiReady 252 Validome 254 Summary 257
Chapter 10: Testing a Mobile Web Site 259
Mobile Web Testing Methodology 260 Mobile Browser Testing Considerations 262 Choosing Mobile Devices to Use in Testing 262
Testing on Actual Mobile Devices 263 Acquiring Mobile Devices 264 Developer Programs 265 Testing in Mobile Emulators 268 Testing in Desktop Browsers 269
Summary 272
Chapter 11: Deploying a Mobile Web Site 273
Routing Mobile Traffic to a Mobile Web Site 273 Standard Mobile Web Domain and Pathnames 274
Mobile Switching Algorithms 276 Mobile Switching Products 279 Mobile SEO and Traffic Acquisition 280
Mobile Search Engines and Crawlers 280 Using Link Relationships for Mobile Site Discovery 282
Mobile Sitemaps 283 SEO for the Mobile Web 284 SEO Practices to Forget 285
Summary 287
Chapter 12: How to Play Well in the Mobile Ecosystem 289
Operators, Transcoders, and Proxies, Oh My! 289 Transcoders on the Public Internet 292 Standardizing Transcoder Behavior 295 Defensive Programming for the Mobile Web 297
Identifying Requests from Transcoders 298
Summary 302
Chapter 13: The Future of the IVIobile Web 303
Mobile Web Experts on the Future of Mobility 304
Summary 313
Part V: Appendixes 315
Appendix A: Sample User-Agents from IVIobile Devices 317
User-Agents from Mobile Devices 317
LGVX-9100 317 Nokia 5310b XpressMusic 317
SonyEricsson C905 318 Motorola Droid 318 Motorola Cliq (MB200) 318 Android G1 Developer Edition 318
Palm Pre 319 Apple iPhone 319 Blackberry Curve 8310 319 How to Capture the User-Agent for a Mobile Device 319
Appendix B: Sample Request Headers from Mobile Devices 321
Request Headers from Mobile Devices 321
LGVX-9100 321 Nokia 5310b XpressMusic 322
SonyEricsson C905 322 Motorola Droid 322 Motorola Cliq (MB200) 323 Android G1 Developer Edition 323
Palm Pre 323 Apple iPhone 323 Blackberry Curve 8310 324
How to Capture Headers from a Mobile Device 324
