Table Of ContentDeveloping
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
