TR v3.0 XXL and associated ramblings


by Cyril Kowaliski — 9:47 PM on February 18, 2011

You might not have noticed, but earlier this afternoon, we quietly rolled out a feature some of you have been requesting for several weeks now: a wide look for the TR website. See that little icon at the top right of your screen, under the search box? Clicking it will now produce this control panel:

The controls are fairly self-explanatory; they'll let you switch between (or combine) the blue, white, narrow, and wide looks of the site. Settings are stored in a cookie, so you won't have to hit the control panel every time you visit.

I've been working over the past few days with Bruno Ferreira, a.k.a. morphine, our intrepid programmer, to get this control widget up and running. I think it's a nice improvement over our previous style-switching system, which involved unlabeled toggle buttons and didn't allow much room for expansion. With this, we're free to add more settings down the line without cluttering our header bar. I'm not going to spoil anything, but we already have some ideas. Perhaps you have some requests, too; I'm all ears.

There's still much work to do as we head toward TR v3.1, but I'm pretty happy with where we are now. Looking back, I believe TR v3.0 has been by far the largest, most time-consuming project I've ever undertaken in my five years here. Mockup design started in July 2010, with Scott and me slowly working up to something we were both comfortable with over the following three months. This was entirely an in-house effort, and it involved a lot of trial and error, plenty of bickering, a few strokes of genius, and many terrible ideas that, thankfully, didn't make it into the final design. Just to give you folks an idea, I stitched together a video out of mockups and screenshots dating from July 30 until now:

In late November, Scott asked Bruno and me to try and get the new look—not to mention our new comments system, Metal—ready for production in time for CES. After about a month and a half of nearly non-stop work for me, and many late nights for Bruno, we pulled it off... just barely. I wrote a good 2,600 lines of CSS during the month of December. All the CSS from the previous design was scrapped, and a solid chunk of the PHP code was changed. Well over 100 different graphics were meticulously crafted and exported. At the same time, I worked with Bruno on the user interface for Metal, which had been coded up from scratch and was, until then, almost entirely unskinned.

The experience was exhausting, exhilarating, and a little scary, since I was left to my own devices with much of the UI design. Slapping together a clean, simple, and logical user interface is, as it turns out, really hard, especially when you're dealing with something dynamic like a comment system. Some ideas that sounded terrific on paper turned out to be terrible in practice, and vice versa. Thank goodness for trial and error—and for Bruno's patience as I requested change after change to his code... and shot down some of his ideas that turned out to be great.

Here are a few things you might not know about the current look:

  • The front page's content column is split up according to the golden ratio. Go on, measure it. The feature articles column is exactly 1.618 times as wide as the news column, and the feature image's aspect ratio is, you guessed it, 1.618.
  • The podcast logo, which I whipped up in January 2008, was in large part the basis for TR v3.0's theme—a mix of retro, 40s/50s-style art deco and modern design elements.
  • I strived for a (relatively) consistent use of shapes in this design. Blocks with curved tops are content areas, bars with rounded edges are used for navigation, speech bubbles contain comments and comment counts, and circles are clickable buttons.
  • We've used fonts much more consistently. The old design mixed Tahoma and Trebuchet, while this time, Trebuchet is used throughout the content blocks.
  • The right column has only two states: one is visible on the front page, and the other is the same across all other pages. Before, almost every type of page had a different arrangement of items in the right column. That got confusing quickly, even for us editors.

What we have, then, is something I believe looks more consistent, intuitive, and easier to navigate, all the while sporting a certain design flair that's all too often absent from technology-related websites. I know a number of readers just don't like the new layout, but aversion to change is a tough trait to overcome. Sadly, many people possess it, including me. Of course, the new layout isn't perfect, either. That's why we're working on improvements for TR v3.1.

   
Register
Tip: You can use the A/Z keys to walk threads.
View options

This discussion is now closed.