Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Drupal on the go with jQuery Mobile

From DrupalCon Chicago 2011, Engineers Tim Cosgrove and Brian McMurray explore what happens when Drupal is combined with the nascent jQuery Mobile platform.

Phase2 Technology

on 21 May 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Drupal on the go with jQuery Mobile

+ Tim Cosgrove
@timcosgrove Brian McMurray
@bmcmurray Any questions? Why Mobile? 1.83 billion mobile browsers by 2013, 1.78 billion desktop

By 2015, a majority of people will use a mobile device as their primary internet access device Mobile sites need: Simple, finger-friendly controls

To work on many browsers on many operating systems

To surface relevant information quickly jQuery Mobile
Style and Javascript jQM captures typical mobile device gestures as events: tap & hold, swipe, orientation change, etc. No Javascript coding required. Markup should be HTML5 compliant. An HTML5 doctype is required. HTML5 data-* attributes are used to mark elements as jQM elements and to pass configuration information to jQM. A minimal set of jQM elements looks like this: <div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div> <!DOCTYPE html> <div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div> Contents of the page container will be loaded via AJAX Outer content ignored scripts
footer info How did we solve this? A patch:
Keeps track of loaded scripts and styles and does not reload them
Adds Drupal.attachBehaviors to jQM's page retrieval/build method

AJAX can be turned off per-link, or at the framework level.

Framework level is safer. HTML5 What is jQuery Mobile? Project of the jQuery Foundation

Built upon jQuery and jQuery UI

Web presentation framework optimized for touch-enabled devices and small screens

A drop-in technology that transforms semantic HTML in a mobile-device friendly display Uses progressive enhancement to provide as polished an experience as possible for devices that support it while degrading gracefully on devices with less extensive support for Javascript and CSS.

Aim to support a wide variety of mobile platforms and browsers. source: Gartner Mobify Drupal-as-services and Native App Mobify has its own applications to allow you to quickly create a mobile-optimized site from your existing site. Use Drupal for the backend aspects and make that data available as services to a native app.

See "Developing Apps for iPhone/iPad/Android using Drupal as Base System" at 1:00 pm in the Acquia Room. Mobile on Drupal Themes Themes make different assumptions about what you may want to be doing with your website and will need to be evaluated accordingly.

Note: not many mobile themes currently have Drupal 7 versions. There are a number of mobile themes already out there. jQuery Mobile has two broad functions:

Provides touch-optimized interfaces for modern devices while degrading gracefully for other form factors

Performs page requests and form submissions via AJAX to minimize mobile bandwidth usage and provide more responsive sites. Why this is a problem: scripts outside page load
form submission AJAX/AHAH where possible ...but you can, of course. First load Content Scripts Scripts Content Second load AJAX First load Scripts ...and this way also: scripts inside AJAX Scripts Second load Content Content jQuery Mobile BoF Missouri Room at 2:15 today Thanks! jQueryMobile + jQM jQueryMobile: module
inserts library files
provides form element alters jQM: theme
requires jQueryMobile module
provides minor adjustments for Drupal-specific markup, but is otherwise mostly straight jQM
can be used directly or as a base theme Demo Overview Admin Challenges large tables

anything draggable

Views, Panels....

contrib modules in general

what admin makes sense on mobile? Live demo:


Twitter: remove jQuery Mobile patch

integration with jQM theme tool

test with contributed modules

community use, testing, feature requests General Challenges (Semantic HTML5 elements also work.) HTML5 data-* attributes? Any data-* attribute is storage for private data that will not affect layout or presentation.

HTML5 compliant; will validate.

http://ejohn.org/blog/html-5-data-attributes/ Markup and Display Apart from a bit of padding and header font adjustments, jQM leaves most of your markup alone. Many form elements will be transformed without any extra markup work. However, in many cases you can use data-* attributes to modify elements. Additionally, jQM allows you to group elements by using data-* attributes in surrounding elements. jQuery Mobile supports 6 CSS-based page transitions slide
flip Will it Blend? jQM has its own theming system, which can be applied to elements via
data-theme. Allows up to 26 variations

Customizable via a tool similar to theme-roller (still to come). http://tha.cm/jqm-demo


@timcosgrove + BFFs! (...in time.) What is jQuery Mobile?

What other options are out there for Mobile with Drupal?

How does jQuery Mobile work?

jQuery Mobile + Drupal == BFF? Hi there I am some text.
Full transcript