While looking for JavaScript in journalism, I ran across this. This uses JavaScript to build an audioplayer unlike anything that you could do in CSS3 or HTML/CSS. It’s a great visual component to go along with the map since they’re both color-coded.

Looking for the audio player, I found it in a .js file. It looks like this:

With the college football season winding down, the Washington Post created this cool interactive filter to track the Heisman trophy over the years. The script of note is to the left of the page and it employs a cool accordion affect when selecting different states. They utilized a jQuery plugin pasted below.

One of my favorite music for finding featured free music is ReverbNation.com. It’s got a very clean design with plenty of white space and I love the greyscale color with the red-orange highlights. When it comes to CSS techniques, the media player at the bottom of the page is a really clever element. It allows the user to start a song then scroll elsewhere on the page while keeping that song playing. If they want to stop the song, skip ahead or back, all the controls are right there at the bottom of the page.

The user can even navigate to a new page in the reverbnation.com domain and keep the song playing, giving the user a lot of freedom. But all of that is way over my head. When it comes to the simpler CSS implementation, I like that they tacked it at the bottom of the page instead of the top. The top of your browser window is already dominated by your browser navigation, URL, your tabs, and ReverbNation’s own page header.

By thinking to put the media player at the bottom, it’s still in the familiar horizontal layout like we expect from iTunes et al., but it stays out of the way so the user can focus on material on the page. It’s a really clever design principle to consider when working on future designs.

When you first get to this website, “What Matters 2 Us,” you see a navigation bar on the left side and then a grid of slightly opaque photos. As soon as you hover over a photo, the navigation bar disappears and the whole screen shifts right to bring just the photos into view. When you hover over a photo a caption pops up which is practical, but I think the bouncing animation is a bit distracting. When you click on a photo, a smaller window pops up with an individual video and accompanying text. From there you can click back to the main photo grid to choose a new story, or you can click the arrows in the upper left corner to scroll to the next story. I think this is a great use of variety in the navigation because it gives users multiple ways to access the stories. This site uses jQuery and JavaScript. Here is an example of some of the coding it uses:

Site link: http://www.nytimes.com/interactive/2013/04/14/nyregion/mayoral-candidates.html

For my first webpage, I utilized the style of a New York Times article that was doing something similar. Instead of profiling a Task Force, this article was profiling the mayoral candidates of the election in the city. Here’s the main page:

Now my original plan was to emulate the entire style of the site, character profiles and all. Instead I ended up emulating the design, making my site include mugshots with white backgrounds (we worked with the resources we had) and keeping things minimalistic.

Another design choice I picked up was this:

It may be hard to tell from the screenshot, but the site is essentially as long as there are candidates. So you don’t actually navigate to different pages when looking through the page. I did the same with mine, though I believe that the way the NYT did theirs was a little more effective having code that made the page-loading much more efficient than mine.

I didn’t include maps on my site either, which is a shame but I don’t think we had access to regional information for each candidate. It would have been interesting to show where each Task Force member lived or knew within Columbia.

Still, emulating the NYT’s style left me with a site I was happy with.

The interactive site, Living Galapagos by the University of North Carolina at Chapel Hill uses CSS to create a video background to add a subtle but interesting touch.

Although you can’t see it in this screenshot, the background is actually a moving image. I’m not sure if it’s a video or .GIF or how it works, but the waves, leaves and lizards all move. I think this is a fun touch that makes the website come to life. Here is the HTML and CSS:

Both the HTML and CSS look relatively simple. You just add a “div class=video-background.”

The box that holds the first video is transparent, but when you click the play button the video loads and is viewed at full opacity. If you click “Stories” on the navigation bar, a similarly transparent menu pops up where you can choose other videos to watch. If you click “Learn,” you see an interesting mix of infographics and social media and most interestingly, two games that are designed to help users learn about the Galapagos.

I love how this site uses good design and many different kinds of “junits” – there is text, video, photos, infographics, tweets, Instagrams, and more.