First and foremost, this is a music website, not unlike mp3.com in days of yore. Playing music on it “just works” and their interface is very slick. The site integrates several clever social dynamics to keep you engaged and the site interesting. Artists on the site are generally independent musicians or groups, although there are certainly some recognizable names such as Daft Punk, Ratatat, Arcade Fire, CSS, etc.

Popularity

The heart of the site is a voting system where users promote music by, yes, hearting it. That was a horrible pun. The most popular music is featured on the front page in the “top songs” and “hot right now” sections. That in itself is not that unusual; it’s only logical that a digg/reddit-style voting will be applied to pretty much every concept ever.

Special sauce

The real charm of TheSixtyOne, though, is its game-based design. As a user, you have a certain amount of “rep” (think experience) that determines your level. As you level up, you unlock site features, a clever way of introducing the various features. In addition, each level confers additional hearts per daily login. Rep is gained primarily by hearting music that is subsequently hearted by other users; this rewards users for picking “good” music, under the assumption that if it’s good, then other people will like it as well.

Rep and hearts are also gained by completing a wide variety of quests, which generally prompt a user to listen to songs in a certain part of a site or perform a certain action (ex: heart a song, subscribe to another user, etc). The combination of these two systems make for a particularly addicting site. Additional hearts and rep can be gained by listening to “the rack,” music that has “gone under the radar” (sometimes for good reason; sometimes, it’s worth your ear).

Bread and butter

That said, good web design is nothing without content. Given the focus on independent artists, you may be concerned that there isn’t anything to draw you in. On the contrary; the site has a significant music library, encompassing a wide variety of genres. I am most interested in electronic, rock, and pop, although I have dabbled in some of their other offerings and found them acceptable. That said, everyone has different music tastes and I can’t guarantee that you’ll find what you’re looking for here.

Try it yourself

Go forth and give it a try yourself; my userpage is thesixtyone.com/disavian and you can subscribe to me or listen to music I’ve hearted (”listen to radio” next to my picture). I’ve found it worth my time in a way that traditional radio could never be.

Norton

When I got my laptop, it came bundled with Norton Internet Security. Anyone familiar with either Norton or McAfee know that they make the most annoying, intrusive products known to man (outside of actual malware). Well, I figured since it was free I’d give it a try, as I hadn’t used a Symantec product in a few years. Well, they’re tricky bastards. When it comes time to ‘register’ you are presented with the following screen. Everything is fine until you get to the ‘country’ box.

Interestingly, everything is just fine for ANY country except the United States. Here’s an example of selecting the UK; everything looks as it should, yes?

As soon as you select ‘United States,’ the program quietly rechecks the ’spam me’ check boxes. Since they’re on the left half of the form, you probably won’t notice, and you’ll look straight down to the ‘Next’ button without realizing that you’ve ’selected’ to receive their email.

Funnily enough, after going back and forth and consciously noting this ‘feature,’ I forgot to uncheck it the last time through. It’s an evil use of well-known UI design concepts, tricking you even if you’ve noticed it!

myYearbook

I’d received an email to try out this site. I like to make profiles on every website ever, so I decided to give it a try. My advice: don’t. It’s worse than MySpace, which is saying something. Don’t even touch it.

So my particular problem here is the ‘friend finder,’ which caused me to spam all of my Gmail contacts. Please disregard these emails. I am so sorry I got caught by this!

So you start out with a perfectly normal form:

It checks your contacts and tells you there are two matching ones. Your instinct is to click the button above to add these. But wait!

If you scroll down, you’ll note that they’ve also included all of your other contacts and will spam them with deceptive emails encouraging them to join this stupid site if you click that button.

Emails, last names redacted

What I actually did was click the button, immediately realize what they had probably done (an oh-shit moment), hit the stop button like five times, and then set my twitter/facebook/IM status to inform my friends to disregard the message. And yes, I changed my password. Do you have any examples of deceptive design such as these? Were you caught by it?

However, I eventually succumbed and tried out a pre-existing framework, realizing that I didn’t want to reinvent the wheel. Plenty of people had made blog frameworks, and it was time that I used the fruit of their labor. I’ll guide you through the steps I took to make what I’ve got at the moment.

Platform selection

Several Google searches later, and after considering Simple PHP Blog and Moveable Type, this article helped guide me to the Content Management System (CMS) I was to use; WordPress. I’d seen the default template at a lot of blogs, and hadn’t realized that it had much potential until I really played around with it.

A screenshot of the default wordpress installation

Upgrading

I initially installed WordPress in a subdirectory, which let me access both my old site and my new one simultaneously, and limited downtime. The installation itself was very easy (instructions here). I was easily able to add each post in the old site to my new site and easily specify a publish date in the past. If you wanted to publish entries from 1 AD, I don’t doubt that you’re capable of it in this framework.

The tricky part was moving my static content (ex: ‘About’, ‘Projects’ etc) into my new CMS. WordPress has ‘Pages’ that model this idea, but all of the themes I’ve show subpages, which is (IMO) visually unappealing. I got to play a little with php and fixed it so you only see the top-level content (here’s how to do that). Ideally, as per this request, you’d be able to see subpages under certain conditions. I don’t know (and haven’t looked hard for) any code that would do that at the moment, though.

Themes

WordPress follows good design and separates content from layout with their themes and related php functions. I wanted to emulate the look of my old site as closely as possible without writing a WordPress theme from scratch. After looking through several theme galleries, I eventually found a WordPress Theme Generator which let me specify design and colors to approach what I was looking for. I then went into the CSS to fix various graphical glitches such as vertical line spacing (this page helped). I wasn’t sure that I wanted a three-column setup, but I had difficulty removing the third column, so I eventually grew to like it.

On a related note, I also installed the WordPress Mobile Edition plugin, as I own a Windows Mobile 5 device with a relatively underpowered browser. The mobile edition uses a completely separate theme from the main site, interestingly. While I’ve not taken great care to edit the mobile theme, it’s there. You can easily place Google Adsense for Mobile Content ads on it.

Comments

One of the reasons I wanted a CMS is for the ability to comment on entries. Askimet is installed by default, and filters spam comments into a separate spam queue where they can be glanced at and saved (or, most likely, purged). You need to sign up for an Akimet API Key first, though. According to Askimet’s spam counter on their main web page, 88% of all comments are spam.

I’ve recently come across a comment system called Intense Debate, which I discovered through my friend Colin Ake. I’m putting off adding Intense Debate until it’s compatible with Askimet, partially because I receive far more spam than I do human comments.

Plugins

Widgets

WordPress lets you add plugins that you can then add to the sidebar(s) of your blog. This is a decent guide on how to install them. Most of the widgets I use are built into WordPress; these include the Meta, Pages, Archives, Links, Recent posts, Tag cloud, and Recent comments widgets.

Aside from the built-in functionality, I was most interested in widgets that would link with my twitter (plugin), flickr (plugin), and del.icio.us (plugin) accounts, but decided against the first two as they didn’t fit into my graphical/performance ideas for this site. They might be useful to you, though.

Share and subscribe

I find the Add to Any plugins to be useful. They provide links to add your rss feed to the user’s reader/service of choice (plugin), or to bookmark the current page using the reader’s web bookmark service of choice (plugin). In addition, they’re relative unobtrusive for the amount of services they cover. If you don’t use WordPress, they’re available for other platforms as well; see addtoany.com.

I don’t just rely on those plugins/widgets, however. I made sure to include a link to my feed near the top of the page, with a stereotypical RSS icon. In my opinion, the feed link is one of the most important on the page.

Vital plugins

In addition to Askimet, there are some plugins I think you should consider with your new (or existing) blog:

Redirection

The Redirection plugin is by far the most useful plugin or widget I’ve encountered. It lets you set arbitrary url redirection rules, optionally using a regex. This is a great way to redirect your old content locations to your new ones, keeping search engine rankings and visitors’ bookmarks intact. It logs all 404 errors so you can easily see where new redirection rules are needed, and also shows how often your existing rules are used. Redirection Official Site.

WP Super Cache

Just in case you get hit by Digg, Slashdot, etc, or even if you want to simply optimize your server performance, this is a good bet. WP Super Cache Official Site.

Statistics

Because they’re not important to the display of the page, it’s better to load stat counter-type code at the end of the page. Not all themes include the relevant code to do so, though.

WordPress.com Stats

This particular stats plugin shows you recent stats right in your dashboard, with the ability to drill down a little bit. You’ll need to enable third-party cookies in your browser to do that, though. To use this one, you’ll need a WordPress.com API Key, which you can get by signing up for an account at WordPress.com. Plugin: WordPress Stats.

Google Analyticator

If you use Google Analytics, there’s a plugin that integrates support for it. What can I really say? It just works. Google Analytics itself is an impressive suite, so give it a try. Plugin: Google Analyticator.

Official StatCounter Plugin

I’ve always liked StatCounter, even though their free services have a limited log size. But hey, they’re free. Everybody’s got to earn a living. Statcounter Bog: Official WordPress Plugin.

Search Engine Optimization

While I’ve only dabbled in this, the following plugins may be of use to you:

SEO Slugs

Optimizes post titles by removing common words. For example, it removed the ‘to’ from the title of this particular post when generating the slug (from noobs-guide-to-wordpress to noobs-guide-wordpress). Shorter URLs are a good thing regardless of SEO. Plugin: SEO Slugs.

Google XML Sitemaps

Generates a sitemap of your WordPress blog that is supported by most major search engines, and updates it automatically. Google XML Sitemaps.

HeadSpace2

Meta-data manager. HeadSpace2.

Robots Meta

Manages which pages get indexed by search engines. This focuses robots on your more important (content) pages. Plugin: Robots Meta.

Conclusion

I’m very happy with my current setup. I’ve been putting off the upgrade to WP2.6 due to plugin compatibility concerns, but the nagging banners to upgrade in the WordPress administration dashboard will soon bother me enough to actually take care of it.

Also, I eagerly anticipate IntenseDebate adding Askimet support, as their system of threaded comments, reputation, etc, is amazing. If this has helped you at all, please comment and say so!

Design

After months of reading about the death of tables for formatting, I decided to redo the website I made in “Computing for Engineers.” This time, it’d be beautiful. There’s not a single table in this website so far. While it’s true that I did borrow some, the website you see now is relatively close to the way I pictured it.

One of the most difficult choices was between two and three columns. Ideally, I will make a two-column layout and use it for articles; there just aren’t that many uses for the other two columns on article pages.

Graphics

For the banner/title graphic, I went through my deviantArt gallery looking for an image I feel represents me. Eventually, I settled on the female wallpaper “Fractal Goddess.” Careful cropping and coloring to fit the black/green color scheme has given me something that works well. Other graphics were created or (more likely) borrowed as needed.

Code reuse

There are a few things I don’t know how to do yet. I’m relatively new to PHP, but I was able to use it to simplify development. Throughout the website, the header, footer, right column, and “quick links” are each included at the server. Maintaining a “quick links” section spread across several pages is simply bad design. Ideally, all of the common elements of each page would be included from some file or another. Ideally, I’ll find and read a guide to good webpage design using PHP.

What’s next?

Search Upgrades. The search box searches google for whatever you put into it. There’s an empty space that I intented on putting a “web/this site” radio button in, but that’s in a separate div section. Anyone who can figure that one out gets a cookie. Update 10.02.2006: This has been fixed.

Social networking. Quick links to post an article or page to del.icio.us, digg, etc would be a good use for the middle column. Update 10.03.2006: This has been fixed.

Comments. I think that a way for users to comment on articles would drastically supplement this blog. Unfortunately, I don’t know where to go on that one. That might be a potential use of the second column in articles.

A new day has dawned.

Literally, it’s one in the morning. Figuratively, I’ve got the framework to share (and learn) knowledge in things I hold dear to me.