Welcome to the new MotoringFile.com. This new version of the site comes a little over one year since our big move to the WordPress platform and is well over a year in the planning. In fact MF 3.0 represents the biggest visual changes to the site since the summer of 2004.
With the average size screen increasing over the last few years, we felt it was time to finally move to a wider (1024px based) layout. This has allowed us to a add a third column which in turn features more of our reviews and classic content higher on the page. It also helps keep the page length down a bit.
Another big change we’ve made is the way users access each section. You can now view the category listing by clicking the “Browse by Category” link on the top left within the black navigation bar. When clicked, the category menu slides down to reveal all categories. Our hope is that this will offer users a more compelling way to tap into the four years of archives the site offers.
As always, a big thanks goes out to Matt Gifford who makes MotoringFile happen when it comes to the hardcore coding side. And of course another big thank you to DB for combing the site for bugs (or features as I call them) and cracking the coding whip on anything not up to snuff.
So please, kick the tires a bit and let us know what you think.
Yay! Nice work guys.
Well I’d have said it would have been hard to improve on MF, but you’ve succeeded. Nice work gents. Your hard work is much appreciated.
You might want to also consider that a large number of people are going to laptops as their primary computers so they might not have the larger amount of screen real estate available that you think has become common. In my house, everyone has their own personal laptop that does double duty as their desktop machine. I will admit that it is less of a problem for me as I usually attach another monitor to my Powerbook when at home and do monitor spanning, but for someone with a normal 15″ 4:3 ratio screen, you are dooming them to constant sideways scrolling.
Another consideration is that with the three columns, I think it is more visually cluttered. I felt the two column format, with the large main column with the primary focus on information, and smaller secondary column for support items like links and ads was just about the optimum layout for presenting the information in a visually concise, ledgible way. If you wish to utilize a wider format, I would just add a few picas to the existing column widths, not add another column.
Just my thoughts on the matter…
Gabe it looks great – easy to read on a 15 and 12 inch laptop and much nicer being able to see more info at once. Browse by Category is a much appreciated feature. Well done Motoring File Team!
way to go gabe – looks right at home on my 23″ cinema display ; )
Keep up the great work. I go nowhere else for MINI info than here!
I love the new layout… but for some strange reason, the “Browse by Category” pull-down causes the browser to crash. This happened immediately after the categories were displayed. The troublesome browser is IE6 SP1 with all patches (latest release without going to IE7).
It just did it twice in a row, so it’s repeatable, at least on this computer! Strange. I’ll try it on a different PC with the same browser, as well as experimenting with IE7 and Firefox. 🙂
(I can’t upgrade to IE7 right now on this particular PC though, because something related to my work doesn’t support IE7 yet)
Guys, you have done it again. Super work. WELL DONE !!
I like the new three column format as it makes it easier to read. The eye has to cross less of the screen for each line of text. It increases reading speed.
I like the new look.
Thanks.
Nice. I have been thinking of going to a wider format myself.
As to comments about smaller screens isn’t that what the scroll bar is for? I must agree with one point made that it is a tad busy but what are ya gonna do there is just so much info?
When every I comment on a Bridger site I get his “Moderation” thing? What’s up wit dat?
>It just did it twice in a row, so it’s repeatable, at least on this computer! Strange. I’ll try it on a different PC with the same browser, as well as experimenting with IE7 and Firefox. 🙂
Thanks Edge. We’ve had another report of this on IE. Matt and I will be taking the next couple of days off from any web development so don’t expect a fix before the weekend but we will address it.
IE7 works fine btw.
In the meantime I’d recommend not using the category pulldown if you have IE6 or simply switching to Firefox (which we always recommend around here).
>You might want to also consider that a large number of people are going to laptops as their primary computers so they might not have the larger amount of screen real estate available that you think has become common.
Countless usability studies have shown that the vast majority of computers used to access the internet have screen resolutions of 1024 x 768 or greater. This new version of MotoringFile is better optimized for that.
Congrats! I think it’s nice to see Motoringfile following the path of BMW and MINI in always improving on the greatness already in place. Sweet irony.
I’m using a laptop right now and the site fits just fine on the screen. I would agree with the usability studies that a majority of computers utilize 1024 x 768 at a minimum.
As to the three column format, it looks strange to me, but that is not a bad thing – simply just need to get used to it. I think ultimately it is a good thing. It will allow more site users/visitors easier access to more of the site as in my opinion, there are likely more visitors of the site that are less adept at searching and poking around and this new format will simplify that for that. Not everyone is a Internet guru.
Congrats again.
Very slick! I love the new wider graphics. It goes well with my 20″ iMac. Now bring on the MF screensaver photos!
good update… looks good on my laptop 15″ 1024x7xx screen. Glad to see u guys updating this is the website i always give to people when they tell me they are interested in purchasing a mini.
thanks for your hard work.
Great job on the site upgrades guys! I know it is tough to fit so much content in viewable range (or else people don’t bother to search for it). Are 2 columns not as cluttered? maybe – but when you look at the vast amount of info displayed here, I think it can be said there is a reason for it – great job!!
Looks great! I applaud the move to 1024 Gabe. The 800×600 constraint has bugged me for years. My favorite web standards story has to do with a site I built for a client that produced navigational charts for airplane pilots. My initial navigation wasn’t an unordered list, and so my supervisor got after me for it not meeting full accessibility standards. I fixed it, but wondered just how many blind pilots were flying the friendly skies.
I didn’t even notice that MF had changed when I first looked at it. The 3-column layout is a little busy compared to the 2 at first glance, but after about 10 seconds it’s easy to see the advantage at having more of the features and such available, so that’s great. I do have one suggestion though. I don’t have any experience with WordPress, but if it’s possible, I’d suggest perhaps using a different layout for when we click through to the actual articles that focuses more on the main content of that article. Half the page is taken up by features links, when what I’m really there for is the article. Having everything up and at your fingertips on the home page makes perfect sense, but once I’ve clicked through to the article, now it seems like more scrolling and more clutter when I am really after the article and the comments. If I want the other, I’m happy to click back to the home page. Just my $0.02 though.
Anyway, let me just say that I love MotoringFile. It’s become such an ingrained part of my daily routine – I usually check MF before even my company email in the morning. Ha! So great work Gabe, Matt, and DB! Keep it up.
Looks good on Firefox 2.0 and IE7. Browse to category works fine.
Using 10×7 laptop res.
-Brian
>I’d suggest perhaps using a different layout for when we click through to the actual articles that focuses more on the main content of that article
That’s a great point and one that I’ve toyed with in the past. However I’m of the mind-set that the main content area really shouldn’t be much wider than 470px for readability’s sake. Imagine reading a line of text that stretches over 600px. I’d like to avoid that.
it’s a valid point to think about the content pages as differently. However
we really need to better understand how readers actually use those right links. And since this isn’t one’s day job we never seem to have the time 🙂
If I had all the time in the world I’d leave the content pages alone and re-work the homepage a bit more to feature daily content vs weekly differently.
<blockquote>That’s a great point and one that I’ve toyed with in the past. However I’m of the mind-set that the main content area really shouldn’t be much wider than 470px for readability’s sake. Imagine reading a line of text that stretches over 600px. I’d like to avoid that.</blockquote>
Yeah, that makes a lot of sense. Maybe it was just more of a clutter thing – too much competing for my attention. Small potatoes though. Overall I think it’s great.
<blockquote>And since this isn’t one’s day job we never seem to have the time :)</blockquote>
Ha ha! Oh the things we’d all do if we didn’t have to bloody-well work for a living.
Speaking of which…back to saving the world one brand at a time.
So far. My initial impression is that it looks really good.
Hmm…looks like I might be in a minority, but functionally the new design takes a big step backwards. While my screen resolution is high, the width of my web browsing window is not full screen. By taking up the full window resolution and not making at least one of your columns expandable/variable width, I now have to scroll side to side to see everything. It’s a serious pain. Just make you main text column variable and it’ll look the same to 99% of the people but it won’t degrade usability for those of us who chose to not use full screen. Beside, scrolling up and down is how the web works. Heck, people even have buttons on their mice solely for the purpose of scrolling up and down. Length should not be an issue.
Other than that, I like.
I was just commenting the other day that the design standard of 800 across was archaic. If you don’t have at least 1024, you need to go into your computer clean room, warm up your 1200 baud modem, dial into AOL and order yourself a new computer.
Nice work!
<blockquote>I was just commenting the other day that the design standard of 800 across was archaic. If you don’t have at least 1024, you need to go into your computer clean room, warm up your 1200 baud modem, dial into AOL and order yourself a new computer.</blockquote>
Then print the confirmation on your dot-matrix printer.
One other comment, while I agree that most people are probably at 1024×768, the part that statistic ignores is the not everyone uses the full screen to display windows. If the window is just one pixel short of 1024 wide, the user will get a scroll bar.
Nice job, gang! It was one A.M. Pacific, and I was finishing off an important e-mail while randomly clicking on web pages to keep an interesting background, when I noticed the change, and it damn near woke me all the way back up. Hadda hit the hay, so as I looked at at it in the light of day, and in a much more coherent fashion, I came to the conclusion I wasn’t hallucinating – Motoring file had gotten bigger, so of course, it must be better. Yeah, say that to the 10-inch Cosmics gang. Hehe! I notice the little size increase follows on the 2007 MINI changes – is this one of those pedestrian safety thingies, too? I hope the blower sound stays, and keep the butt-end small, but I expect you’ve heard that B4. 😉 I like the new size!! – but keep it clean and simple, huh?
BCNU,
Rob in Dago
Hey Gabe, I’d like to comment on something other than the width change (which BTW I like a lot, thanks!)
I noticed that in the switchover you removed the “inset shadow” on the left and right borders of the content area of the site that set it off from the gray “background”. Along with this you added a few-pixels of white border around the entire content area as well.
The overall effect of these changes is to “flatten” the look of the site and make it far less “contrasty” (for lack of a better term). Was that the intention?
I can’t speak for anyone else, but I’m finding that I miss those elements a bit. The borderless, contrasty nature of the site (with the inset shadows) was actually a look I found pleasing to the eye. Anyone else feel this way?
Rich.
>One other comment, while I agree that most people are probably at 1024Ã-768, the part that statistic ignores is the not everyone uses the full screen to display windows. If the window is just one pixel short of 1024 wide, the user will get a scroll bar.
Yes – we did some <a href="http://baekdal.com/reports/actual-browser-sizes/abs-sizes/" rel="nofollow">extensive research</a> into that thought before we settled on our width (Which by the way is quite a bit narrower than 1024).
>The overall effect of these changes is to “flatten†the look of the site and make it far less “contrasty†(for lack of a better term). Was that the intention?
Yes.
Great new look. Works good on a Mac Book, that’s all that matters to me.
Great work Gabe. MF is part of my everyday life.
Now in Cinemascope – can’t wait for the 3-D version.
Great job, fellas. Works great with my 12″ PowerBook and my aching scrolling finger. This is the only place to go for all the MINI news that’s fit to print.
It’s interesting to me how many Mac owners (at least of those identifying what computer they use) there are on here. Mac and Mini seem like similar brands, in that they have a pretty die-hard following and changes to the brand are news (and the source of much debate).
Just an observation.
I ordered my 07 MSC on Nov 2nd. (At least, I put money down on one of the first to arrive in March)
I ordered my MacBook Pro 17″ 2.33 the next day. Then I flew to Chicago for the weekend.
That was a good 72 hours.
Overall screen resolution should not be a deciding factor in your design. Just because I support a resolution of 1920×1200, doesn’t mean that I want a website or any particular application to use that much space.
I think that there could have been far more effective ways of designing this site using the screen real estate constraints of 800×600. The 3 column design is rather busy.
Jeff, good observation. I am a MINI owner and I have three Mac computers as well, one is a Mac Mini, therefore my nickname. A good pal of mine also gave me the gift of a personalized licence plate for the car, MAC MINI. He was happy that I had convinced him to buy a Mac, after years of using an Amiga. This plate has several meanings, as it refers to my computer, tha car, and my name, MacDonald. I would bet that the percentage of MINI owners that are also Mac owners is higher than average.
Jeff, you will love both the car and the MacBook Pro.
BTW, I think the new site is great.
i, too, find the third column cluttering. to be honest, at first i didn’t even notice it was there because it was way off to the side hiding beyond the window edge. my screen resolution is 2560×1024 (dual screens) but my browser window takes up probably no more than 800×500. i loathe applications that dictate what resolution i should use… a well designed site should handle these situations gracefully. so to me, a step backward for motoringfile.
>Overall screen resolution should not be a deciding factor in your design. Just because I support a resolution of 1920Ã-1200, doesn’t mean that I want a website or any particular application to use that much space.
It’s not a situation where good designers and developers are going to be increasing site to 1900px wide when that becomes the average screen size. You have to balance the size and design of the site with the content it provides and how the user interacts with their screen. Studies show that sites around 1000px wide offer huge benefits for content usability while still being optimized for 75% of the web audience (probably much higher for MF users).
MotoringFile has an enormous amount of content that 99% of it’s readers don’t see on a daily basis. Moving to something slightly larger than a 800px friendly layout offers a chance to expose some of that content to readers on a daily basis. This change is not the start of a race support larger screens and wider screens.
>i, too, find the third column cluttering. to be honest, at first i didn’t even notice it was there because it was way off to the side hiding beyond the window edge. my screen resolution is 2560Ã-1024 (dual screens) but my browser window takes up probably no more than 800Ã-500. i loathe applications that dictate what resolution i should use… a well designed site should handle these situations gracefully. so to me, a step backward for motoringfile.
Wow – you probably loathe the majority of websites and applications then. Accomodating a 800×500 web browser while making the other 75% of users happy withouth completely decontructing the site and getting rid of the header image would be, to say the least, interesting. And that’s not to say how this franken-site would look.
A lot of what is in the second and third columns could be put on a separate page, such as the “Archive” page. I rarely look at that stuff, myself. And I agree those columns should go away once you open an article.
The site used to have more color, namely orange, but now it’s almost completely black, white, and grey.
It’s cool that you have the “MINI Numbering
System Cheat Sheet”, but you should add the model names to the categories at the top and footer as well (like you did with “R55 (Clubman)”.
Finally, consider making external links open into new windows.
When is WordPress going to allow one to preview comments before submitting them?
Thanks for all the suggestions. Let mw answer a few of the questions.
>Finally, consider making external links open into new windows.
We would never degrade our users by taking away that control. Instead we allow our users to decide for themselves how to open external links using built tools in every web browser.
>It’s cool that you have the “MINI Numbering System Cheat Sheetâ€ÂÂ, but you should add the model names to the categories at the top and footer as well (like you did with “R55 (Clubman)â€ÂÂ.
Unfortunately there’s no room. Otherwise we would have. However we’ll continue to evolve this little feature.
>The site used to have more color, namely orange, but now it’s almost completely black, white, and grey.
Web design circa 2002 vs circa 2006.
>A lot of what is in the second and third columns could be put on a separate page, such as the “Archive†page. I rarely look at that stuff, myself. And I agree those columns should go away once you open an article.
Again we’re trying to introduce our newer users to some of this classic content. We get so many emails and comments every day asking questions about content we’ve already posted. This is a way to subtly remind users about MotoringFile’s huge content archives
Are you suggesting color is now passé?
For individual articles, I think your format works very well. However for the home page, a lot of very prime real estate is occupied by infrequently used reference/archive link listings. The home page would work much better if the top of the page could be formatted for two columns of article summaries, with the archive stuff moved down underneath.
>For individual articles, I think your format works very well. However for the home page, a lot of very prime real estate is occupied by infrequently used reference/archive link listings. The home page would work much better if the top of the page could be formatted for two columns of article summaries, with the archive stuff moved down underneath.
On the face of it I agree with you and have even looked in this kind of layout a few years back. However with the amount of emails and comments we get continuously asking about subjects we’ve already posted about, it’s obvious we need to keep links to larger, more important stories, at the top. Thus the MF Features section. Then you have the top 5 posts… again a very popular click-point for users. Finally we need to have certain space for our sponors that lies above the fold.
In an ideal world we’d be able to move in that direction. However there may be <a href="http://www.subtraction.com/" rel="nofollow">better solutions</a> that work within our current frame-work.
But all that said this new wider layout does give us some freedom to try new things in the future. This is another reason for the recent change.
Just a couple of navigation bugs under MotoringFile Reviews:
– ’05 JCW MINI Cooper Tuning Kit – is actually an ’04
– You have two links to: JCW Brake Kit
Ah we missed those. Thanks for the heads up!
Nice work.
I would like more text above the fold, and less
—–>> continued ….
… you should add the model names to the categories at the top and footer as well (like you did with “R55 (Clubman)â€ÂÂ.
‘Unfortunately there’s no room. Otherwise we would have. However we’ll continue to evolve this little feature.
‘
try mouseover title text if you’re really out of room.
Have you thought of a most recent comment by
on the front page, or on a post-specific basis ?
Can you add a preview for the comments so I can test out
the formatting and stuff ?
The archives navigation of wordpress sites
is a little lacking.
Lots of –> next
etc
where next refers to slightly older.
The list of posts on eg page 3 of the archives
will shift by one every time a new post is
published, or when maybe when the day or week passes.
If the numbering could start from the beginning, then
eg page 17 of the archives always has the same contaent.
A date-based URL scheme would be better
WhiteRoof Radio bypassed the problem
by bulk linking to archives by generic number,
but a more descriptive link text for the more
topic specific posts on Motoringfile would be appropriate.
I’m another one of the few that doesn’t browse with their browser window anywhere near the full width of the screen. My browser window is “tall and narrow” with an aspect ration similar to a book.
If everything on the web were multi-column, then a wider window would be okay. But, when you run into a site that doesn’t have columns, a wide window makes text content too hard to read as the lines are too long.
I guess I’m a net luddite, though. 🙂
Congrats on all the years of Motoring Fun… I’m just afraid that I’ll get a neck cramp by looking slightly to the left so often….
I’ve always liked the simple layout, the colors, etc etc of motoringfile, but it just feels like the right of the page has become awfully cluttered. And if people didn’t look hard enough for content before, I honestly doubt that they are going to muddle through all the links.
I still love the site, still love the content, and just about everything else… but that’s my two cents. 🙂
>And if people didn’t look hard enough for content before, I honestly doubt that they are going to muddle through all the links.
I’m at a loss there. Nothing has changed, the content is still the same size, located in the same place and the titles are still big, bold and black. Countless hours of user research shows that the vast majority of users don’t have trouble with understanding where the daily content is in a three column weblog style layout like the one here. If you look at the leading weblog news sites out there, they almost all have a variation of this layout.
And it may be worth mentioning, since launching the updated site, not only are our daily visits up on the home page (compared to this time last year) but I’ve seen more hits to a broader range of pages within the site. Exactly what we had wanted.
>Congrats on all the years of Motoring Fun… I’m just afraid that I’ll get a neck cramp by looking slightly to the left so often….
Thanks but just to clarify, the main content area has always been on the left.
I use Safari at home and the site works great. However, at work Safari is a four letter word that also begins with s. Anyway, at work I use IE6 SP2 on XP Pro and the very cool Browse by Category crashes IE. When any MF page loads there is a syntax error at line 2 char 1 but the page works okay until the slider is activated. Then IE crashes.
Just today I rolled over an item in the Browse by Category table in the window footer and it turned the bottom visible part of the window bkgnd black. Scrolling up out of the black area restores the bkgnd to white.
The problem where the Browse by Category link crashes IE should be fixed.
For web developers: There is a known bug in the slide effect in Scriptaculous 1.6.5. As you might have guessed, it causes IE to crash. I fixed the problem on this site by switching to version 1.6.
Hey guys, now that you’re on WP, any chance you’ll install Alex King’s WP-Mobile plugin? I’ve poked Gabe about this before not realizing you weren’t on WordPress.
This would allow folks to read MF from our phones (he says, lightly plugging his own site that would love to have MF added to available news feeds…)
Thoughts?
Heh, 56 comments so far. When I used to do web ui design I used to hate getting feedback from colleagues and users. You simply cannot satisfy everyone. If I had one happy user I was thrilled. In fact, if the person paying the bill was cool with it, I was happy that my job was done. Oh, who pays for this again? 😛
Bring back the Orange! Viva la 2002!