Developing Mobile Websites with HTML5 David Karlins Cengage Learning PTR Australia•Brazil•Japan•Korea•Mexico•Singapore•Spain•UnitedKingdom•UnitedStates DevelopingMobileWebsites ©2015CengageLearningPTR. withHTML5 ALLRIGHTSRESERVED.Nopartofthisworkcoveredbythecopyright DavidKarlins hereinmaybereproduced,transmitted,stored,orusedinanyformorbyany meansgraphic,electronic,ormechanical,includingbutnotlimitedto PublisherandGeneralManager, photocopying,recording,scanning,digitizing,taping,Webdistribution, CengageLearningPTR:StacyL.Hiquet informationnetworks,orinformationstorageandretrievalsystems,except AssociateDirectorofMarketing: aspermittedunderSection107or108ofthe1976UnitedStatesCopyright SarahPanella Act,withoutthepriorwrittenpermissionofthepublisher. ManagerofEditorialServices: HeatherTalbot Forproductinformationandtechnologyassistance,contactusat ProductManager:HeatherHurley CengageLearningCustomer&SalesSupport,1-800-354-9706. SeniorMarketingManager: Forpermissiontousematerialfromthistextorproduct,submit MarkHughes allrequestsonlineatcengage.com/permissions. Project/CopyEditor:KeziaEndsley Furtherpermissionsquestionscanbeemailedto [email protected]. TechnicalEditor:RichardJoergensen InteriorLayout:MPSLimited CoverDesigner:LukeFletcher jQueryMobileisacopyrightofThejQueryFoundation.jQueryLicense.All othertrademarksarethepropertyoftheirrespectiveowners. Proofreader:SamGarvey Indexer:SharonShock LibraryofCongressControlNumber:2014937091 ISBN-13:978-1-305-09053-8 ISBN-10:1-305-09053-5 eISBN-10: 1-305-09054-3 CengageLearningPTR 20ChannelCenterStreet Boston,MA02210 USA CengageLearningisaleadingproviderofcustomizedlearningsolutions withofficelocationsaroundtheglobe,includingSingapore,theUnited Kingdom,Australia,Mexico,Brazil,andJapan.Locateyourlocalofficeat: international.cengage.com/region. CengageLearningproductsarerepresentedinCanadabyNelson Education,Ltd. Foryourlifelonglearningsolutions,visitcengageptr.com. Visitourcorporatewebsiteatcengage.com. PrintedintheUnitedStatesofAmerica 1234567161514 This book is dedicated to everyone, everywhere with limited financial resources and technical skills but with the energy and determination to get their message into the mobile world. Acknowledgments The community that made this book possible was anchored by technical editor Richard Joergensen, project editor Kezia Endsley, and product manager Heather Hurley, as well as my agent, Margot Hutchinson. Each of them made indispensible contributions in dif- ferent realms to ensure that the content was relevant and accurate, and that this book would reach you. Beyondthat,Iwasabletodrawontheworkofexpertsinmanyrealmsofmobilewebdesign. — Some are cited directly in the book, others contributed more informally answering late night phone calls and selflessly sharing tips from their specializations and experiences. Col- lectively,theircontributionsfunneleduniqueinsightsintothe finalbook.The whole process was an exciting and rewarding journey. iv About the Author David Karlins is a consultant, writer, designer, and teacher addressing contemporary challenges in digital graphic and interactive design. He is the author of more than 40 books on web design, digital graphics, project management, online video, and anima- tion. His consulting clients include prominent figures and institutions in theater, perfor- mance venues, music production, art, music, handicrafts, and education. Learn more about David Karlins at davidkarlins.com. v Contents Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii PART I BUILDING ANIMATED, INTERACTIVE WEBSITES WITH HTML5. . . . . . . . .1 Chapter 1 Solving Mobile Design Challenges with HTML5. . . . . . . . . . . . . . . . . . .3 BuildingMobile-FriendlySiteswithHTML5 ................................ 3 ElementsofaMobile-FriendlyDesign...................................4 MobileDesignandImplementationSolutions ...........................12 AnHTMLRefresher .................................................. 20 PreparingtoBuildaMobileAppwithHTML5 ...........................20 BuildinganHTML5PageTemplate....................................22 Summary........................................................... 24 Chapter 2 Building and Testing a Multipage Mobile Web App with HTML5. . . .27 DealingwithMobileResolutions........................................ 27 TestingwithEmulation ............................................... 30 PreviewingandTestingMobileWebsites................................. 31 DefiningaLocalDevelopmentFolder..................................34 PreparingaTestFile................................................35 EstablishingaRemoteHostingServer..................................35 PreviewinginaDesktop/LaptopBrowser...............................39 PreviewingwithSimulationResources .................................40 TestingwithMobileDevices .........................................43 vi Contents vii BuildingaMultipageHTML5MobilePage................................ 44 BuildingaBasicMultipageSitewithjQueryMobile ......................44 DefiningViewportScale.............................................45 LinkingtotheJavaScriptandCSSFiles .................................46 EditingaMultipageDocument......................................... 47 TestingaMultipageMobileSite ......................................49 ExaminingandEditingMobileHTML5Elements .........................52 EditingColorSwatches..............................................54 Summary........................................................... 55 Chapter 3 Animating Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 TheRoleofInteractive,AnimatedNavigation ............................. 57 CustomizingListviews................................................. 58 Listviews:BehindtheCurtain.........................................59 CreatingaBasicListview ............................................60 CreatingSplitButtonLists ...........................................61 SplitButtonList:ACaseStudy........................................64 ProvidingSearchFilters .............................................65 ApplyinganInsettoaList...........................................66 NavigatingwithDialogs............................................... 67 DefiningTransitions.................................................. 68 DefiningReverseTransitions .........................................69 WhentoUseTransitions ............................................70 Summary........................................................... 71 PART II MOBILE DESIGN WITH HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73 Chapter 4 Applying Data-Theme Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75 UnderstandingThemesandColorSwatches............................... 76 ApplyingColorSwatches.............................................. 78 ApplyingData-Themestodata-role=“page” ............................80 ApplyingData-ThemestoListviews....................................81 ApplyingData-ThemestoHeadersandFooters..........................83 StylingwithThemedNavigationButtons................................. 83 BuildingNavbarswithInlineButtons ..................................84 AddingIconstoThemedButtons .....................................85 GroupingThemedButtonswithControlGroups .........................87 Mini-SizingElements ................................................. 88 Summary........................................................... 89 viii Contents Chapter 5 Customizing Mobile Styles with ThemeRoller . . . . . . . . . . . . . . . . . . .91 UsingAccessibleStylesforMobile....................................... 92 AvoidingLow-ContrastColorSchemes .................................93 AvoidingOverlyIntricateFonts.......................................96 SizingYourTypeinEms,NotAbsoluteValues...........................97 AvoidingImageBackgrounds ........................................98 CreatingCustomThemesandSwatches .................................. 99 ThemeRollerIsaWork-in-Progress ....................................99 ThemesandSwatches .............................................101 CreatingaCustomThemewithThemeRoller............................. 102 DefineGlobalElements ............................................102 DefiningColorSwatches ...........................................108 DownloadingandApplyingaTheme ................................... 112 DownloadingaTheme.............................................113 ChangingthejQueryMobileLinks ...................................114 TroubleshootingandUnderstandingThemeRollerThemes................115 ApplyingCustomSwatches .........................................116 Summary.......................................................... 116 Chapter 6 Creating Collapsible Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119 UsingCollapsibleBlocks.............................................. 120 DefiningCollapsibleBlocks .........................................122 GroupingCollapsibleBlocksinSets...................................125 NestingCollapsibleBlocks ..........................................126 ExpandingBlocksbyDefault........................................127 StylingCollapsibleBlocks...........................................128 FixingHeaderorFooterPosition....................................... 129 GoingMini ........................................................ 130 Summary.......................................................... 131 Chapter 7 Designing with Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133 TheRoleofGridDesign.............................................. 134 DefiningTwo-ColumnGrids........................................... 136 BuildingaGrid ...................................................137 CustomizingGridContent ..........................................138 EmbeddingVideoinGrids..........................................139 AddingRowstoTwo-ColumnGrids...................................140 StylingGridBlocks .................................................. 141 Contents ix PageLayoutwithMulticolumnGrids ................................... 142 StylingMulticolumnGrids ..........................................143 GridsasNavigationBars............................................144 Summary.......................................................... 146 PART III USING HTML5 TO DEPLOY MOBILE-FRIENDLY CONTENT. . . . . . . . . . .147 Chapter 8 Providing Native Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149 MobileVideoIsNativeVideo.......................................... 151 TheEvolutionofMobileVideo ......................................151 HTML5andNativeVideo...........................................152 UsingHTML5forMobile-ReadyVideo .................................. 157 EmbeddingHTML5Video ..........................................157 VideoOptions....................................................158 OptionsforNon-HTML5Browsers....................................160 TestingandTroubleshootingHTML5Video .............................. 161 IfYourVideoDoesn’tPlayinFirefox..................................161 IfYourVideoDoesn’tPlayinaniPhone...............................162 IfYourVideoWon’tPlayAnywhere..................................163 Summary.......................................................... 164 Chapter 9 Providing Audio for Mobile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 UsingNativeAudiowithHTML5....................................... 167 SupportforNativeAudio...........................................168 NativeAudioMeansDifferentPlayers ................................169 PreparingAudioFilesforMobile....................................... 170 ProducingMobileAudiowithAudacity ................................. 171 AddingtheLAMEPlug-InforMP3 ...................................172 RecordinginAudacity .............................................172 ExportingtoOGGandMP3.........................................177 UsingHTML5forNativeAudio ........................................ 180 EmbeddingHTML5Audio ..........................................180 SettingAudioPlayParameters ......................................182 OptionsforMobileBrowserswithoutNativeAudioSupport ..............183 StylingAudioElements .............................................. 183 UsingJavaScript-BasedCustomAudioPlayers ............................ 185 Summary.......................................................... 186