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

Before the Web, the Internet was motes of order in chaos, islands of information segregated by a seemingly impenetrable ocean of cyberspace between them and no easy way to navigate. The Internet could, in theory, connect all of humanity, but it needed an easy to use and understandable system for people not so well versed in the vagaries of the command line prompt.

Transcript

1. 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
2. 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
3. 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
4. 1990 The Infant Web (1990) First steps The Web’s First Page
5. 1991 The Wild Wild Web (1991–1995) Utopia Awaits! Anything seemed possible
6. 1991 State of Tech Computer: Unlikely Internet Access: Unlikely Mobile Phone: Unlikely The Wild Wild Web (1991–1995)
7. 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
8. 1992 The Standards Rise! Core Web Technologies HTML CSS JS
9. 1994 The World Wide Web Consortium Setting the Standards
10. 1994 The Standards Rise! Core Web Technologies HTML 2 CSS JS
11. 1995 Web 1.0: The Settlers Arrive (1995–2000) The Web A marketing term?
12. 1995 Web 1.0: The Settlers Arrive (1995–2000) State of Tech Computer: Possibly Internet Access: Possibly Mobile Phone: Possibly
13. 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
14. 1995 Web 1.0: The Settlers Arrive (1995–2000) State of UX 216 Colors?!?
15. 1996 The Standards Rise! Core Web Technologies HTML 2 JS CSS
16. 1996 The Browser Wars: BW1 Netscape Navigator A Stealth OS?
17. 1997 Boom Goes the Web! The Dot-Com Boom The great web gold rush!
18. 1997 Web 1.0: The Settlers Arrive (1995–2000) Dynamic HTML? A marketing term?
19. 1998 The Standards Rise! Core Web Technologies HTML 4 CSS 2 JS 3
20. 2000 Bust goes the Web Y2K The center could not hold
21. 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
22. 2001 Web 2.0: The Pax Web (2001–2009) State of Tech Computer: Likely Internet Access: Likely Mobile Phone: Possibly
23. 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
24. 2002 Flash & UX ✓Styles ✓Typography ✓Animation ✓Interactivity ✓Video Flash gave us…
25. 2002 Flash & UX Flash gave us…
26. 2008 The Browser Wars: BW II IE6 Every UX Designers worst nightmare!
27. 2008 The Browser Wars: BW II Google Chrome A Stealth OS?
28. 2008 The Standards Rise! Core Web Technologies HTML 5 CSS 3 JS 4
29. 2009 Web 3.0: The Semantic web (2009–2019) Order out of Chaos A place for everything…
30. 2009 Web 3.0: The Semantic web (2009–2019) State of Tech Computer: Necessity Internet Access: Necessity Mobile Phone: Likely
31. 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
32. 2009 Web 3.0: The Semantic web (2009–2019) State of UX ✓Grid layout with CSS ✓Images & Video ✓Millions of Colors ✓Responsive Design
33. 2010 The Standards Rise! Core Web Technologies
34. 2012 The Rise of Responsive Web Design Mobile First? Accessibility takes center stage
35. 2015 The Fall of Flash No Flash on mobile The death of interactivity?
36. 2019 Web 4.0: What is Web3? Web 3 A marketing term?
37. 2019 Web 4.0: What is Web3? State of Tech Computer: Necessity? Internet Access: Necessity Mobile Phone: Necessity
38. 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?
39. 2019 Web 4.0: What is Web3? Web3 A marketing term?
40. 2019 Web 4.0: What is Web3? Solid Pods The future? → solidproject.org
41. Jason Cranford Teague jason.cranfordteague.com cranfordteague.com cranfordteague.com 2020+ Thanks! Questions? jason@cranfordteague.com cranfordteague.com linkedin.com/in/jasoncranfordteague
42. 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