BuildWindows.com

Earlier this week the responsive website for Microsoft’s 2012 Build Conference went live. Happily, our favorite honey badger, Nishant Kothary, enlisted Paravel to assist with design and the front-end responsive code. Check it out!

build windows responsive website

When someone is as good at as many things as Nishant, it’s easy to forget that he’s also an amazing designer. His lead on content and information architecture made our job a breeze. Reagan collaborated with Nishant on fleshing out the layout while Dave and I coded the front-end. Be sure to check out some of Dave’s metro-esque CSS & JS animation work throughout the page.

segoe

I had a great time working with Microsoft’s humanist sans typeface, Segoe UI. It scaled beautifully as we increased body font-size from 16px to 32px at wider screens. The resolution independence of the Metro design aesthetic combined with Segoe’s flexibility inspired us to think just as much about extra wide viewports as we did narrow ones. Our widest min-width media query triggers at 1950px.

With each responsive project Paravel completes my perception and approach evolves. This time around I realized that my favorite part of the job is now all the content choreography & media-querying. Whereas code used to be pure execution for me, now it’s where I feel most creative and inventive. Furthermore, I’ve found it near impossible to evaluate the quality of a responsive design outside of the browser.

Lesson learned: Get it in the browser as soon as you can (if you don’t start there). Then, iterate like mad with a team you love to work with. Gosh. I can’t remember a more exciting time to be a web designer.

Also, be sure to check out Nishant’s write-up as well as the other versions of the site for before and during the event.

13 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Zach McNair

    Looks great, man! I really love the contrast in colors a lot, and the data fading in as you scroll is a nice touch.

    I just want to know... Did Microsoft know you designed a site on a Mac? ;)

  • Dan Mall

    Beautiful, beautiful work. I want to be Trent Walton when I grow up.

  • Simon Foust

    “Whereas code used to be pure execution for me, now it’s where I feel most creative and inventive.”

    That really resonated with me. It IS a wonderful time to be a web designer. BuildWindows.com looks beautiful.

  • Vasileios Topouz

    You guys really did excellent work here. It’s beautiful and structured perfectly. The “lesson learnt” paragraph could be the post headline as well, couldn’t agree more!

  • Paul Christian

    Awesome work man, love the designwork, you (and the Paravel team) are an ainspiration to me. I really mean that.

    The only ‘but’ I can come up with personally is the contrast of the body font at a resolution of 680px wide and wider. The font kind of looks like a ‘light Helvetica’ almost and doesn’t have a lot of ‘body’ to it, which (to my taste and judgement) doenst create such awesome readability as your own site (this one).

  • Trent

    Thanks for the kind words everyone :)

    @Paul Christian:

    The only ‘but’ I can come up with personally is the contrast of the body font at a resolution of 680px wide and wider.

    At larger sizes I think Segoe UI renders rather well in its light weight. We have done a little research on what kind of font smoothing suits Segoe UI best in a variety of scenarios, but I’d be happy to know more. Which browser were you visiting from?

  • Paul Christian

    Hi Trent,

    I used Firefox when I came up with that little point. I always resize the window multiple times to see what changes and how it affects usability/readability. Don’t get me wrong though, it’s definitely readable... but it is a light-weight font, and gray colored of a white background with that. I always tend to ask myself; how would a person who has some eyesight problems or is 50+ in age see this and what could be best for them. This is a tricky area though, because sometimes beautiful design and optimal accessibility don’t go that well together :)

    This very website is, on the other hand the best readable website i’ve seen and thats inspiring :)

  • Luke Jones

    Amazed at how nice Segoe UI looks! I used to hate that font.

  • Dave Rupert

    Just wanted to pop in and chuck some data into this conversation. I tested the contrast ratio in Colour Contrast Analyser against WCAG standards. The body copy color is #6a6a6a on #ffffff which is a 5.4:1 contrast ratio.

    See the results

    Adding in the fact that Segoe UI Light isn’t triggered until around the point that it’s large enough to be considered “Large Text” (~18pt), the design passes AAA standards. Darkening the body copy at sub < 680px widths is probably recommended but it still passes AA standards.

    Worth noting: #585858 is about the lightest body copy color you can have while still passing WCAG (AAA).

  • jonathan bowden

    gorgeous work gents. well done!

  • Eduardo

    Hi great article, theres a full screenshot of the original site?
    Now that the buildwindows.com has changed the content to show the conference videos, you cant see anymore the beauty of the animated tiles of the original site.

  • Trent

    @Eduardo: Good news! The “register” version of the site has been archived here: buildwindows.com/launch

Leave a Reply