Kentico Technical Learning
Exploring jQuery Mobile
Thomas Robbins
@trobbins

Our agenda…
• Getting started
• Scenario: jQuery mobile
• jQuery in Action: Meet jQuery Mobile
• jQuery in Action: Page components
• jQuery in Action: Integration with Kentico CMS

GETTING STARTED

This webinar is a follow up to….
Available at
http://devnet.kentico.com/Videos/Mobile/Kentico-Technical-Learning-Responsive-Design-with.aspx

A quick review…
Access Methods Solution Benefits Drawbacks
The Web Mobile Sub Site Separate navigation, site
map and page content.
Search Engines Create a separate site
alongside the existing site to Easy to implement reusing Two site maps
serve mobile optimised existing skills, hosting and
Other Sites content. content.
Which Banner Ads
access Printed Media Responsive Design
Single screen to rule all. New skills needed.
For example; different Could break existing site.
Enhance existing site so that it
methods Web Address dynamically changes to
menu formats, or switching
Complexity
between column or row
support mobile. content layout. Standards not ratified.
do you QR Codes
require? Native/Hybrid Different versions of the
application needed for
Applications Essential for high end
Apple, Android, Windows,
Application Create a program that runs
gaming.
Blackberry, etc.
Stores on the mobile device Works without a network
Requires continued
independent of the browser connection.
maintenance as platforms
or internet. change.

Generic mobile requirements checklist…
• Is it readable?
– Consider how easy it is to read text in
columns at various widths and page
sizes.
• Is it visible?
– Make sure all the key information is
above the fold to prevent scrolling.
– Strike the proper balance between
number of display items and detail
level.
• Is it usable?
– Consider the page look when the
page elements are at the proper size
and location for a screen size.

Scenario
JQUERY MOBILE

What is a mobile framework?
A mobile framework involves a combination of Javascript, CSS
and other assets that aid in the styling of the mobile
experience.
There are many choices!
http://www.markus-falk.com/mobile-frameworks-comparison-chart/

Our Scenario…
http://jquerymobile.com/

jQuery in action
MEET JQUERY MOBILE

What is jQuery Mobile?
• JavaScript in a unified user interface
• Works across the most-used mobile devices
and support mobile browsers
• Treats mobile web browsers exactly the same
as desktop web browsers

All pages in jQuery mobile….
• Are built on a foundation of clean, semantic
HTML
• Ensure compatibility with pretty much any web-
enabled device
• Attempt to transform the semantic page into a
rich, interactive experience
• Leverages the power of jQuery and CSS
• Are responsive
• Applies progressive enhancement techniques

Responsive design IS…
• Key elements
– Fluid layouts/grid
– Flexible images and media
– CSS Media queries
• Google recommends responsive
design for better SEO!
Examples
• http://www.ecentricarts.com/
• http://www.newbornfree.com/home
• http://www.microsoft.com
• Sample corporate site

Responsive design ISN’T…
• A single technology
• A checkbox in Kentico
• A magic formula
• A quick fix

Progressive enhancement
Basic Definition: Progressive enhancements is the separation of HTML, CSS and Javascript
in your website. When these website components are compartmentalized a website can
more easily allow the sites ability to become enhanced depending on the web browser’s
capabilities
Peel the onion of your code! The Benefits of PE!
Client Side Scripting Accessibility
Layer (Javascript,
jQuery) Content is within the reach of all site visitors
Presentation Layer
Portability
(CSS) Cross browser and cross device Websites remain effective not
support matter the browser or device
Modularity
Assists the developer in managing the application
Content Layer (HTML)
Site performance
Layered approach ensures that the content is loaded first, then styles and
then behaviors

jQuery Mobile Boiler Plate Code
# Description
5 Recommended viewport configuration
6 jQuery mobile CSS
7 jQuery library declaration
8 Customizations that may look to override jQuery’s configuration
9 jQuery mobile library must be declared after jQuery and any custom scripts
12 data-role=“page” defines the page container
13 data-role=“header” is the header and title bar
16 data-role=“content” is the content body
19 data-role=“footer” contains the footer bar

jQuery in Action
PAGE COMPONENTS

Data-role = “??”
Data-* Attribute Data-role
• Used by Javascript • Used by jQuery UI and
• No pre-defined functionality jQuery Mobile
• Used to make attributes • An attribute of an HTML
elements
• Used to give native look and
feel
• Used for elements like
pages, buttons etc.
$("#list").data("role","header"); <div data-role="page" id="home">

Pages & Dialogs
jQuery mobile allows multiple pages stored in a single page!
Pages Dialogs
• Consists of an element with a • Add the data-rel=“dialog” to
data-role="page" attribute. the link
• Within the "page" container, any
valid HTML markup can be used • Gives the appearance of a
with data-roles of "header", modal dialog
"content", and "footer"

Buttons
• All buttons in the body • Basic
content are styled as <A href="#" data-
role="button">Button1</A>
block-level elements to
fill screen width
• Use anchor links for
navigation buttons, and • Inline
input or form <A href="#" data-role="button"
submission. data-inline="true">True</A>

Navigation - Listview
• Lists… lists and more • Unordered List
lists.. <ul data-role="listview">
<li>Item</li>
• Coded as data- <li>Item</li>
<li>Item</li>
role=“Listview” </ul>
• Built in filter • Ordered list
<ul data-role="listview" data-
inset="true" data-filter="true"> <ol data-role="listview">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
This is just the basics!

Navigation - Toolbars
• Set of buttons across <nav data-role="navbar">
<a href="#">Reviews</a>
top of page <a href="#">Partners</a>
<a href="#">Customers</a>
• Coded as simple data- <a href="#">Training</a>
<a href="#">Purchase</a>
role=“navbar” </nav>
This is just the basics!

Checkboxes and Radio buttons
• Enhanced checkboxes, • Checkboxes
radio buttons and <fieldset data-role="controlgroup">
<legend>Filter Restaurants
others By:</legend>
<input type="checkbox"
name="checkbox-french"
id="checkbox-french">
<label for="checkbox-
french">French</label>
<input type="checkbox"
name="checkbox-italian"
id="checkbox-italian">
<label for="checkbox-
italian">Italian</label>
<input type="checkbox"
name="checkbox-greek" id="checkbox-
greek">
<label for="checkbox-
greek">Greek</label>
</fieldset>

This is just the basics!!!

jQuery in Action
INTEGRATION WITH KENTICO CMS

Show me an Example!
E-Commerce Full Site E-Commerce Mobile Site
• http://demostore.kenticolab.com/Home.aspx • http://demostore.kenticolab.com/Mobile/Home.aspx
http://devnet.kentico.com/Blogs/Milan-Kacurak/January-2013/Integrating-jQuery-Mobile-into-Kentico-CMS.aspx

Questions
Thanks!
Thomas Robbins, Chief Evangelist
thomasr@kentico.com
@trobbins