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.

1. Quick & Dirty
Mobile Web with
jQuery Mobile
TROY MILES - ROCKNCODER@GMAIL.COM
Saturday, November 10, 12

2. Sponsors
Saturday, November 10, 12

3. Our Agenda 3
Saturday, 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 Site
Saturday, November 10, 12

7. Our Agenda 3
 Why Mobile Web?
 Why jQuery Mobile?
 4 Ways to Add Mobile to Your Site
 Detecting A Mobile Device
Saturday, 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 Steps
Saturday, 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
 Summary
Saturday, November 10, 12

11. Why Mobile Web? 4
Saturday, November 10, 12

12. Why Mobile Web? 4
 Mobile is Where Growth Is
Saturday, November 10, 12

13. Why Mobile Web? 4
 Mobile is Where Growth Is
 20% of Internet Users in the US & UK are Mobile Only
Saturday, 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 2012
Saturday, 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 Revenue
Saturday, 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 Days
Saturday, 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 Mobile
Saturday, 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? 6
Saturday, November 10, 12

21. Why jQuery Mobile? 6
 Its Free
Saturday, November 10, 12

22. Why jQuery Mobile? 6
 Its Free
 Its Easy to Learn
Saturday, November 10, 12

23. Why jQuery Mobile? 6
 Its Free
 Its Easy to Learn
 It Extends HTML5
Saturday, November 10, 12

24. Why jQuery Mobile? 6
 Its Free
 Its Easy to Learn
 It Extends HTML5
 It Supports a Wide Range of Devices
Saturday, 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 Rich
Saturday, 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 Performant
Saturday, November 10, 12

27. 4 Ways to Add Mobile 7
Saturday, 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 ways
Saturday, November 10, 12

29. Have Two Separate Sites 8
Saturday, November 10, 12

30. Have Two Separate Sites 8
 Easy To Start
Saturday, November 10, 12

31. Have Two Separate Sites 8
 Easy To Start
 Difficult to Share Code and Resources Between Sites
Saturday, 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 Monster
Saturday, 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 Deploy
Saturday, 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 Deploy
Saturday, 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 Maintain
Saturday, 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 Enhance
Saturday, November 10, 12

37. Have Single Site, With Separate 9
Controllers
Saturday, November 10, 12

38. Have Single Site, With Separate 9
Controllers
 The Desktop & Mobile Sites Each Have Their Own Controllers
Saturday, 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 Resources
Saturday, 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 Deployment
Saturday, 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 View
Saturday, November 10, 12

42. Single Site, With Separate Views 10
Saturday, November 10, 12

43. Single Site, With Separate Views 10
 Code in the Controller Decides Which View to Show
Saturday, November 10, 12

44. Single Site, With Separate Views 10
 Code in the Controller Decides Which View to Show
 High Degree of Code Sharing
Saturday, 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 Experience
Saturday, 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 Stuck
Saturday, 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 Phone
Saturday, November 10, 12

48. Responsive Design 11
Saturday, November 10, 12

49. Responsive Design 11
 A Single Site With Single Controller and Views
Saturday, November 10, 12

50. Responsive Design 11
 A Single Site With Single Controller and Views
 Site Uses CSS to Dynamically Resize Itself
Saturday, 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 Amazing
Saturday, 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 Right
Saturday, 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 Issues
Saturday, 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 Client
Saturday, 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 Used
Saturday, November 10, 12

56. Responsive Design Sites 12
Saturday, 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 13
Saturday, November 10, 12

59. Detecting A Mobile Device 13
 Nearly All Mobile Device Detection Algorithms Rely on the User
Agent
Saturday, 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 Request
Saturday, 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
devices
Saturday, 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 more
Saturday, 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 14
Saturday, November 10, 12

66. Detecting A Mobile Device 14
 A website named: Detect Mobile Browsers
Saturday, November 10, 12

67. Detecting A Mobile Device 14
 A website named: Detect Mobile Browsers
 It Use Regular Expressions to Detect a Mobile Device
Saturday, 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 more
Saturday, 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 Months
Saturday, November 10, 12

70. Let's Get Dirty! 15
Saturday, November 10, 12

71. Let's Get Dirty! 15
 jQuery At A Glance
Saturday, November 10, 12

72. Let's Get Dirty! 15
 jQuery At A Glance
 Make Copies
Saturday, November 10, 12

73. Let's Get Dirty! 15
 jQuery At A Glance
 Make Copies
 Add Detection Code
Saturday, November 10, 12

74. Let's Get Dirty! 15
 jQuery At A Glance
 Make Copies
 Add Detection Code
 Test It
Saturday, November 10, 12

75. Let's Get Dirty! 15
 jQuery At A Glance
 Make Copies
 Add Detection Code
 Test It
 Add Mobile ViewPort and Meta-tags
Saturday, November 10, 12

76. Let's Get Dirty! 15
 jQuery At A Glance
 Make Copies
 Add Detection Code
 Test It
 Add Mobile ViewPort and Meta-tags
 Add jQuery Mobile Files
Saturday, November 10, 12

77. Let's 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
Saturday, November 10, 12

78. Let's 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 Page
Saturday, November 10, 12

79. jQuery Mobile At A Glance 16
Saturday, November 10, 12

80. jQuery Mobile At A Glance 16
 jQuery Uses Attributes to Enhance Markup
Saturday, November 10, 12

81. jQuery Mobile At A Glance 16
 jQuery Uses Attributes to Enhance Markup
 One of the Most Import Attributes is data-role
Saturday, 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 Load
Saturday, 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 Features
Saturday, 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 Semantic
Saturday, November 10, 12

85. 17
Let’s Get Dirty!
Saturday, November 10, 12

86. Make Copies 18
Saturday, November 10, 12

87. Make Copies 18
 Copy the HomeController to MobileController
Saturday, November 10, 12

88. Make Copies 18
 Copy the HomeController to MobileController
 Copy _LayoutPage to _MobileLayoutPage
Saturday, November 10, 12

89. Make Copies 18
 Copy the HomeController to MobileController
 Copy _LayoutPage to _MobileLayoutPage
 Copy the Views
Saturday, November 10, 12

90. Add Detection Code 19
Saturday, November 10, 12

91. Add Detection Code 19
 Create a Named Common
Saturday, November 10, 12

92. Add Detection Code 19
 Create a Named Common
 Create a Class Named DetectMobileBrowser.cs
Saturday, 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 HomeController
Saturday, 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 MobileController
Saturday, November 10, 12

97. Test It 20
Saturday, November 10, 12

98. Test It 20
 Our Website Should Now Be Able To Detect Mobile Traffic
Saturday, November 10, 12

99. Test It 20
 Our Website Should Now Be Able To Detect Mobile Traffic
 Let’s Test It
Saturday, 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
Switcher
Saturday, 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 page
Saturday, 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 Switcher
Saturday, 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 page
Saturday, November 10, 12

104. Add Mobile ViewPort and Meta-tags 21
Saturday, November 10, 12

105. Add Mobile ViewPort and Meta-tags 21
 Open Up the file _MobileLayoutPage.cshtml
Saturday, November 10, 12

106. Add Mobile ViewPort and Meta-tags 21
 Open Up the file _MobileLayoutPage.cshtml
 Add the meta-tags
Saturday, November 10, 12

107. Add Mobile ViewPort and Meta-tags 21
 Open Up the file _MobileLayoutPage.cshtml
 Add the meta-tags
 viewport, width=device-width
Saturday, 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 22
Saturday, November 10, 12

110. Add jQuery Mobile Files 22
 Add the CSS Files
Saturday, November 10, 12

111. Add jQuery Mobile Files 22
 Add the CSS Files
 Add the Script Files
Saturday, November 10, 12

112. Convert Our Index Page 23
Saturday, 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 Styling
Saturday, 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 elements
Saturday, November 10, 12

116. Convert Our Create Page 24
Saturday, November 10, 12

117. Convert Our Create Page 24
 Use Hints Instead of Labels
Saturday, November 10, 12

118. Convert Our Create Page 24
 Use Hints Instead of Labels
 Use JQM Buttons
Saturday, November 10, 12

119. Convert Our Create Page 24
 Use Hints Instead of Labels
 Use JQM Buttons
 Theme It
Saturday, November 10, 12

120. Next Steps 25
Saturday, November 10, 12

121. Next Steps 25
 Convert the Remaining Views
Saturday, November 10, 12

122. Next Steps 25
 Convert the Remaining Views
 Replace HTML Pages With Ajax
Saturday, November 10, 12

123. Next Steps 25
 Convert the Remaining Views
 Replace HTML Pages With Ajax
 Make the Site iOS Friendly
Saturday, 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 Page
Saturday, 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/18331
Saturday, 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
 Summary
Saturday, 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/
kkelicaakdanhinjdeammmilcgefonfh
Saturday, November 10, 12

130. Feedback
Saturday, November 10, 12