Mobile Design and Development

Mobile Design and Development

by Brian Fling
Released August 2009
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596155445

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

Mobile devices outnumber desktop and laptop computers three to one worldwide, yet little information is available for designing and developing mobile applications. Mobile Design and Development fills that void with practical guidelines, standards, techniques, and best practices for building mobile products from start to finish. With this book, you'll learn basic design and development principles for all mobile devices and platforms. You'll also explore the more advanced capabilities of the mobile web, including markup, advanced styling techniques, and mobile Ajax.

If you're a web designer, web developer, information architect, product manager, usability professional, content publisher, or an entrepreneur new to the mobile web, Mobile Design and Development provides you with the knowledge you need to work with this rapidly developing technology. Mobile Design and Development will help you:

  • Understand how the mobile ecosystem works, how it differs from other mediums, and how to design products for the mobile context
  • Learn the pros and cons of building native applications sold through operators or app stores versus mobile websites or web apps
  • Work with flows, prototypes, usability practices, and screen-size-independent visual designs
  • Use and test cross-platform mobile web standards for older devices, as well as devices that may be available in the future
  • Learn how to justify a mobile product by building it on a budget

Publisher resources

View/Submit Errata

Table of contents

  1. 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
  2. 1. A Brief History of Mobile
    1. In the Beginning
    2. The Evolution of Devices
      1. The Brick Era
      2. The Candy Bar Era
      3. The Feature Phone Era
      4. The Smartphone Era
      5. The Touch Era
  3. 2. The Mobile Ecosystem
    1. Operators
    2. Networks
    3. Devices
    4. Platforms
      1. Licensed
      2. Proprietary
      3. Open Source
    5. Operating Systems
    6. Application Frameworks
      1. Java
      2. S60
      3. BREW
      4. Flash Lite
      5. Windows Mobile
      6. Cocoa Touch
      7. Android SDK
      8. Web Runtimes (WRTs)
      9. WebKit
      10. The Web
    7. Applications
    8. Services
  4. 3. Why Mobile?
    1. Size and Scope of the Mobile Market
    2. The Addressable Mobile Market
      1. High-End Versus Low-End Devices
      2. Best-selling Versus Free
      3. Mobile Web Versus Native Applications
      4. Touch Versus D-Pad
    3. Mobile As a Medium
      1. The Printing Press
      2. Recordings
      3. Cinema
      4. Radio
      5. Television
      6. The Internet
      7. Mobile
        1. Read and publish
        2. Play recordings
        3. Watch movies
        4. Listen to radio
        5. Watch television
        6. Use the Internet
      8. Mobile’s Unique Benefits
    4. The Eighth Mass Medium: What’s Next?
    5. Ubiquity Starts with the Mobile Web
  5. 4. Designing for Context
    1. Thinking in Context
      1. Context with a Capital C
        1. The distracted driver
        2. The eRuv project
      2. Context with a Lowercase c
        1. The present location or physical context
        2. Our present device of access, or media context
        3. Our present state of mind, or modal context
    2. Taking the Next Steps
  6. 5. Developing a Mobile Strategy
    1. New Rules
      1. Rule #1: Forget What You Think You Know
      2. Rule #2: Believe What You See, Not What You Read
      3. Rule #3: Constraints Never Come First
      4. Rule #4: Focus on Context, Goals, and Needs
      5. Rule #5: You Can’t Support Everything
      6. Rule #6: Don’t Convert, Create
      7. Rule #7: Keep It Simple
    2. Summary
  7. 6. Types of Mobile Applications
    1. Mobile Application Medium Types
      1. SMS
        1. Pros
        2. Cons
      2. Mobile Websites
        1. Pros
        2. Cons
      3. Mobile Web Widgets
        1. Pros
        2. Cons
      4. Mobile Web Applications
        1. Pros
        2. Cons
      5. Native Applications
        1. Pros
        2. Cons
      6. Games
        1. Pros
        2. Cons
      7. Mobile Application Media Matrix
      8. Application Context
      9. Utility Context
      10. Locale Context
      11. Informative Applications
      12. Productivity Application Context
      13. Immersive Full-Screen Applications
      14. Application Context Matrix
  8. 7. Mobile Information Architecture
    1. What Is Information Architecture?
    2. Mobile Information Architecture
      1. Keeping It Simple
        1. Support your defined goals
        2. Clear, simple labels
      2. Site Maps
        1. Limit opportunities for mistakes
        2. Confirm the path by teasing content
      3. Clickstreams
      4. Wireframes
      5. Prototyping
        1. Paper prototypes
        2. Context prototype
        3. HTML prototypes
      6. Different Information Architecture for Different Devices
    3. The Design Myth
  9. 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
      1. Context
      2. Message
      3. Look and Feel
      4. Layout
        1. Different layouts for different devices
        2. Fixed versus fluid
      5. Color
        1. The psychology of color
        2. Color palettes
      6. Typography
        1. Subpixels and pixel density
        2. Type options
        3. Font replacement
        4. Readability
      7. Graphics
        1. Iconography
        2. Photos and images
    5. Mobile Design Tools
    6. Designing for the Right Device
    7. Designing for Different Screen Sizes
  10. 9. Mobile Web Apps Versus Native Applications
    1. The Ubiquity Principle
      1. Fragmentation
      2. The Web
      3. Control
      4. Consumer Expectations
      5. Ubiquity in the Mobile Web
    2. When to Make a Native Application
      1. Charging for It
      2. Creating a Game
      3. Using Specific Locations
      4. Using Cameras
      5. Using Accelerometers
      6. Accessing the Filesystems
      7. Offline Users
    3. When to Make a Mobile Web Application
  11. 10. Mobile 2.0
    1. What Is Mobile 2.0?
      1. Mobile 2.0: The Convergence of the Web and Mobile
      2. The Mobile Web Browser As the Next Killer App
      3. Mobile Web Applications Are the Future
      4. JavaScript Is the Next Frontier
        1. Rich interactions kill battery life
      5. The Mobile User Experience Is Awful
      6. Mobile Widgets Are the Next Big Thing
      7. Carrier Is the New “C” Word
      8. Mobile Needs to Check Its Ego
      9. We Are Creators, Not Consumers
  12. 11. Mobile Web Development
    1. Web Standards
    2. Designing for Multiple Mobile Browsers
      1. Progressive Enhancement
        1. Mobile progressive enhancement techniques
      2. DIAL
      3. Designing for Multiple Displays
        1. Fixed versus fluid designs
        2. Single-column versus multiple-column layouts
    3. Device Plans
      1. The Device Matrix
        1. Class A mobile browsers
        2. Class B mobile browsers
        3. Class C mobile browsers
        4. Class D mobile browsers
        5. Class F mobile browsers
    4. Markup
      1. XHTML-MP Overview
        1. XHTML versus XHTML Basic versus XHTML-MP
      2. Document Structure
        1. Doctypes
        2. Character encoding
        3. MIME types
        4. Page titles
        5. Use of stylesheets
        6. Objects and scripts
        7. Auto refresh
        8. Redirects
        9. Caching
        10. Minimal document structure
      3. Text Elements
        1. Headings
        2. Paragraphs
        3. Quotations
        4. Phrase elements
        5. Unordered lists
        6. Ordered lists
        7. Definition lists
        8. Structural elements
        9. Line breaks
        10. Character entity references
      4. Creating Links
        1. Number of links
        2. Access keys
        3. Initiating telephone calls
      5. Images and Objects
        1. Image types
        2. Image sizes
        3. Image dimensions
        4. Image maps
        5. Alt text
        6. Flash and SVG
        7. Embedded audio and video
      6. Tables
        1. Layout tables
        2. Using data tables
        3. Nested tables
      7. Frames
      8. Forms
        1. Free text input controls
        2. Default input mode
      9. Other Recommendations
        1. Validate markup
        2. Pop-up windows
        3. External resources
        4. Total page download size
    5. CSS: Cascading Style Sheets
      1. Wireless CSS and CSS-MP
      2. Box Model
      3. Selectors
        1. Universal selector
        2. Type selector
        3. Descendant selector
        4. Child selector
        5. Adjacent sibling selector
        6. Class selector
        7. ID selector
        8. Simple attribute selector
        9. Advanced attribute selector
        10. Pseudoselectors
      4. Font and Text Properties
        1. Available fonts
        2. Absolute size keywords
        3. Percentage measurements
        4. Length measurements
        5. Additional styling
        6. Text shadow
        7. Font replacement
      5. Basic Box Properties
        1. Height and width
        2. Minimum and maximum dimensions
        3. Margins
        4. Padding
        5. Borders
        6. Box shadow
      6. Color and Backgrounds
        1. Background color
        2. Background image
        3. Multiple background images
      7. Positioning and Page Flow
        1. Display
        2. Floats
        3. Clearing
        4. Positioning
        5. Overflow
        6. Stacking order
    6. JavaScript
  13. 12. iPhone Web Apps
    1. Why WebKit?
      1. A Brief History of WebKit
      2. Background As a Mobile Browser
        1. Web Browser for S60
        2. iPhone and iPod touch
        3. Android
        4. webOS
        5. Myriad Browser
        6. Iris Browser
    2. What Makes It a Mobile Web App?
      1. The Page Model
    3. Markup
      1. XHTML
        1. XHTML-MP
        2. XHTML 2.0
      2. HTML5
        1. The canvas element
        2. Offline data storage
    4. CSS
      1. CSS2
        1. Positioning and page flow
        2. Image replacement
      2. CSS3
        1. The -webkit prefix
        2. Selectors
        3. Multiple background images
        4. Box model sizing
        5. Box shadow
        6. Rounded corners
        7. Border images
        8. Text effects
        9. Text overflow
      3. Visual Effects
        1. Gradients
        2. Masks
        3. Transitions
        4. Transforms
        5. Animations
        6. Hover, clicks, and taps
    5. JavaScript
      1. DHTML
      2. Ajax
      3. Multitouch
      4. Fixed Footer
    6. Creating a Mobile Web App
      1. Defining the Viewport
      2. Full-Screen Mode
      3. Changing the Status Bar Appearance
      4. Adding an Icon
    7. Web Apps As Native Apps
    8. PhoneGap
    9. Tools and Libraries
      1. iPhone GUI PSD
      2. iUI
      3. jQTouch
  14. 13. Adapting to Devices
    1. Why Is Adaptation a “Necessity”?
    2. Strategy #1: Do Nothing
      1. Five Assumptions About One Web
      2. The One Web Aftermath
      3. Using This Strategy with Media Queries
    3. Strategy #2: Progressive Enhancement
      1. The Handheld Media Type
      2. Layering Multiple Stylesheets for Multiple Devices
    4. Strategy #3: Device Targeting
      1. The Device Detection Dilemma
      2. Andy Moore’s Mobile Browser Detection
      3. Greg Mulmash’s Mobile Browser Detection
      4. The Switcher
      5. htaccess-Based Device Detection
      6. JavaScript-Based Device Detection
      7. Reverse Device Detection
      8. WordPress Mobile Plugin
      9. dotMobi WordPress Mobile Pack
      10. Mobile Fu
      11. And Many More…
    5. Strategy #4: Full Adaptation
      1. Working “On Deck”
      2. Working “Off Deck”
      3. WURFL
      4. DeviceAtlas
      5. Volantis
      6. WALL and WNG
      7. Yahoo! Blueprint
      8. Netbiscuits
      9. MobileAware
      10. Mobify
    6. What Domain Do I Use?
      1. m.domain.com
      2. domain.com/mobile or domain.com/m
      3. domain.mobi
    7. Taking the Next Step
  15. 14. Making Money in Mobile
    1. Working with Operators
      1. The Deck
        1. Getting “on deck”
        2. Benefits of the deck
      2. ARPU
      3. BoBo
    2. Working with an App Store
      1. What About the Mobile Web?
    3. Add Advertising
      1. AdMob and Google AdSense
      2. The Mobile Marketing Association
    4. Invent a New Model
  16. 15. Supporting Devices
    1. Having a Device Plan
      1. Deciding What to Support
      2. Example Device Plans
        1. A mobile website
        2. A mobile web app
        3. A mobile commerce portal
    2. Device Testing
      1. Access to Devices
        1. Guerrilla testing
        2. Mobile Monday device libraries
      2. Estimating the Testing Effort
      3. Creating a Test Plan
        1. Functional tests
        2. Context tests
      4. Creating a Test Portal
    3. Desktop Testing
      1. Frames
      2. Opera
      3. WebKit
      4. Firefox
      5. Collecting User Agents
      6. Simulators and Emulators
      7. Remote Access
    4. Usability Testing
      1. Mobile Usability Test Tips and Tricks
  17. 16. The Future of Mobile
    1. The Opportunity for Change
  18. Index
  19. About the Author
  20. Colophon
  21. Copyright

Product information

  • Title: Mobile Design and Development
  • Author(s): Brian Fling
  • Release date: August 2009
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596155445