John Allsopp A Dao of Web Design Ti e web is a new medium, - - PowerPoint PPT Presentation

▶
john allsopp a dao of web design
SMART_READER_LITE
LIVE PREVIEW

John Allsopp A Dao of Web Design Ti e web is a new medium, - - PowerPoint PPT Presentation

Jan 27, 2024 123 likes •994 views

Killer Web Sites are usually those which tame the wildness of the web, constraining pages as if they were made of paper Desktop Publishing for the Web. John Allsopp A Dao of Web Design Ti e web is a new medium, although

slide-1
SLIDE 1
slide-2
SLIDE 2
slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11

‘Killer Web Sites’ are usually those which tame the wildness of the web, constraining pages as if they were made of paper – Desktop Publishing for the Web.”

—John Allsopp A Dao of Web Design

“

slide-12
SLIDE 12

Tie web is a new medium, although it has emerged fsom the medium of printing, whose skills, design language and conventions strongly influence it. Yet it is

  • fuen too shaped by that fsom which it sprang.”

—John Allsopp A Dao of Web Design

“

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16

presentation structure

HTML

slide-17
SLIDE 17

presentation structure

HTML CSS

slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22

presentation structure

HTML CSS

slide-23
SLIDE 23

behaviour

JavaScript

slide-24
SLIDE 24

progressive enhancement

slide-25
SLIDE 25

HTML CSS JavaScript

progressive enhancement

slide-26
SLIDE 26

site

structure

skin

services

space plan

shearing layers

stuff

slide-27
SLIDE 27

structure

HTML

fault tolerant

slide-28
SLIDE 28

<div> show this </div>

slide-29
SLIDE 29

<blorp> show this </blorp>

slide-30
SLIDE 30

<article> show this </article>

slide-31
SLIDE 31

<canvas> don’t show this </canvas>

slide-32
SLIDE 32

structure

HTML

fault tolerant

slide-33
SLIDE 33

structural honesty

HTML

fault tolerant

slide-34
SLIDE 34

structural honesty

slide-35
SLIDE 35

<button>yes</button> <span>no</span> structural honesty

slide-36
SLIDE 36

presentation

CSS

fault tolerant

slide-37
SLIDE 37

selector property { } : value;

slide-38
SLIDE 38

selector property { } : value;

slide-39
SLIDE 39

selector property { } : value;

slide-40
SLIDE 40

selector property { } : value;

slide-41
SLIDE 41

button border-radius { } : 0.25rem;

slide-42
SLIDE 42

material honesty

slide-43
SLIDE 43

material honesty

CSS

fault tolerant

slide-44
SLIDE 44

behaviour

JavaScript

fault tolerant

slide-45
SLIDE 45

safe defaults

slide-46
SLIDE 46

When an elevator fails, it’s useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.”

—Jake Archibald

“

slide-47
SLIDE 47
slide-48
SLIDE 48

Progressive enhancement is more about dealing with technology failing than technology not being supported.”

—Andy Hume

“

slide-49
SLIDE 49

Look, it’s simple. Build your apps so they aren’t a twirling shitshow of clown horns when JavaScript breaks.”

—David Sleight

“

slide-50
SLIDE 50

In the web fsont-end stack — HTML, CSS, JS, and ARIA — if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fsagile, more foolproof, and just works.”

—Derek Featherstone

“

slide-51
SLIDE 51

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

—Jon Postel

“

slide-52
SLIDE 52

design principles

slide-53
SLIDE 53

Sofuware, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators.”

—Jamais Cascio

“

slide-54
SLIDE 54

angular

ember

backbone

slide-55
SLIDE 55

No one wants to think that what they’re doing is trivial.”

—John Resig

“

slide-56
SLIDE 56

JavaScript is part of the web platform; you don’t get to take it away and expect the web to work.”

—Tom Dale

“

slide-57
SLIDE 57

the web platform

slide-58
SLIDE 58

web flash native

slide-59
SLIDE 59

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-60
SLIDE 60

scroll tap swipe drag

slide-61
SLIDE 61

find buy publish share

slide-62
SLIDE 62

responsive web design

slide-63
SLIDE 63

responsive enhancement

slide-64
SLIDE 64
slide-65
SLIDE 65
slide-66
SLIDE 66
slide-67
SLIDE 67
slide-68
SLIDE 68
slide-69
SLIDE 69

Tie web is responsive on its own—by default. It’s us that’s been breaking it all these years by placing content in fixed-width containers.”

—Andy Hume

“

slide-70
SLIDE 70

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

slide-71
SLIDE 71

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

slide-72
SLIDE 72
slide-73
SLIDE 73
slide-74
SLIDE 74

a pattern of enhancement

slide-75
SLIDE 75
slide-76
SLIDE 76
slide-77
SLIDE 77
slide-78
SLIDE 78
slide-79
SLIDE 79

cutting the mustard

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

slide-80
SLIDE 80

aggressive enhancement

slide-81
SLIDE 81

Tiere is a difference between support and optimization. ”

—Brad Frost

“

slide-82
SLIDE 82
slide-83
SLIDE 83
slide-84
SLIDE 84
slide-85
SLIDE 85