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….

http://devnet.kentico.com/Videos/Mobile/Kentico-Technical-Learning-Responsive-Design-with.aspx

Available at

A quick review…

Solution DrawbacksAccess Methods

Two site maps

Separate navigation, site map and page content.

Easy to implement reusing existing skills, hosting and content.

Mobile Sub Site

Create a separate site alongside the existing site to serve mobile optimised content.

Which

access

methods

do you

require?

New skills needed.

Could break existing site.

Complexity

Standards not ratified.

Single screen to rule all.

For example; different menu formats, or switching between column or row content layout.

Responsive Design

Enhance existing site so that it dynamically changes to support mobile.

The Web

Search Engines

Other Sites

Banner Ads

Printed Media

Web Address

QR Codes

Different versions of the application needed for Apple, Android, Windows, Blackberry, etc.

Requires continued maintenance as platforms change.

Essential for high end gaming.

Works without a network connection.

Native/Hybrid Applications

Create a program that runs on the mobile device independent of the browser or internet.

Application Stores

Benefits

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.

JQUERY MOBILEScenario

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/

MEET JQUERY MOBILEjQuery in action

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

Client Side Scripting Layer (Javascript,

jQuery)

Presentation Layer (CSS)

Content Layer (HTML)

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

Site performance

Layered approach ensures that the content is loaded first, then styles and then behaviors

ModularityAssists the developer in managing the application

PortabilityCross browser and cross device

supportWebsites remain effective not matter

the browser or device

AccessibilityContent is within the reach of all site visitors

Peel the onion of your code! The Benefits of PE!

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

PAGE COMPONENTSjQuery in Action

Data-role = “??”

Data-* Attribute• Used by Javascript • No pre-defined functionality• Used to make attributes

Data-role• Used by jQuery UI and

jQuery Mobile• 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

Pages• Consists of an element with a

data-role="page" attribute.• Within the "page" container, any

valid HTML markup can be used with data-roles of "header", "content", and "footer"

Dialogs• Add the data-rel=“dialog” to

the link• Gives the appearance of a

modal dialog

jQuery mobile allows multiple pages stored in a single page!

Buttons

• All buttons in the body content are styled as block-level elements to fill screen width

• Use anchor links for navigation buttons, and input or form submission.

• Basic

• Inline

<A href="#" data-role="button" data-inline="true">True</A>

<A href="#" data-role="button">Button1</A>

Navigation - Listview

• Lists… lists and more lists..

• Coded as data-role=“Listview”

• Built in filter

• Unordered List

• Ordered list

<ul data-role="listview"> <li>Item</li> <li>Item</li> <li>Item</li></ul>

<ol data-role="listview"> <li>Item</li> <li>Item</li> <li>Item</li></ol>

This is just the basics!

<ul data-role="listview" data-inset="true" data-filter="true">

Navigation - Toolbars

• Set of buttons across top of page

• Coded as simple data-role=“navbar”

<nav data-role="navbar"> <a href="#">Reviews</a> <a href="#">Partners</a> <a href="#">Customers</a> <a href="#">Training</a> <a href="#">Purchase</a></nav>

This is just the basics!

Checkboxes and Radio buttons

• Enhanced checkboxes, radio buttons and others

• Checkboxes<fieldset data-role="controlgroup"> <legend>Filter Restaurants 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!!!

INTEGRATION WITH KENTICO CMSjQuery in Action

Show me an Example!

E-Commerce Full Site• http://demostore.kenticolab.com/Home.aspx

E-Commerce Mobile Site• 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