Tweet
Tweet

Slide 1

Slide 1 text

FooLab jQuery Mobile: Sites That Feel Like Apps OSCON - July 19, 2012

Slide 2

Slide 2 text

FooLab This presentation is suited for all levels Slides and code will be available online: @afilina #oscon #jquerymobile

Slide 3

Slide 3 text

FooLab What You Will Learn • Mobile site / mobile app. • Device jungle. • Why it’s hard to build mobile sites. • Overview of jQuery Mobile. • Adapting an existing site to the mobile. • Best practices. 3

Slide 4

Slide 4 text

FooLab Anna Filina • PHP Quebec - user group, organizer. • ConFoo - non for profit Web conference, organizer. • FooLab Inc. - IT consulting, vice-president. • I write code. • I train and supervise programmers. • I make recommendations. 4

Slide 5

Slide 5 text

FooLab Mobile Site vs Mobile App • Mobile site • Quick and inexpensive • Point of entry for first- time users • Others link to your site • Mobile application • Faster • More features and control • No white pages • Works offline 5

Slide 6

Slide 6 text

FooLab Does Your Site Work on This? 6 © Amazon

Slide 7

Slide 7 text

FooLab The Problem • Development takes time. • UI looks different everywhere. • Too many variables: • devices, • browsers, • capabilities. 7

Slide 8

Slide 8 text

FooLab Capabilities • Viewport size. • Pointing method: • joystick, • stylus, • touchscreen, • clickwheel. • AJAX support. • QWERTY keyboard. • Images support. • Number of colors. • HTTPS support. • UTF-8 support. • Percent width. • ... 8

Slide 9

Slide 9 text

FooLab Solution: jQuery Mobile • One codebase to rule them all. • JavaScript framework. • Site looks the same everywhere. • UI adapted for mobile • Works on many devices. 9

Slide 10

Slide 10 text

FooLab 10 © Apple, Google, Blackberry, Samsung, Amazon

Slide 11

Slide 11 text

FooLab Mobile-Specific Events 11 • Tap: quick or hold. • Swipe: left or right. • Orientation change.

Slide 12

Slide 12 text

FooLab Let’s Build Something

Slide 13

Slide 13 text

FooLab Basics 13

Slide 14

Slide 14 text

FooLab
14

Slide 15

Slide 15 text

FooLab
15

Slide 16

Slide 16 text

FooLab
About
16

Slide 17

Slide 17 text

FooLab
About
[...]
17

Slide 18

Slide 18 text

FooLab
About
[...]
18 http://conference/jqm-intro/basics.html

Slide 19

Slide 19 text

FooLab Use Case OSCON Presentations on Mobile

Slide 20

Slide 20 text

20

Slide 21

Slide 21 text

21

Slide 22

Slide 22 text

FooLab Improvements 22 • No zooming required. • Search box to filter list items. • The entire block is clickable. • Less info to reduce clutter. • Separators to indicate days.

Slide 23

Slide 23 text

23

Slide 24

Slide 24 text

FooLab Improvements 24 • No zooming required. • Collapsible blocks: see available info without scrolling. • Share buttons always visible. http://conference/jqm-intro/oscon.html

Slide 25

Slide 25 text

FooLab Features • Transitions • Dialogs • Themes • History and caching • List filtering • Toolbars and button groups • Forms • Slider • Flip switch • AJAX submitting 25

Slide 26

Slide 26 text

FooLab Best Practices Open question to the audience.

Slide 27

Slide 27 text

FooLab Big Lists 27 • Consider splitting into groups. • Few groups: use a navigation bar. • Many groups: use intermediate list.

Slide 28

Slide 28 text

FooLab Navigation 28 • Use lists where appropriate. • Add back and/or home buttons. • Keep it narrow and shallow. • Describe links.

Slide 29

Slide 29 text

FooLab Performance 29 • Keep transitions to minimum. • Slow devices. • User time. • Magnetic ink.

Slide 30

Slide 30 text

FooLab Performance 30 • Minimize round-trips. • Use multi-page documents. • Use sprite maps. List: 2.1KB Details: 2.2KB Combined: 3.6KB

Slide 31

Slide 31 text

FooLab Performance 31 • Link to jquery.com for .js and .css files.

Slide 32

Slide 32 text

FooLab Goodies

Slide 33

Slide 33 text

FooLab Codiqa: UI Builder 33

Slide 34

Slide 34 text

FooLab Theme Roller 34

Slide 35

Slide 35 text

FooLab PhoneGap 35 • Convert your mobile UI to a native app. • Supports 7 platforms. • Saves even more money.

Slide 36

Slide 36 text

FooLab UI Design 36 • Make it easy to accomplish a task. • Prevent user mistakes. • Allow mistake recovery. ===== Done from my mobile. Sorry for any private photos accidentally sent to your boss.

Slide 37

Slide 37 text

FooLab Resources • jQuery Mobile: http://jquerymobile.com/ • Sprite maps: http://www.alistapart.com/articles/sprites/ • UI builder: http://www.codiqa.com/ • ThemeRoller: http://jquerymobile.com/themeroller/ • PhoneGap: http://phonegap.com/ 37

Slide 38

Slide 38 text

FooLab Q & A Twitter: @afilina E-mail: [email protected]