Tweet
Tweet

Slide 1

Slide 1 text

PROGRESSIVE ENHANCEMENT IN PRACTICE

Slide 2

Slide 2 text

MY NAME IS ROMAN HI, @rstrangh

Slide 3

Slide 3 text

I WORK AT innoQ © Robert Glaser

Slide 4

Slide 4 text

© Kristina Alexanderson https://flic.kr/p/doNnfg

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

WEB DEVELOPMENT IS HARD © Sandra Fauconnier https://flic.kr/p/6RQkGZ

Slide 7

Slide 7 text

THERE ARE

Slide 8

Slide 8 text

WEB TECHNOLOGIES

Slide 9

Slide 9 text

https://github.com/alrra/browser-logos BROWSERS

Slide 10

Slide 10 text

https://github.com/alrra/browser-logos MORE BROWSERS 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 3 3.5 3.6 4 5 6 7 8 9 10 11 12 13 14 15 16 5.5 6 7 8 9 10 11 9.5-9.6 10.0-10.1 10.5 10.6 11 11.1 11.5 11.6 12 12.1 15 16 17 18 19 20 21 22 23 24 25 3.1 3.2 4 5 5.1 6 6.1 7 7.1 8 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 + MOBILE

Slide 11

Slide 11 text

© Luke Wroblewski https://flic.kr/p/gS7txD DEVICES

Slide 12

Slide 12 text

© Mike Weber https://flic.kr/p/gonfmL 2.802.478.934 USERS WORLDWIDE http://www.internetworldstats.com

Slide 13

Slide 13 text

DEAL WITH IT

Slide 14

Slide 14 text

Progressive Enhancement

Slide 15

Slide 15 text

Progressive enhancement
 is a technique to apply web technologies in layers on top of each other in such a way that all content und core functionality of a website is accessible for 
 every user.

Slide 16

Slide 16 text

… once a test ensures that the user’s browser supports the respective feature, the core experience of a website can be enhanced stepwise.

Slide 17

Slide 17 text

„Progressive Enhancement is a way of building websites that complements the philosophies that the web is build upon. “ –Some guy on HasGeek TV

Slide 18

Slide 18 text

IN THEORY © Christian Senger https://flic.kr/p/8gdpaH

Slide 19

Slide 19 text

HTML CSS JavaScript ARIA Sparse, semantic markup contains all content Stylesheets enhance design und layout Unobtrusive JavaScript enhances interaction and behavior WAI-ARIA maintains and improves accessibility

Slide 20

Slide 20 text

BENEFITS

Slide 21

Slide 21 text

© Jody Frost https://flic.kr/p/9JAbJN FAULTTOLERANT

Slide 22

Slide 22 text

„Basically, when an elevator fails, it’s useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.“ –Jake Archibald

Slide 23

Slide 23 text

FUTURE- FRIENDLY © Jeff Eaton https://flic.kr/p/b33qWt

Slide 24

Slide 24 text

„Progressive enhancement is not about dealing with old browsers, it’s about dealing with new browsers.“ –Jeremy Keith

Slide 25

Slide 25 text

ACCESSIBLE © Steven Damron https://flic.kr/p/5CRJRE

Slide 26

Slide 26 text

© Yahoo! Accessibility Lab https://flic.kr/p/ax2JmR

Slide 27

Slide 27 text

ALSO

Slide 28

Slide 28 text

FAST LINKABLE SEARCHABLE PROFITABLE © Matthew Black https://flic.kr/p/YFYnd

Slide 29

Slide 29 text

BUT

Slide 30

Slide 30 text

© Jacob Bøtter http://flic.kr/p/5TeTqw REQUIRES THINKING

Slide 31

Slide 31 text

THERE ARE EXCEPTIONS © OSMOS by Hemisphere Games

Slide 32

Slide 32 text

„Be pragmatic – not dogmatic.“ –Me, always

Slide 33

Slide 33 text

IN PRACTICE © JD Hancock https://flic.kr/p/6zA7Pf

Slide 34

Slide 34 text

Online  Check-­‐in https://roca-airways.herokuapp.com

Slide 35

Slide 35 text

http://roca-style.org RESOURCE-ORIENTED CLIENT ARCHITECTURE

Slide 36

Slide 36 text

Input name and flight number Show flight details Preselected seat Change to a different seat Complete check-in FEATURES

Slide 37

Slide 37 text

CORE FUNCTIONALITY

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Use semantic markup Add ARIA landmarks Provide basic navigation (e.g. skip links) Embrace HTML5 form validation Fall back to server-side validation

Slide 40

Slide 40 text

STYLING

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Basic styling should be safe Use external stylesheet(s) Provide fallbacks Add styles for states Use separate classes for enhancements Layout is optional, start mobile first

Slide 43

Slide 43 text

FEATURE-DETECTION &
 INTERACTION

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Use feature-detection (e.g. Modernizr) Test for CSS and JS Features Load in additional enhancements Use JavaScript unobtrusively Provide keyboard access Set proper ARIA attributes

Slide 46

Slide 46 text

© John Morgan https://flic.kr/p/9PbSNB IN DETAIL

Slide 47

Slide 47 text

FEATURE DETECTION

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

SVG

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

WEBFONTS

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

CLIENT-SIDE
 VALIDATION

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

SEAT SELECTION

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

TAKING IT FURTHER Offline Notifications Service Workers WebGL

Slide 65

Slide 65 text

IN SUMMARY

Slide 66

Slide 66 text

WORKS

Slide 67

Slide 67 text

WORKS

Slide 68

Slide 68 text

WORKS

Slide 69

Slide 69 text

WORKS

Slide 70

Slide 70 text

KTHXBYE roman.stranghoener@innoq.com @rstrangh

Slide 71

Slide 71 text

RESOURCES Designing with progressive enhancement
 by Filament Group https://www.gov.uk/service-manual/making- software/progressive-enhancement http://jakearchibald.com/2013/progressive- enhancement-still-important/ http://alistapart.com/article/ understandingprogressiveenhancement