Download at Boykma.Com Mobile Design and Development Download at Boykma.Com Download at Boykma.Com Mobile Design and Development Brian Fling Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo Download at Boykma.Com Mobile Design and Development by Brian Fling Copyright © 2009 Brian Fling. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Editor: Steven Weiss Indexer: John Bickelhaupt Production Editor: Loranah Dimant Cover Designer: Karen Montgomery Copyeditor: Nancy Kotary Interior Designer: David Futato Proofreader: Sada Preisch Illustrator: Robert Romano Printing History: August 2009: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Mobile Design and Development, the image of a twelve-wired bird of paradise, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. TM This book uses RepKover™, a durable and flexible lay-flat binding. ISBN: 978-0-596-15544-5 [M] 1250095236 Download at Boykma.Com Table of Contents Preface .................................................................... xiii 1. A Brief History of Mobile ................................................. 1 In the Beginning 1 The Evolution of Devices 3 The Brick Era 4 The Candy Bar Era 5 The Feature Phone Era 6 The Smartphone Era 8 The Touch Era 10 2. The Mobile Ecosystem .................................................. 13 Operators 14 Networks 17 Devices 18 Platforms 20 Licensed 20 Proprietary 21 Open Source 21 Operating Systems 22 Application Frameworks 22 Java 23 S60 23 BREW 23 Flash Lite 23 Windows Mobile 24 Cocoa Touch 24 Android SDK 24 Web Runtimes (WRTs) 24 WebKit 24 The Web 25 v Download at Boykma.Com Applications 25 Services 26 3. Why Mobile? .......................................................... 29 Size and Scope of the Mobile Market 30 The Addressable Mobile Market 31 High-End Versus Low-End Devices 32 Best-selling Versus Free 34 Mobile Web Versus Native Applications 34 Touch Versus D-Pad 34 Mobile As a Medium 34 The Printing Press 35 Recordings 35 Cinema 35 Radio 36 Television 36 The Internet 36 Mobile 37 Mobile’s Unique Benefits 39 The Eighth Mass Medium: What’s Next? 40 Ubiquity Starts with the Mobile Web 41 4. Designing for Context .................................................. 45 Thinking in Context 46 Context with a Capital C 47 Context with a Lowercase c 52 Taking the Next Steps 55 5. Developing a Mobile Strategy ............................................ 57 New Rules 59 Rule #1: Forget What You Think You Know 59 Rule #2: Believe What You See, Not What You Read 60 Rule #3: Constraints Never Come First 61 Rule #4: Focus on Context, Goals, and Needs 63 Rule #5: You Can’t Support Everything 65 Rule #6: Don’t Convert, Create 66 Rule #7: Keep It Simple 67 Summary 67 6. Types of Mobile Applications ............................................. 69 Mobile Application Medium Types 70 SMS 70 Mobile Websites 71 vi | Table of Contents Download at Boykma.Com Mobile Web Widgets 73 Mobile Web Applications 75 Native Applications 77 Games 79 Mobile Application Media Matrix 80 Application Context 81 Utility Context 81 Locale Context 83 Informative Applications 84 Productivity Application Context 85 Immersive Full-Screen Applications 87 Application Context Matrix 88 7. Mobile Information Architecture ......................................... 89 What Is Information Architecture? 89 Mobile Information Architecture 91 Keeping It Simple 93 Site Maps 94 Clickstreams 98 Wireframes 101 Prototyping 103 Different Information Architecture for Different Devices 105 The Design Myth 106 8. Mobile Design ........................................................ 109 Interpreting Design 111 The Mobile Design Tent-Pole 112 Designing for the Best Possible Experience 115 The Elements of Mobile Design 116 Context 116 Message 117 Look and Feel 118 Layout 121 Color 125 Typography 129 Graphics 134 Mobile Design Tools 137 Designing for the Right Device 138 Designing for Different Screen Sizes 139 9. Mobile Web Apps Versus Native Applications .............................. 143 The Ubiquity Principle 143 Fragmentation 144 Table of Contents | vii Download at Boykma.Com The Web 144 Control 144 Consumer Expectations 145 Ubiquity in the Mobile Web 145 When to Make a Native Application 146 Charging for It 146 Creating a Game 147 Using Specific Locations 147 Using Cameras 147 Using Accelerometers 148 Accessing the Filesystems 148 Offline Users 149 When to Make a Mobile Web Application 150 10. Mobile 2.0 ........................................................... 153 What Is Mobile 2.0? 154 Mobile 2.0: The Convergence of the Web and Mobile 155 The Mobile Web Browser As the Next Killer App 155 Mobile Web Applications Are the Future 156 JavaScript Is the Next Frontier 157 The Mobile User Experience Is Awful 158 Mobile Widgets Are the Next Big Thing 158 Carrier Is the New “C” Word 159 Mobile Needs to Check Its Ego 159 We Are Creators, Not Consumers 160 11. Mobile Web Development .............................................. 163 Web Standards 164 Designing for Multiple Mobile Browsers 165 Progressive Enhancement 165 DIAL 167 Designing for Multiple Displays 168 Device Plans 169 The Device Matrix 170 Markup 172 XHTML-MP Overview 172 Document Structure 173 Text Elements 176 Creating Links 179 Images and Objects 180 Tables 182 Frames 183 Forms 183 viii | Table of Contents Download at Boykma.Com