Using jQuery Mobile to Build Device-Agnostic Pages

Transcript

1. Using jQuery Mobile to Build Device-Agnostic Pages Asta Gindulyte
2. About me: where I work http://pubchem.ncbi.nlm.nih.gov/
3. More about me jQuery user for ~ 3 years jQuery Mobile user for ~ 5 months
4. I CAN CODEZ jQUERY I CAN CODEZ jQUERY
5. We need to re-do our website...
6. Web development What has changed over the past 5 years?
7. Web capable devices
8. Make the new website work on all web-capable devices!
9. Doesn't the old website “work”?
10. Works better on some devices than others NOT device-agnostic website
11. agnostic adjective • (in a nonreligious context) having a doubtful or noncommittal attitude toward something • [usually in combination] Computing denoting or relating to hardware or software that is compatible with many types of platforms or operating systems – Oxford English Dictionary
12. Device-agnostic website Works well on all devices
13. Device-agnostic web development challenges • Screen size • Touch • Content organization • Testing
14. Screen size variety challenge • Page width should adjust so that there is no need to scroll • Font should be big enough to read without having to zoom in
15. Touch challenge • Buttons, links should be big enough • Swipe and other gestures should be enabled when intuitive
16. Content organization challenge • Showing/hiding things based on screen size might penalize small screen users • Having very different layouts for small vs large screen device might confuse users
17. Device testing challenge • No free lunch – really need test on all devices to make sure everything is working as expected • Emulators like screenfly can help though
18. “write less, do more” Why jQuery Mobile? CSS
19. Creating a UI for a canvas drawing widget using jQuery Mobile form elements, buttons Close to zero CSS!
20. Creating a Search page with jQuery Mobile Listviews
21. jQuery Mobile responsive-panel used for search result f i ltering
22. Why jQuery Mobile? • Cross-browser, cross-device • Touch-friendly • Responsive since version 1.3 • Layout and theming engine • Ajax page navigation • Great Documentation!
23. Follow progress • Blog • Facebook • Twitter • Google+ Anticipating a beta release in October, 2013
24. Acknowledgments PubChem Team jQuery Foundation