Update, November 1: The CSS Reboot site is now showcasing all of the new designs. If you like my design and wouldn’t mind taking a minute to vote for me, that’d be radass! You can do so here. It’s sorted by username, so just look for me… about half way down.

Whoa, hey… I’m back! Feels like I’ve been offline forever, when it was only a couple weeks. Which in internet time, translates to about 2 years, I’m sure. Anyhow, I’m back and I’ve got a fancy… errr, dirty new site!

As I mentioned previously, I took part in the November 1 CSS Reboot and there’s a good chance that’s how you ended up here. So, to all the new comers, I welcome you and thank you for stopping by. Feel free to drop me a comment or email to let me know what you think of the new site.

Now, if you’ve been here before, you should be noticing some massive changes. First and foremost, I had to figure out what I wanted to do with this site. It’s been online for about a year and a half now and everything’s been pretty ‘by-the-seat-of-my-pants’… and I mean everything! The presentation was horrible, content was all over the place and I didn’t have a posting frequency that could be identified. So, why would anyone who doesn’t know me personally want to come back? Once I addressed all of the above, I was able to plan my course.

It took me a while to organize the homepage. I had a long list of things I wanted right up front, about half of them made it into the final version. I narrowed it down to things that relate directly to my most common posting topics. Gaming, music and tech/web related stuff that is presented along the right column and along the bottom. All of the ‘external’ content is marked with green headers, which I’ll get to in a second. The main content of my site is the blog, so obviously, it gets the most space and is first in line in terms of how the content is laid out. I like the idea of ‘featuring’ the latest post – which is what I’ve done, but also provided the next 5 most recent posts directly under the latest post. Similarly, recent comments are presented in the same fashion. Also, rss feeds for both recent posts and comments are provided at the top of each section.

Colour

I knew I wanted to go darker from the get-go. To offset the gloom that can accompany a dark design, I threw in 3 bright and cheerful colours. Pink represents personal content of mine ,while blue is user contributed and green is ‘external’, or links away from this site.

CSS/Validation

I used this opportunity to try out some of the new techniques that have come to light lately. Namely, CSS Sprites. Originally, I had planned to use this technique for all of the headers, but decided against it due to the varying colours and background colours. Instead, I used it for the navigation (which is actually only half there at the moment). A quick rundown for those that aren’t in the know – the CSS Sprite technique is to use a single image containing multiple elements and use CSS to move it around and display the portions you want for given areas. Have a look at the nav image, and it should click, if it hasn’t already.

On a few posts, my site doesn’t validate. This was a tough decision. I know why it doesn’t, and I know how to fix it… but I’m not going to! *deep breathe* There! I said it! I decided to go with content over validation. If you check out my Quake 4 post, you’ll see a ‘Related Media’ box floating to the right of the content. I figured this was the best way to present this content to ensure it isn’t missed had I placed it post meta section where it was originally in my design mocks. If you view the source, you’ll see why it doesn’t validate – an unordered list wrapped in a span which is enclosed in a paragraph. Clearly, this is not valid code. But I need that content where it sits and can’t figure out how else to do so with WordPress. If you have any ideas, I’d definitely like to hear them! While I’m not going to lose any sleep over this… I would like to see the entire site validate.

Edit November 3: Now validates under XHTML 1.0 Strict guidelines.

Tags and Categories

Perhaps my favourite among the heard of social web apps are tags. Technorati seems to be leading the pack, so I decided to go with them. I have a WordPress plugin running that allows me to add tags to my posts which generate a wicked nice tag cloud on the Archives page. At the same time giving you a new way of finding content that may otherwise be buried. The first obstacle with introducing tags was that I found myself tagging posts with words I had used for categories. At first, I was contemplating getting rid of categories all together. But I do like the broad scene of a category and will often browse a site by category over tags. Instead, I redefined and cleaned up my categories and made sure that tags and categories don’t cross paths. I’m pretty stoked to think that you can browse all my posts to do with gaming, or only the ones specific to Xbox or PC, or whatever your preference may be.

Video Content

I’ve wanted to bring video to my site for quite some time now. But I wasn’t sure how I was going to display it or for that matter, what I was going to present. After discovering FRAPS, the latter was clear. I’m always going on, telling friends about the games I’m playing. Half of which would love to at least see what I’m talking about but don’t have a machine capable of running some of today’s more demanding games. I figured I could bridge that gap by adding gameplay footage to my quasi-reviews. But then there was still the question of encoding and which is best suited for my needs.

Flash Video was my first choice. Most users already have the plugin installed and if they don’t, it’s about 30 seconds to get setup. It’s super quick to load and streams flawlessly. Not to mention the flexibility you have with the interface. But alas, the Flash Video 7 just wasn’t looking so hot under 700kbps and the file size was a little on the huge side.

The new Quicktime H.264 codec is simply amazing, but too new, too much of a pain to upgrade/install and only available to Windows 2000/XP users.

My last choice (well, Real would be my last, but the last I would actually use on my site…) was Windows Media. It ended up looking the best, next to Quicktime and had the smallest file size. Also, since the majority of my visitors are Windows users, I figured there probably wouldn’t be many that would be required to download and install the 10mb+ media player.

Then Flash 8 was released. Suddenly, video at 400kbps looks great and the file size is a lot more reasonable. I made up my mind and converted the videos encoded in WMV to Flash 8 (yes, the Flash 8 video encoder can do that!) and will be using it moving forward. It does require an upgrade if you have any version prior to Flash Player 8 installed, but again – it’s a 30 second process, max.

Moving forward, I’m planning to include video with all of my gaming posts. Whether it be an HDR demonstration (Half-Life 2: Lost Coast coming soon!) or simply gameplay footage. Video content will be a regular occurrence from now on.

Photos/Screenshots/Flickr Feed

I’ve had a Flickr Pro account for months now, but I don’t even own a digital camera – or at least I didn’t until this afternoon. Deanna and I combined our efforts to get ourselves an early Christmas present. We picked up a Sony Cybershot DSC-W7 7.2 Megapixel camera this afternoon. Needless to say, I’ll finally be able to make use of my Flickr account! Stoked!

Also, to go hand-in-hand with the video content, I’m going to post game screenshots on Flickr. I usually include one or two in a gaming post, but I take a ton. I think I had close to a thousand by the time I finished Half-Life 2. I plan to upload them in batches as I play through games. So there very well could be screenshots showing up on a daily basis.

And finally, this is where the Flickr feed comes into play. I don’t expect anyone to bookmark my Flickr page and I sure as hell can’t be bothered posting a notification every time I’ve added a new batch of photos/screenshots. So, at the top of every page, the 5 most recent photos to be added to my Flickr account are displayed.

Quick Bits

I come across things on a daily basis that I’d love to post about. But I’m not keen on short posts whose sole purpose is to point you in another direction. Enter ‘Quick Bits’. I’m using the built-in WordPress links manager to present these, so they don’t get archived and don’t appear anywhere else (including rss feeds) but the Quick Bits section on the homepage. Expect to see these changing quite frequently. I usually check my feeds a couple times a day – and usually see one or two things I’d like others to know about.

Still to come…

As if all this change wasn’t enough… I’m actually no where near where I wanted to be. A big goal for this redesign was to finally display my portfolio. Unfortunately, I wasn’t able to pull it off, but I am working on it.

From 1997-2002 I played drums for a ska/punk band called Lucky Number Seven. This band played a huge role in my life for the five years we rocked Ontario and I’d like to pay some homage. I plan to create a sort of LNS shrine, if you will. A bunch of photos, some stories of some of my favourite memories and all of the recordings, plus some live shows for free download.

Well, I think that about covers it. If you read that whole thing, I must thank you again! Congratulate yourself for reading the Longest. Post. Ever. And thanks again for stopping by.

Happy CSS Reboot to all the other rebooters out there!

Oh, and yes, I do realize I went live a little early. The official Reboot time is 12am GMT on November 1 – which is 7pm EST on October 31. I’ll be out trick-or-treating at that time with Hannah and I have to work all day, so I went early. And… it might have had a little to do with me being super stoked about launching my new site! But not much!

41 Comments

matt! that site looks absolutely incredible. i’m always impressed with your work but you have stepped it up to levels i can’t even begin to compliment you enough on. congrats!

Fellas – thanks so much for the kind words! I truly appreciate it.

And Andrew, thanks for the write-up on your site. Too kind!

Definately one of the nicest blogs out there. Outstanding work Matt.

I never get tired of a good, grungy site design.

I haven’t seen any of the other November Reboot sites yet, but this one is ridiculously good. Your visual design is great, but it’s the way you present the content that truly is beautiful. From your home page, I can find just about everything I need to. Great content layout, good use of organization, and the design looks good as well.

One quick suggestion would be to consider using del.icio.us for your Quick Bits section, which a lot of people are doing. It’s something I’m considering for my own site, though it’s a bit limited (I like to keep track of where I get my links from, a sort of "via" URL, which del.icio.us doesn’t yet support).

Anyway, awesome site Matt. I’ll be adding this to my "dailies" bookmarks and grabbing the Live Bookmark as well.

This is an amazing design. I really didn’t thought that such a dark website can look so impressive! Brilliant work, Matt.

There is a slight glitch though – in my Firefox the form inputs in the right column stretch outside of the main container, forcing horizontal scrollbar to appear.

Patrick: Thank you sir! I actually spent more time structuring the site than I did working on the visuals. I believe I went through 5 wireframes before settling on the current layout.

I have considered del.icio.us, but decided it just wasn’t necessary. Most of the things I’m going to post in the Quick Bits section will be time sensitive, so there’s no need to keep them around. I update my WP links quite often and it’s easier for me to manage all of them from a single source.

Rob: Thanks dude! I think I’ve been to your site before. I’ve definitely seen your CSS Zen Garden entry (very nice!), maybe that’s how I ended up there?

Vladimir: Thanks for pointing out a bug. Unfortunately, I’m not able to reproduce it. I’ve tried Firefox 1.5 Beat 2 on XP and OS X but am not seeing the horizontal scrollbars. Is this happening with the comment form, or the contact form on the about page? And if you could give me your system specs so I can try and correct this, it would be much appreciated.

Oh, forgot to mention that it’s happening with the search and comment forms (name, email and website inputs), but on about page everything is OK.

Vladimir: Now that is some strange stuff! IÃÆ'¢â‚¬â„¢ve applied a width to all of the input fields – hopefully that did the trick. If you wouldnÃÆ'¢â‚¬â„¢t mind confirming, that would be great.

This is by far the best design that I’ve come across from Reboot. Nice job, amazing.

Wierd thing was, I was listening to pop-punk band Lucky7 when looking at this design! How bizarre. Are you going to put up your bands MP3s on the site?

I really, really like this! (yup, with exclamation points and everything). There’s so much content but it’s done in a very organized way. Very nice reboot!

Vladimir: Awesome, thanks again for helping me get that fixed.

Trovster: That indeed, is one strange coincidence.

I am planning to put up mp3s of all our recordings – studio and live. But who likes waiting? You can download it all now here, if you’d like. Demo 2000 is the most recent ‘studio’ stuff and some of my favourite songs are on there. The live Toronto show (Rivoli) has most of the last songs we wrote – which are totally different and there’s hardly any ska. Enjoy…

Dave: Must be nice to see your FlickrRSS WP plugin in action? Good stuff, dude!

And everyone else, thanks again for your positive comments and kind words of encouragement. I truly am blown away by the reception this site has received. On top of the Screenspire and CSS Thesis features – I was also showcased on Design Shack and CSS Beauty. CSS Beauty!

I just had to comment on your Quake4 post before commenting here… but now it’s time to congratulate you on the reboot.

I didn’t know the website pre-boot, so i don’t exactly know how it looked before… but i see how it looks now, and let me tell you, it’s one of the most impressive in the css reboot galleries. I voted accordingly. 😉

Great layout, great funcionality, great colors, great contents…. I love your website man. You’ve got yourself one more reader.

Congrats.

Oh, and FRAPS looks very cool for video recording… And good choice on the Flash Video.

Matt, I’ve read about the problem with lower resolutions in comments to the CSS Beauty entry…

Actually it can be fixed very easily. I see you have used a negative margin technique to get the container centered, and thats the cause of the problem. To fix that, just try, for example, the following technique:

<code>body {

text-align: center;

}

#maincontainer {

text-align: left;

margin: 0 auto;

}</code>

Thats all! You can see this simple hack in action on my website. I know that it’s still a hack, but it works.

Love it, will go and vote for you.. 🙂

I just wanted to add, I hopped over here from "Solitary Thoughts" , I loved your little end phrase

"I’m merely transitional" can I quote you on that ..lol

Dammit, the comment box ate my comment… I hope the original still posted (if not, just imagine it was really really clever!)

Looks like another ‘thank you’ goes in the direction of Vladimir. I used to use that technique before I started using negative margins. I switched when I needed to drop something right in the centre of the screen and the negative margin method works best for that.

I’ve changed the centering, but the background on the top gets a little fucked in good browsers – non-IE. But to tell you the truth, it will most likely be IE users that are browsing at 800×600 anyway. 😉

Oh, and Lou – No you may not!

I mentioned transitional in my comment which got eaten… That hack is needed for ‹IE6 and IE6 in quriks mode, aka HTML transitional. XHTML transitional triggers standards mode in IE… nice to see you’ve bumped up to strict… now that wasn’t hard was it!

Matt, setting a "min-width: 930px;" to the #top container fixes that problem. I checked it by editing CSS through Web Dev Extension in Firefox and it worked fine.

I’m happy to be helpful. 🙂

This page is not Valid XHTML 1.0 Strict!

Actually this is my fault – one of my comments is the only reason for this page not to validate. It just has an empty "a" tag – don’t know how did he got there, though. 🙂 But this can fixed very easily by Matt.

Try validating the main page, Damned. It says:

This Page Is Valid XHTML 1.0 Strict!

Well, validation is just a dream on big sites, especially those with a large comment based system. It’s simply an ideal and not usually too practical.

Great job Matt! Nice use of dark and vibrant colors to make a site that stands out in the November reboot. 🙂

Comments are automatically closed on articles over 5 years old.