You are previewing Mobile Design and Development.

Mobile Design and Development

Cover of Mobile Design and Development by Brian Fling Published by O'Reilly Media, Inc.
  1. Mobile Design and Development
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Who This Book Is For
      2. How This Book Is Organized
      3. Conventions Used in This Book
      4. Using Code Examples
      5. How to Contact Us
      6. Safari® Books Online
      7. Acknowledgments
    3. 1. A Brief History of Mobile
      1. In the Beginning
      2. The Evolution of Devices
    4. 2. The Mobile Ecosystem
      1. Operators
      2. Networks
      3. Devices
      4. Platforms
      5. Operating Systems
      6. Application Frameworks
      7. Applications
      8. Services
    5. 3. Why Mobile?
      1. Size and Scope of the Mobile Market
      2. The Addressable Mobile Market
      3. Mobile As a Medium
      4. The Eighth Mass Medium: What’s Next?
      5. Ubiquity Starts with the Mobile Web
    6. 4. Designing for Context
      1. Thinking in Context
      2. Taking the Next Steps
    7. 5. Developing a Mobile Strategy
      1. New Rules
      2. Summary
    8. 6. Types of Mobile Applications
      1. Mobile Application Medium Types
    9. 7. Mobile Information Architecture
      1. What Is Information Architecture?
      2. Mobile Information Architecture
      3. The Design Myth
    10. 8. Mobile Design
      1. Interpreting Design
      2. The Mobile Design Tent-Pole
      3. Designing for the Best Possible Experience
      4. The Elements of Mobile Design
      5. Mobile Design Tools
      6. Designing for the Right Device
      7. Designing for Different Screen Sizes
    11. 9. Mobile Web Apps Versus Native Applications
      1. The Ubiquity Principle
      2. When to Make a Native Application
      3. When to Make a Mobile Web Application
    12. 10. Mobile 2.0
      1. What Is Mobile 2.0?
    13. 11. Mobile Web Development
      1. Web Standards
      2. Designing for Multiple Mobile Browsers
      3. Device Plans
      4. Markup
      5. CSS: Cascading Style Sheets
      6. JavaScript
    14. 12. iPhone Web Apps
      1. Why WebKit?
      2. What Makes It a Mobile Web App?
      3. Markup
      4. CSS
      5. JavaScript
      6. Creating a Mobile Web App
      7. Web Apps As Native Apps
      8. PhoneGap
      9. Tools and Libraries
    15. 13. Adapting to Devices
      1. Why Is Adaptation a “Necessity”?
      2. Strategy #1: Do Nothing
      3. Strategy #2: Progressive Enhancement
      4. Strategy #3: Device Targeting
      5. Strategy #4: Full Adaptation
      6. What Domain Do I Use?
      7. Taking the Next Step
    16. 14. Making Money in Mobile
      1. Working with Operators
      2. Working with an App Store
      3. Add Advertising
      4. Invent a New Model
    17. 15. Supporting Devices
      1. Having a Device Plan
      2. Device Testing
      3. Desktop Testing
      4. Usability Testing
    18. 16. The Future of Mobile
      1. The Opportunity for Change
    19. Index
    20. About the Author
    21. Colophon
    22. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Desktop Testing

A big advantage of mobile web products is that you can do the majority of your testing from your desktop before ever getting it on a device. You can verify the majority of your markup, styles, and JavaScript, as well doing functional tests on desktop browsers, before putting them on devices and doing your context tests. Desktop testing reduces the time span between developing a feature, testing a feature, and fixing a feature, and ultimately allows you to spend less time dealing with devices.


Many web browsers have a minimum window size that is larger than your average device screen, making it impractical for testing mobile websites or web apps in a desktop browser. This is where inline framesets, or iframes, come in handy. Create a web page with an iframe, specifying the dimensions to match your target mobile screen (as shown in the following code), and then add the URL to your mobile project:

<iframe src ="mobile/index.html" width="240px" height="320px"
style="border:1px solid;"> </iframe>

Because you can embed multiple iframes in a single page, each pointing to the same URL, you can view how your page will look in multiple screen dimensions from a single page. For demonstration purposes, I often use an image of the target device as a background, positioning the iframe where the screen should go, presenting the mobile project as if it were on the device.


The Opera desktop browser has a Small Screen view (see Figure 15-5) that mimics a mobile screen, loading ...

The best content for your career. Discover unlimited learning on demand for around $1/day.