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 Apress 8
V Contents Contents at a Glance Contents About the Authors About the Technical Reviewers Acknowledgments Introduction iv v x xi xii 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 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 g
vi 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 Implementing Content Adaptation 126
CONTENTS 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 vii
CONTENTS Part IV: Deploying into the Mobile Ecosystem 211 Chapter 8: Optimizing Mobile Markup 213 viii 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 Declaring Your Markup as Mobile-Friendly 297
ix CONTENTS 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 Appendix C: Glossary 325 Appendix D: Case Study: Testing Mobile Browser Caching and Performance 333 Index 337