Today Sat Sun
It is forcast to be Chance of a Thunderstorm at 11:00 PM EDT on May 25, 2012
Chance of a Thunderstorm
20°/16°
It is forcast to be Partly Cloudy at 11:00 PM EDT on May 26, 2012
Partly Cloudy
21°/14°
It is forcast to be Chance of a Thunderstorm at 11:00 PM EDT on May 27, 2012
Chance of a Thunderstorm
22°/12°

47 Comments

news

Designer’s Note: Designing a New Torontoist

In our efforts to class up the joint, we made some significant design changes. Allow us to explain the method to our madness.

Let’s be honest: the old Torontoist has been looking a little creaky for a long time now. The pale blue design was based on a 2006 template created by former Torontoist parent Gothamist, with a few extras tacked on over the years. A site revamp has been near the top of our wish list for ages.

We knew that the most important element of the new Torontoist had to be better readability. We’ve moved the articles to the left side of the page, cut the clutter, and chosen an attractive embedded web font (Open Sans, created by Steve Matteson). We also added “deks”—the summary beneath a headline common in magazines—to help our readers decide at a glance if an article interests them. Bylines have also been shifted to the top of the article so it’s easier to identify the work of your favourite Torontoist scribe, photographer, or illustrator—and yes, we have separate bylines for our visual staff now. Well-proportioned whitespace is intended to keep distractions at a minimum as you read.

We want to do a better job keeping you informed, so we’ve added an “Editor’s Picks” section in the right column where we highlight stories we think you shouldn’t miss. We’ve also added the option to keep a feature story or an interesting article from our archives at the top of the page. If an emergency or important breaking news is happening, you will see it immediately in a banner across the top, including quick links to crucial information. We’ve even made TTC service alerts immediately accessible in the right column.

Photo galleries will now appear in a separate interface, which makes the photos easier to navigate and presents them in a more appealing way, with reduced extraneous clutter. The standalone slideshows are now directly linkable, and we’ve added a full-screen option so that as we create new galleries we can use images that are much larger.

One of the first elements you undoubtedly noticed was also the most fun to design: the whimsical new logo featuring iconic images of Toronto. We’ve got about twenty different versions in rotation, with more to come—including ones for special events, like Pride, Canada Day, Woofstock, or TIFF.

Assembling the new Torontoist was like putting together a puzzle, with some pieces coming from the business side (“What spaces do we need to reserve for ads?”), some from our staff (“We still want a reverse chronological publishing format”), and some from both (“How can we get people reading more of our articles?”). Plus, it needed to be readable and look good across browsers and platforms, and we wanted to strip down any bells and whistles—so no weird proprietary scrolling or annoying rollover animations. Special thanks go to Michelle Darwin for meticulously translating pie-in-the-sky Photoshop mockups into proper CSS.

On a technical note, we’ve also switched CMS platforms from Movable Type to WordPress. Articles from the old Torontoist will have been automatically reformatted and will be missing some of the new elements (like deks), so you may notice some wonkiness here and there in the appearance of older posts.

As so many website redesigns have proven, humans are resistant to change and sometimes things take a step back in usability, so we do expect to hear a lot from you about the new Torontoist. When it comes to navigating the site and reading articles, we’ve attempted to keep things familiar, simple, and useful—so you can easily read up on what you need to know and get over to the water cooler to talk about it. Email us with your thoughts, or post them in the comments below.

Filed under:

Report error Send a tip

Comments

  • http://twitter.com/AgentFoo Foo

    I’m not one to make snap judgements, but I found this change surprisingly jarring. I shall give it time.

  • http://twitter.com/AgentFoo Foo

    I’m not one to make snap judgements, but I found this change surprisingly jarring. I shall give it time.

  • Zychli

    HUGE improvement!

  • http://paul.kishimoto.name Paul Kishimoto

    At first glance I’m reminded of The Walrus, which is very well-designed.

  • http://malcolmbastien.com Malcolm Bastien

    It looks amazing! It’s just the sort of big leap that will certainly get noticed. Clean lines, readable articles, and not too much clutter.

    What’s with the number “69831″ posted at the end of the article?

    • http://twitter.com/KenHunt Ken Hunt

      That number was an artifact of debugging. Thanks Malcolm, I’ve removed it.

  • http://twitter.com/adamjclarkson Adam Clarkson

    Nice work Mark. Looks great. Congratulations

  • http://www.facebook.com/codejill Jill Murray

    I like it!

  • http://www.facebook.com/aguite Aric Guité

    the size of the font forces me to do a lot more scrolling than I used to on my little screen. It’s like it was designed on a newer high-res screen.

    Aside from that, I love it.

    • http://www.bitpicture.com Marc Lostracco

      Just out of curiosity, what screen size are you using? I was trying to use a 1024 x 768 size as the low-end baseline and still have it be easily readable, but here’s also hoping that the increased readability of the typeface and line spacing will outweigh any added scrolling once you start getting used to it!

      • http://www.facebook.com/aguite Aric Guité

        I’m looking at it on my first gen polycarbonate Macbook (1280×800 screen). I tend to browse with the browser window a bit smaller than full screen (usually have a few things going on).

        On the brand new 17″ Macbook Pro with the high-res display I have at work, the site looks great.

      • http://piorkowski.ca qviri

        If you’d like another data point… I do most of my browsing on a 1024*768 105 dpi screen (maximized, window size 1024*680). Normally I zoom up to 150% (Opera) because I find most websites’ text more comfortable at that size. Torontoist’s text column now fits almost perfectly in 1024 px when zoomed and I’m very happy. At 100%, there is slight horizontal scroll (by 20-30 px perhaps?), but I can’t say I will be losing sleep over it.

  • Anonymous

    I think I’m in love with Open Sans.

    • Guest

      I find the lower case o (in the articles, not comments) incongruous and distracting

      • Eric S. Smith

        The lower-case o isn’t jumping out at me in Firefox on Ubuntu Netbook with the font rendering set to “subpixel smoothing.” How are you seeing it?

      • Anonymous

        If you hadn’t said anything I may never have noticed, but it does look slightly squished on the right side.

  • Barry Freeman

    Absolutely love it, folks!

  • http://twitter.com/brianyyz Brian B

    Only complaint I have is the choice of link colour and formatting—too subtle! I have difficulty seeing the links in the text.

  • Anonymous

    Only tiny complaint is that on the main page I liked being able to see number of comments on an article, so if there was an ongoing discussion that I followed I could see if it had advanced without having to click into the actual article again to see that it had not gone any further.

    Otherwise, amazing redesign!

    • http://www.bitpicture.com Marc Lostracco

      The functionality is still there, but it just doesn’t show up if there aren’t any comments (i.e. “0 Comments” is gone). Once comments are added, the comment count appears next to the date at the very top.

      [EDIT: I just noticed that they don't show up in the collapsed/summary view on the front page. We had them in the mockups in that view, so I'll look into getting the comment counts to show up.]

      • Anonymous

        Oops! Pardon my obviously premature commenting and thanks for getting back to me so quickly.

        The site looks great!

      • Nick

        That would be great to have them for older posts that are collapsed or in summary view – it’s one tidbit of info that I use when I’m perusing posts that are slightly older: hmmm….check out the ones with lots of comments! Otherwise, very nice work!

  • ife

    can one of the icons on the leaderboard be a white squirrel? :)

    • http://www.bitpicture.com Marc Lostracco

      That’s a great idea. I’ll draw one up when I have a sec and see how it looks, and therefore you may see one in rotation at some point! Thanks for the suggestion.

    • http://www.bitpicture.com Marc Lostracco

      Okay, I made a white squirrel version of the logo on your suggestion, so look for it!

      • ife

        awesome!!!! I will keep an eye out for it and be very impressed.

        • ife

          does a white squirrel spotting count as a special event :-) ?

  • http://twitter.com/belle_the_cat bell the cat

    So far, I love it – visually, it just beats the previous design hands down. Feels more professional, like real people work there, lol. And for some reason, the imagery piqued my curiosity explore more areas and even other sites.

  • Anonymous

    Oh no! Beta!

  • Anonymous

    Usually I’m one of those “Boo change – yuck!” people. But in this case, and perhaps because the old layout was so very bad in spite of the excellent content, I love it. Good job, guys!

  • Eric S. Smith

    I’d vote for more text on the front page. I like being able to read the articles without clicking, so I never liked the old “summary” view, and now I become all unhappy and stuff when I scroll down past the first couple of stories and they’re collapsed into what’s basically a table of contents.

    There was always some clicking involved, but now it’s hard even to tell what the tone of a story is going to be from the main page.

    • http://twitter.com/KenHunt Ken Hunt

      Thanks Eric, we’ve had this request from a few people and I’m going to do my best to implement a “full articles” page soon.

  • Anonymous

    I find the new font to be harder to read.

    • http://twitter.com/KenHunt Ken Hunt

      I am working on fixing font rendering in some browsers where we have had reported problems. I think Chrome should be fixed now. Still working on FF 3 and IE 7.

  • jay Sommers

    Looks better. I like it. The old format was tired.

  • Jasj

    whoever drew those “icons” should take a drawing course

  • http://twitter.com/yshc ysh cabaña

    it’s pretty clean compared to the old one. Good job!

  • guest

    It will probably grow on me. I rather liked the old site.
    The masthead seems quite small. The first version that popped up with the one with Toronto”ist” with ist written like a graffiti tag and that is terribly cliche and dated. But fortunately it seems that the masthead rotates?

  • Anonymous

    I also find the font harder to read. And really much harder to read in Chrome for some reason. (The tiny font for comments certainly doesn’t help.)

    • Guest

      I agree – in Chrome the font is dizzying.

      • http://twitter.com/KenHunt Ken Hunt

        Chrome font rendering should be fixed now. Let me know if you are still experiencing problems.

  • Jenny

    I like everything, except I really miss the old logo…a lot

  • Haze

    erm, how do I add your new site to my igoogle newsfeed? your headlines were my go to for news!

    • http://twitter.com/KenHunt Ken Hunt

      RSS is being repaired. Will update soon!

  • Anonymous

    Oh, and thank you for finally switching to quote marks for the Duly Quoted columns :)

  • Anonymous

    Oh, and thank you for finally switching to quote marks for the Duly Quoted columns :)

  • http://blog.hereishazel.com Hazel

    It’s a little late but I just wanted to say that I really appreciate all the work put into the redesign of the site! I was pleasantly surprised to see that it was also optimized for web devices. Yay for responsive design!