Technical

12 Web Development Videos & Posts That You Should
Know About

by on 18th July 2014

Happily and safely back from this year’s Mozcon, I thought I’d use my jetlagged up-super-earlyness to put together a quick post. At Mozcon, I made the argument that content marketers should know how their content is built.

Think about it, if you’re sharing and attempting to replicate stuff like this, and this, and this without thinking about how they were constructed, you’re going to run into problems scaling, or effectively running content marketing projects.

One of our principles here at Builtvisible is “we do what we say we do”. That’s why we’ve spent time hiring and integrating a development team and learning the technologies and processes we can use to scale. We even share examples of work we’ve created during the transition from a pure play SEO agency to a more rounded content marketing team.

That’s what my talk at Mozcon was about, so if you’re interested, please take a look. Only a few hands went up in the room when I asked who’d used SVG in a piece of content marketing, something the Polygon XBox One review uses heavily!

While I was in San Francisco, I made a start on curating videos and tutorials that I think help marketers understand the required vocabulary to be able to interact productively with developers. Communication with a web developer is absolutely critical to getting a good content project off the ground, delivered on scope, on time and without anyone going crazy!

You’ve got to learn this stuff. I’ve found it helpful just to listen, watch, absorb, play around with a little code (optional). What I’ve realised is that the topics these guys were covering even as long as 4 years ago, really applies to what we should be doing today. Some of the more advanced features of HTML5, CSS3, HTML5 video, jQuery and so on are largely unexplored by content marketers, and I’d argue that’s because they don’t know what’s possible.

Content marketers need a new vocabulary list, and this is it:

Enjoy, and let me know what you’ve found on the web that marketers should be much, much more aware of.

An Interview with Jeffrey Zeldman

The ‘King of Web Standards’ Jeffrey Zeldman publishes A List Apart “for people who make websites,”. Recommended listening for an all round primer on where web development came from, how it started, who has been involved with the evolution of web development and where it’s headed. It’s been around so long you’ve probably heard of it.

Source: http://www.besquare.me/session/podcast-001/

Understand Responsive with Ethan Marcotte

Ethan Marcotte coined the phrase “responsive web design” in 2010. This presentation fundamentally inspired the concept to propagate as a standard in web development today. A lot of us say “responsive” when we don’t really know how that works. This video will bring you up to speed.

Source: http://vimeo.com/34662135

Create a Responsive Website Using HTML5 and CSS3

Christian Vasile teaches you how to create a fully responsive website using HTML5/CSS3 from scratch. It’s excellent. Two introductory articles about HTML5 and CSS3 are required reading.

Source: http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/

How to start: Build Your Own Website

Our very own Tom Bennet has a great personal project of his own – and it’s all hand coded. Take a look at his latest article: http://bennet.org/blog/frozen and learn first hand how it’s done.

Tom recently spoke at Brighton SEO on the topic – here’s his detailed blog post, and here’s his presentation:

Source: http://vimeo.com/22158462

Modern Front End Tools

Our own Julien Brun writes with first hand knowledge of CSS pre-processors, HTML templating and much more. Recommended reading for web developers and newcomers alike.

Find more examples on the Less and Lesshat tutorials.

Source: http://builtvisible.com/modern-front-end-tools/

Jina Bolton: Why CSS Preprocessors Matter

This is an excellent primer from Jina Bolton at Interlink 2012 on why living style guides and CSS preprocessors like Sass & Less help keep everything in check. By adding a ton of powerful functionality to CSS, learn how CSS preprocessors can enable you to create smarter, forward-thinking maintainable web interfaces.

 

Source: http://vimeo.com/46213777

Dan Cederholm: The CSS3 Experience

Dan Cederholm is co-founder of Dribbble, and that’s just one of his incredible achievements. In this entertaining and illuminating talk, recorded live at An Event Apart San Diego (November 1-2, 2010!), Dan explores some of the features in CSS3 and shows how to use them wisely. We still don’t think about how we can use these features in our content marketing 4 years on. Amazing.

Source: http://www.oreilly.com/pub/e/2969

The Best of Fluent: JS + HTML5 Video + Canvas

One of my most enlightening videos from Wes Bos. In this presentation he shows you just how insanely powerful HTML5 video can be when combined with canvas and a little JS. Amazing, still groundbreaking today and totally unexplored in our realm.

Source: http://www.oreilly.com/pub/e/2599

Make Your Mockup in Markup

I’d credit Meagan Fisher with the inspiration we needed to make a start on devloping our rapid prototyping approach with content development. Read this article, follow the links and learn why we think designing a prototype in the browser is the right way to brief a designer.

Source: http://24ways.org/2009/make-your-mockup-in-markup/

Web Components and the Future of the Web

Rob Dodson, freelance front-end developer, provides a thorough overview and then outlines all the specs that collectively make up web components, and how to make them work together. Amazing presentation.

Source: https://www.youtube.com/watch?v=mx3YPCRNQ3A

That’s it for now, feel free to tweet your suggestions or drop them in the comments below.

Responses

  1. Some fantastic resources here, thanks Richard.

    To anyone interested in diving into the world of SVG, I’d highly recommend watching Marc Grabanski’s talk at Fluent earlier this year. It’s a great all-round primer on the many powerful uses of this flexible format. It also touches on Snap.svg, a very cool new JS library by the author of Raphael, but which is designed specifically for modern browsers.

    Enjoy!

  2. I agree with you completely. You gotta know what you are selling. Thankfully I studied Computer Systems Engineering and before getting into SEO worked in development so I got a pretty good understanding of code and languages but what I saw at mozcon was people that didn’t, it was pretty shocking for me, since in my own bubble I thought everyone did.
    I work with a great developer that got me even more involved in the front end world and shared his world with me (now I’m an avid listener of shoptalkshow and follow front end dev/design blogs as well!). I tweeted during your presentation “Talk to your developer and if you can learn to {understand} code” something along those lines because I believe it’s really important!

    Loved your presentation, it was one of the best ones for me!

Comments are closed.

Join the Inner Circle

Stay one step ahead of the competition by staying with us. Join the Inner Circle to receive a monthly update of Organic Digital marketing resources, blogs and industry news.

Get insights straight to your inbox

Stay one step ahead of the competition with our monthly Inner Circle email full of resources, industry developments and opinions from around the web.