ReverbNation: hovering media player

RN_homepage

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.

RN_below the fold

 

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.

RN_media player

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s