quick & dirty mobile web with jquery mobile

Quick & Dirty Mobile Web with jQuery MobileTROY MILES - [email protected]

Saturday, November 10, 12

mailto:[email protected]

mailto:[email protected]

Sponsors


Our Agenda 3


Our Agenda

Why Mobile Web?

3


Our Agenda

Why Mobile Web? Why jQuery Mobile?

3


Our Agenda

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

3


Our Agenda

Why Mobile Web? Why jQuery Mobile? 4 Ways to Add Mobile to Your Site Detecting A Mobile Device

3


Our Agenda

Why Mobile Web? Why jQuery Mobile? 4 Ways to Add Mobile to Your Site Detecting A Mobile Device Let’s Get Dirty!

3


Our Agenda

Why Mobile Web? Why jQuery Mobile? 4 Ways to Add Mobile to Your Site Detecting A Mobile Device Let’s Get Dirty! Next Steps

3


Our Agenda

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

3


Why Mobile Web? 4


Why Mobile Web?

Mobile is Where Growth Is

4


Why Mobile Web?

Mobile is Where Growth Is 20% of Internet Users in the US & UK are Mobile Only

4


Why Mobile Web?

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%

4


Why Mobile Web?

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

4


Why Mobile Web?


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

4


Why Mobile Web?


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

4


Why Mobile Web?


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

4


What is jQuery Mobile?

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.

5


Why jQuery Mobile? 6


Why jQuery Mobile?

Its Free

6


Why jQuery Mobile?

Its Free Its Easy to Learn

6


Why jQuery Mobile?

Its Free Its Easy to Learn It Extends HTML5

6


Why jQuery Mobile?

Its Free Its Easy to Learn It Extends HTML5 It Supports a Wide Range of Devices

6


Why jQuery Mobile?

Its Free Its Easy to Learn It Extends HTML5 It Supports a Wide Range of Devices It is Not Feature Rich

6


Why jQuery Mobile?

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

6


4 Ways to Add Mobile 7


4 Ways to Add Mobile

Have Two Separate Sites Have Single Site, With Separate Controllers Single Site, With Separate Views Responsive Design And yes, there are other ways

7


Have Two Separate Sites 8


Have Two Separate Sites

Easy To Start

8



Easy To Start Difficult to Share Code and Resources Between Sites

8



Easy To Start Difficult to Share Code and Resources Between Sites Quickly Can Become a Maintenance Monster

8




Two Sites to Deploy

8




Two Sites to Deploy Two Databases to Deploy

8




Two Sites to Deploy Two Databases to Deploy Two Sites to Maintain

8




Two Sites to Deploy Two Databases to Deploy Two Sites to Maintain Two Sites to Enhance

8


Have Single Site, With Separate Controllers

9



The Desktop & Mobile Sites Each Have Their Own Controllers

9



The Desktop & Mobile Sites Each Have Their Own Controllers Allows for Some Sharing of Resources

9



The Desktop & Mobile Sites Each Have Their Own Controllers Allows for Some Sharing of Resources Only One Deployment

9



The Desktop & Mobile Sites Each Have Their Own Controllers Allows for Some Sharing of Resources Only One Deployment Bugs in the Controller or View

9


Single Site, With Separate Views 10


Single Site, With Separate Views

Code in the Controller Decides Which View to Show

10



Code in the Controller Decides Which View to Show High Degree of Code Sharing

10



Code in the Controller Decides Which View to Show High Degree of Code Sharing Users Get Locked into an Experience

10




Users Hate Getting Stuck

10




Users Hate Getting Stuck Users Sometimes Want to View the Full Site on Their Smart Phone

10


Responsive Design 11


Responsive Design

A Single Site With Single Controller and Views

11


Responsive Design

A Single Site With Single Controller and Views Site Uses CSS to Dynamically Resize Itself

11


Responsive Design

A Single Site With Single Controller and Views Site Uses CSS to Dynamically Resize Itself When Done Right It Looks Amazing

11


Responsive Design

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

11


Responsive Design

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

11


Responsive Design


The Scaling Is Done on the Client

11


Responsive Design


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

11


Responsive Design Sites 12


Responsive Design Sites

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

12


http://bostonglobe.com/

http://bostonglobe.com/

http://2012.inspireconf.com/

http://2012.inspireconf.com/

http://forefathersgroup.com/

http://forefathersgroup.com/

http://www.thesearethings.com/

http://www.thesearethings.com/

Detecting A Mobile Device 13


Detecting A Mobile Device

Nearly All Mobile Device Detection Algorithms Rely on the User Agent

13




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

13




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.

13





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

devices

13






devices They cost anywhere from $40 to $400 a month and more

13






devices They cost anywhere from $40 to $400 a month and more Luckily We Have a Free Way...

13


Detecting A Mobile Device 14



A website named: Detect Mobile Browsers

14



A website named: Detect Mobile Browsers It Use Regular Expressions to Detect 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

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

14


Let's Get Dirty! 15


Let's Get Dirty!

jQuery At A Glance

15


Let's Get Dirty!

jQuery At A Glance Make Copies

15


Let's Get Dirty!

jQuery At A Glance Make Copies Add Detection Code

15


Let's Get Dirty!

jQuery At A Glance Make Copies Add Detection Code Test It

15


Let's Get Dirty!

jQuery At A Glance Make Copies Add Detection Code Test It Add Mobile ViewPort and Meta-tags

15


Let's Get Dirty!

jQuery At A Glance Make Copies Add Detection Code Test It Add Mobile ViewPort and Meta-tags Add jQuery Mobile Files

15


Let's Get Dirty!

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

15


Let's Get Dirty!

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

15


jQuery Mobile At A Glance 16


jQuery Mobile At A Glance

jQuery Uses Attributes to Enhance Markup

16



jQuery Uses Attributes to Enhance Markup One of the Most Import Attributes is data-role

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

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

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

16


Let’s Get Dirty!

17


Make Copies 18


Make Copies

Copy the HomeController to MobileController

18


Make Copies

Copy the HomeController to MobileController Copy _LayoutPage to _MobileLayoutPage

18


Make Copies

Copy the HomeController to MobileController Copy _LayoutPage to _MobileLayoutPage Copy the Views

18


Add Detection Code 19


Add Detection Code

Create a Named Common

19


Add Detection Code

Create a Named Common Create a Class Named DetectMobileBrowser.cs

19


Add Detection Code

Create a Named Common Create a Class Named DetectMobileBrowser.cs Create a static Method, IsMobile, With the Following Signature:

19


Add Detection Code

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)

19


Add Detection Code

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

19


Add Detection Code

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

19


Test It 20


Test It

Our Website Should Now Be Able To Detect Mobile Traffic

20


Test It

Our Website Should Now Be Able To Detect Mobile Traffic Let’s Test It

20


Test It

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

20


Test It


Switcher Launch the Website, It Should Go To the Home page

20


Test It


Switcher Launch the Website, It Should Go To the Home page Turn on the Ultimate User Agent Switcher

20


Test It


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

20


Add Mobile ViewPort and Meta-tags 21


Add Mobile ViewPort and Meta-tags

Open Up the file _MobileLayoutPage.cshtml

21



Open Up the file _MobileLayoutPage.cshtml Add the meta-tags

21



Open Up the file _MobileLayoutPage.cshtml Add the meta-tags viewport, width=device-width

21



Open Up the file _MobileLayoutPage.cshtml Add the meta-tags viewport, width=device-width name=”apple-mobile-web-app-capable”, content=”yes”

21


Add jQuery Mobile Files 22


Add jQuery Mobile Files

Add the CSS Files

22


Add jQuery Mobile Files

Add the CSS Files Add the Script Files

22


Convert Our Index Page 23


Convert Our Index Page

Convert the <table> into a <ul>

23



Convert the <table> into a <ul> The data-role=”listview” Comes With Built In Styling

23



Convert the <table> into a <ul> The data-role=”listview” Comes With Built In Styling Remove unnecessary elements

23


Convert Our Create Page 24


Convert Our Create Page

Use Hints Instead of Labels

24



Use Hints Instead of Labels Use JQM Buttons

24



Use Hints Instead of Labels Use JQM Buttons Theme It

24


Next Steps 25


Next Steps

Convert the Remaining Views

25


Next Steps

Convert the Remaining Views Replace HTML Pages With Ajax

25


Next Steps

Convert the Remaining Views Replace HTML Pages With Ajax Make the Site iOS Friendly

25


Next Steps


Add Home Page Icons (Android Supports These Too)

25


Next Steps


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

25


My Blog

http://therockncoder.blogspot.com/

26


http://therockncoder.blogspot.com

http://therockncoder.blogspot.com

Please Rate My Talk

http://spkr8.com/t/18331

27




Summary

Why Mobile Web? Why jQuery Mobile? 4 Ways to Add Mobile to Your Site Detecting A Mobile Device We Got Dirty Next Steps Summary

28


Resources

jQuery Mobilehttp://jquerymobile.com/

jQuery Mobile ThemeRollerhttp://jquerymobile.com/themeroller/index.php

Detect Mobile Browsershttp://detectmobilebrowsers.com/

Ultimate User Agent Switcherhttps://chrome.google.com/webstore/detail/ultimate-user-agent-switc/ljfpjnehmoiabkefmnjegmpdddgcdnpo

Window Resizerhttps://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

29


http://jquerymobile.com/

http://jquerymobile.com/

http://jquerymobile.com/themeroller/index.php

http://jquerymobile.com/themeroller/index.php

http://detectmobilebrowsers.com/

http://detectmobilebrowsers.com/

https://chrome.google.com/webstore/detail/ultimate-user-agent-switc/ljfpjnehmoiabkefmnjegmpdddgcdnpo




https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh




Feedback


quick & dirty mobile web with jquery mobile

Technology