Relaunch - The Reimagining of Nuttersmark.com

When I started learning Ruby and Rails 4 years ago on the advice of my brother, the first thing I attempted to make was a personal website and blog, which I called nuttersmark.com. It was a silly play on words, Nutter being my last name and Mark being my first, and the site being my (Nutter's) "mark" on the internet. Nevermind the name; it has long represented everything about who I am on the web, and like me it has grown and changed dramatically over the years.

Want to Get Good at Web Design? Redesign, Redesign, Redesign!

When I launched the first iteration of this site it ran on the popular Rails blogging engine called Typo, which was the right solution at the time, especially since I was more focused on the graphic design of the site than I was the engine under the hood. I was unemployed at the time, fresh out of college with a physics degree with which I had no idea what to do, so I had countless hours to spend designing, redesigning, salivating over other people's sites like I was reinacting a scene from American Psycho, and applying all this knowledge to my personal site.

I gathered up all the mockups I could find for nuttersmark.com I have created, thrown aside, launched, or otherwise forgotten about, and I thought it would be neat to display how the site has evolved over time. It provides some insight into how I have grown as a web designer and also developer. Below is a showcase of some of the design iterations this site has undergone over the past few years.

I can remember being driven close to mad trying to get good at web design. I would pour over design galleries for hours, start and scrap countless mockups, go to bed happy with a design and wake up disgusted with what I had created. It turns out that if you keep at it long enough, read enough design blogs, and pour over enough web design showcases, you can get pretty good at picking up on and applying some of the most popular design patterns and techniques out there.

Crisp, clean, simple designs with subtle drop shadows and plenty of whitespace have always been my favorite (I'm aware these are all clichés), and when I sat down to redesign my personal site yet again I wanted to take these principals to their absolute limits. I have seen thousands of other personal websites and blogs, and despite finding many absolutely drop-dead gorgeous sites, I always run into the same issue: filtering content. There have been a few extremely usable solutions to drilling down into some people's past content, but nothing is ever as robust as I would like.

Why Create Pages When Smart Filters Will Do?

A few sites that have decent archive filtering implementations are the fantastic Simplebits.com and JasonSantamaria.com, but as good as they are I want more options when it comes to customizing the way I view the content on their site. For instance, if I want to get a customized RSS feed of Jason's photographs and notes that relate to Brooklyn, I'm out of luck. If I want to quickly find all the links on Simplebits.com where Dan Cederholm praises a website for its design, I will be hard pressed to do so.

Jason Santamaria's archive is well organized, but lacks more advanced filters

http://adiirockstar.com/archive gets dangerously close to what I have in mind, but it stops short of adding any truly advanced filtering mechanisms. What it does do is implement a custom implementation of a popular plugin called jQuery Masonry, authored by David DeSandro, which is the very plugin which sparked my inspiration for a new Nuttersmark.com redesign. What I wanted to create was less a traditional personal website than it was an aggregator and remixer of content. Instead of creating individual pages, like a blog page, an about page, a portfolio page, etc, you would create different mixes of or filters for existing content.

Adii Rockstar is on the right track and utilizes a masonry-like layout

For example, people who freelance and self promote themselves often spend a great deal of effort creating an about page as I can well attest to; something that tells the world who you are in a nutshell. It can work wonders for lead generation and increasing repeat visitors. With my new system, however, I wouldn't have to agonize over what perfect mix of important details about myself to include, much less the design. I would simply create a filter that pulled in all the photos, videos, tweets, notes, songs, movie preferences, articles, and portfolio items that I've uploaded to the myriad web services out there I use on a regular basis that speak to who I am as an individual (perhaps tagged with "marknutter" or "self") and present that mix of content as my "about" page.

I could go one step further and mark certain pieces of content as more relevant than others so they are sure to bubble to the top of my about page. Anyone now visiting my site can get an idea of who I am and have that snapshot be relevant up to the day they see it. They will see pictures of me, custom designed articles that explain about my life, my likes and dislikes, and so on.

The Notes filter shows all blog posts and posterous notes in chronological order

Another trend I couldn't ignore is individual art direction of blog posts, popularized by Jason Santamaria, Dustin Curtis, Dave DeSandro, and others. If you are unfamiliar with these types of posts, check out heartdirected.com, a showcase of some of the best. Basically, instead of using the same template for every blog post, these clever bloggers - who are often professional graphic designers who if they had their way would rather be working with print than in digital media - have taken a magazine style approach to writing each blog post.

While I don't envision that I'll be spending a great deal of time doing this for every blog post (most will take the form you are seeing right now) I do see this as being an excellent way to showcase small web apps, javascript experiments, visualizations, and whatever else wouldn't fit within the bounds of a standard blog entry template. David DeSandro had the same notion, and many of his art direction posts are actually little sandboxes for his experiments in HTML5, javascript, and CSS3. He even created a blogging framework he calls stacey to fit his unique blogging needs

The new blogging app I've created for NuttersMark is similar. Most of the content that shows up on this site is pulled from other sources: Twitter, Flickr, Posterous, Youtube, etc., but I create the articles from scratch without the benefit of a rich text editor or a third party service. I know how to code in html and css, so why avoid using that when I write my blog posts? What results is complete freedom. I compartmentalize each of these blog posts into their own folders, which could have custom javascript, styling, and even be small toy apps built in Sinatra or other lightweight web frameworks. The articles are committed to the NuttersMark git repo and pushed live to the server when I update there. A script then runs on the server that creates placeholder items in the database with the correct path to the articles and whatever promotional image I want to show up in the filtered content.

Each article is displayed with its unique tile image and is a direct link to the file.

When people view them, just as you are viewing this article, they're just navigating right to that html file itself which doesn't rely on Rails to serve it up, resulting in very little overhead and some big performance gains. This should scale nicely if a big spike of traffic comes through.

A Living, Breathing Blog

What the popularity of Twitter, Tumblr, and Posterous has proven to us is that it's kind of a pain to maintain an up to date blog and/or personal site. We're often able to Tweet a quick thought or send a quick rant to Posterous, but most of us are pretty terrible at maintaining our personal sites and blogging regularly. The whole life stream concept is something I've been interested in since I first started developing web apps, and you could call the new nuttersmark.com the ultimate life stream remixer. As long as I continue to post pictures to Flickr, like songs on Last.fm, post thoughts and links to Twitter and Delicious, jot down notes and send them to Posterous, and in general interact with a bevy of social media services out there, I can rest assured my personal site will remain relevant and up to date.

The result is interesting so far. The only static element that exists on my site now is the navigation bar. You will see below that there are, as of this writing, three different pre-made filters available: Notes, Photos, and Bookmarks.

The navigation bar is the only fixed element on nuttersmark.com

These links predictably refresh the content below with either all the latest notes, photos, or bookmarks from Posterous, Flickr, and Delicious/Twitter respectably. Everything is loaded asynchronously and the only time you'll ever have a full page redirect is when you view one of the standalone articles mentioned above. I will be adding more pre-configured filters as time goes on, such as an "about" filter that brings in pictures and notes that tell a story about who I am or a "rails" filter that brings in code snippets and links relating to Ruby on Rails. As I continue to add more and more filters, the little link lozenges will stack past the constraint of the main nav area but will become draggable to the left and right. The possibilities here are really limitless. I could go one step further and give people the ability to save a custom filter they have created themselves, viewable only by them when they revisit my site. That way, if someone is only interested in my web development content, they know how to get to it.

Which brings us to the heart of the operation, the mixing board:

The mixing board allows users to filter my content how they want to

Available on demand by hovering over the mixing board icon to the right of the main nav buttons, it allows one to drill down to the exact content that they want to view. As of this writing it allows you to filter by tag (both by union and intersection), content type, order of appeance (chronological, popularity, random), and by keyword using the search field. The search box also operates as a normal search function would, sifting through all content when the button is actually pressed, as opposed to just acting as another filter on the currently displayed content.

The custom jQuery I wrote for this mixer is a bit rough as of this writing (I'm no guru), and I'm sure there's a lot that could be written and implemented better, but it gets the job done. The result is a very comprehensive system for finding specific content I have created or discovered. Infinite scrolling is also an important feature of this system, and when you hit the bottom of the page and there's more content to be served, it will simply load that content on automatically. The idea is to minimize the amount of page refreshes and back-and-forth that you often deal with on most websites.

The only page that didn't fit the whole pre-made filter concept outlined above was the obligatory contact page. To overcome this issue, I provided a contact link on the main nav that drops down a section that has a contact form, a quick introduction to me and my site, and links to my different presences around the web.

The contact form is an easy-access drop down area

Plans for the future

This site is experimental, but I have high hopes for it. When I shopped this idea around to my friends and colleagues, it was met with modest interest, but many questioned whether or not people are going to bother sifting through my content. While it would be incredibly vain for me to try to make an argument for why people would want to remix my content, I can say that certainly wish I could do the same on the sites of people I find interesting. I'm hoping that if someone finds what I discover and create interesting they will appreciate and take advantage of the fact that there's a system in place that lets them get to the most relevant stuff quicker. Even if nobody does, I've found that it is at the very least useful to me. Instead of having to track down stuff I've saved, code snippets I've written, and whatever else on all the different third party sites I interact with, I can just go to my own personal site and find it with a couple clicks.

If the experiment is a success, I may pursue the idea of opening up a similar system to others if they want to create their own life stream remixer sites. For now I'll just keep improving the code and testing out new ideas, and rest a little easier knowing that even though I may not blog as often as I would like, my site will look current and be useful to people on a more consistent basis. I welcome all comments and feedback, good or bad. Just hit the red "back" button to go to the root of the site and see what it's all about.