Dear reader, meet Invader60; Invader60 meet one of the people who will be using you. Great, now that we have that out of the way, allow me to explain to you what exactly is going on.
Invader60 is the 60% mark of Invader. You will no doubt have noticed that it is considerably slimmer than earlier versions of Invader, or indeed any layout previously seen on Binary Bonsai, which is actually quite contrary to what I had originally planned (which was a layout which would be considerably wider than anything before it).
The implementation is filled to the brim with bugs at the moment, but I’ll be hammering most of them out today; I just wanted to make sure I actually managed to publish this today instead of letting it slide.
There are quite a few ideas behind the way this new layout is structured, some are evident some aren’t quite as evident yet. Most importantly is the use of AJAX and fancy schmancy effects, all of which I’ll also want to talk more about as soon as it’s all working as it’s supposed to.
Order of business: Fix the currently slightly broken functionality, then order the content properly, then fix the styling.
Now if you’ll excuse me.
PS: Oh yeah, in the midst of all of this, I forgot to tell you that this is another Bachelor Weekend! :)
It looks great. I like the thin style a lot better than the old spread out one you had yesterday. Congrats on a job well done.
It’s fun to see it evolve :)
Awesome design. I’d like to give my blog a custom design with sections and all that stuff. Are there any good tutorials/docs out there?
My my, what a plot twist. Consider me to be on the edge of my seat.
oh lordy, i just came. You must really dig Mint Mike? How’s K2 coming along, learned much from your web-sculpting on Invader?
Yep, I love Mint; but what does that have to do with anything? And yep, I’ve learned tons of things getting this thing up and running.
Next step is pouring it into K2.
…maybe I’ve been spending too much time inside Mint, everything seems to have a mintish charm, ooh a curve – MINT! see.
all the space is interesting, but you have one of those mentally sized Apple displays? Must be spacious. Anyhoo, I understand your work is never done… we’ll all watch and learn. Yikes that footer is angry.
Haha, yeah the footer does indeed seem to be pissed at something :)
I have a 20” Cinema Display.
I like the slimmed down invader. Everything looks very calming. Invoking the tag cloud made my CPU spin out of control though. But that could have been Firefox’ fault as well.
I’m glad I’m not the only one that comes up with a design, says it will be one thing, and then, completely changes his mind.
As I’ve said, Invader is really lovely and very slick. While I might have said before that I can’t wait for you to call it “done” I think I have to ammend that now. I don’t particularly care if you ever call it “done”. It’s been quite nice to see the site morph so much over the last few weeks.
I have to say Michael, that it’s been an absolute pleasure observing the evolution of Invader. I’m with Chris in saying that I’m more than happy to never see this site redesign ending, though it would have been nice if there was a slideshow depicting the morphing of BB.
Have you been version controlling the site design?
The header tag cloud, etc… is Flash driven? Or does your loading bar just look like flash?
It looks totally awesome Michael! I’m really looking forward to see the final result. Then if this is “only” 60% then I’m very curious to see what 100% will look like.
I like the slim version, and congrats on reaching 60% Michael.
Thanks everyone, much appreciated :)
Clay, there’s no flash involved, it’s all javascript with AJAX, the loading animation just looks a bit like Flash (or OS X).
And no, I don’t really version control the site. Most of the time I actually work directly on the server, though in this case I prototyped it offline before uploading it. But this is a rare case.
My God, the use AJAX is great! Very hot.
I’m loving the blue wallpaper by the way!
Keep up the good work Michael :)
I’ll admit I wasn’t much of an Invader fan….… until now. The use of Ajax is both functional and complimentary and I like the slimmer, minimalistic presentation. You’re gonna get hammered by people wanting this theme. ;)
Just say, “no”.
How will we ever learn if you just keep telling us. I’m more than willing to dig through your source mark-up and steal from you the old-fashioned way.
Just say, “no”.
How will we ever learn if you just keep telling us. I’m more than willing to dig through your source mark-up and steal from you the old-fashioned way.
I would like the theme, but I know Michael won’t release it ;).
You damn right :) — Invader is miiine! All miiiiiine!
Once I have everything under control, I won’t rule out the possibility that parts of it might be released somehow.
invader is so far the best design I ever seen. but maybe we just like the same things. however, I had to give up with my blog, so I can’t try to steal your code… but you make me desire to go back to coding.
ps: maybe you willl write a book on web design one day or another…
Title: Michael Heilemann’s Secrets of the Gradient
so, any thoughts of making the previous version of invader public, since you’re not using it anymore.
Call me controversial, but I don’t think I like this layout as much as the people before me did. IMHO, it breaks with the idea that the front page should have the most important or attractive elements of the page (also the most recent) up there in the top 600 px orso, so that it can catch your attention without scrolling down.
The AJAX animation is cool and nifty and all, but is it functional?
Love the AJAX.
Great design. Simple yet functional.
Possibly the best weblog design that I’ve ever seen…and it’s not even finished!
Whoa. This is my second post in under a minute but I had to mention the comment posting style. Very nice.
You put your foot in this one.
Who cares? Sometimes pretty for pretty’s sake is enough. The bevel isn’t functional either but it’s still nice.
The animation actually serves a quite clear purpose. Instead of ‘popping’ open the box, which confuses the eye, it gently shows you just what’s happening.
I love hot new ideas, and your’s are really under the hottest one. Your use of Ajax is interesting. But I am with Nico now. Why don’t make the activity tab closed by default? If I am interested in Activity of your Blog I will open it. But if it’s opend by default the main part of your blog, i.e. the contet or the posts are not visible for the first moment. I have a 1280×1024 screen, which is nearly the standard resolution at the moment, and I have to scroll down to see your first post.
So making the tabs closed by default would be the best solution in my eyes to let the design as it is now and make the blog more surfer-friendly.
Just my humble opinion on this point.
oh, and Invader will be pretty damned difficult to clone on my blog. So maybe I should begin to be creative by my own :lol: ;-)
But I hope it’s ok for you if I and other get inspired by your theme and maybe even “copy” (this means: see your design and code it by my self) elements of your design
Nico, you certainly aren’t the only person on the fence (and not the only one confused at the amount of ejaculation going on in these comments). I kinda feel that if you have a two-dimensional space, you are wasting the opportunities provided by that space by using it only one dimensionally with a single column layout. And I’m not convinced that the tag cloud is in any sense functional/useful in its current state.
But since we’re only at 60%, I’m reserving judgment until I see what lies ahead. :)
I hope this is all good natured critique – I know Michael doesn’t need anyone to defend him – but c’mon fellas, this is the internet. Its not even real, so let the guy have some fun once and a while. You can always load up the RSS feed in your aggregator and style it your way – But, I find livesearching and all that AJAX (hehe: “send out war rocket ajax to bring back his body!”) most functional, and now with super-fadey extra woop I love it.
Buy a scroll wheel chump. Oh, and 1280à — 1024 – hoh, on my windows machine things go wonky up there. The average ‘standard’ res must still be 1024 × 768, right?
Wow, your site has evolved into many things since introducing invader. I can’t wait to see the final result!
How is that animation done anyways? the one that pulls down the activity and tag cloud
Wow, Michael… I’ve seen some awesome site designs, but this is just mindblowingly impressive. Can’t wait to see what’s in the 40% yet to come!
I don’t get what everyone’s talking about. About Ajax. Is everyone referring to the pull down activity and tag cloud tabs on the front page?.
If that’s it, well then it’s just fine as it is now. It just doesn’t look that fancy, i’ve seen pull down stuff in other sites, with javascript. Or am i missing something here?
Anyhow, this design looks much better than previous Invader levels.
Michael,
If you’re collecting feedback, I think the Column is too thin. But I doubt that you’re collecting comments.
Michael Heilemann, future buzzword. :)
Nope, I’m not collecting comments as such, nor am I in the business of making anyone ‘ejaculate’.
Kapeka, the activity tab is opening by default at the moment as a test. Don’t worry about it.
Just a little thing Michael, Opera for Windows doesn’t seem to like the Funky Ajaxified Menu at 1024*768. Just thought I’d mention it if you hadn’t spotted it already…
Thanks Blair, but I probably won’t be doing anything to fix Opera; at least not this side of the new year.
Ugh! I’m not Martin !
Hmm.
Well.
Se this could go becoming a long comment here, so here’s hoping you’ll read it.
First of all:
So before I go on ranting, these 4 items are the important ones. These are the ones that really matter.
What I am going to mention, is a concern I have with the latest JavaScript craze. People call it AJAX, which means JavaScript plus XMLHttpRequest. The thing is, it works GREAT for gmail, and it can be used well. But just like any other thing, it can be used badly.
In the case of BinaryBonsai, I’m worrying that it’s really just a case of fireworks. In my brutally honest opinion (not that you asked for it), the two tag clouds would work better if they were plainly JavaScript show/hide’s that also linked to a HTML anchor.
But this is not only about BinaryBonsai, because even if I think the AJAX is superfluous, it’s not as bad as it could be. No, my worry is that this AJAX is the next big fad, just like Flash was.
When Jakob Nielsen wrote his Flash 99% bad , I was using Flash myself. I remember I was furious, because after all, with Flash you could create so much more immersive universes, and a much more immersive experience. But Jakob was right:
I’m inclined to say the same about AJAX. Even if it can be used for good, the fact that it’s a fad, will result in the above. Not necessarily so much on BinaryBonsai, as everywhere else.
Now using firefox, that search feature is one of the hottest things i have seen in a while, however it would be great if it slid down, as per the tag/activity tabs.
Also, I dont know if this is a achieveable, but tidying up the fades between searches would be very cool.
Ohh, I REALLY REALLY like the slidey tag cloud and activity buttons. Mmmmmmm Ive gotta find out how to do that.
IMO its a tad TOO thin, but not so as its annoying.
Can you point us a little in a direction to find out how to use ajax to achieve what you did here?
I like it very much!
Joen, your concerns are things I myself have thought of a lot before going ahead with the current solution. And there are a couple of reasons I chose to not preload the contents of the tab:
First of all it’s a speed issue. With my newly upgraded sql server and various other optimizations (and there are still some I need to get done), it’s not as bad as it used to be. But page-size and bandwidth is still an issue worth considering.
Secondly the current setup allows for updating the individual tab without reloading the page. I personally use this quite a bit…
That said, I have considered preloading the content and adding a ‘reload’ button for the activity panel. But we’ll see what happens.
When I click from the Activity tab to the Cloud tab, AJAX does not load the Cloud content. It looks like it is about to (there’s a gap between the sections). Then if I click ‘Cloud’ again it tightens everything up and removes the gap. It takes a third click for the Cloud tab to expand and generate the content. I am using Firefox. Is this supposed to happen this way, or is it just something that you’re still working on?
It’s still work in progress. I’m no JS guru, so it’s spaghetti code as far as the eye can see :)
I love how your layouts develop, change and are perfected online, right in front of our eyes. That is all!
Damn! This is very cool! Only nitpick i have is those “top tags” gradient colours, but the rest, WOW! Can’t wait to see this at 100%!
And I thought you forgot all about K2. ;)
Not at all; we’ve been making progress behind the scenes since r96. But I think we both needed a break from K2 in order to pursue other interests for a while. Chris is pursuing his wife and child; I’m pursuing Invader :)
The little one can’t be that fast yet can it?
Insert slingshot-joke which is entirely inappropriate, but still kinda funny because of its absurdity ;)
Well I’m glad to hear it Micheal. Invader is looking phenomenal. I look forward to the next release of K2.
Hmm… now the tabs seem to have stopped working completely for me.
As for the AJAX effect stuff, I downloaded the pack form script.aculo.us and have been playing with it.
Ive not tried any database stuff (as frankly Ive NO idea where to start for that), but just for visual trickery its pretty easy.
Now I just need to find a practical use for it and also get further on with my site redesign.
I just noticed the wallpaper functionality, teh c00lness. What I’ve been lusting for from the beginning has been realised, the true sparkle of the translucency (I love that word) comes out and the whole thing just looks totally spiffy.
Keep up the very good work.
The styles are just there for fun right now; they need some serious font-color adjustment for them to work properly. They’ll feature more prominently once the feature set settles down.