Fiftyfoureleven Version 3.0 - New from the ground up

Published in Fiftyfoureleven on Thursday, February 10th, 2005

Hoping that this site can make some more noise in 2005, a new back-end, front-end and a whole new look will hopfully get things off in the right direction. So what exactly has been done to spice things up and improve things around here? Lots! Read on...

Objective

Having spent a year working with my own home-grown blog script, I began to realize that things needed upgrading around here. To put it simply, I needed to make a better website from the ground up, built on a new framework that is the core of the CMS I use.

The Look

It's worth noting at this point that I have not tested this design on any Apple products.

Certainly the most noticeable change around here for most people (or those who visit the site) is the new design. Quite simply, a new look was in order. I was after something where the typography and design would help convey the content, navigation elements and other UI bits in a clear manner.

My inspiration in these areas came from two sites that I have admired for some time for their use of different typography and color schemes, Sockyung Hong's Soxiam (tho I was more partial to the previous version!) and Doug Bowman's Stopdesign site.

It is also safe to say that the comment layout and presentation were inspired by Khoi Vinh’s Subtraction 7.0 comment design. For reasons that Paul Scrivens outlined for me, it all just seems to flow better this way (and the comment hi-liting is still available).

Overall I think the design goals were achieved, however one niggling detail was the difference of the look and feel when viewing the page with Windows Cleartype on and then without.

I know that Jeffrey Zeldman grumbled about the existence of font-smoothing as yet another design variable (I lost that link somewhere), and I wholeheartedly agree with him. The difference between the look and feel is significant, though I am not too worried, as the primary visitor to this site likely has Windows Cleartype on or is using an Apple, so I'm fairly certain that they are getting the design I prefer!

Style-guide

A small project for the future will be to develop a little style-guide for this site. Some level of consistency in things like headings, certain spellings and some other details would certainly add to the quality of any website.

The CSS

The CSS for the old version was a disaster, and the design itself was critically flawed in that it required the use of a super wide header image (I suppose a png and it's wonderful alpha-transparency would've fixed that problem).

With this version the CSS file is cleaner, more flexible, and broken down into basic elements ala bleach so that I can run different color schemes. Hoo-rah for CSS.

The link blog or resources section

I've added a link-blog or what I like to refer to as a resources section. It's basically going to become my bookmarks folder; we'll see how it goes but I am hoping that it develops into a good resource of links.

There has been a lot of discussion in this arena lately (Stinky links, Information Aversion) touching on signal/noise ratios and such. All I can say is that each link added to the resource area will come with a decent description and be in the realm of web development. Think "resources" versus "links".

Link Credit

To start, I pilfered a bunch of links that I had in my old bookmarks and some that were waiting in the 'review' section of my new bookmarks.

Chances are I followed some of those links a while back from someone else's site, however in adding them to my bookmarks I lost that trail. From this point on credit will be given for all links with a little 'via' link, similar to what most people are using these days.

In any case, in the next week or so I have about 200 links to add to the site, and some will be oldies. Keep this in mind if you subscribe to the resource feed before then. Subscribe now if you are into some form of "link revival".

The back-end

Quickly, the site has a whole new back-end that really rocks. Posting has never been easier, so hopefully it will happen more often. Think bookmarklets galore and other time saving tricks that should make posting a pleasure rather then a chore.

The front-end

With the new back end (and new db set-up) comes a new front-end (ie what you are reading right now, if you are on the site). This is a trial by fire sort of thing because it is pretty much untested, but for a short run on the test server. Still stuff to clean up (from title attributes to some other stuff), but for now it seems to be holding together!

Please note that this new site was not validated even once prior to the launch, so it is quite likely that there will be errors.

Site structure

Some serious redirecting is happening now, as I have moved the blog from /sandbox/weblog/ to /weblog, changed the feed urls, and from this point on the permalinks for posts will be category based rather then date based. Time to update your links if you link to the weblog, though I am reirecting, I will no longer ping the /sandbox/weblog/ url.

A Big Thanks

Gotta say thanks to Jonathan M. Hollin for a quick, early beta test, and to Colin Devroe for an amazing 10 minute thrashing of the site; I wish I had someone to do that for all of my sites! I'm still working through his list...

End of the ramble

To close things off, advertising will be a part of the new site, but it will be a multi-tiered service. Quite simply, those with 54-11 cookies will get preferential treatment.

Expect some new little widgets and tweaks in the time to come, but otherwise lets hope that there's more posting and less dead air time!

Comments and Feedback

Looks good. Now you need to fix the MIME type (or switch) and drop some META elements and most technical things are fixed. You will be posting more often now, I suppose?

Also, fix the tab order of this form. It sucks.

Hey Anne, thanks for dropping by!!

Was that you checking out the trailing slashes?? Someone was doing some url hacking...

Sadly, I'll be sticking with text/html on this site from now on. I spent a year learning how it was done, but lets face it, I don't need it just yet.

I will be posting more often, the back-end here is much more then it used to be.

I've added "fixing the tab order" to the list. To be honest, I haven't spent much time with the html since the original mock-ups... (off I go to validate)... Hmm, some things to clean up, it seems. Things like title tags, and link elements need to be added as well.

I did not play with trailing slashes. Perhaps you should switch back to HTML 4.01 Strict? Having your system it should be trivial.

Your "own system". Argh.

Well, I don't know about all that technical stuff Anne is on about but it looks really nice and it's got green, I lurrve green! :-)

Hey John, thanks.

The green just kind of happened, I had no real color in mind, and will likely do some swapping at some point, but for now, I like it too ;-)

Very nice - although I have to say the first thing that came to mind when I clicked through from Bloglines was "Hey, it's The Weekly Standards!"

I like the green (although it reminds me of BusinessLogs), and the comments format works really well. The homepage is excellent too, a really cohesive piece - well done.

I'm actually only really commenting to see what the "your own comment" doohickey looks like in V3.0...

Hey Matthew, I'm glad you like it. Maybe I did get the green from Business logs... I really have no idea.

Why "Hey, it's The Weekly Standards!"?

The "your own comment"... I'll switch that, to be honest, I set it to that color just to see if it was working, and haven't bothered to adjust it. It doesn't stand out too much anyway...

There ya go, something a little different.

Mike - Re. TWS, it just reminded me of the site; the bar across the top, tabbed nav top-right, washed-out colour-scheme, right sidebar. Not a criticism.

Also have to say I love the comment mechanism, with the 'Submit' button separated from the 'Preview' section - excellent usability tweak.

> Not a criticism

No worries, I didn't take it as such. I've been struggling with the feed mechanism for the site and wondered if the title was monkeyed up or something.

In fact, I wondered if anyone was getting the feeds at all!!

Nice. Plethora of divs, but I can live with that. Other notes: the columns work pretty nicely and I think the sub-subheadings (h3) are a tad small.

I like it, Mike! Way to go!

Hey Rob, you're right, it's not exactly a lean piece of markup. WRT the <h3>'s, good call, I agree. I'll bump them up.

Jeff, thanks man, nice to hear!!

Well Mike you already know I love it, I told you after my "quick, early beta test" (looking around the site for five minutes while chatting to you on IM).

Most important of all though is the new back-end, anything that'll get you to write more frequently scores highly in my opinion.

+1

Thanks Jonathan, you sure know how to put the pressure on ;-)

Wow. First let me say there there is a line between constructive criticism and being huge lame asses. Most of you who have commented on here are the latter.

Anyway, Mike, excellent job on the redesign. Superb attention to detail. And I will keep any of my comments to myself for a little while, while you go through the woes of releasing a new site design and tidy up.

After that, I'll release the hounds.

Oh, all of you that commented on Mike's excellent work here, and found flaws - head on over to my site, I'm using WordPress's default CSS design called Kubrick. Gasp!!

That, and I'll probably add some tables. :)

Simon drops in:

  • He casually walks in as usual, and immediately performs a double-take.
  • He peers around.
  • He sees green, and browny-grey stuff.
  • He smiles.
  • He sees soft edges and nice corners.
  • He smiles.
  • He resizes the font and scrolls a bit.
  • His smile is less pronounced, but still there.
  • He defeats the stylesheet.
  • He smiles again.
  • He nods his head in approval.
  • He carves “Simon woz 'ere” in the comment area.
  • He leaves, still smiling, to return again soon.

Looks good. I like the comment area and the way they're displayed. I may do something different with "Asterisk 2" but who knows. Anyway nice job!

Cheers Keith, I was just about to comment on your *2 post... It's a lot of work, re-building...

Matthew: When I first clicked through I didn't think Weekly Standards -- and I designed the darn thing!

I'm diggin' the new look and can certainly vouch for the "lot of work, rebuilding" statement Mike. Trying it out myself, right now in fact, and it's almost always more pain than gain :) (especially when I stupidly decide to go ahead and push the design live before the site's even halfway done! You'd think I'd know better.)

Wow, Benjamin, I head over to your site a couple of times a week, but man have you been busy!!

What a great new look, and a nice twist on the worn look; worn look with a purpose.

I hear you with the knocked out in a weekend of “I-gotta-start-writing-again� inspiration. I've been programming the site for a while now, but the design hit me one day from a thumbnail I saw over in hotlinks.

It was the header that did it, and since then it's been a rush to finish coding so that I could finally post again...

Just chiming in to say well done. I liked the old design, but this one is def cool. I really like the homepage and the aggregation of content. Comments are nice and readable too. It's easy to see who's saying what.

Why are you "Mike P."? This is your site dangit, if any other Mike's want to comment they should be the ones force to initialize themselves.

Why are you "Mike P."?

'Cause Mike Rundle insists that he was the first Mike on the internet ;-)

Thanks for the kind words Brian.

I don't know what it is, but the way the comments are styled is just wicked cool to me. I think it's the formality of them, how each section of each comment has some kind of useful information attached to it.

Oh, and this is the original Mike talkin' so you best recognize!

I think the Business Logs green is just a bit "yellower" than this one, the Papa G green has some teal to it.

I like green! :D

Just that the green background on this comments input box (and used on the frontpage?) needs a bit of more fade to white for my taste.

Good job overall!

I hate it! na::-)

But nice, a site without that sFir thing. The type is a bit on the small side for me, combined with the text-align:justify thing. Besides, I don't have Verdana, and Arial is not my kind of thing at all (user stylesheet to the rescue...).

Those background images with diagonal strips through them are a bit overused, imho.

Wheeew, have to get used to it, I am missing the old color scheme a bit ;)

I really love your new command central (Home). It is just that the Resources have too much weight, since they are mostly pointers to external sources.

A focus more on your content would do better in my opinion, since your own writings are the things I am interested in when i come here :)

Excellent work Mike!

Thanks Minz and Philippe, I appreciate you both offering your IMO's (and compliments)!!

The colors etc. are fairly easy to change and they will at some point. I may even invoke a switcher, who knows.

Minz, I totally agree with you about the content issue. I tried to get a couple of post titles in the right hand panel, but they aren't very noticable.

I really wanted a part of the resources above the fold (800x600) so thats why it is the way it is.

Perhaps I can pretty up the /weblog page, and use that more for hilighting recent content, not simply listing it off as I do now. I'm not a fan of the way it is at the moment anyway.

Oh, sorry Mike, I forgot.

I don't know whether you are a Photoshop user or not, but maybe you'd like to try Jim Amos' fantastic article on how to create smooth curves:
Smooth Curves in Photoshop

I noticed, that especially on your front page the rounded corners look a bit "pixelly"

But that is just nitpicking ;)

Wow I love the new design... the comments are the best bit... Keep up the good work!

I really like the comment layout. It is something I have wanted someone to do nicely. I hate having to read names and dates and things. With this layout you can just read the comments one after the other and look at a name if you like what was said.

Could just be me but the footer looks a little odd. Looks like the courners should be rounded but aren't or something. Other than that, really nice redesign.

You know I really liked the previous design, but I have to admit that I'm loving this one as well (except for the header, you know).

The articles are very easy to read (they suck you in to read them, and I have to work!), and I agree with Eddie about the comments.

All very well thought out. Well done Mike.

Thanks Sonia!

Eddie, you're right, and good eye. I kind of cheated on the corners down there; I'll fix it up soon enough!

Woah! This stuff has been renewed! Though v3 still takes me a little getting used to, here are my initial thoughts. It's looking refreshing, like lemon fresh refreshing. Green is good. I really like the comments layout; they kinda make discussions look like good ol' forum thread, which is cool. As for the comment form, personally I think using definition lists for forms equals pushing it a bit too far :)

Has the previous design been archived anywhere? 'Cause I loved that one as well.

Update: I'm totally against using /sym/ for comment previews. Every page on a site should be worthy to be permalinked, and Send Your Message just doesn't... Argh, scratch that, it's just me, this design is great :)

Hey Mathias - nice catch on /sym/, and thanks for the kind words...

The previous design archived... Damn, should'a thought of that one. I'll have to put a real colophon together and pop an image in there.

The <dl> is pushing it, but it coded up quickly and I was in a hurry to get it done; I'll need to think that through a little more.

You've got some really nice "information design" going on here, much of which I plan to rip if I ever get round to redesigning my personal site :-)

Hey Andy, thanks :-)

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..