If 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.
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.
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.
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.
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.