Mobile Design and Development: Practical Concepts and Techniques for Creating Mobile Sites and Web Apps (Animal Guide)

334 Pages·2009·4.46 MB·English

by  Brian Fling

Download at Boykma.Com
Mobile Design and Development
Download at Boykma.Com
Download at Boykma.Com
Mobile Design and Development
(cid:0)%(cid:0)U(cid:0)L(cid:0)D(cid:0)Q(cid:0)(cid:3)(cid:0))(cid:0)O(cid:0)L(cid:0)Q(cid:0)J
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: [phone] 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.
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
Other Recommendations 184
CSS: Cascading Style Sheets 185
Wireless CSS and CSS-MP 186
Box Model 186
Selectors 187
Font and Text Properties 189
Basic Box Properties 192
Color and Backgrounds 194
Positioning and Page Flow 194
JavaScript 196
12. iPhone Web Apps ..................................................... 199
Why WebKit? 200
A Brief History of WebKit 200
Background As a Mobile Browser 201
What Makes It a Mobile Web App? 204
The Page Model 205
Markup 206
XHTML 206
HTML5 209
CSS 213
CSS2 214
CSS3 216
Visual Effects 221
JavaScript 225
DHTML 226
Ajax 226
Multitouch 227
Fixed Footer 227
Creating a Mobile Web App 228
Defining the Viewport 229
Full-Screen Mode 230
Changing the Status Bar Appearance 230
Adding an Icon 231
Web Apps As Native Apps 231
PhoneGap 232
Tools and Libraries 233
iPhone GUI PSD 233
iUI 234
jQTouch 234
13. Adapting to Devices ................................................... 237
Why Is Adaptation a “Necessity”? 240
Table of Contents | ix
Download at Boykma.Com