jQuery Plugins

niranjan_jan007

@jqueryconf.in / July 24

for Large Scale

Responsive Web Design

Projects

Niranjan-J007

0

Audience poll

niranjan_jan007

1

Responsive Web Design  

niranjan_jan007

2

+

jQuery 

Responsive Web Design  

=

niranjan_jan007

3

Demo

niranjan_jan007

4

Challenges

niranjan_jan007

5

1. Device Neutral Design

niranjan_jan007

6

Media Query

Responsive Design

7

1. Device Neutral Design

Unique screen resolutions

Phones: 140+ 

Tablets: 40+

niranjan_jan007

8

Device Screen Fragmentation

Device Neutral Design

Design for continuous range of resolutions

niranjan_jan007

9

User eXperience: Device features

• Swipe navigation
• Popup keyboards
• Tap to call
• Zoom
• Print support

1. Device Neutral Design

niranjan_jan007

10

1. Device Neutral Design

Slideout.js

niranjan_jan007

11

1. Device Neutral Design

Accessibility

• PayPal Bootstrap plugin

niranjan_jan007

12

Print support

1. Device Neutral Design

niranjan_jan007

13

Poll

Are touch events W3C standard?

niranjan_jan007

14

2. Browsers & Progressive Enhancement

niranjan_jan007

15

Progressive Enhancement

niranjan_jan007

5

16

Progressive Enhancement

Enhance.JS

niranjan_jan007

17

5

Browsers - Plugins

Mobile browser quirks

• float:fixed: Fixed-fixed.js
• overflow:auto: Overthrow.js 

IE Browsers

• Respond.JS
• Conditional IE statements

niranjan_jan007

18

2. Browsers 

niranjan_jan007

19

2.a Content

• Load
• Hide

niranjan_jan007

20

2.a Content

niranjan_jan007

• Load - Conditional
• Hide

21

2.a Content - Plugins

• loadCSS.js 
• loadJS .js
• Ajax-Include.js
• Append-Around.js

niranjan_jan007

22

2.a Content - Plugins

• mediaCheck.js
• jRespond.js
• ConditionerJS.js

niranjan_jan007

23

Demo

24

2.b Images

niranjan_jan007

SVG

Photos

25

File size

• PNG: 153KB
• GIF: 42KB
• JPEG: 30KB
• WebP: 18KB

2.b Images - Filetype

niranjan_jan007

26

Reduction in avg image content

1.4MB >> 0.8 MB

2.b Images

niranjan_jan007

27

2.b Images

niranjan_jan007

28

Plugin

• Pixity.js - Phil Dutson

2.b Images - Plugins

niranjan_jan007

29

Reduction in avg image content

0.8 MB >> 0.5 MB

[for mobile]

Demo

niranjan_jan007

10

30

Node.js

• Imager.js

2.b Images - Plugins

niranjan_jan007

31

10

Polyfills

• srcset-polyfill
• Picturefill

2.b Images 

niranjan_jan007

32

2.b Images - Plugins

Videos

• fitVids.js

niranjan_jan007

Carousel

• owlCarousel.js

33

2.b Images - Infographics

niranjan_jan007

34

Demo

niranjan_jan007

10

35

Footable

2.c Table - Plugins

niranjan_jan007

36

Demo

niranjan_jan007

37

Poll

Is Viewport meta tag W3C standard?

niranjan_jan007

38

Node.js

• PhantomJS
• CasperJS

3. Testing 

niranjan_jan007

15

39

Self

• jsConsole.com

3. Testing 

niranjan_jan007

40

Own lab

• RemotePreview.js

Community

• Community sharing

Commercial - Subscription

• Browserstack.com

3. Testing 

niranjan_jan007

41

Framework

niranjan_jan007

FRWD

42

FRWD - Framework for RWD

niranjan_jan007

43

FRWD - Framework for RWD

niranjan_jan007

44

Poll

Do media queries inside iFrames detect real screen size of parent document?

niranjan_jan007

45

Q & A

niranjan_jan007

Product managers

• Don't miss out on Omni channel experience
  • ​Design for HTML4
  • Enhance for HTML5
•  
• Be prepared for new browser release  (Current Version + 1)
•  
• Follow FRWD

Parting thoughts

niranjan_jan007

46

Architects

• Set Performance bud​get
• Ensure 100/100 score at webpagetest.org

Parting thoughts

Developers

• Follow progressive enhancement
• Have component level testing for all browsers
• Explore Flexbox
• Create re-usable jQuery plugins

UI Designers

• Promote
  • WebP images
  • SVG Sprites
• Provide UI design for progressive enhancement

niranjan_jan007

47

Thank You!

niranjan_jan007