Quick & Dirty Mobile Web with jQuery Mobile

Quick & Dirty
Mobile Web with
jQuery Mobile
TROY MILES - ROCKNCODER@GMAIL.COM

Saturday, November 10, 12

Sponsors


Our Agenda 3


Our Agenda 3

 Why Mobile Web?


Our Agenda 3

 Why Mobile Web?
 Why jQuery Mobile?


Our Agenda 3

 Why Mobile Web?
 4 Ways to Add Mobile to Your Site


Our Agenda 3

 Why Mobile Web?
 Detecting A Mobile Device


Our Agenda 3

 Why Mobile Web?
 Let’s Get Dirty!


Our Agenda 3

 Why Mobile Web?
 Next Steps


Our Agenda 3

 Why Mobile Web?
 Next Steps
 Summary


Why Mobile Web? 4


Why Mobile Web? 4

 Mobile is Where Growth Is


Why Mobile Web? 4

 20% of Internet Users in the US & UK are Mobile Only


Why Mobile Web? 4

 In Some African & Asian Markets it is Over 50%


Why Mobile Web? 4

 Twitter began Showing Ads in April 2012


Why Mobile Web? 4

 Mobile is Now Responsible for more than 50% of its Ad Revenue


Why Mobile Web? 4

 A Campaign with P.F.Chang got 1 million clicks in its First 4 Days


Why Mobile Web? 4

 A Campaign with P.F.Chang got 1 million clicks in its First 4 Days
 70% of Those Clicks Came From Mobile


What is jQuery Mobile? 5

A uniﬁed, 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 ﬂexible, easily theme-able design.

Requires jQuery.


Why jQuery Mobile? 6



 Its Free



 Its Free
 Its Easy to Learn



 Its Free
 It Extends HTML5



 Its Free
 It Supports a Wide Range of Devices



 Its Free
 It is Not Feature Rich



 Its Free
 It is Not Feature Rich
 It is Not Performant


4 Ways to Add Mobile 7


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


Have Two Separate Sites 8



 Easy To Start



 Easy To Start
 Difficult to Share Code and Resources Between Sites



 Easy To Start
 Quickly Can Become a Maintenance Monster



 Easy To Start
 Two Sites to Deploy



 Easy To Start
 Two Databases to Deploy



 Easy To Start
 Two Sites to Maintain



 Easy To Start
 Two Sites to Maintain
 Two Sites to Enhance


Have Single Site, With Separate 9
Controllers


Controllers
 The Desktop & Mobile Sites Each Have Their Own Controllers


Controllers
 Allows for Some Sharing of Resources


Controllers
 Only One Deployment


Controllers
 Only One Deployment
 Bugs in the Controller or View


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 Hate Getting Stuck
 Users Sometimes Want to View the Full Site on Their Smart Phone


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



 The Scaling Is Done on the Client
 Entire Site Sent To The Client, But Much of it May Not Be Used


Responsive Design Sites 12


Responsive Design Sites 12

 http://bostonglobe.com/
 http://2012.inspireconf.com/
 http://forefathersgroup.com/
 http://www.thesearethings.com/


Detecting A Mobile Device 13



 Nearly All Mobile Device Detection Algorithms Rely on the User
Agent



Agent
 The User Agent is a String Sent With Your Browser’s HTTP Request



Agent
 Information in the User Agent Identiﬁes the Device, Browser, Version
Numbers, etc.



Agent
Numbers, etc.
 There are businesses which provide a service to map User Agents to
devices



Agent
Numbers, etc.
devices
 They cost anywhere from $40 to $400 a month and more



Agent
Numbers, etc.
devices
 They cost anywhere from $40 to $400 a month and more
 Luckily We Have a Free Way...



 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



 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


Let's Get Dirty! 15


Let's Get Dirty! 15

 jQuery At A Glance


Let's Get Dirty! 15

 Make Copies


Let's Get Dirty! 15

 Make Copies
 Add Detection Code


Let's Get Dirty! 15

 Make Copies
 Test It


Let's Get Dirty! 15

 Make Copies
 Test It
 Add Mobile ViewPort and Meta-tags


Let's Get Dirty! 15

 Make Copies
 Test It
 Add jQuery Mobile Files


Let's Get Dirty! 15

 Make Copies
 Test It
 Convert Our Index Page


Let's Get Dirty! 15

 Make Copies
 Test It
 Convert Our Index Page
 Convert Our Create Page


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



 HTML list are Special in jQuery With Lots of Features
 jQuery Mobile is Very Semantic


17

Let’s Get Dirty!


Make Copies 18


Make Copies 18

 Copy the HomeController to MobileController


Make Copies 18

 Copy _LayoutPage to _MobileLayoutPage


Make Copies 18

 Copy _LayoutPage to _MobileLayoutPage
 Copy the Views


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



 Add Call to IsMobile() to the Index Action of the HomeController
 If Detected, Redirect to the Index Action of the MobileController


Test It 20


Test It 20

 Our Website Should Now Be Able To Detect Mobile Traffic


Test It 20

 Let’s Test It


Test It 20

 Let’s Test It
 We Will Use the Chrome Browser With the Ultimate User Agent
Switcher


Test It 20

 Let’s Test It
Switcher
 Launch the Website, It Should Go To the Home page


Test It 20

 Let’s Test It
Switcher
 Turn on the Ultimate User Agent Switcher


Test It 20

 Let’s Test It
Switcher
 Turn on the Ultimate User Agent Switcher
 Reload the Website, We Should Go to the Mobile Home page


Add Mobile ViewPort and Meta-tags 21



 Open Up the ﬁle _MobileLayoutPage.cshtml



 Add the meta-tags



 viewport, width=device-width



 viewport, width=device-width
 name=”apple-mobile-web-app-capable”, content=”yes”


Add jQuery Mobile Files 22



 Add the CSS Files



 Add the CSS Files
 Add the Script Files


Convert Our Index Page 23



 Convert the <table> into a <ul>



 The data-role=”listview” Comes With Built In Styling



 The data-role=”listview” Comes With Built In Styling
 Remove unnecessary elements


Convert Our Create Page 24



 Use Hints Instead of Labels



 Use JQM Buttons



 Use JQM Buttons
 Theme It


Next Steps 25


Next Steps 25

 Convert the Remaining Views


Next Steps 25

 Replace HTML Pages With Ajax


Next Steps 25

 Make the Site iOS Friendly


Next Steps 25

 Add Home Page Icons (Android Supports These Too)


Next Steps 25

 Add Home Page Icons (Android Supports These Too)
 Add Splash Page


My Blog 26

http://therockncoder.blogspot.com/


Please Rate My Talk 27

http://spkr8.com/t/18331


Summary 28

 Why Mobile Web?
 We Got Dirty
 Next Steps
 Summary


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


Feedback


Quick & Dirty Mobile Web with jQuery Mobile

Related slideshows

More Related Content

Quick & Dirty Mobile Web with jQuery Mobile