jQuery Mobile: Sites That Feel Like Apps

Slide 1

Slide 1 text

FooLab http://foolab.ca @foolabca jQuery Mobile: Sites That Feel Like Apps HTML5 Montreal - October 29, 2012

Slide 2

Slide 2 text

FooLab This presentation is suited for all levels

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 4 User group Non proﬁt conference FooLab Training Project rescue @aﬁlina

Slide 5

Slide 5 text

FooLab Mobile Site vs Mobile App • Mobile site • Quick and inexpensive • Point of entry for ﬁrst-time users • Others link to your site • Mobile application • Faster • More features and control • No white loading pages • Works ofﬂine 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-Speciﬁc 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 Button 14 About

Slide 15

Slide 15 text

FooLab List 15

Item 1

Slide 16

Slide 16 text

FooLab

About

[...]

16 Shell

Slide 17

Slide 17 text

FooLab Use Case OSCON Presentations on Mobile

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

FooLab Improvements 20 • No zooming required. • Collapsible blocks: see available info without scrolling. • Share buttons always visible.

Slide 21

Slide 21 text

FooLab Features • Transitions • Dialogs • Themes • History and caching • List ﬁltering • Toolbars and button groups • Forms • Slider • Flip switch • AJAX submitting 21

Slide 22

Slide 22 text

FooLab Best Practices Long lists, complex navigation, performance.

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

FooLab Performance 25 • Keep transitions to minimum. • Slow devices. • Loses precious time. • Magnetic ink’s refresh rate.

Slide 26

Slide 26 text

FooLab Round Trip 26 • Requests are slow. • Use multi-page documents to reduce round-trips. Page A: 2.1KB Page B: 2.2KB A+B: 3.6KB Request time Download time

Slide 27

Slide 27 text

FooLab Sprite Map a.icon { background-image: url(/images/icons.png); width: 16px; height: 16px; } a.icon.back { background-position: -16px -0px; } 27

Slide 28

Slide 28 text

FooLab External Resources 28 • Link to jquery.com for JS and CSS ﬁles.

Slide 29

Slide 29 text

FooLab External Resources 29

Slide 30

Slide 30 text

FooLab Toolbox

Slide 31

Slide 31 text

FooLab Codiqa: UI Builder 31

Slide 32

Slide 32 text

FooLab Theme Roller 32

Slide 33

Slide 33 text

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

Slide 34

Slide 34 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/ 34

Slide 35

Slide 35 text

FooLab Q & A Twitter: @aﬁlina E-mail: [email protected]