No, brothers and sisters. Your eyes do not deceive you, it is so. Under the cover of darkness this cold February weekend, a new layout has most certainly crept onto these very pages. Bleeding the old and leaving it lying helpless – alone – in the dust.
But that is the way of the blog-assasin; it’s a cold and merciless world.
Here are the cold hard facts:
- Now proudly powered by WordPress 1.0.1
- Textile has been removed from the comments section. HTML now works, link away.
- With the exception of the header being 1 pixel off on Internet Explorer – for no apparent reason – IE is in no way crippled in this new design. Though Firebird and Safari both have enhancements that make the site look and behave a lot nicer. Suggestions for getting rid of the 1 pixel problem are most welcome.
- I have cleaned up the internals of my files, everything is all new, no old code of any kind was left in.
Now the design and contents facts:
- All new layout. Which I have slaved over at great length. I really hope you like it. Basically it’s an amalgalm of all the various sites I enjoy the most in terms of design.
- I have tried focusing every layout detail on what I feel has seen the most use. Let me know if I removed something you used.
- I got rid of the various buttons and pulled the meta data together to show only the most relevant.
- I am now proudly touting a Firebird PR button at the bottom of the sidebar. There it will remain. Long live the revolution!
- I have stolen a piece of functionality from 1976design, which enables the resizing of the comment textarea. Very nice for those long comments
What I still need to do:
- Go through the old entries and pick up the best entries and make a list with those for the archives page. I’ll call it ‘Worth Your Time’.
- Change the sidebar links into something along what Kottke has going. I was skeptic about it at first, but it really works. This will require some sort tricky category usage, hopefully it’s possible, and if it is it will also allow comments on links; my most requested feature for WP.
- Larger/smaller font functionality as well as a styleswitcher so people can manually choose the header image they want.
- A page without sidebar for reading larger entries as well as viewing and writing comments on, sort of like what I’ve had previously.
- Do a WordPress template that uses this design as its base, and release it with its own index.php and other needed files for it to have this functionality.
And now for the long version:
Last friday I started doodling in Photoshop to see if I could find a new design. I wasn’t really looking for a total redesign and really I thought I would just pull out one of the old designs and use that. Saturday night I had the design pretty much locked down and sunday was spent getting a prototype up and running on my OS X webserver so I could work on it offline.
Tuesday night the main blog layout was all done and the rest of the days where I have been able to find an hour or two I have set up the rest of the pages so that for the first time in a few months the entire site is now finally online and sporting the same look once again. (Well that’s not entirely true. The gallery pages aren’t all working yet, but they are on the verge of being fixed.)
This is by far the design I have been the most happy with. Strangely I was never too happy with the blue gradient design that this replaced. I’m not quite sure why, but nonetheless the ironic thing is that that design has received by far the most attention. Either way I have been growing more and more tired of it, and I wanted it gone.
So this is the official 2004 design.
I hope it will last most of the year out (though I sincerely doubt that!), that’s what I’ve designed it for anyway. The header image is specifically made for changing every now and then. Hell, I’ll even to guest-headers if you have anything interesting you want to show off!
And as I also mentioned in the pointlists above, I have tried to really perfect every element as much as possible. There are a few things I would still like to do, but they require that I learn some PHP, so I don’t know if they will happen, but that’s mostly minor details.
There is a minor problem with images for some of the older entries. Currently the image width I use for entries is 450 pixels, whereas older images stretch from 470 to 500 pixels. So expect some weirdness when you’re browsing through the archives (Hah, as if!). However larger images shouldn’t break the design of the page, merely look out of place.
I have tested everything in Safari 1.2, Firebird 0.8, Internet Explorer 6.0 and Internet Explorer 5.5 for Mac. IE55Mac is by far the worst since it – for some reason that is entirely outside my grasp – doesn’t load the stylesheet at all! Internet Explorer is by and large fine except for – as I mentioned in the bullet list – a 1 pixel header glitch. Also it renders bold Trebuchet MS entirely different than all the other browsers. It’s merely a minor cosmetic thing, but it does make the sidebar loose a lot of weight, but it’s small enough for me to not worry about it.
Safari has text-shadow on H2 and H3 elements but doesn’t support formatting of form elements. Either that or I’m doing something wrong. Either way it looks just fine, just a not quite as good as Firebird (though the text-shadow is very nice!). Safari it would seem, doesn’t support the resizing of the comment textarea, but I think that might be a minor mistake on my part.
Firebird is perfect. While it doesn’t validate, I use a few mozilla specific CSS properties for rounding off corners on form elements and comment backgrounds. From what I know something like that will be in the next version of CSS. Anyway, this is nothing new, I have been doing this since the second layout.
But please, let me know of any flaws and/or annoyances you might come across as soon as possible so I can get the fixed while I’m still in ‘designer mode’. I know that the last design had some problems with very small fonts and the likes. Hopefully I have not made the same mistake again (and I am by the way sorry that I never got around to fixing those teeny weeny fonts).
Also, please let me know if there are any specific entries that you would like to see added to the ‘Worth Your Time’-List, for whatever reason. Maybe you like the comments on that entry, maybe you think it has a cool picture or whatever. Let me know and I’ll probably add it.
Of course, you can’t change a design without making some fundamental changes to the nature of the blog. So next up is re-writing the ‘purpose’ of the blog; or at least fine-tuning it a bit. (This is actually something I have already done once, but I lost the entry… DOH!). So stay tuned for that.
Yeah, well, as I said before: This new design kicks major corn-hoolio!
Thanks Bjørn (could you at least have waited for me to upload the last file before you commented! :D). I’ll reply over here, but this entry wasn’t up when you commented.
Anyway, I’m just ironing out the few kinks that arise from throwing this on the Binary Bonsai server. Everything should be working just fine for you guys though. But the admin interface doesn’t! :D Gasp.
Hah! You lost your admin rights.
Crowd: We are all equal! We are all equal! We are all equal!
Dissident: I’m not!
Crowd: Yes you are!
Tsk tsk. Fool-hearted peasant! No, I just lost the interface. Not my rights… I think it’s a problem with the server I’m on, it can be a bit quirky at times… Mostly.
I will have you know that I am a pleb, not a peasant
Actually, having just used your new layout for 15 seconds, I have one tiny suggestion.
Exchange the position of “latest posts” and “archives”. Since “latest posts” will be clicked much more than “archives” (I would reckon), it makes more sense to place it on the outside, since we read “outside-in”.
Done. I found it easier to read the other way around, but let’s try it on for size.
Be aware that the older and newer navigational buttons don’t work when viewing an individual post. This is a WordPress problem as far as I can tell, and I have asked for help on it over here.
Amazing, really amazing, I love it. Even this comment form looks great . Neat job!
Michael, on the external links, the little arrow-image is right against the last letter for that link (In Firefox anyway), perhaps a little more margins on that?
Oh and btw, the new design rocks!
Michael, this is… wow!
can’t think of any blog design cooler than this. You are the King!
day of the tentacle! ;)
Indeed! I have several other header images ready to go, and I’m considering a randomizing scheme… Maybe sometime next week.
Oohhh very nice design, Michael. Very nice.
Good work Michael.
Hope you got my email about the hosting :)
Any chance of pinging blo.gs againNevermind just refreshed the sidebar adn noticed you were there (doh!)excellent display of taste and design :D
Michael,
I really like the new layout. Very sweet, indeed!
Like the design, it appears that the blkog assassin has great taste!
A small issue however; using Firefox 0.8 when I hover over any of the links in the sidebar the pop-up with link details in it causes most of the border images to jump to the right. sometimes it’s only a couple of pixels but sometimes it can be enough to throw off the whole design.
Can you send me a screenshot and perhaps tell me which specific link(s) it occurs over? I can’t seem to recreate it on FB0.8 on Mac…
Nice design!!
I’m not sure if it’s intentional, but with double digit index numbers for the comments, the author name overlaps the number.
I.E. 6(2055) on Windows.
I’m new to this blog, so I don’t know what it used to look like. But the current design rocks! I especially like these comment text-fields I’m using right now. Definitely going to ‘borrow’ the technique for my blog sometime :)
Good job.
<purpletentacle>I feel like I could… TAKE OVER THE WORLD!</purpletentacle>
I love it! The Tentancle reference is also excellent.
The new design looks nice, Michael.
Though it’s Firefox now, not Firebird anymore.
I like the new design.
However, big annoyance : individual articles are almost twice as wide as the column of text on the home page. As a result, whatever the user’s type size, line length looks bad, either on individual pages or on the home page.
With default type size, individual articles are really unreadable (well, I think I’m using default typesize, as it seems there’s no way to revert to a default in Firebird, but anyway it’s the size I’m using to read every other blog).
I noticed that articels wer ekinda hard to read but I throw that down to my high-res (1920×1440 :D) and simply increase the text size if it bothers me, infact I am tempted to get a custom stylesheet for most of my favorite blogs jsut to customize them that tad bit for my liking :D
Day of the Tentacle! Awesome! Am I the only one that noticed?
I am very amused to see your header contain the day of tentacle intro. Or at least a cropped part of a single frame of the intro. I cannot say you make anything but very nice looking webpages.
I hope you’ll have much luck and fun!
garoo; I don’t personally have any problems reading the text, but I’ll certainly change it if that’s the general consensus (is it?)
Isaack: Hm, no that wasn’t quite intentional. Works just fine in FF, Safari, Omniweb and Camino… I’ll see what I can do.
Everyone else: Yes, Day of the Tentacle, it kicks some serious ass :).
No problem reading the text here, running 1280*1024 on 21”
I’m at 1600×1200 on a 21”.
#28, no.. and it sure was a kickass game, sure got me hooked on adventures back then.
Day of the Tentacle, Sam ‘n Max, Gabriel Knight, .. sweet sweet memories.
I just recently rediscovered the joys of SCUMM through SCUMMVM.
The best thing about the SCUMMVM is that is compiles for Pocket PC. All SCUMM games on handheld….. SWEEET … that’s all I’m saying.
Yeah, it’s SUCH a cool project. Utmost respect to those guys. (Since it also compiles for OS X!)
Uh, just want to say that your site kicks ass so good! Surely a clear sign of your great talent! Kudos!
Looks great as usual. The thing that rankles me is the ‘older/newer posts’ tabs – those are navigating, not changing views so in my mind they shouldn’t be tabs.
Interesting decision to hide the sidebar when reading an article – I like reading longer narrow columns (less eye travel, etc. there are very good reasons for doing this) so I like reading on your home page better than on the individual article page.
Also, it’s interesting that you went away from the standard serif/sans-serif usage: serif for big title text and sans-serif for the article text. Serifs were introduced to make it easier to read small text. Generally in typography for print media, you see this reversed: serif for the body of an article and sans-serif for the headline/sub-head. Ahh the joys of design… :)
Cheers,
—Alex
Thanks Rask :)
Alex, that’s a good point with the tabs. Hadn’t thought of that… I’ll have a look at it.
With regards to the fonts, I know the standards for serif vs. sans-serif in print (and to some extend on the web) and I was actually rather careful in choosing the fonts that I finally ended up with. As with the ‘full-page’ design for viewing each individual post I decided for the clean way rather than the slightly more cluttered look of serif fonts.
I see your point with having a more narrow column, and I agree with it. But I opted to go with the less cluttered but wider look. Let me know if it’s a hassle to read. Some people have let me know that the font-size is slightly small, so I’ll probably make it a bit larger, if nothing else then just for this individual page.
PS: Soeehh… Comments for links eh?… :)
The site is great. An fyi – I’m using Opera 7.23 and the input fields for Name, Email and URI in your comment form are very short – I would say half-height. Although not so short that I wasn’t able to enter this.
Now, when I went to verify I had the newest version I discovered the Opera site is ‘missing’. So maybe I don’t have the latest version. Or maybe it doesn’t matter that this form doesn’t work with Opera…
How about putting articles into 2 columns, no sidebar?
I’d rather make the column smaller. Two columns is a) a bit iffy on the web, since it requires the reader to scroll down and then up again, and b) not easily implemented.
I have corrected the small input fields. Camino had the same problem. It makes them slightly larger on other browsers, but nothing too noticable.
I have corrected the text-size.
Trebuchet for the main body text I belive? Am I right?
Anyway it loks easier to read now and the bigger boxes are actually quite nice (need to pillage your CSS to see how your style them as I can never make it look right)
Actually (at time of comment) it’s Verdana for main body :)
Yeah. It’s Verdana for the main body. Nice wide font, easy to read, which is needed since it’s a sans-serif. Trebuchet MS is actually used for the sidebar headlines.
Heh. Actually if you’re on Mac (or if you found it somewhere), it’s Lucida Grande.
Ah.
I actually have Grande… nice font, shame its hard to get onto the pc :D
Wow. Just stopped by to check out the new layout, and it truly is awesome. I’ll have to explore the entire site some more (you know, when I’m not at work) but I really love what you’ve done. Now I’ll go look at my site and cry :) . Perhaps I can actually use this as a bit of inspiration (i.e. kick in the ass to finally do my own design). Keep up the good work.
nice…
Grande can’t be gotten for PCs properly though: the ones out there are all missing Italic/Bold :P
Of course, I could pay for it … but I think I’ll just use Luxi Sans instead.
I love it. :D Man, you continue to amaze me.
Thank you all :)
I didn’t know that about Lucida Grande, Kevin. Interesting. also annoying. Aside from a few core fonts you can’t really do any cool typography online. Of course there’s FIR, but I’ve yet to bother figuring out how that works…
Michael, the resizable textarea feature is a nice one. Who really wrote it, you or Dunstan? Can I also use it on my weblog? :)
Btw, backslashes are all over the place on this entry’s comments.
It’s all Dunstan’s work.
Yeah I don’t know what’s up with those backslashes… Hmmm
Ok, thanks for clarifying that.
I also encountered the backslash problems when I upgraded to WP 1.2. I just ran a mysql backup, did a search-and-replace for “” (three backslashes) and replaced with “” and ran the query to restore the database. Worked fine with my setup.