The day web design changed - From The Digital Barn 2

2cd8df04a3be5cdefbd88ce598ec7a7d?s=47 Kimb Jones
October 06, 2012

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.

2cd8df04a3be5cdefbd88ce598ec7a7d?s=128

Kimb Jones

October 06, 2012
Tweet

Transcript

  1. The day web design changed Michael Kimb Jones http://mkjones.co.uk @mkjones

  2. None
  3. None
  4. None
  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

  7. None
  8. None
  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

  14. None
  15. None
  16. None
  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

  23. None
  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

  35. None
  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

  40. None
  41. CHOICE

  42. None
  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

  48. None
  49. None
  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

  53. None
  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

  58. None
  59. None
  60. None
  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
  62. None
  63. None
  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