Project 01 //

TODD MOTTO & ROLLING STONE

UK-based engineer, Todd Motto, lives, eats and breathes web development. His devotion to immersive digital experiences motivated him to become one of the founding contributors of the HTML5 Hub. As his first contribution to the Hub, Todd lent his considerable talents to help create an HTML5 article experience for the dedicated readers of Rolling Stone.

See the project

From The Developer //

HTML5 Hub and Intel got in touch with me earlier this year to talk to me about an HTML5 project and the opportunity to do something really impressive with new technology. Over the last few months we’ve been working away on this project for Rolling Stone.

My general approach to development takes a modern workflow, and I tried incorporating this whilst keeping it simple for me to use throughout the project. I’m a massive advocate of the open-source JavaScript task runner Grunt, so this did the heavy lifting in terms of concatenating files, compressing them and making sure a build process was established. Inside Grunt, I utilized the CSS preprocessor, Sass (.scss extension) which helped me steer a lot of code into a faster setup and better cross-browser experience. I’m also an advocate of the BEM OOCSS syntax (Block-Element-Modifier) and used this as my starting point on the project. A lot of the components were customized to fit the article but BEM provided a solid foundation for me to reuse as many components and classes as I could for modularity. Even some JavaScript functionality is shared. I integrated some really cool technology into the article, from jQuery 2.0 to WayPoints, FlexSlider – and then customized them to suit. I also used my Echo.js JavaScript image lazy loader for the article to lazy load images in as the user scrolled. I adapted the core version of this to load images 1000px below the viewport as some were high resolution.

The parts of the article I really love are the the intro piece where the video and parallax style images zoom into the article, in a way it’s cross dimension – first you’re looking at a video and next you’re inside the video. The whole article sat together really nicely in the designs and it was amazing translating this onto screen and introducing some moving parts. The atmosphere presented whilst reading the article is immense, you’re not just scrolling and some funky features happen, you almost get inside the machine and feel like you’re part of this dark and flickering hacking article, you connect a lot more and it’s more impactful. There’s some hidden gems in there that catch your eye as you progress through the article.

We hit a few snags here and there like any other project, but we worked around them and delivered an amazing HTML5 experience. Keep a look out for the video and scroll-scene, HTML5 semantics, SVG, responsive and fluid layouts, data-binding and HTML5 video. I hope you love the article as much as I do!

-Todd