The Power Of Simplicity

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

the power simplicity of

Slide 6

Slide 6 text

tools power

Slide 7

Slide 7 text

git sass less grunt yeoman

Slide 8

Slide 8 text

jQuery boilerplate modernizr bootstrap

Slide 9

Slide 9 text

Stop soling problems you don’t yet have. —Rachel Andrew

Slide 10

Slide 10 text

Polyﬁlls are a tax. —Alex Russell

Slide 11

Slide 11 text

the web “platform”

Slide 12

Slide 12 text

web flash native

Slide 13

Slide 13 text

It’s hard not to be disappointed by HTML if you’ve developed for iOS, Windows, or other mature platforms as I have. —Joe Hewitt What the web is and is not

Slide 14

Slide 14 text

scroll tap swipe drag

Slide 15

Slide 15 text

find buy publish share

Slide 16

Slide 16 text

e control which designers know in the print medium, and oen desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this ﬂexibility. —John Allsopp A Dao of Web Design

Slide 17

Slide 17 text

web android iOS

Slide 18

Slide 18 text

CSS JavaScript HTML web

Slide 19

Slide 19 text

My loe for responsive centers around the idea that my website will meet you wherever you are—om mobile to full-blown desktop and anywhere in between. —Trent Walton

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

e web is responsive on its own—by default. It’s us that’s been breaking it all these years by placing content in ﬁxed-width containers. —Andy Hume

Slide 26

Slide 26 text

CSS JavaScript HTML

Slide 27

Slide 27 text

HTML

Slide 28

Slide 28 text

input type="number" input type="search" input type="email" input type="url"

Slide 29

Slide 29 text

input type="number"

Slide 30

Slide 30 text

input type="number" inputmode="numeric"

Slide 31

Slide 31 text

input type="number" pattern="[0-9]"

Slide 32

Slide 32 text

CSS JavaScript HTML

Slide 33

Slide 33 text

CSS

Slide 34

Slide 34 text

selector { property: value; }

Slide 35

Slide 35 text

CSS JavaScript HTML

Slide 36

Slide 36 text

JavaScript

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Every user is a non-Javascript user while a page is loading. —Scott Jehl

Slide 43

Slide 43 text

Download Chrome

Slide 44

Slide 44 text

Progressive enhancement is more about dealing with technology failing than technology not being supported. —Andy Hume

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Create a new list

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

be conservative in what you send; be liberal in what you accept.

Slide 50

Slide 50 text

ember angular backbone

Slide 51

Slide 51 text

“web app”

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

CSS JavaScript HTML

Slide 54

Slide 54 text

progressive enhancement

Slide 55

Slide 55 text

do websites need to look exactly the same in every browser?

Slide 56

Slide 56 text

do websites need to look exactly the same in every browser . com

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

ere is a diﬀerence between support and optimization. —Brad Frost

Slide 60

Slide 60 text

the power simplicity of

Slide 61

Slide 61 text

a pattern simplicity of

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

cutting the mustard if (document.querySelector && window.addEventListener) { // enhance! }