Embracing Progressive Enhancement

Slide 1

Slide 1 text

Slide 2

Slide 2 text

@souvikdg

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Objectives • Revisit the design of web and how it works • Progressive enhancement and its importance • Write code keeping progressive enhancement in mind • Peer review and learn form each other’s experience

Slide 5

Slide 5 text

Learning syntax or making pretty interfaces is NOT an objective of this workshop

Slide 6

Slide 6 text

Agenda • Zone in (25 mins) • Understand our project (15 mins) • Develop the project • HTML (40 mins) • CSS (20 mins) • JS (50 mins) • Zone out (15 mins) break

Slide 7

Slide 7 text

Conduct • Ask, don’t be shy • Contribute, don’t withhold knowledge • Code, or at the very least assist • Give feedback, take feedback, keep it constructive • Mutual respect

Slide 8

Slide 8 text

Q: Why do we not care about some web browsers?

Slide 9

Slide 9 text

What’s the Web?

Slide 10

Slide 10 text

Tim Berners-Lee, 1989

Slide 11

Slide 11 text

Built upon amazing design principles

Slide 12

Slide 12 text

Tim Berners-Lee Date: 1998 Status: personal view only http://www.w3.org/DesignIssues/Principles.html

Slide 13

Slide 13 text

Simplicity “Keep it simple, stupid!”

Slide 14

Slide 14 text

Modular Design

Slide 15

Slide 15 text

Being part of a Modular Design

Slide 16

Slide 16 text

Tolerance “Be liberal in what you require but conservative in what you do”

Slide 17

Slide 17 text

Decentralization

Slide 18

Slide 18 text

Test of Independent Invention “If someone else had already invented your system, would theirs work with yours?”

Slide 19

Slide 19 text

Principle of Least Power

Slide 20

Slide 20 text

An essay on W3C’s design principles • Introduction • Maintainability • Modularity • Minimum redundancy • Accessibility • Device-independency • Internationality • Extensibility • Learnability • Readability • E ciency • Binary or text format • Implementability • Simplicity • Longevity • Backwards compatibility • Interoperability • Repurposing of content • Timeliness • Use what is there • Design by committee • Expertise • Brevity • Stability • Robustness http://www.w3.org/People/Bos/DesignGuide/toc.html

Slide 21

Slide 21 text

W3C Mission • Web for All • Web on Everything • Web for Rich Interaction • Web of Data and Services • Web of Trust http://www.w3.org/Consortium/mission.html

Slide 22

Slide 22 text

As a result…

Slide 23

Slide 23 text

It has been around for more than 2 decades

Slide 24

Slide 24 text

Today, the web is turning ubiquitous

Slide 25

Slide 25 text

Ubiquity comes with client fragmentation

Slide 26

Slide 26 text

For a long time we’ve focussed on Graceful Degradation

Slide 27

Slide 27 text

But now there are just too many browsers

Slide 28

Slide 28 text

And oh! • Text mode browsers. • Screen readers. • Read it later services. • Flipboard • Bots, spiders. • …

Slide 29

Slide 29 text

More variables • Devices Capabilities • Screen Dimensions • Methods of interaction • …

Slide 30

Slide 30 text

“Inclusive Web Design For the Future” Steve Champeon and Nick Finck, 2003

Slide 31

Slide 31 text

Progressive Enhancement

Slide 32

Slide 32 text

Content

Slide 33

Slide 33 text

Content HTML

Slide 34

Slide 34 text

Content HTML CSS

Slide 35

Slide 35 text

Content HTML CSS JS

Slide 36

Slide 36 text

What is the Web, again?

Slide 37

Slide 37 text

Protocol HTTP

Slide 38

Slide 38 text

URLs for every possible resource on the web

Slide 39

Slide 39 text

Files mostly HTML, CSS, JS and media

Slide 40

Slide 40 text

Workshop Project

Slide 41

Slide 41 text

HasExpenses

Slide 42

Slide 42 text

Knowns

Slide 43

Slide 43 text

Activity 1

Slide 44

Slide 44 text

Identify Purpose Prioritise Goals

Slide 45

Slide 45 text

Goals? • Consumable • Functional • Aesthetic • Fast • Accessible • Reachable/Locatable • …

Slide 46

Slide 46 text

The Protocol: HTTP

Slide 47

Slide 47 text

Methods

Slide 48

Slide 48 text

Methods Get, Put, Post, Delete

Slide 49

Slide 49 text

GET vs POST

Slide 50

Slide 50 text

URLs

Slide 51

Slide 51 text

URLs are for people

Slide 52

Slide 52 text

“Cool URIs don’t change” http://www.w3.org/Provider/Style/URI.html

Slide 53

Slide 53 text

Activity 2

Slide 54

Slide 54 text

Give URL to everything

Slide 55

Slide 55 text

Files

Slide 56

Slide 56 text

Content

Slide 57

Slide 57 text

Markup

Slide 58

Slide 58 text

HTML

Slide 59

Slide 59 text

HTML gives structure and meaning to content

Slide 60

Slide 60 text

If a machine can understand it, the content becomes functional and accessible

Slide 61

Slide 61 text

Think meaning, not looks

Slide 62

Slide 62 text

Create Once, Publish Everywhere http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/

Slide 63

Slide 63 text

Again, what design principles!

Slide 64

Slide 64 text

HTML is forward compatible i.e. older systems will happily work with new tags and attributes

Slide 65

Slide 65 text

On the ﬂip side, almost any code we write will appear to work

Slide 66

Slide 66 text

Tags like and have subtle semantics Don’t use them for visual styling

Slide 67

Slide 67 text

Use the right HTTP methods

Slide 68

Slide 68 text

Style

Slide 69

Slide 69 text

CSS

Slide 70

Slide 70 text

Style can assist functionality but it’s not a robust mechanism of delivering functionality

Slide 71

Slide 71 text

Use colours to indicate meaning? What about folks who are colour blind?

Slide 72

Slide 72 text

Use colons after ﬁeld labels? That’s just a convention or a style

Slide 73

Slide 73 text

Pretty robust Unknown rules are ignored

Slide 74

Slide 74 text

Order rules carefully so that the newer rules are at the end

Slide 75

Slide 75 text

Do all websites need to look exactly the same in every browser?

Slide 76

Slide 76 text

http://dowebsitesneedtolook exactlythesameineverybrowser.com

Slide 77

Slide 77 text

It’s okay if the old browsers don’t achieve style parity

Slide 78

Slide 78 text

Media Queries • width • height • device-width • device-height • orientation • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution • scan • grid

Slide 79

Slide 79 text

Web is responsive Just keep it that way

Slide 80

Slide 80 text

There’s NO mobile web

Slide 81

Slide 81 text

Behaviour

Slide 82

Slide 82 text

Scripts

Slide 83

Slide 83 text

Javascript

Slide 84

Slide 84 text

“Any application that can be written in JavaScript, will eventually be written in JavaScript” http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html

Slide 85

Slide 85 text

Javascript error handling isn’t as robust as HTML and CSS

Slide 86

Slide 86 text

Procedures perhaps cannot have a “default” logic

Slide 87

Slide 87 text

And so, Javascript can fail

Slide 88

Slide 88 text

Murphy’s law

Slide 89

Slide 89 text

Dependence on Javascript is a mistake

Slide 90

Slide 90 text

Dependence on Javascript is a mistake

Slide 91

Slide 91 text

Dependence on Javascript is a mistake

Slide 92

Slide 92 text

Dependence on Javascript is a mistake

Slide 93

Slide 93 text

Which is not to say don’t use Javascript

Slide 94

Slide 94 text

Just be prepared for failures

Slide 95

Slide 95 text

Avoid inline styles Instead, add or remove classes

Slide 96

Slide 96 text

Make JS unobtrusive

Slide 97

Slide 97 text

Browser sni ng? No!

Slide 98

Slide 98 text

Detect Features not browsers, devices, etc.

Slide 99

Slide 99 text

Enter Modernizr

Slide 100

Slide 100 text

It’s Javascript time Exhibit restraint, plan well

Slide 101

Slide 101 text

Parting thoughts…

Slide 102

Slide 102 text

Design hacks are okay as long as you are following standards

Slide 103

Slide 103 text

Hatred for browser bugs is di erent than hatred for old (or less featured) browsers

Slide 104

Slide 104 text

Supporting the latter does not mean that you have to make them look or work the same way