Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014

6,205
-1

Published on

Even if you're not a technical genius when it comes to interactive, front end web development projects, Richard will show you how to make something the Internet loves from ideation and conceptualization to rapid prototyping, launch, and huge coverage.

Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014

  1. 1. #MozCon Richard Baxter • Builtvisible Developing Your Own Great Interactive Content @richardbaxter • richard@builtvisible.com What You'll Need to Know
  2. 2. Stop with the pooping on the Internet!
  3. 3. oliveremberton.com
  4. 4. This stuff is hard to do.
  5. 5. [content]
  6. 6. COOL!
  7. 7. Know how it’s built.
  8. 8. SVG
  9. 9. jQuery
  10. 10. WebGL
  11. 11. CSS
  12. 12. HTML5 Video
  13. 13. oreilly.com/pub/e/2599 The Best of Fluent: JS + HTML5 Video + Canvas
  14. 14. Embedded JS Charts
  15. 15. Your Vocabulary List − HTML5 − Responsive CSS (& libraries) − CSS3 (& frameworks) − JS (& frameworks: jQuery, MooTools, Jade, Handlebars) − JSON (api post and response data) − WEBGL − HTML5 audio & video − SVG − HTML5 History API manipulation w/ PushState
  16. 16. That’s the “what”.
  17. 17. I’d rather have a Snow Fall builder than a Snow Fall. Kevin Delaney “
  18. 18. This is the story of our “how”.
  19. 19. Liam (the creative guy) had a bunch of ideas. @liamhgfisher
  20. 20. Read this book & this post: http://builtvisible.com/creative-method/
  21. 21. http://andrewblum.net/
  22. 22. Which idea did your marketing team find most exciting?
  23. 23. We have our story
  24. 24. How to tell it… NOT YET
  25. 25. 1. Technical Set Up & Feasibility
  26. 26. 2. Initial Stakeholder Outreach
  27. 27. Creative Planning Stakeholder Recruitment Proof of Concept Production Stakeholder Recruitment:
  28. 28. 3. Asset Collection + Research
  29. 29. 4. Storyboard Creation
  30. 30. data
  31. 31. flow
  32. 32. assets
  33. 33. Data: raw materials for the story Flow: how the content is organised Assets: features, copy and images Experience
  34. 34. What about the design? Not yet:
  35. 35. 4. Rapid Prototyping
  36. 36. Mediums vs Features Article Infographic Video Presentation Microsite Copy Embedded charts Video embeds Images SVG Animation
  37. 37. Content precedes design. Design in the absence of content is not design, it’s decoration. Jeffrey Zeldman “
  38. 38. 5. Launch
  39. 39. Stakeholder Recruitment Proof of Concept Production Launch Launch:
  40. 40. The traffic
  41. 41. Things we learned along the way…
  42. 42. On bandwidth:
  43. 43. On shareable assets:
  44. 44. The coverage
  45. 45. On Pagespeed
  46. 46. On SEO Non JS version creates a 404
  47. 47. On responsive testing: responsinator.com
  48. 48. On process: Every time we encountered a problem, it was because of process: 1. A missing step 2. Skipping a step
  49. 49. If you don’t love it, you can’t ship it.
  50. 50. Editorial & Project Management Liam Fisher Dani Mansfield Darren Kingman Research Robyn Lodge Design Paul Venn Coding + Genius Pete Wailes Testing The whole wonderful team at Builtvisible Very special thanks: Dave Howard, Daniel Butler & Geoff Griffiths
  51. 51. #MozCon Richard Baxter • Builtvisible @richardbaxter • richard@builtvisible.com
  52. 52. Useful Resources Understand Responsive with Ethan Marcotte: http://www.besquare.me/session/a-dao-of-flexibility/ How to start: Build your own website http://builtvisible.com/hand-coding-personal-website/ Ben Nadel Presents jQuery http://www.bennadel.com/resources/presentations/jquery/video/index.htm
  53. 53. Useful Resources 2 Fluent Online Conference: Beyond JavaScript and HTML5 http://www.oreilly.com/pub/e/2969 The Best of Fluent: JS + HTML5 Video + Canvas http://www.oreilly.com/pub/e/2599 Using CSS3 – CSS Tricks http://css-tricks.com/video-screencasts/57-using-css3/
  54. 54. Useful Resources 3 Visualising Data with Google Fusion Tables http://builtvisible.com/visualising-data-google-fusion-tables/ CSS Media Queries & Using Available Space http://css-tricks.com/css-media-queries/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×