TR v3.0 XXL and associated ramblings

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.

Comments closed
    • SuperSpy
    • 9 years ago

    I don’t know if someone has suggested if before, but I think it would be a nice feature, especially in blog pages like this, to somehow highlight TR staff posts, a-la Ars (although they may take it a bit too far).

    • FireGryphon
    • 9 years ago

    Good job. Only problem I notice is that on the slim design, the TR logo, long advert on top, and the top comments and hot topics areas beneath it all fit snugly. On the wide version they are more spread out and the top of the page loses its cohesion. It makes the page looks like a packet that was stapled with the papers not all lined up.

    My first thought was that the TR logo needs to be larger in the wide version so it doesn’t get lost up there. I’m not sure how to fix the other stuff (add more content to the top, or maybe some passive placeholder graphic separators?).

    I’ll stick with the slim design for the time being.

    P.S. There should be color accents around the page that change based on holiday/time of year/etc.

    • TurtlePerson2
    • 9 years ago

    I don’t even remember what the old website looked like anymore. You guys did a good job.

    • Nutmeg
    • 9 years ago

    Now apply the same theme to the forums.

    • NeronetFi
    • 9 years ago

    Looks good guys. I like the wide format πŸ™‚ any thoughts on bringing back the Tan and Blue color combo?

    • Voldenuit
    • 9 years ago

    Any plans to move the forums to the new rounded edges paradigm? They’re still using square blocks AFAICT.

    • oldDummy
    • 9 years ago

    Good Job!
    Most fun in a project is getting it DONE.
    Repeat,
    Well Done.

    • ratborg
    • 9 years ago

    Now you just need a font that is readable on my iPhone. Even on landscape mode it is unreadable.

    • mi1stormilst
    • 9 years ago

    I actually use my Kindle to do a lot of reading I would love to see a plain text article mode type option. I imagine this would be very useful for a lot of portable devices.

    • yogibbear
    • 9 years ago

    There must be a bug or something… but when i switch from BLUE -> WIDE + BLUE -> WIDE + WHITE -> WIDE + BLUE i have now broken the comments and the date stamps and thumbs up/down boxes and other things still are WHITE in my BLUE setup………. πŸ™

    So…. BLUE is broken in WIDE. Which is terrible as i HATE WHITE.

    I want BLUE + WIDE to work nicely together. It seems they currently DON’T.

    Cheers.

      • Cyril
      • 9 years ago

      I can’t reproduce this. Have you tried clearing your TR cookies? Perhaps something got corrupted along the way.

        • yogibbear
        • 9 years ago

        Yeah clearing my internet history + cookies + temp files seems to have fixed it. Thx πŸ˜‰ Works great now! Great effort.

        • yogibbear
        • 9 years ago

        Actually no it’s reproducible for me. If i leave the website and reopen IE it works. But if i’m in the website when i do the switches it corrupts it. πŸ™

        This is Vista 64-bit. IE8. Everything up to date. IE8 is probably the problem…

        Not a huge worry though as once you’ve picked what you want it’s golden… just a little worrying when you first make the changes.

          • Cyril
          • 9 years ago

          You’re right, I was able to reproduce it in IE8 after jumping between blue/white/wide a few times. However, refreshing the page got rid of the styling inconsistencies that cropped up. Did you try that, too?

          In any case, I’ll ask Bruno to look into it.

            • rhysl
            • 9 years ago

            Cntrl + Wheelmouse up works better than the wide switch , like the colours.. be cool if we had more choice on colours:)

    • Cyril
    • 9 years ago

    Just to clarify: the point of the wide look isn’t to fill every single pixel on your screen, but to provide a wider text column (and, in the case of the news column on the front page, larger text) for those who feel the default is too narrow. I’ve made it so that the wide setting is usable at 1280×800 and 1366×768 resolutions when the task bar is on the side of the screen, so as not to alienate notebook users.

    There could be a third, even wider setting. However, from a usability standpoint, Scott and I agree that having a single line of 10pt text stretched across more than a thousand pixels is less than ideal. The readability problem could be sidestepped by splitting text into multiple columns within our articles, but actually implementing that would be time-consuming and costlyβ€”and I’m guessing it would only appeal to a minority within the minority of users with 1920×1080 or higher-resolution displays.

    Another possible option is a fluid layout, but as Flying Fox pointed out, that avenue is fraught with difficulty. We’d have to ditch the rounded tops, since those can’t be scaled reliably, and re-write much of the CSS. Fluid layouts are great for message boards and simple designs like Wikipedia, but they don’t work very well with more complex, multi-column layouts, as evidenced by their rarity among major news and tech sites.

      • Entroper
      • 9 years ago

      I agree with this completely. I have TR on its current wide setting (which has 31% more horizontal space for text), and I think it’s about perfect. If you go much wider, your eyes have to travel much too far to get to the beginning of the next line, which is fatiguing. And I have a 1920×1200 monitor, so it’s not like the space isn’t there; I simply feel no pressing need to fill it up by making the text blocks wider. Letterboxing never bothered me either when watching movies… maybe I’m just weird like that.

      I understand that a still-wider option would be just that: an option, free for me to ignore — but I’m not sure you “chubby chasers” really know what it is you’re asking for. If you’ve got Firebug, you can adjust the CSS to your liking. Try it out, and try to read an entire review with an ultra-wide content block. I’d be surprised if you didn’t find it more difficult than with the current wide setting.

      • Meadows
      • 9 years ago

      “[i<]There could be a third, even wider setting. However, from a usability standpoint, Scott and I agree that having a single line of 10pt text stretched across more than a thousand pixels is less than ideal.[/i<]" [b<]Try it anyway[/b<], at least let us test it in real life. (Besides, I have a high-dpi monitor, so I have to set all my browsers to a "minimum font size" of 12 points else I [i<]can't see sheet[/i<] whether it's wide or not.) Edit: Watch the options for a month or two on your end, and gauge how much the individual options are getting used, instead of making "educated guesses" for your users. Heck, if in 2 months' time it turns out that most people switch to blue, you could do what most other sites do and use the data to make "blue" the default (for example).

        • NeronetFi
        • 9 years ago

        Or get rid of white all together and bring back the Tan and Blue πŸ™‚

          • Game_boy
          • 9 years ago

          There’s a blue version. I clicked on the toggle once and have had no complaints since.

            • NeronetFi
            • 9 years ago

            Yeah i have been using the blue on blue theme. I just miss the Tan on Blue like the forums

    • Corrado
    • 9 years ago

    Not very wide guys. Narrow vs Wide on a 1920×1080 res screen.

    [url<]https://lh4.googleusercontent.com/_2PfPyRzX5JI/TWBUdrNlfsI/AAAAAAAAAOU/YVUz1MDne4U/s1440/Not%20Wide.png[/url<] You get a WHOLE 4 more words in. As others have said, why not just let the browser determine width? Or actually make it for a 1920 width screen. [url<]https://techreport.com/discussions.x/5472[/url<] According to that, way back in 2003 (!) 50% of your users had a screen at least 1280 pixels wide. I'd imagine that that number has gone up to 65% at least, with a lot of people using 1680x1050 or 1920x1080/1200 screens. You are an enthusiast site. Cater to your enthusiast community. You already have a layout that works on 1024 pixel wide screens for iPad/Netbook viewing. Why only go to 1280? Wide should be WIDE. And don't call it XXL if its seriously only 1/4 wider.

      • Hattig
      • 9 years ago

      I have a 1920 wide monitor too. However I don’t feel the need to have full screen windows, so I can fit chat, notes, etc, besides the browser. Most websites suck on 1920 wide browsers anyway, so it’s actually far nicer to have the browser around 1400 pixels wide.

      • no51
      • 9 years ago

      Blame netbooks/ipads/phones.

        • Corrado
        • 9 years ago

        Why? I’m not complaining about the stock 1024 wide site. Hell, move it down to 960, but make the wide a little wider.

      • rhysl
      • 9 years ago

      Cntrl + Wheel Mouse up works heaps better than this lame Narrow/Wide setting ..

      • ImSpartacus
      • 9 years ago

      I agree. I’m also on a 1080p screen and this site just sucks. There’s no automatic mobile version and this “wide” version doesn’t do jack shit.

      Why can’t all sites be like Wikipedia and fill the entire provided space?

      • sircharles32
      • 9 years ago

      I agree. The “wide” option is under-whelming.

      I too, use a 1920 x 1200 screen.

      I think the little widget needs to have several “wide” options, so that those with less wide screens can select what they need over those of us with wider screens.

      Of course, this is just my opinion…….

    • blitzy
    • 9 years ago

    You guys have done a good job with the site, nice and tidy. mucho kudos

    • BoBzeBuilder
    • 9 years ago

    AAAHHHHHH, the wider TR is like unbuttoning your pants after a big meal.

    • Rakhmaninov3
    • 9 years ago

    I heart the new site. At first I was like WTF (as always) but after using it for a few days I really appreciated the changes, especially to the comments system.

    • Johnny5
    • 9 years ago

    When you hover your mouse over the control panel button it still says ‘switch between light and dark themes’. It should probably read something like ‘change site preferences’ or ‘switch site width and color themes’.

      • Cyril
      • 9 years ago

      Fixed.

    • BobbinThreadbare
    • 9 years ago

    You guys finally broke me, and now I’m used to the thin format.

    That white background is still murder on the eyes though.

    • Lianna
    • 9 years ago

    Oh, no, it’s alive!

    [quote<]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[/quote<] Yeah, image's AR is close enough, but, oh horror, when the page's wide (XXL? more like L-size) features to news ratio is way off... not that it matters... but don't take the wide version away, please...? EDIT: "top comments" and "hot threads" toggle could be put into the control panel, as well, instead of taking vertical space after wrapping the div up.

    • rechicero
    • 9 years ago

    What about tweaking the comment system to avoid so much vertical space wasted in short comments? (worse in wide mode)

    At least, you could move de voting system to the right…

      • Hattig
      • 9 years ago

      Yeah, in wide mode could the thumbs up/down boxlet go to the right of the date boxlet?

      Also in list comment view, the comment number is listed under the thumbs boxlet – yet you have a # link in the top right of each comment – could it go there instead?

    • bthylafh
    • 9 years ago

    Cyril, maybe you’ve answered this already in a previous discussion, but what’s the rationale behind not letting the browser decide how wide to render TR?

      • Flying Fox
      • 9 years ago

      Difficulty in producing a consistent UI with fluid layout.

    • pedro
    • 9 years ago

    On OS X 10.6 here. The toggle button isn’t working in FF4b11 (beta, I know I know) and only partially working in Safari (the colours change but wideness doesn’t).

    Anyone else having these problems?

    EDIT: working beautifully now.

      • internetsandman
      • 9 years ago

      Worked fine for me in chrome

        • pedro
        • 9 years ago

        Fine in Chrome here too…

          • Meadows
          • 9 years ago

          Of course it is. The button’s fine. Move on.

    • wiak
    • 9 years ago

    can TR bring back the old design but use the new code? and make the new and old design selectable so we can change design according to preferences

      • Cyril
      • 9 years ago

      In a word, no. πŸ˜‰

      That’s not really doable.

      • thesmileman
      • 9 years ago

      I really didn’t like it at first (and I still don’t when I look hard). But after the last several weeks I have forgotten its there and just read the articles so it seems for me it is okay.

    • Usacomp2k3
    • 9 years ago

    To be honest, I couldn’t tell which button is the “wide” option. Could it be made more obvious or maybe just exagerated.

    Also, that wide option is pretty much a waste. What is it, an extra 100 pixels? It should be at least 1680 IMHO or why bother. 1280 is not really wide.

      • Cyril
      • 9 years ago

      [quote<]To be honest, I couldn't tell which button is the "wide" option. Could it be made more obvious or maybe just exagerated.[/quote<] I've just tweaked that, as well.

        • Usacomp2k3
        • 9 years ago

        Much better, thanks!

          • demani
          • 9 years ago

          Overall I like it, but I really wish the comments were tighter: Make the post #, date, and vote up/down a bar stuck to the top of the box (or the Post # and date at the top, and the vote up/down at the bottom) and squeeze out the margin within the bubble. There is plenty of space between the comments already. Look at comments 60-65 and see that 5 lines of actual text takes up a full height window.

          Wide is good enough though- the super wide stuff is hard to read (I can’t imagine trying to surf and reading text in 18-20″ lines…ow). But would love a mobile version.

    • cygnus1
    • 9 years ago

    I’m really happy with this update. 1280 seems like a really good compromise for the widescreen as I think the majority of devices that will be used in the near future will be 720p or less resolution

    Edit: but in the widescreen, I do get a formating error on the comment box. the ‘formatting tips’ link shows up on top of the ‘Add Post’ and ‘Cancel’ buttons

      • Cyril
      • 9 years ago

      Formatting error should be fixed now.

        • cygnus1
        • 9 years ago

        Damn, you guys rock!

    • Sargent Duck
    • 9 years ago

    Great job Cyril.

    I’ve rolled with the punches for all the different site redesigns since the original, just taking every new one in stride, and this is definitely a very good one.

    Congrats to both you and Morphine

    • thesmileman
    • 9 years ago

    Call me a chubby chaser but I need it wider baby!!!

      • bcronce
      • 9 years ago

      one of the better comments…EVER!

        • thesmileman
        • 9 years ago

        Why thank you sir.

    • Duck
    • 9 years ago

    I’m all for improvements. But I think I prefer the old layout. It’s clearer and easier to access the information. The new one is pretty low contrast in comparison (I have the blue option). I think the old layout is slightly more functional. The new layout feels like a little more form over function.

    But the attention to detail is noticed and appreciated. The video shows it off nicely.

    Also the text is too small and difficult to read. I have a 1080p 23″ monitor. I use firefox to enlarge the text a couple of steps. Ctrl and + together.

      • morphine
      • 9 years ago

      Perhaps you prefer the scrolly news in [url<]https://techreport.com/news.x[/url<] ?

        • Duck
        • 9 years ago

        Nah, I subscribe to the RSS news feed in Brief for firefox… [url<]https://addons.mozilla.org/af/firefox/addon/brief/[/url<] I was meaning because of the low contrast theme that I have to concentrate more to read the articles, and especially the comments.

    • Crayon Shin Chan
    • 9 years ago

    The widescreen toggle simply isn’t wide enough. Were you going for a 1280 wide screen? I think you should leave the 1280 for the normal mode, and go for something like 1600 pixels wide for wide mode.

      • derFunkenstein
      • 9 years ago

      I think that’s a really terrible idea. πŸ™‚

        • Meadows
        • 9 years ago

        I don’t.

          • derFunkenstein
          • 9 years ago

          It would make the site hard to read on my work machine, which is 1024×768…for some reason the corporate overlords haven’t seen fit to replace my 4-year-old Latitude D520.

            • Meadows
            • 9 years ago

            So why not support not@home’s idea then? Just because your work computer in particular sucks some donkey testicles does not, in fact, mean that nobody should have the option to use their screens better.

            For example, I have a high resolution with a huge screen. I have tabs on the *side* with Opera, I use the wide layout on TR, and STILL a third of my screen real estate is taken up by “blue” because that’s the background colour that TR can’t seem fill with anything. A third, wider-er-er view would, in theory, deeply satisfy the specific minority(?) I belong to.

            Edit: it would also mean the front page would need serious surgery, and a new design might then be in order for wide-wide reviews, considering how shorter rows are far easier to read and follow (e.g. newspaper columns).

            • Hattig
            • 9 years ago

            I used to have a D820 at work, ugh. The screen broke after 2.5 years, I had to use it with an external monitor for the next eight months, but I used the future possibility of iPhone app development work as a reason to get a shiny MacBook Pro instead. Work is a lot nicer now.

      • not@home
      • 9 years ago

      How about a 3 position width toggle, er switch. Anorexic, normal and whale.

        • Meadows
        • 9 years ago

        +1 for whales. Who else is with me? We need greater wideness…es.

      • JustAnEngineer
      • 9 years ago

      The iPad’s display is only 768×1024 pixels while the iPhone is 640×960. Those devices have been getting a lot more coverage around here than 1920×1200 or 2560×1600 PC monitors have. πŸ™

      • Peffse
      • 9 years ago

      Wide just doesn’t look wide.

      Still better than default so… awesome feature.

      • Hattig
      • 9 years ago

      First – Yay! Blue!

      Second – too wide and it gets very hard to read articles as the lines are too long to comfortably scan. For me the wider layout could really benefit from a +20% size in the font as well, so the number of words on each line is still the same.

Pin It on Pinterest

Share This