We’ve redesigned come and take a look
This weekend we’ve been putting the finishing touches to the new BlogStorm design and it’s now live on the website (best viewed in Firefox while we iron out some bugs).
As well as looking a lot better than the previous design the new theme offers increased flexibility for new features. We chose to use the fantastic Thesis Theme because it has a great codebase that you can build from and customise to your hearts content. WordPress as a CMS doesn’t offer users the ability to modify blog design very easily but Thesis fixes that and the latest version even lets you alter widths and colours from the control panel.
What’s New
The first thing you will notice is the logo, this was done by Alf Design over at 99designs.com (email alf.communications@gmail.com) and looks pretty awesome.
The search page is a major improvement, the standard WordPress search is awful for a multitude of reasons – the main one being the fact that results are ordered by date. Do you know any other decent search engine that orders things by date?
I spent some time reading Joost’s article on How to Improve WordPress Search and implemented the changes as well as a few extra tweaks. The results are a huge improvement with spelling corrections and related searches coming up perfectly. Click the screenshots below to test it out.
Spelling corrections, pulled from the Yahoo API.
Next up we have added a “Best Posts” category to the menu which will showcase the best content that’s been published on BlogStorm.
Another improvement is the footer which now includes thumbnail image links to all the categories.
The comments are a work in progress, Thesis separates trackbacks and comments by default which is great. Thesis doesn’t easily accommodate threaded comments and the previous threaded comments plugin we used relied on JavaScript and didn’t work on a number of browsers so I decided to remove it until we can come up with a better solution.
If you haven’t seen the site in a while I saved a screenshot of the previous design here.
Post category: Blogstorm, Design Tweet
Patrick Altoft is Director of Search at Branded3, a Leeds SEO & Digital Agency specialising in SEO, Web Design, Development & Social Media.
Comments
Read the 19 comments below, or add your own!
The site in terms of width and widths of items on the page looks so different in IE7 compares to Firefox, Opera and safari. – 1680×1050 res. – it also affects the thumbnails at the bottom.
I love the new design Patrick. Thank God you improved the search function, the old version just sucked.
The logo looks great. And it is good that you kept a similar color scheme.
@Christopher Boyce yeah I spotted that and will fix it once I figure out what the issue is.
There is another small problem with the comments. Once they get to a certain length they wrap down under the avatar/photo, which looks a bit odd. It’d be better to just leave the whitespace under the avatar.
Charles that seems to be the default behaviour with Thesis, I agree it isn’t ideal though.
The redesign is quite subtle which will please your current reader base as I’m sure an aspect of your large readership is due to the simple design, easy navigation and white space (ooh a designers paradise
). I’ve never used the search but if this has been improved then good on you as I know searches can be a nightmare to master.
One addition that may confuse readers and potentially never get used are the category image thumbs in the footer, what’s wrong with good old fashioned text links? I find these quite unintuitive are is a step back from your ‘user friendly design’.
All in all it’s visually similar to the last version with a few shiny new features and tweaks. A welcome change, nice work.
The footer was just an experiment, text links to the categories are still in the right hand menu.
Like the design, looks nice and clean!
Like the new design, feels clean and crisp. I am also undertaking a blog redesign and looking forward to it.
Clean, but a bit small by default. Still too wide if you have two browser windows tiled side-by-side on 1024×768.
What did the old version look like…my brain is addled after SciBlog08 and I cannot recall. I’m not sure about that footer…it looks a bit old school (like slashdot and sciscoop.com) and a bit out of place with those kinds of icons, to my eye.
David there is a link at the end of the post to a screenshot.
Yeah, I saw that…I was just messing.
MJ Ray: I would think pretty much every site on the Web is too wide for you if you tile 2 pages side-by-side on 1024 width. That would give you less than 500px per window of useable space, and most sites are now designed at around 1000px wide.
I went to 1000px wide after the BBC News did.
Charles: BBC News’s main content column is fits fine in a 512px-wide browser window actually – it didn’t when the new design first launched, but they quickly fixed it. It’s a lovely way of browsing – one window loading while you’re reading another, or one window for the main document while you drag-and-drop its links in the other. Try it some time. It’s only a few bad apples like the new blogstorm design that are really awkward because View: Page Style: None sorts most of the wide boys. After all, what’s the point of a windowed user interface if you full-screen (or near enough) everything?
It looks awesome. Much better than the old one.
One suggestion might be to add some text below the images in the footer. They are a bit hard to understand unless you read the URL they link to.
Looks great, Patrick
I’d be tempted to have the Sections/Categories as a list in the righthand column (rather than being a tab in the tab-box) but then you’d lose some of that nice whitespace.
The picture-links in the footer don’t gel for me – perhaps a border round each, or a similar coloured background might tie them together a bit? …they seem too “random / disconnected” …can’t think of the right word!
Cheers, Jon
Patrick, why are you picture (in the category section) the only one without an alt and title tag? I’m pretty sure it isn’t because you’re a nobody
Hi Patrick, when viewed in IE6 the sidebar loads at the bottom of the page, under the left hand content and comments