develop your own interactive content: richard baxter, builtvisible - mozcon 2014
TRANSCRIPT
![Page 1: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/1.jpg)
#MozCon
Richard Baxter • Builtvisible
Developing Your Own Great Interactive Content
@richardbaxter • [email protected]
What You'll Need to Know
![Page 2: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/2.jpg)
![Page 3: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/3.jpg)
![Page 4: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/4.jpg)
![Page 5: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/5.jpg)
![Page 6: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/6.jpg)
![Page 7: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/7.jpg)
![Page 8: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/8.jpg)
Stop with the pooping on the
Internet!
![Page 9: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/9.jpg)
oliveremberton.com
![Page 10: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/10.jpg)
This stuff is hard to do.
![Page 11: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/11.jpg)
[content]
![Page 12: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/12.jpg)
COOL!
![Page 13: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/13.jpg)
Know how it’s built.
![Page 14: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/14.jpg)
SVG
![Page 15: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/15.jpg)
![Page 16: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/16.jpg)
jQuery
![Page 17: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/17.jpg)
![Page 18: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/18.jpg)
WebGL
![Page 19: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/19.jpg)
![Page 20: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/20.jpg)
CSS
![Page 21: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/21.jpg)
![Page 22: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/22.jpg)
HTML5 Video
![Page 23: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/23.jpg)
oreilly.com/pub/e/2599
The Best of Fluent: JS + HTML5 Video + Canvas
![Page 24: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/24.jpg)
Embedded JS Charts
![Page 25: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/25.jpg)
![Page 26: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/26.jpg)
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
![Page 27: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/27.jpg)
That’s the “what”.
![Page 28: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/28.jpg)
I’d rather have a Snow Fall builder than a Snow Fall.
Kevin Delaney
“
![Page 29: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/29.jpg)
This is the story of our “how”.
![Page 30: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/30.jpg)
![Page 31: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/31.jpg)
Liam (the creative guy) had a bunch of
ideas. @liamhgfisher
![Page 32: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/32.jpg)
Read this book & this post:
http://builtvisible.com/creative-method/
![Page 33: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/33.jpg)
http://andrewblum.net/
![Page 34: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/34.jpg)
Which idea did your marketing team find most
exciting?
![Page 35: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/35.jpg)
We have our story
![Page 36: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/36.jpg)
How to tell it…
NOT YET
![Page 37: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/37.jpg)
1. Technical Set Up & Feasibility
![Page 38: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/38.jpg)
![Page 39: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/39.jpg)
2. Initial Stakeholder
Outreach
![Page 40: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/40.jpg)
Creative Planning
Stakeholder Recruitment
Proof of Concept
Production
Stakeholder Recruitment:
![Page 41: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/41.jpg)
3. Asset Collection + Research
![Page 42: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/42.jpg)
![Page 43: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/43.jpg)
![Page 44: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/44.jpg)
4. Storyboard Creation
![Page 45: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/45.jpg)
data
![Page 46: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/46.jpg)
flow
![Page 47: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/47.jpg)
assets
![Page 48: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/48.jpg)
Data: raw materials for the story
Flow: how the content is organised
Assets: features, copy and images
Experience
![Page 49: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/49.jpg)
What about the design?
Not yet:
![Page 50: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/50.jpg)
![Page 51: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/51.jpg)
4. Rapid Prototyping
![Page 52: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/52.jpg)
Mediums vs Features
Article
Infographic
Video
Presentation
Microsite
Copy
Embedded charts
Video embeds
Images
SVG Animation
![Page 53: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/53.jpg)
Content precedes design. Design in the absence of content is not design, it’s decoration.
Jeffrey Zeldman
“
![Page 54: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/54.jpg)
![Page 55: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/55.jpg)
![Page 56: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/56.jpg)
![Page 57: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/57.jpg)
![Page 58: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/58.jpg)
![Page 59: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/59.jpg)
5. Launch
![Page 60: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/60.jpg)
Stakeholder Recruitment
Proof of Concept
Production Launch
Launch:
![Page 61: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/61.jpg)
![Page 62: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/62.jpg)
The traffic
![Page 63: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/63.jpg)
Things we learned along the way…
![Page 64: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/64.jpg)
On bandwidth:
![Page 65: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/65.jpg)
On shareable assets:
![Page 66: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/66.jpg)
The coverage
![Page 67: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/67.jpg)
On Pagespeed
![Page 68: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/68.jpg)
On SEO
Non JS version creates a 404
![Page 69: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/69.jpg)
On responsive testing:
responsinator.com
![Page 70: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/70.jpg)
On process:
Every time we encountered a problem, it was because of process:
1. A missing step
2. Skipping a step
![Page 71: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/71.jpg)
If you don’t love it, you
can’t ship it.
![Page 72: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/72.jpg)
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
![Page 74: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/74.jpg)
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
![Page 75: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/75.jpg)
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/
![Page 76: Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014](https://reader030.vdocuments.us/reader030/viewer/2022032514/55d4f0d2bb61eb8b438b4731/html5/thumbnails/76.jpg)
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/