A brief & incomplete history of  UX Design for the World Wide Web: 1989–2019

Slide 1

Slide 1 text

Jason Cranford Teague jason.cranfordteague.com cranfordteague.com cranfordteague.com Jason Cranford Teague jason.cranfordteague.com A brief & incomplete history of UX Design for the World Wide Web 1989 – 2019

Slide 2

Slide 2 text

The WWW is born (1989) “ I just had to take the hypertext idea and connect it to the Transmission Control Protocol [TCP] and domain name system ideas and—ta-da!—the World Wide Web. — Tim Burners-Lee 1989

Slide 3

Slide 3 text

The WWW is born (1989) 1989 “ I designed it for a social effect — to help people work together — and not as a technical toy. — Tim Burners-Lee

Slide 4

Slide 4 text

1990 The Infant Web (1990) First steps The Web’s First Page

Slide 5

Slide 5 text

1991 The Wild Wild Web (1991–1995) Utopia Awaits! Anything seemed possible

Slide 6

Slide 6 text

1991 State of Tech Computer: Unlikely Internet Access: Unlikely Mobile Phone: Unlikely The Wild Wild Web (1991–1995)

Slide 7

Slide 7 text

1991 ✓Layout with lists? ✓Text and Links ✓HTML Styles ✘No grid layout ✘No Typography ✘No Media The Wild Wild Web (1991–1995) State of UX

Slide 8

Slide 8 text

1992 The Standards Rise! Core Web Technologies HTML CSS JS

Slide 9

Slide 9 text

1994 The World Wide Web Consortium Setting the Standards

Slide 10

Slide 10 text

1994 The Standards Rise! Core Web Technologies HTML 2 CSS JS

Slide 11

Slide 11 text

1995 Web 1.0: The Settlers Arrive (1995–2000) The Web A marketing term?

Slide 12

Slide 12 text

1995 Web 1.0: The Settlers Arrive (1995–2000) State of Tech Computer: Possibly Internet Access: Possibly Mobile Phone: Possibly

Slide 13

Slide 13 text

1995 Web 1.0: The Settlers Arrive (1995–2000) ✓Grid layout with tables ✓Images and GIF Animation ✓216 Colors ✘Limited styles, animation, & interactivity ✘No Typography ✘No Video ✘Browser Inconsistencies State of UX

Slide 14

Slide 14 text

1995 Web 1.0: The Settlers Arrive (1995–2000) State of UX 216 Colors?!?

Slide 15

Slide 15 text

1996 The Standards Rise! Core Web Technologies HTML 2 JS CSS

Slide 16

Slide 16 text

1996 The Browser Wars: BW1 Netscape Navigator A Stealth OS?

Slide 17

Slide 17 text

1997 Boom Goes the Web! The Dot-Com Boom The great web gold rush!

Slide 18

Slide 18 text

1997 Web 1.0: The Settlers Arrive (1995–2000) Dynamic HTML? A marketing term?

Slide 19

Slide 19 text

1998 The Standards Rise! Core Web Technologies HTML 4 CSS 2 JS 3

Slide 20

Slide 20 text

2000 Bust goes the Web Y2K The center could not hold

Slide 21

Slide 21 text

2001 Web 2.0: The Pax Web (2001–2009) The web is for everyone. It should be accessible to people with disabilities and be available in whatever language they speak. — Tim Burners-Lee

Slide 22

Slide 22 text

2001 Web 2.0: The Pax Web (2001–2009) State of Tech Computer: Likely Internet Access: Likely Mobile Phone: Possibly

Slide 23

Slide 23 text

2001 Web 2.0: The Pax Web (2001–2009) State of UX ✓Styles with CSS ✓Grid layout with tables ✓Images & Video ✓Thousands of Colors ✘Limited styles, animation, interactivity, & video ✘No Typography ✘Browser Inconsistencies

Slide 24

Slide 24 text

2002 Flash & UX ✓Styles ✓Typography ✓Animation ✓Interactivity ✓Video Flash gave us…

Slide 25

Slide 25 text

2002 Flash & UX Flash gave us…

Slide 26

Slide 26 text

2008 The Browser Wars: BW II IE6 Every UX Designers worst nightmare!

Slide 27

Slide 27 text

2008 The Browser Wars: BW II Google Chrome A Stealth OS?

Slide 28

Slide 28 text

2008 The Standards Rise! Core Web Technologies HTML 5 CSS 3 JS 4

Slide 29

Slide 29 text

2009 Web 3.0: The Semantic web (2009–2019) Order out of Chaos A place for everything…

Slide 30

Slide 30 text

2009 Web 3.0: The Semantic web (2009–2019) State of Tech Computer: Necessity Internet Access: Necessity Mobile Phone: Likely

Slide 31

Slide 31 text

2009 Web 3.0: The Semantic web (2009–2019) State of UX ✓Grid layout with CSS ✓Images & Video ✓Millions of Colors ✘No Typography ✘Browser Inconsistencies

Slide 32

Slide 32 text

2009 Web 3.0: The Semantic web (2009–2019) State of UX ✓Grid layout with CSS ✓Images & Video ✓Millions of Colors ✓Responsive Design

Slide 33

Slide 33 text

2010 The Standards Rise! Core Web Technologies

Slide 34

Slide 34 text

2012 The Rise of Responsive Web Design Mobile First? Accessibility takes center stage

Slide 35

Slide 35 text

2015 The Fall of Flash No Flash on mobile The death of interactivity?

Slide 36

Slide 36 text

2019 Web 4.0: What is Web3? Web 3 A marketing term?

Slide 37

Slide 37 text

2019 Web 4.0: What is Web3? State of Tech Computer: Necessity? Internet Access: Necessity Mobile Phone: Necessity

Slide 38

Slide 38 text

2019 Web 4.0: What is Web3? State of UX ✓Stable Core Web Technologies ✘Developer frameworks ✘Arti fi cial Inteligence? ✘Extended Reality? ✘Web3? ✘Solid Pods?

Slide 39

Slide 39 text

2019 Web 4.0: What is Web3? Web3 A marketing term?

Slide 40

Slide 40 text

2019 Web 4.0: What is Web3? Solid Pods The future? → solidproject.org

Slide 41

Slide 41 text

Jason Cranford Teague jason.cranfordteague.com cranfordteague.com cranfordteague.com 2020+ Thanks! Questions? [email protected] cranfordteague.com linkedin.com/in/jasoncranfordteague