Quick & Dirty Mobile Web with jQuery Mobile

  • 3,272 views
Uploaded on

Want to make your site support the mobile web quickly? In this talk I show how to quickly add mobile to an existing website with jQuery Mobile. I also cover an easy way to do mobile device detection …

Want to make your site support the mobile web quickly? In this talk I show how to quickly add mobile to an existing website with jQuery Mobile. I also cover an easy way to do mobile device detection and redirection.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,272
On Slideshare
0
From Embeds
0
Number of Embeds
23

Actions

Shares
Downloads
32
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Quick & Dirty Mobile Web with jQuery Mobile TROY MILES - ROCKNCODER@GMAIL.COMSaturday, November 10, 12
  • 2. SponsorsSaturday, November 10, 12
  • 3. Our Agenda 3Saturday, November 10, 12
  • 4. Our Agenda 3  Why Mobile Web?Saturday, November 10, 12
  • 5. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?Saturday, November 10, 12
  • 6. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your SiteSaturday, November 10, 12
  • 7. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile DeviceSaturday, November 10, 12
  • 8. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  Let’s Get Dirty!Saturday, November 10, 12
  • 9. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  Let’s Get Dirty!  Next StepsSaturday, November 10, 12
  • 10. Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  Let’s Get Dirty!  Next Steps  SummarySaturday, November 10, 12
  • 11. Why Mobile Web? 4Saturday, November 10, 12
  • 12. Why Mobile Web? 4  Mobile is Where Growth IsSaturday, November 10, 12
  • 13. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile OnlySaturday, November 10, 12
  • 14. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%Saturday, November 10, 12
  • 15. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012Saturday, November 10, 12
  • 16. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012  Mobile is Now Responsible for more than 50% of its Ad RevenueSaturday, November 10, 12
  • 17. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012  Mobile is Now Responsible for more than 50% of its Ad Revenue  A Campaign with P.F.Chang got 1 million clicks in its First 4 DaysSaturday, November 10, 12
  • 18. Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile Only  In Some African & Asian Markets it is Over 50%  Twitter began Showing Ads in April 2012  Mobile is Now Responsible for more than 50% of its Ad Revenue  A Campaign with P.F.Chang got 1 million clicks in its First 4 Days  70% of Those Clicks Came From MobileSaturday, November 10, 12
  • 19. What is jQuery Mobile? 5 A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design.  Requires jQuery.Saturday, November 10, 12
  • 20. Why jQuery Mobile? 6Saturday, November 10, 12
  • 21. Why jQuery Mobile? 6  Its FreeSaturday, November 10, 12
  • 22. Why jQuery Mobile? 6  Its Free  Its Easy to LearnSaturday, November 10, 12
  • 23. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5Saturday, November 10, 12
  • 24. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5  It Supports a Wide Range of DevicesSaturday, November 10, 12
  • 25. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5  It Supports a Wide Range of Devices  It is Not Feature RichSaturday, November 10, 12
  • 26. Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5  It Supports a Wide Range of Devices  It is Not Feature Rich  It is Not PerformantSaturday, November 10, 12
  • 27. 4 Ways to Add Mobile 7Saturday, November 10, 12
  • 28. 4 Ways to Add Mobile 7  Have Two Separate Sites  Have Single Site, With Separate Controllers  Single Site, With Separate Views  Responsive Design  And yes, there are other waysSaturday, November 10, 12
  • 29. Have Two Separate Sites 8Saturday, November 10, 12
  • 30. Have Two Separate Sites 8  Easy To StartSaturday, November 10, 12
  • 31. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between SitesSaturday, November 10, 12
  • 32. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance MonsterSaturday, November 10, 12
  • 33. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to DeploySaturday, November 10, 12
  • 34. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to Deploy  Two Databases to DeploySaturday, November 10, 12
  • 35. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to Deploy  Two Databases to Deploy  Two Sites to MaintainSaturday, November 10, 12
  • 36. Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between Sites  Quickly Can Become a Maintenance Monster  Two Sites to Deploy  Two Databases to Deploy  Two Sites to Maintain  Two Sites to EnhanceSaturday, November 10, 12
  • 37. Have Single Site, With Separate 9 ControllersSaturday, November 10, 12
  • 38. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own ControllersSaturday, November 10, 12
  • 39. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own Controllers  Allows for Some Sharing of ResourcesSaturday, November 10, 12
  • 40. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own Controllers  Allows for Some Sharing of Resources  Only One DeploymentSaturday, November 10, 12
  • 41. Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own Controllers  Allows for Some Sharing of Resources  Only One Deployment  Bugs in the Controller or ViewSaturday, November 10, 12
  • 42. Single Site, With Separate Views 10Saturday, November 10, 12
  • 43. Single Site, With Separate Views 10  Code in the Controller Decides Which View to ShowSaturday, November 10, 12
  • 44. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code SharingSaturday, November 10, 12
  • 45. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code Sharing  Users Get Locked into an ExperienceSaturday, November 10, 12
  • 46. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code Sharing  Users Get Locked into an Experience  Users Hate Getting StuckSaturday, November 10, 12
  • 47. Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code Sharing  Users Get Locked into an Experience  Users Hate Getting Stuck  Users Sometimes Want to View the Full Site on Their Smart PhoneSaturday, November 10, 12
  • 48. Responsive Design 11Saturday, November 10, 12
  • 49. Responsive Design 11  A Single Site With Single Controller and ViewsSaturday, November 10, 12
  • 50. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize ItselfSaturday, November 10, 12
  • 51. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks AmazingSaturday, November 10, 12
  • 52. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do RightSaturday, November 10, 12
  • 53. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do Right  Has Performance IssuesSaturday, November 10, 12
  • 54. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do Right  Has Performance Issues  The Scaling Is Done on the ClientSaturday, November 10, 12
  • 55. Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize Itself  When Done Right It Looks Amazing  Difficult To Do Right  Has Performance Issues  The Scaling Is Done on the Client  Entire Site Sent To The Client, But Much of it May Not Be UsedSaturday, November 10, 12
  • 56. Responsive Design Sites 12Saturday, November 10, 12
  • 57. Responsive Design Sites 12  http://bostonglobe.com/  http://2012.inspireconf.com/  http://forefathersgroup.com/  http://www.thesearethings.com/Saturday, November 10, 12
  • 58. Detecting A Mobile Device 13Saturday, November 10, 12
  • 59. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User AgentSaturday, November 10, 12
  • 60. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP RequestSaturday, November 10, 12
  • 61. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.Saturday, November 10, 12
  • 62. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.  There are businesses which provide a service to map User Agents to devicesSaturday, November 10, 12
  • 63. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.  There are businesses which provide a service to map User Agents to devices  They cost anywhere from $40 to $400 a month and moreSaturday, November 10, 12
  • 64. Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User Agent  The User Agent is a String Sent With Your Browser’s HTTP Request  Information in the User Agent Identifies the Device, Browser, Version Numbers, etc.  There are businesses which provide a service to map User Agents to devices  They cost anywhere from $40 to $400 a month and more  Luckily We Have a Free Way...Saturday, November 10, 12
  • 65. Detecting A Mobile Device 14Saturday, November 10, 12
  • 66. Detecting A Mobile Device 14  A website named: Detect Mobile BrowsersSaturday, November 10, 12
  • 67. Detecting A Mobile Device 14  A website named: Detect Mobile Browsers  It Use Regular Expressions to Detect a Mobile DeviceSaturday, November 10, 12
  • 68. Detecting A Mobile Device 14  A website named: Detect Mobile Browsers  It Use Regular Expressions to Detect a Mobile Device  It Provides Versions of Its Algorithm for: Apache, ASP, ASP.NET, ColdFusion, C#, IIS, JSP, JavaScript, Lasso, nginx, node.js, and moreSaturday, November 10, 12
  • 69. Detecting A Mobile Device 14  A website named: Detect Mobile Browsers  It Use Regular Expressions to Detect a Mobile Device  It Provides Versions of Its Algorithm for: Apache, ASP, ASP.NET, ColdFusion, C#, IIS, JSP, JavaScript, Lasso, nginx, node.js, and more  The Algorithm gets Updated Every Few MonthsSaturday, November 10, 12
  • 70. Lets Get Dirty! 15Saturday, November 10, 12
  • 71. Lets Get Dirty! 15  jQuery At A GlanceSaturday, November 10, 12
  • 72. Lets Get Dirty! 15  jQuery At A Glance  Make CopiesSaturday, November 10, 12
  • 73. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection CodeSaturday, November 10, 12
  • 74. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test ItSaturday, November 10, 12
  • 75. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tagsSaturday, November 10, 12
  • 76. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tags  Add jQuery Mobile FilesSaturday, November 10, 12
  • 77. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tags  Add jQuery Mobile Files  Convert Our Index PageSaturday, November 10, 12
  • 78. Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tags  Add jQuery Mobile Files  Convert Our Index Page  Convert Our Create PageSaturday, November 10, 12
  • 79. jQuery Mobile At A Glance 16Saturday, November 10, 12
  • 80. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance MarkupSaturday, November 10, 12
  • 81. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-roleSaturday, November 10, 12
  • 82. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-role  By default jQuery Mobile Will Use Ajax Not Page LoadSaturday, November 10, 12
  • 83. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-role  By default jQuery Mobile Will Use Ajax Not Page Load  HTML list are Special in jQuery With Lots of FeaturesSaturday, November 10, 12
  • 84. jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-role  By default jQuery Mobile Will Use Ajax Not Page Load  HTML list are Special in jQuery With Lots of Features  jQuery Mobile is Very SemanticSaturday, November 10, 12
  • 85. 17 Let’s Get Dirty!Saturday, November 10, 12
  • 86. Make Copies 18Saturday, November 10, 12
  • 87. Make Copies 18  Copy the HomeController to MobileControllerSaturday, November 10, 12
  • 88. Make Copies 18  Copy the HomeController to MobileController  Copy _LayoutPage to _MobileLayoutPageSaturday, November 10, 12
  • 89. Make Copies 18  Copy the HomeController to MobileController  Copy _LayoutPage to _MobileLayoutPage  Copy the ViewsSaturday, November 10, 12
  • 90. Add Detection Code 19Saturday, November 10, 12
  • 91. Add Detection Code 19  Create a Named CommonSaturday, November 10, 12
  • 92. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.csSaturday, November 10, 12
  • 93. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:Saturday, November 10, 12
  • 94. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:  public static bool IsMobile(string u)Saturday, November 10, 12
  • 95. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:  public static bool IsMobile(string u)  Add Call to IsMobile() to the Index Action of the HomeControllerSaturday, November 10, 12
  • 96. Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.cs  Create a static Method, IsMobile, With the Following Signature:  public static bool IsMobile(string u)  Add Call to IsMobile() to the Index Action of the HomeController  If Detected, Redirect to the Index Action of the MobileControllerSaturday, November 10, 12
  • 97. Test It 20Saturday, November 10, 12
  • 98. Test It 20  Our Website Should Now Be Able To Detect Mobile TrafficSaturday, November 10, 12
  • 99. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test ItSaturday, November 10, 12
  • 100. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent SwitcherSaturday, November 10, 12
  • 101. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent Switcher  Launch the Website, It Should Go To the Home pageSaturday, November 10, 12
  • 102. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent Switcher  Launch the Website, It Should Go To the Home page  Turn on the Ultimate User Agent SwitcherSaturday, November 10, 12
  • 103. Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test It  We Will Use the Chrome Browser With the Ultimate User Agent Switcher  Launch the Website, It Should Go To the Home page  Turn on the Ultimate User Agent Switcher  Reload the Website, We Should Go to the Mobile Home pageSaturday, November 10, 12
  • 104. Add Mobile ViewPort and Meta-tags 21Saturday, November 10, 12
  • 105. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtmlSaturday, November 10, 12
  • 106. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tagsSaturday, November 10, 12
  • 107. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tags  viewport, width=device-widthSaturday, November 10, 12
  • 108. Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tags  viewport, width=device-width  name=”apple-mobile-web-app-capable”, content=”yes”Saturday, November 10, 12
  • 109. Add jQuery Mobile Files 22Saturday, November 10, 12
  • 110. Add jQuery Mobile Files 22  Add the CSS FilesSaturday, November 10, 12
  • 111. Add jQuery Mobile Files 22  Add the CSS Files  Add the Script FilesSaturday, November 10, 12
  • 112. Convert Our Index Page 23Saturday, November 10, 12
  • 113. Convert Our Index Page 23  Convert the <table> into a <ul>Saturday, November 10, 12
  • 114. Convert Our Index Page 23  Convert the <table> into a <ul>  The data-role=”listview” Comes With Built In StylingSaturday, November 10, 12
  • 115. Convert Our Index Page 23  Convert the <table> into a <ul>  The data-role=”listview” Comes With Built In Styling  Remove unnecessary elementsSaturday, November 10, 12
  • 116. Convert Our Create Page 24Saturday, November 10, 12
  • 117. Convert Our Create Page 24  Use Hints Instead of LabelsSaturday, November 10, 12
  • 118. Convert Our Create Page 24  Use Hints Instead of Labels  Use JQM ButtonsSaturday, November 10, 12
  • 119. Convert Our Create Page 24  Use Hints Instead of Labels  Use JQM Buttons  Theme ItSaturday, November 10, 12
  • 120. Next Steps 25Saturday, November 10, 12
  • 121. Next Steps 25  Convert the Remaining ViewsSaturday, November 10, 12
  • 122. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With AjaxSaturday, November 10, 12
  • 123. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With Ajax  Make the Site iOS FriendlySaturday, November 10, 12
  • 124. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With Ajax  Make the Site iOS Friendly  Add Home Page Icons (Android Supports These Too)Saturday, November 10, 12
  • 125. Next Steps 25  Convert the Remaining Views  Replace HTML Pages With Ajax  Make the Site iOS Friendly  Add Home Page Icons (Android Supports These Too)  Add Splash PageSaturday, November 10, 12
  • 126. My Blog 26 http://therockncoder.blogspot.com/Saturday, November 10, 12
  • 127. Please Rate My Talk 27 http://spkr8.com/t/18331Saturday, November 10, 12
  • 128. Summary 28  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile Device  We Got Dirty  Next Steps  SummarySaturday, November 10, 12
  • 129. Resources 29  jQuery Mobile http://jquerymobile.com/  jQuery Mobile ThemeRoller http://jquerymobile.com/themeroller/index.php  Detect Mobile Browsers http://detectmobilebrowsers.com/  Ultimate User Agent Switcher https://chrome.google.com/webstore/detail/ultimate-user-agent- switc/ljfpjnehmoiabkefmnjegmpdddgcdnpo  Window Resizer https://chrome.google.com/webstore/detail/window-resizer/ kkelicaakdanhinjdeammmilcgefonfhSaturday, November 10, 12
  • 130. FeedbackSaturday, November 10, 12