Retool, Redefine, Redesign... Reboot!

Published in Fiftyfoureleven on Tuesday, November 1st, 2005

Well here I go again, launching an updated look powered by an upgraded backend. This re-launch, though, consists of more than new code in an updated suit.

CSS Reboot

Before I get into details, I though I'd mention that this re-launch was part of the November 1st CSS Reboot, which allows you to give this new redesign a thumbs up or down, via a slick little Ajax voting script. Nice.

There are roughly 1000 Rebooters and some great work over there, so be sure to head over and check'em out!

First things first: Retool

One of the reasons that things slowed down here over the summer (besides a wedding :) was a massive re-write of the CMS that powers Fiftyfoureleven. While this doesn't mean much to readers of the site, I'm quite happy with a new core API for the admin and the front-end. This CMS now powers about 15 sites with only one centrally located instance of the script on a shared server. There is some definate w00t to that type of setup.

Redefine, or discovering a definition

History

Fiftyfoureleven started out roughly two years ago as a website for a design team that really never happened. I kept the domain, started posting, and things went from there.

Before I knew what was happening, I found myself writing about CSS and PHP and other topics that interested me, and this blog came to be. This was all fine, but it lacked a direction, or at least an assertive, acknowlegded direction of my own making.

When V3 was launched, along came with it the resources section, which acted as a sort of online bookmark system for me and various people that I collaborate with. In addition, it was a nice little way to add more frequent content to the site. These pages have become increasingly popular, in particular the programming area and the Ajax links.

The Result

So I took a look at the content here, and of what people had to say about it all. With this in mind, I also took stock of what it is that I like most about what I do on the web, along with the resources and my favorite posts and/or things to write about, and an idea came to form. A little help from Google (see image below), and you could say that the direction and definition of this site became clear.

I started to think of Fiftyfoureleven as "Web Development Weblog and Resources" and lo-and-behold, ideas began to flow again (as I said, it has been quiet here). Not too surprising, really: given a direction, things tend to move that way.

Tagline

Given that there is now a clear direction in mind, I threw that little tagline under the site's name in the header. A logo should follow soon. Hopefully.

About Page

The new about page tells a little more about the site and myself. Hopefully between this and the tagline I won't have so many people linking up Fiftyfoureleven and calling it an 'Ajax Blog' (a few pages in this site seem to have gone a long way!).

Redesign and Reboot!

With the new direction, some redesigning was in order for the site, as the old homepage went too heavy on the weblog, and in all it was a bit empty feeling. So while the rest of the site has undergone minor tweaks - the navigation and header changed the most - the homepage now features both the resources and the weblog side by each :).

There will no doubt be additions and changes over the next few days. I'd like to get the ads off of recent weblog posts, and have some more customizing to do. In the meantime, posting will begin to follow a more regular pattern (more about this in a later post).

Anyway, that's enough for now. Time to go kill some bugs :-)

Comments and Feedback

Very nice. I'm looking forward to seeing what other additions you make.

Looking very nice!

Something I just noticed, the details from the previous commenter (Jeff Adams) were filled in the textboxes for name, email and URL.

Thanks guys!

Re: Commenter data... Right, that's the caching... The commenting was rolled in last, as I don't use the blog module anywhere else but on this site. I'll have to sort that out...

Very nice, Mike, although the homepage does feel a little cramped (same with Particletree's Treehouse reboot, three columns into 760px just don't seem to go) - I guess 2005 isn't going to be the year of the elastic/fluid layout after all.

I really like the little graphical flourishes like the 'Comments and Feedback' header - it all blends together nicely.

PS: "slick little Ajax voting script" - thanks! ;)

Dude, this is really nice. I particularly like the approach on individual entry pages, but the three-way emphasis on the home page is good too. It seems like everyone's at it again. Time to brush off my text editor...

- Matthew: I had trouble the first time I squeezed all that content in the three columns, but in the end I liked it :)

- Hey Simon, long time no see! Thanks!

you've done some very thorough testing before your launch. I've yet to practice such a tedious task. I committed the sin of "Live-Redesign" so props on getting things well organized before you presented.

One thing: What's with the display:block on this checkbox? (for remember this info)... I know you did it on purpose, just wonderin'.

Thanks Dustin, I did get some things done quite early but the comments, for example, were coded at 12:05PM GMT, 5 minutes after going live! The comment form is pretty much a copy and paste from the old site.

I do plan on tweaking it up a bit. I really had a hard time going from full width comments to this layout - in one column. For me, the way they are layed out makes them quite readable, one of the strong points of the old full column comment layout. As for the comment 'form', I will get that sorted.

Otherwise, there is a lot of cleaning up that I wanted to do (to the resources, mainly) before launching, but the CSS Reboot turned out to be a fun thing to be part of (thanks to you for pointing me there!).

Just a little test, don't mind me...

Looks good here. This is a nice evolution of your previous design. I really like it. :)

So...what made you decide to put your navigation at the bottom of the document? just a tip, it's not worth any SEO that possibly might give you. I just tend to think what my site looks like without styles (or more or less...what it looks like on a handheld). It makes sense to put your nav at the top of your document, not the bottom... But I might not know something you know. What was your reasoning just out of curiosity?

Scott, thanks, that was what I was after!

Dustin:

A couple of reasons, really. First one being that from an SEO standpoint, I was told a long time ago that meaningful content should come at the top of the page. I've been fairly successful doing SEO work, that was one of the ingredients, so I have stuck to it (though you may have better insight than me :).

Secondly, I think that the flow - from top to bottom of the document - works better if you provide the content before the nav.

For me, the document at "retool-redefine-redesign-reboot" should be about that topic first and foremost, and so I like to have that content appear first in the source, with secondary stuff like the Nav, Sub Columns and Search etc. after the main topic.

Congrats on the well done Reboot. I like it better than the previous one. You got each pixel covered with detail. Now, lets keep the great content flowing =)

Well what about the folks who are "navigating your site"... now they have to scroll to the very bottom... a few links (5 to be exact) isn't going to touch your SEO. The most common thing to do is just add an extra link that allows users to "jump to content"

You do however have an excellent point on sideBar type nav stuff. That can most definitely go after the content. But it's nice to have sort of a small 'table of contents'

Think about the document structure of a book (or a large PDF). It wouldn't make sense to put your table of contents at the end of the book.

All that aside, if you're going to keep the main nav at the bottom, consider putting a hidden link at the top that allows your 'styleless/handheld' users to 'jump to navigation'. Just a thought at least.

Hey Dustin, I'm curious, what browser are you using? Have a look at the screenshot for 5411 over st the CSS reboot. The nav is at the top. Maybe there's a browser flaw somewhere?

As for sans-stylesheets, I do have skip links in there. And I will be adding a handheld sheet just a soon as I finish some other things around here :-)

I'm using Netscape 4, why do you ask? j/k
For real though, just to clarify what I was talking about, I meant the 'source code'. Your Nav that is "styled on top" is "placed on bottom in the source".

I did however take a double check and you do have the appropriate "Jump to:" Links at the top of your document.

- Sherwin, thanks!

Dustin, I figured you for a netscape 4 guy! J/k :-)

Yeah, I've been doing this setup (content>nav) for quite some time now. For me, when I browse to a site I want to read content, not look at a bunch of UI stuff. That's easy with CSS for users on PC based browsers.

When I'm on my PDA it's a different story. If I browse to a page titled "How to build sexy widgets", I want to see content about building sexy widgets in the first screen, not search boxes and nav.

The same for when I turn off the stylesheets on a PC based browser - the UI stuff should be accessible but not in the way - I guess that is the spirit of how I lay out the source code here.

Is this a new feature? I notice that my comment via cookie... nice.

Hey Sherwin, nope, it has been around for awhile, in fact, a little over a year now.

It highlights your comment for you, as I find that makes it easier to find yourself a starting point when you return to read the comments. More details here.

Looking good! I almost didn't recognise the place when I clicked through from the RSS feed!

Fantastic redesign, you should be proud of yourself!

:-) Thanks Gerard!

Home » Blog » Fiftyfoureleven

Check out the blog categories for older content

The latest from my personal website,
Mike Papageorge.com

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..