Transcription
Mobile Design and DevelopmentBrian FlingO'REILLY*Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo
Table of ContentsPrefacexiii1. A Brief History of MobileIn the BeginningThe Evolution of DevicesThe Brick EraThe Candy Bar EraThe Feature Phone EraThe Smartphone EraThe Touch Era1134568102. The Mobile ProprietaryOpen SourceOperating SystemsApplication FrameworksJavaS60BREWFlash LiteWindows MobileCocoa TouchAndroid SDKWeb Runtimes (WRTs)WebKitThe Web1314171820202121222223232323242424242425v
ApplicationsServices25263. WhyMobile?Size and Scope of the Mobile MarketThe Addressable Mobile MarketHigh-End Versus Low-End DevicesBest-selling Versus FreeMobile Web Versus Native ApplicationsTouch Versus D-PadMobile As a MediumThe Printing PressRecordingsCinemaRadioTelevisionThe InternetMobileMobile's Unique BenefitsThe Eighth Mass Medium: What's Next?Ubiquity Starts with the Mobile Web2930313234343434353535363636373940414. Designing for ContextThinking in ContextContext with a Capital СContext with a Lowercase сTaking the Next Steps45464752555. Developing a Mobile StrategyNew RulesRule # 1: Forget What You Think You KnowRule # 2 : Believe What You See, Not What You ReadRule # 3 : Constraints Never Come FirstRule #4: Focus on Context, Goals, and NeedsRule # 5 : You Can't Support EverythingRule # 6 : Don't Convert, CreateRule # 7 : Keep It SimpleSummary575959606163656667676. Types of Mobile ApplicationsMobile Application Medium TypesSMSMobile Websites69707071vi Table of Contents
Mobile Web WidgetsMobile Web ApplicationsNative ApplicationsGamesMobile Application Media MatrixApplication ContextUtility ContextLocale ContextInformative ApplicationsProductivity Application ContextImmersive Full-Screen ApplicationsApplication Context Matrix7375777980818183848587887. Mobile Information ArchitectureWhat Is Information Architecture?Mobile Information ArchitectureKeeping It SimpleSite MapsClickstreamsWireframesPrototypingDifferent Information Architecture for Different DevicesThe Design Myth8989919394981011031051068. Mobile DesignInterpreting DesignThe Mobile Design Tent-PoleDesigning for the Best Possible ExperienceThe Elements of Mobile hyGraphicsMobile Design ToolsDesigning for the Right DeviceDesigning for Different Screen 9. Mobile Web Apps Versus Native ApplicationsThe Ubiquity PrincipleFragmentation143143144Table of Contents vii
10.The WebControlConsumer ExpectationsUbiquity in the Mobile WebWhen to Make a Native ApplicationCharging for ItCreating a GameUsing Specific LocationsUsing CamerasUsing AccelerometersAccessing the FilesystemsOffline UsersWhen to Make a Mobile Web Mobile 2.0What Is Mobile 2.0?Mobile 2.0: The Convergence of the Web and MobileThe Mobile Web Browser As the Next Killer AppMobile Web Applications Are the FutureJavaScript Is the Next FrontierThe Mobile User Experience Is AwfulMobile Widgets Are the Next Big ThingCarrier Is the New "C" WordMobile Needs to Check Its EgoWe Are Creators, Not Consumers15315415515515615715815815915916011. Mobile Web DevelopmentWeb StandardsDesigning for Multiple Mobile BrowsersProgressive EnhancementDIALDesigning for Multiple DisplaysDevice PlansThe Device MatrixMarkupXHTML-MP OverviewDocument StructureText ElementsCreating LinksImages and ObjectsTablesFramesFormsviii Table of 182183183
12.Other RecommendationsCSS: Cascading Style SheetsWireless CSS and CSS-MPBox ModelSelectorsFont and Text PropertiesBasic Box PropertiesColor and BackgroundsPositioning and Page WebApps199WhyWebKit?A Brief History of WebKitBackground As a Mobile BrowserWhat Makes It a Mobile Web App?The Page ModelMarkupXHTMLHTML5CSSCSS2CSS3Visual EffectsJavaScriptDHTMLAjaxMultitouchFixed FooterCreating a Mobile Web AppDefining the ViewportFull-Screen ModeChanging the Status Bar AppearanceAdding an IconWeb Apps As Native AppsPhoneGapTools and LibrariesiPhone GUI 2522622622722722822923023023123123223323323423413. Adapting to DevicesWhy Is Adaptation a "Necessity"?237240Table of Contents ix
Strategy # 1 : Do NothingFive Assumptions About One WebThe One Web AftermathUsing This Strategy with Media QueriesStrategy # 2 : Progressive EnhancementThe Handheld Media TypeLayering Multiple Stylesheets for Multiple DevicesStrategy # 3 : Device TargetingThe Device Detection DilemmaAndy Moore's Mobile Browser DetectionGreg Mulmash's Mobile Browser DetectionThe Switcherhtaccess-Based Device DetectionJavaScript-Based Device DetectionReverse Device DetectionWordPress Mobile PlugindotMobi WordPress Mobile PackMobile FuAnd Many More.Strategy #4: Full AdaptationWorking "On Deck"Working "Off Deck"WURFLDeviceAtlasVolantisWALL and WNGYahoo! BlueprintNetbiscuitsMobileAwareMobifyWhat Domain Do I Use?m.domain.comdomain.com/mobile or domain.com/mdomain.mobiTaking the Next Step14. Making Money in MobileWorking with OperatorsThe DeckARPUBoBoWorking with an App StoreWhat About the Mobile Web?x Table of 1262262263263265268268270271271273
Add AdvertisingAdMob and Google AdSenseThe Mobile Marketing AssociationInvent a New Model27327427427515. Supporting DevicesHaving a Device PlanDeciding What to SupportExample Device PlansDevice TestingAccess to DevicesEstimating the Testing EffortCreating a Test PlanCreating a Test PortalDesktop TestingFramesOperaWebKitFirefoxCollecting User AgentsSimulators and EmulatorsRemote AccessUsability TestingMobile Usability Test Tips and 229229529529716. The Future of MobileThe Opportunity for Change299300Index303Table of Contents xi
BREW 23 Flash Lite 23 Windows Mobile 24 Cocoa Touch 24 Android SDK 24 Web Runtimes (WRTs) 24 WebKit 24 The Web 25 v . Applications Services 25 26 3. WhyMobile? 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
