RWD with jQuery Mobile 1.3

Responsive Web Design with jQuery Mobile 1.3

Transcript

1. Responsive Web Design with jQuery Mobile @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/jqm-13 jQ uery M obile 1.3
2. Follow along: bit.ly/jqm-13 http://farm6.staticflickr.com/5262/5565984041_8e335f0ec0.jpg
3. Photos What’s interesting about these photos?
4. No hoax, jQuery Mobile can be used to create Response Web Designs on the desktop!
5. iOS Android Blackberry Windows WebOS Meego Kindle Nook Desktop & TV Bada No device customer left behind
6. #1 #2 TIP: All jQuery Mobile widgets are 100% flexible! A flexible foundation
7. Responsive tables - reflow jQ uery M obile 1.3 #1 #2
8. Responsive tables - chooser jQ uery M obile 1.3 #1 #2
9. We always had flexible grids...
10. Now we have responsive grids jQ uery M obile 1.3 #1 #2
11. Panels (sliding drawer) jQ uery M obile 1.3 TIP: Excellent widget for a “Content First” design
12. <ul data-role="listview" data-autodividers="true"> Auto-dividers jQ uery M obile 1.3
13. Listview auto-complete jQ uery M obile 1.3 <ul data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search contacts..."> #1 #2
14. File input support jQ uery M obile 1.3 <input type="file" name="avatar">
15. 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
16. Responsive Patterns Nested doll Bento box Ajax-include Append around Picturefill
17. Responsive images (Picturefill) Scott Jehl: https://github.com/scottjehl/picturefill
18. Responsive nested doll pattern Rachel Hinman: http://vimeo.com/39230026
19. Responsive bento box pattern Rachel Hinman: http://vimeo.com/39230026
20. 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
21. New Demos and API Sites http://view.jquerymobile.com/1.3.0/ jQ uery M obile 1.3
22. 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
23. #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...
24. NOTE: The DateBox API and documentation can be found at http:/ /dev.jtsage.com/jQM-DateBox2/ <input name="mydate" type="date" data- role="datebox" data-options='{ "mode":"calbox", "themeDateToday":"a", "themeDatePick":"b", "useFocus":true, "afterToday":true, // blackout past days "maxDays":365}'> // 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...
25. 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...
26. 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
27. What’s interesting about these photos now? Photos
28. 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
29. Thank You! @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/jqm-13
30. 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/