Strategies For Progressive Enhancement

A presentation at Think Vitamin JavaScript Conference in September 2010 in by Drew McLellan

Slide 1

Slide 1

  • STRATEGIES FOR - PROGRESSIVE ENHANCEMENT THINK VITAMIN JAVASCRIPT CONFERENCE - 13 SEPTEMBER 2010 -

Slide 2

Slide 2

DREW MCLELLAN

Slide 3

Slide 3

FRONT END DEVELOPER (SOMETIMES)

Slide 4

Slide 4

JQUERY

Slide 5

Slide 5

GOOD JAVASCRIPT DESIGN STARTS WITHOUT JAVASCRIPT

Slide 6

Slide 6

THE WEB WORKS IN LAYERS

Slide 7

Slide 7

1 HTML IMPLEMENTATION

Slide 8

Slide 8

2 STYLE WITH CSS

Slide 9

Slide 9

3 ENHANCE WITH JAVASCRIPT

Slide 10

Slide 10

4 CHECK YOU’VE NOT BROKEN ANYTHING

Slide 11

Slide 11

PROGRESSIVE ENHANCEMENT !== GRACEFUL DEGRADATION

Slide 12

Slide 12

BE THE BEST DEVELOPER YOU CAN BE

Slide 13

Slide 13

“WE REQUIRE JAVASCRIPT”

Slide 14

Slide 14

DESIGNING A FEATURE TO WORK WITHOUT JAVASCRIPT IS NOT EXTRA EFFORT

Slide 15

Slide 15

IT’S BASE EFFORT.

Slide 16

Slide 16

ADDING JAVASCRIPT IS THE EXTRA BIT

Slide 17

Slide 17

PRIORITISE BASIC FUNCTIONALITY

Slide 18

Slide 18

HIJACK!

Slide 19

Slide 19

SIMPLE, RIGHT?

Slide 20

Slide 20

A SIDE NOTE ON CSS...

Slide 21

Slide 21

<body> $(‘body’).addClass(‘js’); <body class=“js”> .js #thing

Slide 22

Slide 22

PREVENT CSS FOR HIJACKED ELEMENTS MESSING WITH THE DEFAULT STATE

Slide 23

Slide 23

THUMBNAIL IMAGES

Slide 24

Slide 24

“ADD A FRIEND” LINK

Slide 25

Slide 25

BASIC AJAX FORM

Slide 26

Slide 26

DRAG’N’DROP REORDERING

Slide 27

Slide 27

MODAL DIALOGUES

Slide 28

Slide 28

CAROUSELS

Slide 29

Slide 29

MORE CAROUSELS

Slide 30

Slide 30

REMEMBER:

Slide 31

Slide 31

1 HTML IMPLEMENTATION

Slide 32

Slide 32

2 STYLE WITH CSS

Slide 33

Slide 33

3 ENHANCE WITH JAVASCRIPT

Slide 34

Slide 34

4 CHECK YOU’VE NOT BROKEN ANYTHING