Slide 1

Slide 1 text

http://foolab.ca @foolabca jQuery Mobile: Sites That Feel Like Apps Northeast PHP, Cambridge – August 17, 2013

Slide 2

Slide 2 text

2 Purpose • Mobile site vs mobile app. • jQuery Mobile makes sites easy.

Slide 3

Slide 3 text

3 Anna Filina • Developer, mentor, project manager. • Fast & cost-effective delivery. • Writing a book: 10 warning signs in IT projects. • ConFoo organizer

Slide 4

Slide 4 text

4 Mobile approaches App Site Progressive enhancement Responsive design

Slide 5

Slide 5 text

5 Why choose mobile site? • Quick and inexpensive. • Point of entry for first-time users. • No download. • Others link to your site.

Slide 6

Slide 6 text

6 Does your site work on this? © Amazon

Slide 7

Slide 7 text

7 Challenges • Development takes time. • UI not suited for mobile. • Too many variables: • devices, • browsers, • capabilities.

Slide 8

Slide 8 text

8 Capabilities • Viewport size. • Pointing method. • Full keyboard. • Images support. • Number of colors. • Percent width • etc.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

© Apple, Google, Blackberry, Samsung, Amazon

Slide 11

Slide 11 text

Progressive enhancement

Slide 12

Slide 12 text

12 Mobile-specific events • Tap: quick or hold. • Swipe: left or right. • Orientation change.

Slide 13

Slide 13 text

Let’s build something

Slide 14

Slide 14 text

14 Includes • jquery-1.10.1.min.js • jquery.mobile-1.3.1.min.js • jquery.mobile-1.3.1.min.css

Slide 15

Slide 15 text

15 Button About

Slide 16

Slide 16 text

16 List

Slide 17

Slide 17 text

17
Shell

Slide 18

Slide 18 text

18

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

20
[...]

Slide 21

Slide 21 text

21
[...]

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Case Study Conference website

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

25

Slide 26

Slide 26 text

26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Dynamic filtering

Slide 29

Slide 29 text

29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Accordion

Slide 32

Slide 32 text

32 Documentation • api.jquerymobile.com

Slide 33

Slide 33 text

Best Practices

Slide 34

Slide 34 text

34 Long lists • Consider splitting into groups. • Few groups: use a navigation bar. • Many groups: use intermediate list.

Slide 35

Slide 35 text

35 Navigation • Use lists where appropriate. • Add back and/or home buttons. • Describe links.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

37 Round trips • Minimize round-trips. • Use multi-page documents. • Use sprite maps. Page A: 2.1KB Page B: 2.2KB Combined: 3.6KB

Slide 38

Slide 38 text

38 Sprite map a.icon { background-image: url(/images/icons.png); width: 18px; height: 18px; } a.icon.back { background-position: -18px -0px; }

Slide 39

Slide 39 text

39 External resources Include http://code.jquery.com/mobile/1.0/jquery.mobile- 1.3.1.min.css Instead of js/jquery.mobile-1.3.1.min.css

Slide 40

Slide 40 text

40 External Resources

Slide 41

Slide 41 text

Toolbox

Slide 42

Slide 42 text

42 Codiqa: UI Builder

Slide 43

Slide 43 text

43 Theme Roller

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 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/

Slide 46

Slide 46 text

Twitter: @afilina Blog: afilina.com • Overcome technical challenges. • Ship your project faster. Q & A