SuperGeekery Revamp: HTML 5, EE 2, & Design Block

Feature image

SuperGeekery was originally designed in one furious evening of designing in Photoshop and coding in Expression Engine version 1.something. The speedy design and development was a product of equal parts overbooked schedule and typical procrastination. 

SuperGeekery version 1I had arrived in Las Vegas at my first CES in January 2007, a geeky badge of honor to me, and felt compelled to write about the experience, but I didn't have my site built yet. That gave me the push to just get it done and less than 24 hours later, SuperGeekery, long a site only in my imagination, was live. Given the compressed timeframe it was created in, I was pretty happy with it.

The site evolved over time, as all living web sites must. I did the normal things web site owners do. I ran analytics. I tweaked the interface. I got suggestions from some readers. I made more updates. The changes were always tweaks though, rather than a major overhaul.

Failure was an option. And I took it!

After 3 years, I decided it was time to give SuperGeekery a visual facelift. I made several minor but failed attempts at redesigns in late 2009. Somehow, my heart wasn't in it as the images below, half-hearted attempts at a new header, show in the harshest way. I quickly dropped them like a rotten hot tomato.

Three failed designs at SuperGeekery.

Every time I sat down to work on the design of the site, I felt like I wanted to be doing something else on the site, like working on a post about building a video player in AS3, or building mapping applications, or easy techniques in picking better passwords. I love beautifully designed things and can enjoy the process of creating them, but I just failed to find that mental zone when it came to redesigning my own site. 

Letting go feels good.

The solution came to me through a project at work. My friend Jon Mager and I are co-owners of a company, JMX2, Inc. We do a variety of things we do we do at JMX2. One of our projects was to build the the TRÜF Creative web site.

Monika, the design director at TRÜF, and I go back a long time to when we were mere puppies in the ad world and the Internet was thought of as a passing fad by the powers that be. I was excited at the opportunity to work with her again. She's got an innovative design sense and I think it shows that in the look of the site she designed for TRÜF. (You can read about the build of that project here in a previous SuperGeekery post.)

When we wrapped up that site, I decided to ask Monika if she would be interested in redesigning SuperGeekery. Happily, she said yes. Having her fresh perspective on the design gave me a lot of momentum. We talked about what things I liked and how those things could be reflected in the graphic design of the site. Circuit board patterns have been part of the SuperGeekery "brand" and I wanted to maintain that. You can see it's reflected in the new design. Since the site can be really geeky and techie, jumping through technical hoops just to show off seemed like a fun thing to do as well. One way that's expressed in the new design is the color scheme of the site. Whatever you're seeing today, will be different tomorrow. One day it's cyan, another day it's orange.

The color switching is accomplished through a single style sheet with PHP variables that rewrite it based on the day of the week. 

HTML 5

We're entering the era of HTML 5, although the spec is not final as I write this. I decided I wanted to code in it anyway. I'm not using any HTML 5 specific things on this site, at least not at present, but I wanted to try my hand and head at developing an HTML 5 compliant site. Check. The site is HTML 5 standards compliant. Check. There's nothing fancy happening with the canvas or storage capabilities of HTML 5, but by making this an HTML 5 project, it forced me to play in the spec and now I've had a change to use it on a real project. I like what I see. 

Expression Engine 2

I built a site many years ago on the pMachine CMS platform. There's surprisingly little information on it around anymore, but there's a bit about pMachine on the EllisLab site's history section. When pMachine reached a certain level, EllisLab released Expression Engine version 1 as its replacement, which is what SuperGeekery was built in.

Since the site's update coincided with the beta release of Expression Engine 2, I decided to build on it the EE2 platform. I've built several sites on WordPress and experimented with Drupal, but Expression Engine is my favorite CMS. I wrote my first EE plugin for this build of the site as well. It's called the SuperGeekery Tag Stripper and you can read and download a free copy of it in an earlier post here

Dynamic This and That.

As I mentioned earlier, the main style sheet of the site has several variables in it that are based on the day of the week. The main color scheme is the most obvious one. The gray color in the right hand column shifts slightly based on the day as well to work with the color of the day. Also, on Tuesday, the main color gets a slightly darker shade in the right hand column to help readability. 

The Twitter feed is dynamic as you might expect. The language before the time is randomly generated as well, just because it could be. 

Other bits.

I've always had business cards for SuperGeekery. They're the MiniCards from Moo.com. With the site getting an update, the cards did as well. 

Moo MiniCards for SuperGeekery in a variety of colors.

My Twitter page, also got a new background to reflect the new look of SuperGeekery.

The new background for John Morton's Twitter page.

Future plans.

Having a deadline helped me get this version of the site live. I wanted it to be live by the time I left for SXSW 2010 in Austin and I'm happy to report I beat that goal by over a week. There were things that slipped to future updates though in working toward that deadline. 

  • Ability to log in with Facebook to leave comments.
  • Rating of posts.
  • Mobile stylesheets (iPhone, Android, Blackberry, etc.)
  • Additional styles for specific days. (Monika and I have talked about a fun holiday theme.)
  • More robust search within the site.

As with all things online, this site is a project that is never really finished. It just hits states of 'temporary finish' when I can let it ride for a while. This site really serves as a playground where I can try new things. Some of them will fail, some will succeed. You learn from both outcomes. As always, I appreciate any feedback you feel like providing. Thanks.

Comments on this post.

Nice blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog stand out. Please let me know where you got your design. Bless you.

By Smithc547 on May 08 2014

This is not a downloadable theme. It’s custom built.

By John Morton on May 08 2014

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?

Twitter Feed

John Morton talking on Twitter




Meanwhile on Instagram… //

My latest shot from Instagram.
Jazz history at the corner of 4th & Cooper Sq #nyc #jazz