Mobile Design and Development by Brian Fling

A start to finish guide for designing and building mobile apps regardless of experience, device or platform.

Read it online for free »

Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps the book our founder and creative director Brian Fling wrote in 2008-2009 and published by O’Reilly in September 2009. Brian took on the daunting challenge to write the mobile guide missing from bookshelves. As Brian describes it “this is a book that teaches people how to cook, not a collection of recipes.”

Since its release the book has been incredibly well received. It has being described as a “must have” by many experts in the mobile community. The 16 chapters, and 85,000 words within the book have helped thousands understand and dive into mobile. And now—thanks to kind support from O’Reilly—the entire book is available for free online at mobiledesign.org while Brian updates the content to reflect the latest advances in mobile design.

A full list of the mobile topics included in the book

  • A Brief History of Mobile
    • In the Beginning
    • The Evolution of Devices
    • The Brick Era
    • The Candy Bar Era
    • The Feature Phone Era
    • The Smartphone Era
    • The Touch Era
  • The Mobile Ecosystem
    • Operators
    • Networks
    • Devices
    • Platforms
    • Operating Systems
    • Application Frameworks
    • Applications
    • Services
  • Why Mobile?
    • Size and Scope of the Mobile Market
    • Addressable Mobile Market
    • Mobile As a Medium
    • The Eighth Mass Medium
    • Ubiquity Starts with the Mobile Web
  • Designing for Context
    • Thinking in Context
    • Context with a Capital C
    • Context with a Lowercase c
    • Taking Next Steps
  • Developing a Mobile Strategy
    • New Rules
    • Forget What You Think You Know
    • Believe What You See, Not What You Read
    • Constraints Never Come First
    • Focus on Context, Goals and Needs
    • You Can’t Support Everything
    • Don’t Convert, Create
    • Keep it Simple
  • Types of Mobile Applications
  • Mobile Application Medium Types
    • SMS
    • Mobile Websites
    • Mobile Web Widgets
    • Mobile Web Applications
    • Native Applications
    • Games
  • Mobile Application Media Matrix
    • Application Context
    • Utility Context
    • Locale Context
    • Information Applications
    • Productivity Applications
    • Immersive Full-Screen Applications
    • Application Context Matrix
  • Mobile Information Architecture
    • What is Information Architecture?
    • Mobile IA
    • Keeping It Simple
    • Site Maps
    • Clickstreams
    • Wireframes
    • Prototyping
    • Different IA for Different Devices
    • The Design Myth
  • Mobile Design
    • Interpreting Design
    • Mobile Design Tent-Pole
    • Designing for the Best Possible Experience
  • The Elements of Mobile Design
    • Context
    • Message
    • Look and Feel
    • Layout
    • Color
    • Typography
    • Graphics
  • Mobile Design Tools
    • Designing for the Right Device
    • Designing for Different Screen Sizes
  • Mobile Web Apps Versus Native Applications
    • The Ubiquity Principle
    • Fragmentation
    • The Web
    • Control
    • Consumer Expectations
    • Ubiquity in the Mobile Web
  • When to Make a Native Application
    • Charging for It
    • Creating a Game
    • Using Specific Locations
    • Using Cameras
    • Using Accelerometers
    • Accessing the Filesystems
    • Offline Users
  • When to Make a Mobile Web Application
  • Mobile 2.0
    • What is Mobile 2.0?
    • The Convergence of the Web and Mobile
    • The Mobile Web Browser As the Next Killer App
    • Mobile Web Applications Are the Future
    • Javascript Is the Next Frontier
    • Rich interactions kill battery life
    • The Mobile User Experience Is Awful
    • Mobile Widgets Are the Next Big Thing
    • Carrier Is the New “C” Word
    • Mobile Needs to Check Its Ego
    • We Are Creator, Not Consumers
  • Mobile Web Development
    • Web Standards
    • Designing for Multiple Mobile Browsers
    • Progressive Enhancement Overview
    • DIAL
    • Designing for Multiple Displays
    • Device Plans
    • The Device Matrix
  • Markup
    • XHTML-MP Overview
    • Document Structure
    • Text Elements
    • Creating Links
    • Images and Objects
    • Tables
    • Frames
    • Forms
    • Other Recommendations
  • CSS: Cascading Style Sheets
    • Wireless CSS and CSS-MP
    • Box Model
    • Selectors
    • Font and Text Properties
    • Basic Box Properties
    • Color and Backgrounds
    • Positioning and Page Flow
  • JavaScript
  • iPhone Web Apps
    • Why WebKit?
    • A Brief History of WebKit
    • Background As a Mobile Browser
    • What Makes It a Mobile Web App?
    • The Page Model
  • iPhone Markup
    • XHTML
    • HTML5
  • iPhone CSS
    • CSS2
    • CSS3
    • Visual Effects
  • iPhone Javascript
    • DHTML
    • Ajax
    • Multitouch
    • Fixed Footer
  • Creating a Mobile Web App
    • Defining the Viewport
    • Full-Screen Mode
    • Changing the Status Bar Appearance
    • Adding an Icon
  • Web Apps as Native App
    • PhoneGap
  • Tools and Libraries
    • iPhone GUI PSD
    • iUI
    • jQTouch
  • Adapting to Devices
    • Why Is Adaptation a “Necessity”?
    • Do Nothing
    • Five Assumptions About One Web
    • The One Web Aftermath
    • Using This Strategy with Media Queries
    • Progressive Enhancement
    • The Handheld Media Type
    • Layering Multiple Stylesheets for Multiple Devices
  • Device Targeting
    • The Device Detection Dilemma
    • Andy Moore’s Mobile Browser Detection
    • Greg Mulmash’s Mobile Browser Detection
    • The Switcher
    • htaccess-Based Device Detection
    • JavaScript-Based Device Detection
    • Reverse Device Detection
    • WordPress Mobile Plug-in
    • dotMobi WordPress Mobile Pack
    • Mobile Fu
    • And Many More…
  • Full Adaptation
    • Working “On Deck”
    • Working “Off Deck”
    • WURFL
    • DeviceAtlas
    • Volantis
    • WALL and WNG
    • Yahoo! Blueprint
    • Netbiscuits
    • MobileAware
    • Mobify
  • What Domain Do I Use?
    • m.domain.com
    • domain.com/mobile or domain.com/m
    • domain.mobi
    • Taking the Next Step
  • Making Money in Mobile
    • Working with Operators
    • The Deck
    • ARPU
    • BoBo
  • Working with an App Store
    • What About the Mobile Web?
  • Add Advertising
    • AdMob and Google AdSense
    • The Mobile Marketing Association
    • Invent a New Model
  • Supporting Devices
    • Having a Device Plan
    • Deciding What to Support
    • Example Device Plans
  • Device Testing
    • Access to Devices
    • Estimating the Testing Effort
    • Creating a Test Plan
    • Creating a Test Portal
  • Desktop Testing
    • Frames
    • Opera
    • WebKit
    • Firefox
    • Collecting User Agents
    • Simulators and Emulators
    • Remote Access
  • Usability Testing
    • Mobile Usability Test Tips and Tricks
  • The Future of Mobile
    • The Opportunity for Change