book

Mobile Design and Development

by Brian Fling

August 2009

Intermediate to advanced

329 pages

9h 36m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who This Book Is ForHow This Book Is OrganizedConventions Used in This BookUsing Code ExamplesHow to Contact UsSafari® Books OnlineAcknowledgments
In the BeginningThe Evolution of DevicesThe Brick EraThe Candy Bar EraThe Feature Phone EraThe Smartphone EraThe Touch Era
OperatorsNetworksDevicesPlatformsLicensedProprietaryOpen SourceOperating SystemsApplication FrameworksJavaS60BREWFlash LiteWindows MobileCocoa TouchAndroid SDKWeb Runtimes (WRTs)WebKitThe WebApplicationsServices
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 InternetMobileRead and publishPlay recordingsWatch moviesListen to radioWatch televisionUse the InternetMobile’s Unique BenefitsThe Eighth Mass Medium: What’s Next?Ubiquity Starts with the Mobile Web
Thinking in ContextContext with a Capital CThe distracted driverThe eRuv projectContext with a Lowercase cThe present location or physical contextOur present device of access, or media contextOur present state of mind, or modal contextTaking the Next Steps
New 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 SimpleSummary
Mobile Application Medium TypesSMSProsConsMobile WebsitesProsConsMobile Web WidgetsProsConsMobile Web ApplicationsProsConsNative ApplicationsProsConsGamesProsConsMobile Application Media MatrixApplication ContextUtility ContextLocale ContextInformative ApplicationsProductivity Application ContextImmersive Full-Screen ApplicationsApplication Context Matrix
What Is Information Architecture?Mobile Information ArchitectureKeeping It SimpleSupport your defined goalsClear, simple labelsSite MapsLimit opportunities for mistakesConfirm the path by teasing contentClickstreamsWireframesPrototypingPaper prototypesContext prototypeHTML prototypesDifferent Information Architecture for Different DevicesThe Design Myth
Interpreting DesignThe Mobile Design Tent-PoleDesigning for the Best Possible ExperienceThe Elements of Mobile DesignContextMessageLook and FeelLayoutDifferent layouts for different devicesFixed versus fluidColorThe psychology of colorColor palettesTypographySubpixels and pixel densityType optionsFont replacementReadabilityGraphicsIconographyPhotos and imagesMobile Design ToolsDesigning for the Right DeviceDesigning for Different Screen Sizes
The Ubiquity PrincipleFragmentationThe 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 Application

What 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 FrontierRich interactions kill battery lifeThe Mobile User Experience Is AwfulMobile Widgets Are the Next Big ThingCarrier Is the New “C” WordMobile Needs to Check Its EgoWe Are Creators, Not Consumers
Web StandardsDesigning for Multiple Mobile BrowsersProgressive EnhancementMobile progressive enhancement techniquesDIALDesigning for Multiple DisplaysFixed versus fluid designsSingle-column versus multiple-column layoutsDevice PlansThe Device MatrixClass A mobile browsersClass B mobile browsersClass C mobile browsersClass D mobile browsersClass F mobile browsersMarkupXHTML-MP OverviewXHTML versus XHTML Basic versus XHTML-MPDocument StructureDoctypesCharacter encodingMIME typesPage titlesUse of stylesheetsObjects and scriptsAuto refreshRedirectsCachingMinimal document structureText ElementsHeadingsParagraphsQuotationsPhrase elementsUnordered listsOrdered listsDefinition listsStructural elementsLine breaksCharacter entity referencesCreating LinksNumber of linksAccess keysInitiating telephone callsImages and ObjectsImage typesImage sizesImage dimensionsImage mapsAlt textFlash and SVGEmbedded audio and videoTablesLayout tablesUsing data tablesNested tablesFramesFormsFree text input controlsDefault input modeOther RecommendationsValidate markupPop-up windowsExternal resourcesTotal page download sizeCSS: Cascading Style SheetsWireless CSS and CSS-MPBox ModelSelectorsUniversal selectorType selectorDescendant selectorChild selectorAdjacent sibling selectorClass selectorID selectorSimple attribute selectorAdvanced attribute selectorPseudoselectorsFont and Text PropertiesAvailable fontsAbsolute size keywordsPercentage measurementsLength measurementsAdditional stylingText shadowFont replacementBasic Box PropertiesHeight and widthMinimum and maximum dimensionsMarginsPaddingBordersBox shadowColor and BackgroundsBackground colorBackground imageMultiple background imagesPositioning and Page FlowDisplayFloatsClearingPositioningOverflowStacking orderJavaScript
Why WebKit?A Brief History of WebKitBackground As a Mobile BrowserWeb Browser for S60iPhone and iPod touchAndroidwebOSMyriad BrowserIris BrowserWhat Makes It a Mobile Web App?The Page ModelMarkupXHTMLXHTML-MPXHTML 2.0HTML5The canvas elementOffline data storageCSSCSS2Positioning and page flowImage replacementCSS3The -webkit prefixSelectorsMultiple background imagesBox model sizingBox shadowRounded cornersBorder imagesText effectsText overflowVisual EffectsGradientsMasksTransitionsTransformsAnimationsHover, clicks, and tapsJavaScriptDHTMLAjaxMultitouchFixed FooterCreating a Mobile Web AppDefining the ViewportFull-Screen ModeChanging the Status Bar AppearanceAdding an IconWeb Apps As Native AppsPhoneGapTools and LibrariesiPhone GUI PSDiUIjQTouch
Why Is Adaptation a “Necessity”?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 Step
Working with OperatorsThe DeckGetting “on deck”Benefits of the deckARPUBoBoWorking with an App StoreWhat About the Mobile Web?Add AdvertisingAdMob and Google AdSenseThe Mobile Marketing AssociationInvent a New Model
Having a Device PlanDeciding What to SupportExample Device PlansA mobile websiteA mobile web appA mobile commerce portalDevice TestingAccess to DevicesGuerrilla testingMobile Monday device librariesEstimating the Testing EffortCreating a Test PlanFunctional testsContext testsCreating a Test PortalDesktop TestingFramesOperaWebKitFirefoxCollecting User AgentsSimulators and EmulatorsRemote AccessUsability TestingMobile Usability Test Tips and Tricks
The Opportunity for Change

Content preview from Mobile Design and Development

Index

A note on the digital index

A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.