The day web design changed - From The Digital Barn 2

There have been moments in our industry when everything changes. Sometimes for better, sometimes for worse.

This talk will look at some examples of this from the inception of the web as a method of sharing scientific papers over the internet to how the smartphone revolution changed how we make websites.

Transcript

1. The day web design changed Michael Kimb Jones http://mkjones.co.uk @mkjones
5. Really quite interesting moments in the history of web design from my own personal perspective Michael Kimb Jones http://mkjones.co.uk @mkjones
6. Day 1: The web is invented
9. I need a volunteer
10. Take a seat Tim Berners-Lee Inventor of the World Wide Web.
11. Day 2: Flash
12. what people wanted from the web
13. what they got
17. Tim? Tim Berners-Lee Inventor of the World Wide Web.
18. Day 3: Tables for layout
19. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
20. DESIGN?
21. The good ol' days
22. Douglas Bowman
24. No more <tables>
25. No more <tables> More CSS =
26. BBC News Redesign, June 2010 <tables> no <tables> Adoption was still slow.....
27. Tim? Tim Berners-Lee Inventor of the World Wide Web.
28. Day 4: CSS
29. NO CSS REQUIRED
30. <font face="arial" color="green" size="20px"> <h1>Welcome to my website</h1> </font> HTML
31. <h1 class="title">Welcome to my website</h1> .title { color:green; font-size:20px; font-family:Arial, sans-serif; } HTML/CSS
32. CSS IS WEB DESIGN !important
33. Tim? Tim Berners-Lee Inventor of the World Wide Web.
34. Day 5: IE6
36. One browser!
37. Stagnation IE6 August 2001 IE7 October 2006
38. Tim? Tim Berners-Lee Inventor of the World Wide Web.
39. Day 6: Firefox
41. CHOICE
43. wow! v15 v22 v12 v10 v6
44. the modern browser wars....
45. Tim? Tim Berners-Lee Inventor of the World Wide Web.
46. Tims web browser
47. Day 7: HTML5
50. <div>...</div> Old HTML
51. <header>...</header> <article>...</article> <section>...</section> <figure>...</figure> <aside>...</aside> HTML5 Semantics
52. <audio>...</video> <video>...</video> HTML5 Multimedia
54. "I think the biggest mistake that we made as a company is betting too much on HTML5 as opposed to native. Because it just wasn't there. It's not that HTML5 is bad. I'm actually, long-term, really excited about it." Mark Zuckerberg The Facebook
55. 2022 Ian Hickson
56. Tim? Tim Berners-Lee Inventor of the World Wide Web.
57. Day 8: Responsive Web Design
61. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .title { color:red; font-size:10px; } .content { float:none; width:98%; } } CSS Media Queries
64. The NEXT day web design changed
65. Thank you
66. Tim? Tim Berners-Lee Inventor of the World Wide Web.
67. Recap 1. The web is invented 2. Flash 3. Tables for layout 4. CSS 5. IE6 wins the browser war 6. Firefox is released 7. HTML5 8. Responsive Web Design