Responsive Web Design with jQuery Mobile @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/jqm-13 jQ uery M obile 1.3

Follow along: bit.ly/jqm-13 http://farm6.staticflickr.com/5262/5565984041_8e335f0ec0.jpg

Photos What’s interesting about these photos?

No hoax, jQuery Mobile can be used to create Response Web Designs on the desktop!

iOS Android Blackberry Windows WebOS Meego Kindle Nook Desktop & TV Bada No device customer left behind

#1 #2 TIP: All jQuery Mobile widgets are 100% flexible! A flexible foundation

Responsive tables - reflow jQ uery M obile 1.3 #1 #2

Responsive tables - chooser jQ uery M obile 1.3 #1 #2

We always had flexible grids...

Now we have responsive grids jQ uery M obile 1.3 #1 #2

Panels (sliding drawer) jQ uery M obile 1.3 TIP: Excellent widget for a “Content First” design

Auto-dividers jQ uery M obile 1.3

Listview auto-complete jQ uery M obile 1.3

#1 #2

File input support jQ uery M obile 1.3

More new features... jQ uery M obile 1.3 Dual range slider data-clear-btn=”true” New icons •jQuery 1.9.1 (and 2.0.0) support

Responsive Patterns Nested doll Bento box Ajax-include Append around Picturefill

Responsive images (Picturefill) Scott Jehl: https://github.com/scottjehl/picturefill

Responsive nested doll pattern Rachel Hinman: http://vimeo.com/39230026

Responsive bento box pattern Rachel Hinman: http://vimeo.com/39230026

Ajax include pattern http://filamentgroup.com/lab/ajax_includes_modular_content/ NOTE: Technology articles are only loaded when min-width: 30em NOTE: Entertainment articles are lazy loaded after page load

New Demos and API Sites http://view.jquerymobile.com/1.3.0/ jQ uery M obile 1.3

NOTE: Nearly 75% of Web developers use Geolocation, making it the most popular HTML5 API. D em os com ing soon... #1 #2 Maps integration

#1 #2 TIP: The bar chart is 100% native jQuery Mobile. Can you guess what widget it is? It’s a single item inset list with a flexible background color representing the value of the bar chart. Bar and pie charts D em os com ing soon...

NOTE: The DateBox API and documentation can be found at http:/ /dev.jtsage.com/jQM-DateBox2/ // blackout days > 365 TIP: The original size of the day buttons were 30 X 36 px. I increased them to 40 X 40 px to make them more touch friendly. Calendar D em os com ing soon...

TIP: To view all the data elements that are available from Twitter's search API, launch this URL in your browser: “http:/ /search.twitter.com/search.json?q=xmen”. This is the basic search API where the value of the “q” parameter is our searchable keyword(s). In this case, we are searching Twitter for any tweets with the keyword “xmen” in them. Client-side Twitter integration D em os com ing soon...

In this demo we show you how to: • Use backbone and require.js for client-side MVC integration. • How to use the multi-page template to load all pages in a single request. • How to load data from Twitter's Restful API. • How to cache the Twitter resultset in localStorage. Backbone and Require.JS

What’s interesting about these photos now? Photos

1) Learn the fundamentals to get up and running quickly 2) Learn to configure and customize jQuery Mobile 3) Gain hands-on experience with all the new 1.3 responsive widgets Training agenda: bit.ly/training-jqm Express jQuery Mobile Training

Thank You! @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/jqm-13

Image Credits Alien http://www.flickr.com/photos/trevorvangorp/55863412/sizes/s/in/photostream/ Bigfoot http://en.wikipedia.org/wiki/File:Smalfut.jpg Dragon http://www.flickr.com/photos/mcampoillustrator/4456163361/ Loch ness http://en.wikipedia.org/wiki/File:Hoax_Loch_Ness_Monster_1934.jpg Mermaid http://www.flickr.com/photos/wonderfullycomplex/4238016289/ Unicorn http://en.wikipedia.org/wiki/File:Oftheunicorn.jpg Football player http://www.flickr.com/photos/42757699@N04/5215096404/