Oliver WhiteIf you are currently reading this post in your feed reader, I urge you to click the link and come on over; this post is about my redesign and only really makes sense if you’re actually here. Don’t be shy, the kettle is on and the conversation is flowing.
For regular readers, I’m going to point out before I begin that this post has nothing to do with Formula One. The reason why I’m writing this is because every now and then I like to get a bit geeky and talk about something else other than motor sport. You would be right in saying that this isn’t the place, but for a discussion about the specifics of BlogF1 v6.0, I think that it is okay to post here. Don’t worry though, I only put up random posts like this once a year or so; I’m not about to subject everyone to the inner workings of my mind on any kind of regular basis!
Oh, and because this post is just a stream of thoughts, I’m not going to put too much energy into making it work right or flow well.
History
ollief1.com was registered on Friday 13th January 2006. Of all the days to pick, I managed that one. Thankfully I’m not superstitious so it doesn’t bother me, but still, you’ve got to admire my impeccable timing. Shortly after I transferred over a few Formula One related posts from my personal site and threw up a design. It was a mod of Ben Gillbanks’ Regulus – a theme that essentially taught me most things about WordPress at the time – and I made it look like a design popularised on other blogging platforms.
I soon realised that the design was too dark, and set about lightening it up. The results were disastrous so I reverted back to the old design while I continued to chip away in the background. Eventually I got a semi-reasonable black text on white background theme going and it eventually became the staple for about a year or so.
When the 2007 season drew upon us, I was busy working away at something new. The theme that has been present up until last week was based on Glued Ideas’ Subtle, and for the most, it worked really well during a year of substantial growth for the site. I liked it’s look, it’s less cluttered feel (although it didn’t remain that way) and the fact that it just worked. Well, to begin with anyway. However, I soon grew tired of it and I ended up breaking it in Internet Explorer 6 and 7. So in November 2007 I started to think about a redesign.
Getting BlogF1 6.0 Up & Running
I started to jot down a few ideas in late 2007; things I liked about other sites, potential layout designs, things I wanted to emphasise, things I wanted to get rid of. As I really got into the brainstorming of BlogF1 6.0 I realised I had quite a large task to complete. However, a redesign should improve on the current look, feel and functionality of a website, so naturally this is always going to be a challenge.
As the layout ideas progressed in my mind, I came to the realisation I wanted a homepage. Previously, the blog had been the homepage. When visitors typed ‘ollief1.com’ into their browser’s address bar, they were taken to the blog, complete with two sidebars, the top navigation and the footer. It was a lot to take in, particularly if you were just wandering around the Internet; the homepage didn’t really highlight the content, it was sandwiched indiscriminately in the middle.
The homepage layout was pretty much sorted in my mind, and this being the biggest of challenges I started to put it all together. It wasn’t long though before I started to struggle. The problem I have though is determination. I tend to persevere through no matter what, rather than source a better, easier solution that saves time and energy.
This soon changed in January though when I wasn’t given much of a choice. Breaking my wrist forced me to look at the redesign process differently. Although I had the ability to type posts, these were short bursts that didn’t require too much thinking or editing. Coding the website required lots of little changes, re-uploads and browser refreshes, and then back to making changes. I found I was getting tired and grumpy very quickly.
In mid-January I came across a site that would alter this though, and change my plans for the new design. I came across Premium News Themes and noticed that one such theme was remarkably similar to what I was doing. For sure there were differences, but the general layout and idea was what I had in mind. The theme however was, at the time, not complete. I mulled over the decision, particularly so because the themes on Premium Themes cost money. I weighed up the pros and cons and decided that $100 was worth it. Had I persevered with my own, I would have spent months getting it right. I decided £50 was worth it.
As I couldn’t do much until the theme had been released, I started putting my energies into posts. 57 for January, 47 for February and 73 in March; I kept myself busy. But then, in early March, Premium Theme designer Adii gave up on the very project I had been waiting for. But instead of discarding it into his bin, he released what he had done thus far as a freebie.
The next month was spent finishing off the theme and customising it to my preferences. As a mark of respect I brought another of his designs, feeling bad that although it wasn’t complete, I was getting his work for nothing. And because the two themes were created by the same person, I was easily able to transfer some code from one to the other whenever I got stuck on something.
So, How Does This All Work Then?
The homepage is primarily designed for regular readers. Visitors who arrive at BlogF1 via search engines or even referring sites tend to land on posts, or single-view pages. Thus, it seemed a little wasteful to clutter up the homepage with adverts and fancy singing/dancing rubbish. The homepage is designed for you to access many parts of the site from one page.
One of the main reasons for wanting to redesign was purely based on the navigation. This area of design has always stumped me. I don’t know why I find navigation so hard to get right, but I do and it needed improving. For this version of BlogF1, I have split the previous single navigation bar into three. At the very top we have the main navigation. This bar highlights the major parts of the site; Home, Blog*, Talk*, Archives and Subscribe*. Beneath the ever-watchful Sato is the second navigation bar. This is all the other pages that visitors may want to check out if they feel so inclined. This contains things like the Drivers Bio’s and the Calendar page. And at the very bottom in the footer are the tertiary links; About, Contact and Policies.
The layout of the posts on the homepage was important as well. Early on in my brainstorming process I decided to do away with sidebars on the front page. This frees up room and allows the content – the most important thing on the site – to breathe and get noticed. Admittedly the amount of content shown is limited, but I have been able to get eight posts across the 960px width, and the larger Featured Article above that. This section is very orderly and neat, just how I like it.
Beneath this we have the video section and because I’m kind of forced to, some adverts. The video section is another area I wanted to include in this redesign. Originally I was just going to embed videos from a variety of sources in posts, which are filtered out of the WordPress loop and shown in the video section. However, since talking to the team at Sidepodcast, they’ve come up with what you see now.
The videos are entirely of Sidepodcast’s creation, and I think you’ll all agree they’re pretty darn good. It has a groovy BlogF1 logo bit at the beginning and, if you leave the player running, it should show the three most recent videos. I think that is awesome, so cap-doffing to “me” and Christine.
I threw the Text Link Ads next to this simply because the space left on the right was a bit of an odd size. I could probably get away with not putting the links here, instead adding them to the Blog view, but as I have now moved them beneath the fold, and as I make a fair bit of money from them, I left them on this page. Hopefully I won’t annoy too many of the advertisers.
Below this are some of the extras that help with viewing the content in different ways and of course, the Polling Booth is on the right. I’m actually using a different voting plugin as the old one had a few issues either with my code or WordPress 2.5. As I couldn’t be bothered to find a solution I just changed it to another one (note the AJAXy goodness).
For the posts I have removed the LightBox feature as I felt it served little purpose. The thumbnail images are slightly larger than before, and as before, the Caption Contest photos are shown at the maximum width of the post column. I’ve changed how the images are entered into the post as well, going from coding them myself in to using the custom field feature in WordPress. This actually helps me as a little bit of time is saved in writing this part of the post.
Another new feature is comment editing. Once you’ve left a comment, you will have 60 minutes to edit it, sorting out all those little typos and other such things. The time limit is set because I don’t want comments edited after the conversation has continued. This would obviously make things appear nonsensical, so you only get an hour. To edit your comment, just click on the text and the edit box should load. Let me know if you have any problems with it.
Typography
Another area of web design that I have trouble getting to grips with is typography. It’s also, in my opinion, one of the most important. Essentially, typography is about how the text is presented; font, size, colour, spacing etc… Although I really love the Lucida Grande font, it just didn’t work as well with the slight darkening of the page, so I’ve changed to Tahoma. However, it seems a little heavy to me at the moment so I will be fiddling with this in time to hopefully make it a bit easier on the eye.
Things That Aren’t Working
As I’ve changed the way images are entered into the posts, older entries won’t function exactly the same. I’ve added in the old CSS so the images should be aligned properly, and as I link to older articles I’ll update them as I go. The other major thing that definitely won’t be working at the moment are the sidebars on some of the pages. For these I had used individual templates attached to the pages, but now I’ve moved away from templates within the WordPress system and import individual files via a humongous if-else statement in the primary sidebar file. And it really is humongous; 93 statements for the 100-odd pages. It shouldn’t take me too long to sort this as once I get going it should just be a matter of cut & paste. But currently, they probably look a bit borked on some of the deeper pages.
The Circuit pages aren’t linked to from the site anymore. The reason? They are an absolute nightmare to maintain, as I’ve expressed in the past, and as I intend (and have actually started) to move them to a domain all of their own, I saw little point and faffing over CSS just to get them to show correctly. Currently, the pages are actually still in their old location, it’s just the link that has gone. But in the near future they will be removed completely – I’ll let you know when this happens and point you all over to the new domain.
Bugs & Gremlins
If you come across anything that doesn’t look right, please add a comment to this post or shoot me over an email. I’d appreciate knowing what browser and version you’re using so I can get the bug fixed quickly. With regards to Internet Explorer 6.0, I’m not too inclined to make it fully functional. IE6 is, to put politely, a bloody nightmare, and as 7.0 isn’t as bad and 8.0 is due out later this year, I’m making the decision to not put to much concern into this browser. However, if you are on IE6 and come across something serious, please let me know. I don’t have IE6 (I’m on a Mac) and I will only spend time bug-fixing for this browser if it really warrants it. Everything should be sweet in Firefox, Camino, Safari, IE7**, and I’ll check out Opera when I get some time.
Love & Hugs
I should devote some thanks to people who have encouraged, flattered or offered to help me:
Tom, Craig and “me” for leaving very flattering comments on the Flickr screenshot, Tyme and Nils for leaving complimentary comments about the design on 9rules, Sidepodcast for the video player and truly supreme videos, Adii for creating an excellent base for a truly wonderful theme, David Sawyer McFarland for writing one the most indispensable CSS manuals ever and of course, you guys for coming here and leaving great comments.
Feedback
As always, I’m more than open to feedback. If anyone wants to chime in and suggest an improvement please do so; it’s why I leave comments open. I appreciate all feedback because it rarely happens, but I’d prefer the constructive kind because that helps me to help you.
Enjoy
That just leaves me to say enjoy BlogF1 v6.0 – Clark, named after one of the greatest drivers to have ever graced the tarmac of a racing circuit.
*These pages/features currently aren’t up yet. As soon as I’m happy with everything else I’ll add them in. Blog will be a traditional view of the posts, Talk is a forum I’m working on and Subscribe will a page about subscribing to the feeds.
**As it’s the weekend, I don’t have access to a computer with IE7, but I’ll check it all out in the week.
Hey, nice redesign Ollie.. But I would like to make one suggestion and that is this: put the “Popular Articles”, “Comments” and the “Tag cloud” somewhere in the beginning or at the side. It’s a bit blank “up there”, only to come down and find so many things. Please consider it. Thanks.
Good work ollie. I like it a lot.
This is one of the best “redesign” I’ve seen in quiet sometime Ollie. Congrats and keep up the good work.
Oh! and thanks for pointing out “Premium News Theme”, just like you I’ve been mulling around with updating my blog but have reached no-where till now. Hopefully would find something interesting at PNT.
Looks great, Ollie! 🙂
Yep, it’s been well worth the wait – and thankfully you got it up early rather than keeping us all in suspense until November as planned!!
Interesting URL for this post by the way – Jim Clark reference?
I have pondered for some time over whether I should be honest in commenting on this one, Ollie. Plenty of people seem to love it and I don’t want to spoil the party. But I guess there isn’t much point in feedback unless it’s honest – and it’s only my opinion, after all.
I really dislike it, Ollie – sorry. It is even slower in loading than the previous design and then presents me with a face that looks identical to my previous visit. I have to dig around to see if there are any new posts. Quite frankly, I’m pressed for time enough as it is. I need to be able to see immediately when something has been added.
And that’s before I even consider the aesthetic quality of the site (which isn’t bad but is much less important than usability – if we need the info, we’ll put up with reading it on the ugliest of sites).
It’s a personal opinion and maybe others aren’t so bothered about time spent looking for new stuff but I have to mention it, particularly as the re-design has succeeded where few re-designs have succeeded with me before – I’m avoiding visiting because of the time factor. And, since BlogF1 is one of the best F1 blogs around, I really don’t want that to happen.
I think your ad revenue will plummet, too, but that’s a guess. Ad placement never seems to agree with logic.
Sorry, Ollie, but it’s what I really think. It’s better to know these things, isn’t it?
@Akshay: I presume you mean on the single post view. I’ll have a think about moving stuff, but originally I wanted to keep the footer consistent across the pages. Maybe I could try something different though. Thanks.
@John, Neeraj and Esther: Thanks guys.
@Craig: Stupid WordPress. This was originally a different post. I had it saved, but then decided to bin it, but instead of deleting and starting this post, I re-wrote over it. I guess WordPress kept the old permalink. Bah! Thanks.
@Clive: Thank you for being honest, it is appreciated. I guess I can’t please everyone! Regarding the face, do you mean Clark, or the general look? If it’s Clark then that will change. The top post is a featured post that, once I get back into writing, will change regularly; maybe once every couple of days. All other posts get filed into the 8 below that, so this is only slightly different to a normal blog view. I see what you mean by it not being immediately obvious though, with these 8 posts further down. I just wanted to highlight some of my better content at the top.
I’m probably reading this wrong, but that doesn’t make sense in my mind. It sounds like you’re saying the re-design has succeeded, but you’re not visiting!? Then surely, it hasn’t succeeded?
AdSense revenue was never all that anyway, so this is of little importance to me. As I said in the post, I’ll see what happens with TLA revenue. Revenue comes second to content with me anyway; this isn’t my living, just a hobby that has got out-of-hand! 😀
Thanks for being honest Clive, I do appreciate it, I’m just a little confused about that one statement. If it’s any consolation, I will be putting up a regular blog view, which you can bookmark if you like, and I’ll be adding dates on the homepage posts when I get chance.
I understand about the headline post, Ollie – we do the same at F1-Pitlane. The problem is that it takes up too much space, forcing the other posts down to the fold where it’s not immediately obvious from the picture clue that there is new content. If I were you (and again we try to do this at F1-Pitlane), I’d change the lead article every day. That will lead readers on to the posts below.
What I meant by succeeding in achieving what no other re-design has done for me was that it has actually made me not want to visit too often. So it succeeds in achieving entirely the wrong end! For me, at least.
The regular blog view is a great idea. As an example of my resistance to what I consider ineffective design, my computer runs XP but I have the view set on the old Win98 look – a much more usable GUI. 😉
+1 for detailing this process ollie, good insight.
-1 to clive, who’s own site burns a hole in my retina, and is thus discounted from any design criticism until he fixes it 🙂
Thanks for clarifying Clive. Of course, your sentence now makes perfect sense. The posting has slowed down this past week as I was busy on the redesign. But the featured article will change with regularity I promise, hopefully from this evening onwards. I’m bored of looking at Clark as well! 🙂
Ohh, just had a thought: I could try to rotate the featured post from the 5 (or whatever) most recent, changing with each refresh. I’ll definitely look into that, but it is low on the priority list at the moment.
“burns a hole in my retina” – oh, now I know why the Sidepodcast hiatus 🙂
I must say I like the design, one of the reasons is that I actually play around with one of Adii’s themes for a company blog right now 🙂
i did load quite slow though, but this is the problem I have been facing with my blog recently too and can’t figure out why …
Thanks Milos. I’ll take a look into the slow loading times. It is likely my code, but it should be, in theory, a little quicker than the last design. My CSS file is pretty big at the moment, and I can save some weight there. I’ll also trim a bit of fat off the header image. The video sometimes takes a while but the content should load before then.
Well, when I tried the site from home [slow connection] it did took quiet sometime, was accessing it earlier from office which has fast one.
Ollie, just a suggestion, if you don’t display images in the second row of current posts the page load time might come down. Also if you have a fat css file, try breaking it into 2-3 different files [read somewhere that it makes some difference].
If I may answer Sidey’s comment here: apologies for the burned retinas but so far you’re the only one who doesn’t like it. I get lots of comments from readers who are relieved at not having to stare at the same old black on white as all the other sites. So it’s a case of satisfy Sidey or satisfy the world, pretty much the same as Ollie’s dilemma of satisfying Clive or everyone else.
But my criticism of the re-design is a matter of practicalities, not aesthetics (which are a matter of taste anyway). If a site is less functional through a re-design, that matters more than the look of the thing.
http://ollief1.com/blog/
It takes forever to load and breaks various bits of CSS, but it is there none-the-less. It’s actually quite tricky to get a regular blog view on a page, so if anyone has any bright ideas feel free to share.
Oh, and because it’s not exactly a great fix, I won’t be adding it to the top navigation bar just yet, so you’ll all just have to remember the URL for now. When I can get to work right I’ll pop the link up.
I’m a huge fan of the redesign. Ollie has now set the standard for other F1 bloggers to aspire to, in my humble opinion. Far from being too geeky, I actually found this post very informative.
I’ve decided to add BlogF1 to my bookmarks toolbar, in Firefox. It can replace the official Champ Car website, as I guess I won’t be needing to visit that anymore. 🙁
The only improvement I can suggest relates to the positioning of the video player. There’s a lot of unused space to the right, which to me appears a little strange. Perhaps you could remove the ‘Sidepodcast video player’ link, and centralise the console a little bit more. However, if you’re going to be adding links to more video players in the future, then I guess this would be pointless as the empty space will disappear anyway.
The edit button is an excellent addition. In many ways, it’s a little surprising that edit and preview buttons aren’t standard features of blog engines, as they have been included in even the most basic forum software for years. I think you’re being more than generous with the 60 minute limit – I can’t see why anyone would need any longer.
Personally I don’t believe rotating the feature upon refreshes would be a good idea, as this could cause confusion and make it harder for people to establish what is new content. As you post entries regularly anyway, no doubt the feature will get rotated somewhat more naturally anyway.
I actually agree with Clive’s point that design should never come before practicalities/content, just I don’t think that it has in the case of BlogF1. One of my favourite sites was Tim Stannard’s La Liga blog. It was simply black text on a white background (with no graphics), hosted on a blogger account.
Tim’s writing is of such a high quality that he was recently poached by Haymarket, so the blog’s moved homes.
Old site: http://laligaloca.blogspot.com/
New site: http://fourfourtwo.com/blogs/laligaloca/default.aspx
I know it’s become much more colourful, but I preferred the old blogger template. Think I’ll stick to the feed reader for that one.
Thanks Scott, great comment. As for the video, I’m not entirely sure just yet. I can add in more videos, and they’ll list under the Sidepodcast link on the right, but I’m just not sure yet. And as you say, what would I put there if I left it as it is? I’m sure I’ll figure something out.
Regarding the rotation on refreshes, I had a similar thought about causing confusion over what is new content, so I took it one step further and thought about it changing every few seconds, say 10 or 20. But not a sharp change, some clever fade in/fade out thing. However, that is totally beyond my capabilities at the moment. I’ll take a look around later in the week and see if anyone has done this already.
Well it’s certainly going to take some time to become accustomed to, but that certainly isn’t a deterrent.
Less of a blog, more of a nod in the direction of standard website formats. I’ve experienced the redesign of another website i frequent quite recently, and although originally daunting, the new structure emerged victorious over its outdated predeccesor. I’m sure the same will be applicable here.
I’m enjoying the angular stylings, as i detest too many curves and flowing lines.
Congratultions, Ollie.
Thanks Jamie. It really is only the homepage that has changed considerably.* I don’t think scanning the posts left to right instead of top to bottom is a huge deal though, just a bit different. What it does allow though is more posts to displayed with (featured post aside) less scrolling down. As I said in the post and in the comments, a regular ‘top-down’ view will soon become linked-to from the top navigation as I always wanted this and I knew some wouldn’t like the changed design. Could have been worse though, I could have been in charge of the BBC’s website. I actually like the slightly updated look (despite not fully embracing CSS yet), but I understand there were a fair few complaints last week.
Curvy designs are getting a little… what’s the phrase, over-done? They can work really well, but I prefer square as well. Always have done for some reason. Having said that, viewed in Safari/Camino the buttons are automatically styled in that Apple-oval way. Might have to force the square issue as they don’t go with the angled design.
*Oh, and the comment box is now at the bottom, which is more traditional than the previous design.
“Ollie has now set the standard for other F1 bloggers to aspire to, in my humble opinion.”
agreed scott, agreed.
“apologies for the burned retinas but so far you’re the only one who doesn’t like it.”
fair enough clive, there was a smiley on the end of my comment, honest. normally i use a black on white stylesheet for your site, but these past few days i am without such comforts, so i notice it more.
Loving the new look, Ollie.
It is painfully slow, but worth waiting for 🙂
Thanks Christine. I’ll be working on the speed issue this weekend, so hopefully I will be able to get it going like an F2008 by next week.