New Rating System Demo
I am currently working on a side project where users will be able to rate individual tracks on an album. This project gave me the opportunity to re-think how we rate things online. I wanted to make a simple "rate on a scale of 1-10" system (no halvsies!), but I wanted to come up with something better than radio buttons, or a text field. After a lot of tinkering, tweaking, and meddling, I came up with what I think is a pretty slick little system.
The overarching metaphor of this app will be that of a graphic equalizer. The rating system builds off of this metaphor and lets the user feel like they are adjusting a graphic equalizer when they rate each song. It looks nice, it consistently fits in with the design language of the site, but most importantly, it is fun! Let me walk you through the code real quick as I show you what I did.
I have created a demo site, showing off the rating system and it can be found hereThe Markup
The entire system works off of a hidden form field that gets submitted once the form is submitted. The user interacts with this hidden form field by activating the different rating boxes with the mouse.
The CSS for this is crucial for this to function properly. I needed to give each rating box a different color, I added a transition to give it a nice fade-in animation, and I have positioned each of the boxes appropriately. The "triggered" class is applied to hold the state of the visibility of that box.
- The Router needed to be able to parse the address bar and show the correct part of the index page when the user reaches the site from a link.
- The Router needed to be able to show and hide different parts of the index template when the user clicks on different navigation links on the site.
For this Site I needed to handle 3 different sections: the homepage, the blog index, and a particular article's show page. The first step I needed to take was to create a catch-all route in the routes file so that every request, no matter what the address, would be directed to the root page.
After directing all requests to the root page, I then needed to parse the address bar and fire the correct function. I first check to see if the user is on the root page, if not, I check to see if the user is trying to get to the blog, and finally, if they are on the blog page, I check to see if the user looking for a specific article. I even have a "no_article" div that is displayed if no article title matches the address parameters. If none of these conditions are met, the "home page" portion of the index is shown.
Each condition calls a corresponding render function that simply hides certain sections of the markup so that the correct content is shown to the user. These functions do the following:
There is no real magic here. Each render function pushes everything else off of the page, and it fills the screen with the correct content. In addition, each function makes sure that the correct address is pushed to the address bar using HTML5 pushState. I admit that the code could use some drying up and that pushState is not supported by all browsers, but this solution suited my needs well enough. I will continue to refactor the code and improve its performance but for a first try, this router meets both of my needs and I am happy with this solution.Limitations
There is also currently no support for the browser back button, although I hope to remedy this soon.
Animated Logo Using CSS Transitions
Like I said, this should not be abused (you don't want your site looking like it was a geocities page transported forward through time). Give careful thought to what your site is and what your logo looks like and think about logical animations that would suit the feel and content of your brand. In the case of my Music Blog, Mixtape, that I maintain, I wanted a logo that conveyed the essence that this was a music blog and after toying with a few ideas, it hit me that a digital graphical equalizer would be a simple way to blend the idea of a cool looking logo that is appropriate for the purpose of the site, a music blog, with some fun CSS transitions.The Markup
Once I settled on the content, building up the logo was pretty easy. The logo is built entirely in HTML and animated with only CSS3 transitions. I also added an image meta-tag so that Facebook and RSS readers would be able to parse an image of the logo for their purposes. Below is the markup (written in HAML, for those not familiar and think this looks a little strange):
The logo's markup is pretty simple. It consists of the main text and a <div> containing the 10 equalizer bars that all inherit the same properties of the class .logo_bar but are each given there own appended class so that I can target each one individually with CSS.Styling the Logo and Adding the Animation
In the end, I was really happy with how everything turned out with this logo. It is bold, simple, but stylish, and the subtle animation enhances the site's purpose and is appropriate for the content. Go ahead, hover over the logo below, it won't bite!
Well, that is all I have to say on this matter. You will have to decide what is appropriate for your brand and/or site, but I hope you consider adding a little touch of animation to your logo. But remember, with great power, comes great responsibility!