Table of Contents

-1. Preface

    1. Who Should Read This Book
    2. What’s in This Book
    3. Where to Find Help
       1. The SitePoint Forums
       2. The Book’s Website
    4. The SitePoint Newsletters
    5. The SitePoint Podcast
    6. Your Feedback
    7. Acknowledgments
       1. Earle Castledine
       2. Myles Eftos
       3. Max Wheeler
    8. Conventions Used in This Book
       1. Code Samples
       2. Tips, Notes, and Warnings

0. 1. Introduction to Mobile Web Design

   1. What does it mean?
   2. Why does it matter?
   3. The Natives Are Restless
      1. The Problem with Going Native
   4. Start at the Beginning
   5. An App is not Enough
      1. Option One: Nada
      2. Option Two: Transform and Move Out
      3. Option Three: Forever Alone
   6. A Note on Frameworks
   7. Rolling Up Our Sleeves

1. 2. Design for Mobile

   1. Build a Better Mouse
      1. Hover Me
      2. Small Screens
      3. Cognitive Load
   2. Standing on the Shoulders of Giants
      1. The Carousel
      2. Tab Bar
      3. Lists
      4. Summary
   3. Putting It Into Practice
      1. Thinking Big
      2. Putting Together a User Profile
      3. Deciding on a Core Feature Set
   4. Sketches
      1. Finding Sightings By Location
      2. Overview and Detail
      3. Finding Sightings by Celebrity
      4. Adding a Sighting
      5. Tying It All Together
      6. The Fix Is Out
      7. Home Screen
   5. Establish a Style
      1. Touchable Interfaces
      2. Interface Icons
      3. Typography
      4. Performance Considerations
   6. Testing Design
   7. Reviewing Our Design
   8. Application Icons
   9. Ready to Shine

2. 3. Markup for Mobile

   1. Style over Substance
      1. The Tab Bar
      2. Rows, Rows, Rows
      3. Images and Pseudo-elements
   2. Understanding the Viewport
   3. Know Your (Resource) Limits
   4. Let’s Get Progressive
      1. Modernizr to the Rescue
      2. Building on Our Base
   5. Scalable Images
      1. Pixel Perfection
   6. Dealing with the Media
   7. Standalone Mode
      1. Tell Your Users
   8. Application Icons
   9. Extra Credit
      1. Text Overflow with Ellipsis
      2. Text Size Adjust
      3. Tap Highlight Color
      4. Touch Callout
      5. User Select
   10. Performance Matters
   11. Moving On

3. 4. Mobile Web Apps

   1. Setting up Shop
      1. Frameworks and Libraries
      2. Debugging Mobile JavaScript
   2. Events
      1. Simple Touch Events
      2. Clicking with Feature Detection
   3. Quick Wins
      1. Nifty Links
      2. Form Field Attributes
   4. Loading Pages
      1. Swapping Pages
      2. Fading with WebKit Animations
      3. Sliding
      4. Going Backwards
   5. Ajax
      1. Fetching HTML
      2. Ajaxifying Links
   6. Templating
      1. Twitter Integration with Templating
   7. We Have an App!

4. 5. Using Device Features from Web Apps

   1. Geolocation
      1. Fetching Location
      2. Handling Errors
   2. Device Rotation
   3. Accelerometers: Device Orientation
      1. Accelerometers
      2. Shake Gesture
   4. Touch Gestures
      1. Swiping Photo Gallery
      2. Pinch and Zoom
   5. Going Offline
      1. The Cache Manifest
      2. Cache Manifest Events
      3. Network and Fallback
   6. An Eventful Chapter

5. 6. Polishing Up Our App

   1. Web App Tricks
      1. Fixed Menus
      2. Clicking Faster
      3. Loading Your Libraries
      4. Feature Detection
   2. Widgets
      1. Dialog Boxes
      2. Spinners
   3. Storing Data on the Client
      1. Local Storage
      2. Web SQL Database
   4. Tying Everything Together
      1. Modules
      2. Custom Events
   5. Other Frameworks
   6. Conclusion

6. 7. Introducing PhoneGap

   1. Embedding Web Pages in Native Apps
   2. PhoneGap
   3. Considerations
      1. Learn to Love Callbacks
      2. Debugging Is Painful
      3. The Uncanny Valley
      4. App Marketplaces Can Be Complicated
   4. Alternatives
   5. Installing the SDKs
      1. Xcode (OS X)
      2. MacPorts (OS X)
      3. Git
      4. The Java Development Kit
      5. Eclipse
      6. Apache Ant
      7. Apple iOS SDK
      8. Android SDK
      9. BlackBerry SDK
      10. WebOS SDK
   6. Installing PhoneGap
      1. Xcode
      2. Android
      3. BlackBerry
      4. WebOS
   7. Review

7. 8. Making Our Application Native

   1. The Anatomy of a PhoneGap Application
   2. Icons, Splash Screens, and Names
      1. iOS
      2. Android
   3. BlackBerry
   4. WebOS
   5. Time to Tweak
      1. PhoneGap JavaScript Helpers
      2. Are we ready?
      3. Alerts
      4. Network Checks
      5. Geolocation, Storage, and Device Orientation
      6. Hardware Buttons
      7. Paparazzi—Accessing the Camera
   6. Running for Real
      1. iOS
      2. Android
      3. BlackBerry
      4. WebOS
   7. Selling Your App
      1. The Apple App Store
      2. The Android Market
      3. BlackBerry App World
      4. Palm App Catalog
   8. Time for Celebration

8. A. Running a Server for Testing

   1. Using Python
   2. Using Ruby
   3. Built-in Servers
      1. Built-in Servers: IIS on Windows
      2. Built-in Servers: Apache on Linux

9. Index