The b5media redesign
In early October I was sent an email by the guys at b5media asking whether I would be interested in working with them on a project that had a tight deadline. I’d heard of b5 and read their main blog a few times, but I wasn’t a regular reader and didn’t know any of the people running the network. A few days later they announced that they’d taken $2,000,000 in venture capital and then they sent me another email explaining that they needed an overhaul of their main page to turn it into a bit more of a portal. Suddenly everything made sense.
I talked to Aaron Brazell on the phone and started to get an idea of what they were looking for. I did a few comps for them, and the first 3 or 4 were pretty bad. Actually, they sucked. Everyone was sending emails back and forth with dieas. Then one of the guys said they wanted the page to feel like a place where people could “discover” b5media. That got things moving in my head and I came up with a design very quickly after that.
The comp is actually almost exactly the same as the final product.
Why I did what I did
The design itself is meant to provide a brief overview of the network for people who are new to the site, wondering about advertising options, or wondering how they could start blogging for b5media. If I did my job right the front page will be enticing enough to convince these audiences to click through the rest of the site and keep learning about the network.
The Ajax splash is the most obvious part of the design. It has information on advertising on b5media’s network, blogging for b5, or subscribing to some of their 100+ blogs. The goal was to let someone from any single person from the 3 key audiences find the information they wanted quickly.
The random channel is something that b5media didn’t have before on their homepage. It’s similar to what 9rules does – it gives each member a chance to show up on the home page and drive a little bit more traffic to their blog. The content is pulled using b5’s custom API. If you want to know how it works, talk to Aaron.
The blogroll was actually something they had already been working on, all I had to do was drop in the JavaScript and add some CSS to make it match the rest of my design.
It’s not perfect
I know it’s not perfect (yet). The background image on the content doesn’t match to the background perfectly – that’s my fault because in the middle of the design I messed with my color settings in Photoshop and didn’t realize it until the design went live. The test comments I was looking at didn’t look as obvious for some reason. This mistake will be fixed sometime this week – once the guys are back from AdTech.
There might be errors in IE6, IE7, and even Firefox. If you find a problem, let me or one of the b5media guys know and we’ll figure out a way to fix it.
That’s all, folks
It was fun working on a small team to get the design launched by the deadline. Being a freelance designer means that a lot of times it’s just me working with a client who questions a lot of my decisions. b5media let me do the designing and worked with me on the coding. Aaron Brazell put together a few PHP scripts and even a custom WordPress plugin to make all the pieces of the design work. Everyone sent me what I needed on time. And it was impressive (and fun) to see it all take shape at the end.
I’m going to dig a little deeper in the code in my next post at The Blog Herald and explain some of the techniques I used to make the site look “right” in most browsers.
It’s a nice design — I’m curious about something, though. Is the white space under the banner intended as ad space or something else? It seems like prime real estate that should be used in some fashion, so I’m thinking it has a purpose and I just don’t know what it is. :)
Drumsnwhistles – the white space is actually there because I was allowing room for the content in the splash to expand. In my initial comp I had intended the splash area to be 250px high – just like the ad on the right.
You’re right that it could be used for something else. In the future maybe something will fit in there ;)
It’s an excellent piece of work, Ben. Many congratulations.
I was interested in the “three audiences” idea. Isn’t that a bit too much for one landing page? Personally, I would separate off the readers onto another more glamorous portal page, leaving advertisers and would-be bloggers at b5. That would mean defining the content under different branding.
It would also make your job on this page a lot easier, don’t you think?
Good stuff, Ben. I’m impressed with the new design.
I like the cleaner blogroll via the javascript/css drop-downs – looks very smart.
Maybe the B5 Headlines should include a comment count.
With regards to the random channels, I’d prefer more channels shown with just the headlines – say 3 random channels followed by 5 headlines to the latest posts with no summary.
Finally, I quite like the white space under the banner and wouldn’t want to see any line ads to clutter it up. Maybe where the jobboard box is can be the place for advertisements, maybe something like TechCrunch has with those four 125×125.
Just my 2 cents from a non-designer. ;-)
Cheers and well done,
Martin
Hey Ben, one little thing I thought I’d mention. The tab box at the top of the main column really doesn’t need Ajax to switch panels, in fact the usage of Ajax has been slowing down the panel switching for me immensely. Since it’s only a few sentences per tab, why not just hide/show divs instead of calling another page for the content? You could chomp the entire ajaxtabs.js file down to one function because all you need is a conditional that checks whether a tab is displayed or not. Load up the data for all the panels on the normal page load (use includes to keep text files separate if they’ll be updated often) and then the tab switching will be instantaneous — no need for the “Requesting Content…” filler text.
Ajax fetching is useful, but only if you’e doing some massive computational stuff and you know it’ll be awhile. With 9rules Search we’re accessing the Flickr API and custom parsing the YouTube Search Results RSS feed (example) so it takes about 5 seconds for our server to chug through the 600 lines of PHP making it happen, thus we didn’t want to load it in the normal flow of code and slow down the rest of the page.
Just my half a cent’s worth of knowledge… spend it or toss it ;)
You know how I feel. Stellar job, Ben
Mike – good tip. I am far from an expert with JavaScript / Ajax / etc. Any tips on optimizing the code are greatly appreciated :)
Hopefully this week I can optimize the code a bit. :)
Hey Mike – can you say all that again … but in English ;-)
Ben
surprised you didn’t know any of us, I must just know you by reputation, and certainly we’ve got a lot of mutual acquaitences and friends. Don’t be a stranger…and great job.