Develop Your Own Interactive Content: Richard Baxter, Builtvisible - MozCon 2014
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,795 views

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

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.

Statistics

Views

Total Views
3,795
Views on SlideShare
3,130
Embed Views
665

Actions

Likes
4
Downloads
9
Comments
0

9 Embeds 665

http://www.iacquire.com 339
http://seom.bg 179
https://twitter.com 117
http://plus.url.google.com 10
http://feedly.com 10
http://digg.com 7
https://www.linkedin.com 1
http://news.google.com 1
https://www.iacquire.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • #MozCon Richard Baxter • Builtvisible Developing Your Own Great Interactive Content @richardbaxter • richard@builtvisible.com What You'll Need to Know
  • Stop with the pooping on the Internet!
  • oliveremberton.com
  • This stuff is hard to do.
  • [content]
  • COOL!
  • Know how it’s built.
  • SVG
  • jQuery
  • WebGL
  • CSS
  • HTML5 Video
  • oreilly.com/pub/e/2599 The Best of Fluent: JS + HTML5 Video + Canvas
  • Embedded JS Charts
  • 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
  • That’s the “what”.
  • I’d rather have a Snow Fall builder than a Snow Fall. Kevin Delaney “
  • This is the story of our “how”.
  • Liam (the creative guy) had a bunch of ideas. @liamhgfisher
  • Read this book & this post: http://builtvisible.com/creative-method/
  • http://andrewblum.net/
  • Which idea did your marketing team find most exciting?
  • We have our story
  • How to tell it… NOT YET
  • 1. Technical Set Up & Feasibility
  • 2. Initial Stakeholder Outreach
  • Creative Planning Stakeholder Recruitment Proof of Concept Production Stakeholder Recruitment:
  • 3. Asset Collection + Research
  • 4. Storyboard Creation
  • data
  • flow
  • assets
  • Data: raw materials for the story Flow: how the content is organised Assets: features, copy and images Experience
  • What about the design? Not yet:
  • 4. Rapid Prototyping
  • Mediums vs Features Article Infographic Video Presentation Microsite Copy Embedded charts Video embeds Images SVG Animation
  • Content precedes design. Design in the absence of content is not design, it’s decoration. Jeffrey Zeldman “
  • 5. Launch
  • Stakeholder Recruitment Proof of Concept Production Launch Launch:
  • The traffic
  • Things we learned along the way…
  • On bandwidth:
  • On shareable assets:
  • The coverage
  • On Pagespeed
  • On SEO Non JS version creates a 404
  • On responsive testing: responsinator.com
  • On process: Every time we encountered a problem, it was because of process: 1. A missing step 2. Skipping a step
  • If you don’t love it, you can’t ship it.
  • 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
  • #MozCon Richard Baxter • Builtvisible @richardbaxter • richard@builtvisible.com
  • 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
  • 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/
  • 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/