College Media / Tech Talk

College Media Snowfall Challenge: Education and Inspiration

firestorm portrait orientation

The Guardian’s “Firestorm” in landscape orientation on an iPhone.

I know there are some student journalists wracking their brains about potential stories to work on for the ICM College Media Snow Fall Challenge. To help with the process, here are some links to visit for education about some of the technical side of such “bespoke” web stories, and some sites for design inspiration.

But first, the usual caveat: The story is the most important thing. You can have all the eye-candy in the world, but if you don’t have a compelling story, then you’ve got nothing from a journalistic standpoint. This might be a good place to mention this quick read: Five tips for better narrative journalism.

Also, words and multimedia should work together to tell a more complete story. Design guru Mario García explores some of the ways this can happen here: Multimedia stories: Beyond the razzle-dazzle.

Regarding the technical end of things, for starters I highly recommend visiting Mindy McAdams’ 10 examples of bespoke web sites and scrolling goodness. There, she lists journalistic stories and some of the technical work that went into them. Some of the javascript scrolling toolkits I’m going to mention below are also listed there.

Inspiration

If you’d like to see what some commercial companies are doing with parallax scrolling, here are some sites that might give you some design ideas:

Awwwards lists 20 Best Websites with Parallax Scrolling 2013

Creativebloq has links to 30 eye-popping examples of parallax scrolling.

Webdesignledger finds another 21 Examples of Parallax Scrolling in Web Design.

Education

Many of these sites use Javascript, and specifically Javascript built on the JQuery library. Here are links to some of the options there:

skrollr (github link)

initializr

Parallax.js

10 free JQuery Parallax Scrolling Plugins

Bootstrap is a front-end framework for web development created by Twitter that has been used. It includes CSS, HTML and Javascript components, and is free to use.

firestorm portrait orientation

The Guardian’s “Firestorm” in portrait orientation on an iPhone.

Hobo Lobo (story using parallax scrolling) and the tutorial for how it was done.

Additionally, Adobe’s new product Muse allows users to create parallax scrolling sites (with some limitations). Here’s a tutorial: Parallax scrolling in Adobe Muse CC.

The other major technical aspect of the project is the requirement for a responsive design. Responsive design has been around for a few years, but it basically means that the product works across a variety of screen sizes and orientations. Here are a couple of resources you might want to look at:

Smashing Magazine has a fairly detailed article about the concept: Responsive Web Design: What It Is and How To Use It.

Webdesignledger has a list of 12 Helpful Tools for Responsive Web Design.

One thought on “College Media Snowfall Challenge: Education and Inspiration

  1. Pingback: David Swartzlander | You’ve been challenged

Comments are closed.