Quick & Dirty Mobile Web with jQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

Quick & Dirty Mobile Web with jQuery Mobile

on

  • 3,362 views

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.

Statistics

Views

Total Views
3,362
Views on SlideShare
1,982
Embed Views
1,380

Actions

Likes
2
Downloads
27
Comments
0

40 Embeds 1,380

http://therockncoder.blogspot.com 618
http://therockncoder.blogspot.co.uk 109
http://therockncoder.blogspot.in 91
http://therockncoder.blogspot.de 86
http://therockncoder.blogspot.ca 68
http://therockncoder.blogspot.com.au 52
http://therockncoder.blogspot.fr 41
http://speakerrate.com 39
http://therockncoder.blogspot.nl 34
http://therockncoder.blogspot.it 28
http://therockncoder.blogspot.be 24
http://therockncoder.blogspot.com.es 23
http://therockncoder.blogspot.com.br 21
http://therockncoder.blogspot.sg 14
http://therockncoder.blogspot.jp 11
http://therockncoder.blogspot.ie 11
http://therockncoder.blogspot.se 10
http://therockncoder.blogspot.co.at 9
http://therockncoder.blogspot.co.il 8
http://therockncoder.blogspot.dk 8
http://therockncoder.blogspot.mx 8
http://therockncoder.blogspot.ch 7
http://therockncoder.blogspot.hk 7
http://therockncoder.blogspot.no 7
http://therockncoder.blogspot.ru 6
http://therockncoder.blogspot.tw 6
http://therockncoder.blogspot.kr 5
http://therockncoder.blogspot.hu 4
http://therockncoder.blogspot.fi 4
http://therockncoder.blogspot.co.nz 4
http://therockncoder.blogspot.ro 3
http://therockncoder.blogspot.pt 3
http://therockncoder.blogspot.cz 2
http://therockncoder.blogspot.gr 2
http://therockncoder.blogspot.sk 2
http://www.therockncoder.blogspot.de 1
http://therockncoder.blogspot.com.ar 1
http://www.therockncoder.blogspot.it 1
http://www.therockncoder.blogspot.co.uk 1
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Quick & Dirty Mobile Web with jQuery Mobile Quick & Dirty Mobile Web with jQuery Mobile Presentation Transcript

    • Quick & Dirty Mobile Web with jQuery Mobile TROY MILES - ROCKNCODER@GMAIL.COMSaturday, November 10, 12
    • SponsorsSaturday, November 10, 12
    • Our Agenda 3Saturday, November 10, 12
    • Our Agenda 3  Why Mobile Web?Saturday, November 10, 12
    • Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?Saturday, November 10, 12
    • Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your SiteSaturday, November 10, 12
    • Our Agenda 3  Why Mobile Web?  Why jQuery Mobile?  4 Ways to Add Mobile to Your Site  Detecting A Mobile DeviceSaturday, November 10, 12
    • 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
    • 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
    • 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
    • Why Mobile Web? 4Saturday, November 10, 12
    • Why Mobile Web? 4  Mobile is Where Growth IsSaturday, November 10, 12
    • Why Mobile Web? 4  Mobile is Where Growth Is  20% of Internet Users in the US & UK are Mobile OnlySaturday, November 10, 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Why jQuery Mobile? 6Saturday, November 10, 12
    • Why jQuery Mobile? 6  Its FreeSaturday, November 10, 12
    • Why jQuery Mobile? 6  Its Free  Its Easy to LearnSaturday, November 10, 12
    • Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5Saturday, November 10, 12
    • Why jQuery Mobile? 6  Its Free  Its Easy to Learn  It Extends HTML5  It Supports a Wide Range of DevicesSaturday, November 10, 12
    • 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
    • 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
    • 4 Ways to Add Mobile 7Saturday, November 10, 12
    • 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
    • Have Two Separate Sites 8Saturday, November 10, 12
    • Have Two Separate Sites 8  Easy To StartSaturday, November 10, 12
    • Have Two Separate Sites 8  Easy To Start  Difficult to Share Code and Resources Between SitesSaturday, November 10, 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • Have Single Site, With Separate 9 ControllersSaturday, November 10, 12
    • Have Single Site, With Separate 9 Controllers  The Desktop & Mobile Sites Each Have Their Own ControllersSaturday, November 10, 12
    • 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
    • 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
    • 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
    • Single Site, With Separate Views 10Saturday, November 10, 12
    • Single Site, With Separate Views 10  Code in the Controller Decides Which View to ShowSaturday, November 10, 12
    • Single Site, With Separate Views 10  Code in the Controller Decides Which View to Show  High Degree of Code SharingSaturday, November 10, 12
    • 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
    • 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
    • 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
    • Responsive Design 11Saturday, November 10, 12
    • Responsive Design 11  A Single Site With Single Controller and ViewsSaturday, November 10, 12
    • Responsive Design 11  A Single Site With Single Controller and Views  Site Uses CSS to Dynamically Resize ItselfSaturday, November 10, 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • Responsive Design Sites 12Saturday, November 10, 12
    • Responsive Design Sites 12  http://bostonglobe.com/  http://2012.inspireconf.com/  http://forefathersgroup.com/  http://www.thesearethings.com/Saturday, November 10, 12
    • Detecting A Mobile Device 13Saturday, November 10, 12
    • Detecting A Mobile Device 13  Nearly All Mobile Device Detection Algorithms Rely on the User AgentSaturday, November 10, 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • Detecting A Mobile Device 14Saturday, November 10, 12
    • Detecting A Mobile Device 14  A website named: Detect Mobile BrowsersSaturday, November 10, 12
    • Detecting A Mobile Device 14  A website named: Detect Mobile Browsers  It Use Regular Expressions to Detect a Mobile DeviceSaturday, November 10, 12
    • 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
    • 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
    • Lets Get Dirty! 15Saturday, November 10, 12
    • Lets Get Dirty! 15  jQuery At A GlanceSaturday, November 10, 12
    • Lets Get Dirty! 15  jQuery At A Glance  Make CopiesSaturday, November 10, 12
    • Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection CodeSaturday, November 10, 12
    • Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test ItSaturday, November 10, 12
    • Lets Get Dirty! 15  jQuery At A Glance  Make Copies  Add Detection Code  Test It  Add Mobile ViewPort and Meta-tagsSaturday, November 10, 12
    • 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
    • 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
    • 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
    • jQuery Mobile At A Glance 16Saturday, November 10, 12
    • jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance MarkupSaturday, November 10, 12
    • jQuery Mobile At A Glance 16  jQuery Uses Attributes to Enhance Markup  One of the Most Import Attributes is data-roleSaturday, November 10, 12
    • 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
    • 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
    • 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
    • 17 Let’s Get Dirty!Saturday, November 10, 12
    • Make Copies 18Saturday, November 10, 12
    • Make Copies 18  Copy the HomeController to MobileControllerSaturday, November 10, 12
    • Make Copies 18  Copy the HomeController to MobileController  Copy _LayoutPage to _MobileLayoutPageSaturday, November 10, 12
    • Make Copies 18  Copy the HomeController to MobileController  Copy _LayoutPage to _MobileLayoutPage  Copy the ViewsSaturday, November 10, 12
    • Add Detection Code 19Saturday, November 10, 12
    • Add Detection Code 19  Create a Named CommonSaturday, November 10, 12
    • Add Detection Code 19  Create a Named Common  Create a Class Named DetectMobileBrowser.csSaturday, November 10, 12
    • 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
    • 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
    • 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
    • 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
    • Test It 20Saturday, November 10, 12
    • Test It 20  Our Website Should Now Be Able To Detect Mobile TrafficSaturday, November 10, 12
    • Test It 20  Our Website Should Now Be Able To Detect Mobile Traffic  Let’s Test ItSaturday, November 10, 12
    • 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
    • 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
    • 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
    • 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
    • Add Mobile ViewPort and Meta-tags 21Saturday, November 10, 12
    • Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtmlSaturday, November 10, 12
    • Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tagsSaturday, November 10, 12
    • Add Mobile ViewPort and Meta-tags 21  Open Up the file _MobileLayoutPage.cshtml  Add the meta-tags  viewport, width=device-widthSaturday, November 10, 12
    • 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
    • Add jQuery Mobile Files 22Saturday, November 10, 12
    • Add jQuery Mobile Files 22  Add the CSS FilesSaturday, November 10, 12
    • Add jQuery Mobile Files 22  Add the CSS Files  Add the Script FilesSaturday, November 10, 12
    • Convert Our Index Page 23Saturday, November 10, 12
    • Convert Our Index Page 23  Convert the <table> into a <ul>Saturday, November 10, 12
    • Convert Our Index Page 23  Convert the <table> into a <ul>  The data-role=”listview” Comes With Built In StylingSaturday, November 10, 12
    • 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
    • Convert Our Create Page 24Saturday, November 10, 12
    • Convert Our Create Page 24  Use Hints Instead of LabelsSaturday, November 10, 12
    • Convert Our Create Page 24  Use Hints Instead of Labels  Use JQM ButtonsSaturday, November 10, 12
    • Convert Our Create Page 24  Use Hints Instead of Labels  Use JQM Buttons  Theme ItSaturday, November 10, 12
    • Next Steps 25Saturday, November 10, 12
    • Next Steps 25  Convert the Remaining ViewsSaturday, November 10, 12
    • Next Steps 25  Convert the Remaining Views  Replace HTML Pages With AjaxSaturday, November 10, 12
    • Next Steps 25  Convert the Remaining Views  Replace HTML Pages With Ajax  Make the Site iOS FriendlySaturday, November 10, 12
    • 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
    • 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
    • My Blog 26 http://therockncoder.blogspot.com/Saturday, November 10, 12
    • Please Rate My Talk 27 http://spkr8.com/t/18331Saturday, November 10, 12
    • 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
    • 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
    • FeedbackSaturday, November 10, 12