This week Microsoft began rolling out its new responsive homepage—one that Paravel helped design & build.

Earlier this year Nishant Kothary and I were having lunch at SXSW when he asked if Paravel would be interested in working on a responsive Microsoft homepage. I loved the idea. Over the past two years we’d come to believe in the responsive approach and were keen to put it to the test on such a massive scale. Plus, it’s an exciting time to be working with Microsoft. Windows 8 has extended its platform far beyond the desktop in a minimal, type-centric style that aligns with our own design sensibilities. I realized RWD was the perfect way for Microsoft to present itself on the web and that I really wanted Paravel to be involved.

Later, after conversations with Benson Chan (Product Manager) and Pita Kothary (Director of Program Management), Dave, Reagan, and I found ourselves meeting with the entire homepage team, presenting initial concepts. It immediately became clear that they were as excited about RWD as we were and eager to tackle the challenges ahead. Here’s an overview of the work done throughout the project:

Planning & Design

Microsoft has a sophisticated workflow that was finely-tuned for fixed-width mobile and desktop site production. We guided them through the same adaptations we had to make ourselves in order to build responsive sites effectively and efficiently. We used lo-fi mockups to discuss hierarchy, content choreography, and content strategy.

mshp wireframes

We began fleshing out photoshop comps for 2-3 arbitrary widths (narrow, middle, and full-width). There was a lot of iteration, and we found that this phase was just as much about conversation as it was about the actual design. Weekly reviews involved similar amounts of questioning and debate, which helped to clarify the vision and bring the team together.

mshp design

Coding for the Preview

While we’d been coding proofs of concept during the design phase, the time came to build a full, static version of the site to be launched as a preview. We were delighted by how many of our ideas were adopted and assisted by the core team without hesitation. The Windows 8 style (known formerly as Metro) lends itself to resolution independence with its flat colors and reliance on typography, so we built an icon font to take advantage of that. We also spent a great deal of time choreographing how things reflowed across viewport sizes, especially for the hero rotator and navigation menus.

icon font

Componentization & Preparation

Overwhelmed by the positive reaction we received during the homepage preview, we set out to prepare the site for its full implementation. After reviewing feedback and exploring some design adjustments, we “componentized” each portion of the static site. CSS was completely overhauled to be more efficient and all front-end code was broken down piece by piece. Things like the hero rotator, news ticker, drop down menu, and even lists of links became their own component—part of the responsive system we were building.

Seeking to make everything as responsive and extendible as possible, we quit thinking about grids Photoshop-first and built a proportional grid in the browser that splits units (and sub units) into halves, thirds, and quarters.

grid

Launch-Ready

At this point we’d locked down components and had the opportunity to help the engineers work their magic—debugging the site with a crack team of browser & device testers (we’re going to miss them on our next project). As the site neared completion, content authors in just under 100 locales began planning content. Knowing the site would be extended to regions that would need extra space for text translations or converted to right-to-left format drove many of our design decisions. It’s a thrill to see the site roll out across the globe.

mshp internationalization

During this time, we also joined with the templates and components team who will be working to make the responsive assets we delivered available to even more sites within the network. I look forward to seeing what they come up with.

Looking Back, Looking Ahead

When you spend months with a team interpreting stats, debating design decisions, and troubleshooting bugs you really get to know them. Every day each team member worked harder than was expected of him/her. A sense of unyielding dedication tempered with patience and humility was present throughout the project, and I’d like to publicly thank the homepage team for trusting us to take part. It has been an honor.

This week’s launch marks a momentous step for Microsoft and for responsive web design. Rather than waiting for the greater web community to clearly hash out best RWD practices, Microsoft has jumped in early, joining us in the trenches with an abundance of resources and zeal. Thank you, Microsoft—for demonstrating that RWD is the future of the web and that businesses of any size are capable of adopting the approach.

Be sure to check out this post’s companion piece written by Nishant Kothary. In it, he tells the story of how the project came to be, and what its outcome means for Microsoft and for the web.

Ads by Fusion

56 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Roman Horokhovatskyy

    My sincere congrats!!
    Great work Trent.

  • Dan Mall

    You guys rule.

  • Matt Hamm

    Really nice work Trent. I would love to know more about the proportional grids you used.

  • Dan

    Great article. It’s nice to see the push from Microsoft in the responsive direction. Awesome job on the homepage too!

  • Rion Williams

    Fantastic article!

    It turned out incredible guys and gals. Congrats again!

  • Christian Krammer

    Wow, I really grant you this project. And I love the new design of microsoft.com. Reduced, but nonetheless very special. Great work!

  • Brett Jankord

    Awesome work all around on the new Microsoft homepage. It was interesting to hear you started with some Photoshop comps before jumpin’ into the browser. I find myself doing that as well.

    Being Microsoft’s homepage and all, how did the devs handle support for oldIE?

  • Day Milovich

    behind the scene of microsoft redesign. awesome article and congrat to microsoft. actually, i always visit microsoft because the web provide info in detail, conceptual, and designed for all visitors demography. i am indonesian.

  • Michael Lynch

    First off, great work. The home page looks awesome and performs well. However, I’m disappointed this was only a home page redesign. Every link on the website is external, disrupting the entire experience on just the first click (or touch). When will Microsoft lose all the micro sites (or at least a good number of them) and consolidate their presence into one, unified responsive website? I know that’s a massive undertaking, but I don’t think they warrant this kind of hype just yet. Kudos to them for taking the first step nonetheless.

  • gordonjakob

    Awesome work guys!

  • Justin Reynolds

    Simple, beautiful.

  • Martin Stark

    So very awesome, I can’t stop playing with the site! Great work :)

  • Trent

    Thanks, everyone! It has been great seeing such positive reactions.

    @Matt Hamm: Noted :)

    @Brett Jankord: That could be a post unto itself, but I can tell you that we all worked together in testing browsers & devices, and the device side of things was actually trickier.

    @Michael Lynch: Baby steps :)

  • korbinian

    i really like the new homepage-design. but the design changes when i click on a link. will this error be fixed? it’s very confusing. The logo is not clickable. will this be changed?

  • James Young (@welcomebrand)

    Great work guys, really impressed that MS seem to be so keen to push forward with simplifying and adopting a responsive approach on such a high level.

    I was wondering about the homepage ad carousel though, I saw this (http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/) recently and it’s something I’ve wondered about for a while (the effectiveness) but would be interested to know if the decision to include one on the MS homepage was driven by a product team or stats/testing?

    Great job on the Paravel site update too, only saw it yesterday :)

    J.

  • Dimitris Tsiodoulos

    Great job! Would love to have the files and take a look - something like this (http://www.stuffandnonsense.co.uk/blog/about/say_hello_to_the_new_iso)

    Cheers!

  • Justin Avery

    Super amazing stuff as per usual from you guys at Paravel. Any chance of a more detailed post about the technical approach to the build of the site and reasonings behind it? Maaaaybe something that Dave will talk a little about in an upcoming Shop Talk Show?

  • Steven

    Awesome job guys!

  • Trent

    @korbinian: Thanks! Might I direct you to the feedback tab on the Microsoft homepage?

    @James Young: Thank you! While I can’t speak to what Microsoft plans to do with the feature/carousel space, I’d say that nothing on the page is set in stone and that we built the page to be fairly adaptable. I’m sure they’ve got their eyes on the stats and feedback coming in.

    @Dimitris Tsiodoulos: I absolutely love what Andy did in sharing that project, but I don’t think it’d be a viable option in this case.

    @Justin Avery: I bet we plan to talk about our work more soon. Stay tuned!

  • Ryan Bollenbach

    Hi Trent,

    The work you guys did on this site turned out gorgeous. I’m happy to see such a big brand using such a high level of design. I broke down my thoughts further in this article I wrote: http://boompah.com/2012/10/02/microsofts-new-responsive-design/.

    Did you guys also work with the team on the Visual Studio RWD?

  • Joe Chung

    Great job on the new Microsoft homepage, guys! You guys did a fantastic job with it!

  • Beth

    Loved getting some insight into your process, always interesting to see how so many moving parts are able to come together.

    Not sure how much you can share, but I’d also be very interested to know about the content strategy; I was intrigued to see ipsum’ed layouts and interested to know if there was content planned ahead or if that came later.

    Thanks for sharing!

  • Jeremy Lwanga

    Awesome job guys!

  • verpixelt

    An unbelievable excellent job and great article.

  • Paul Christian

    Love it guys! Really slick... They should ask you to take a look at the new Outlook interface as well.

  • Mark

    You guys did an amazing job. Now, just a fun little question. I’ve always wondered if Microsoft employees actually use IE for their work, or if many of the MS devs and designers actually use Chrome or FF. Can you verify my suspicion that they wouldn’t possibly use IE for developing?

  • Trent

    @Ryan Bollenbach: Howdy + Thanks for that. We were not involved with the Visual Studio site, but it’s good to see RWD catching on.

    @Beth:

    Not sure how much you can share, but I’d also be very interested to know about the content strategy; I was intrigued to see ipsum’ed layouts and interested to know if there was content planned ahead or if that came later.

    Great question! I actually added the ipsum text specifically for the blog post to avoid over sharing. Content strategy is a large part of their sophisticated workflow/system, so it was the first thing we covered during those aforementioned planning & design discussions. Content is subject to change from one locale to another, so part of our job was to design space for content rather than to dictate it.

    @Mark: I’m not sure what team members used, but ever since my work on Lost World’s Fairs for IE9, I’ve found recent versions of IE easy and enjoyable to work with.

  • Pål Eirik Paulsen

    Hi Trent,

    I agree with Matt Lynch that the homepage redesign is good, however the moment you navigate away from home, the responsive experience is broken. This deceives the user, because s/he thinks the website is responsive, only to find out that it’s not.. really. Also, the mega meny has translated to a very long navigation on a mobile phone. Did you consider a drill down nav pattern to clear away some of the bulk?

  • Edy Pang

    Beautifully crafted.

  • ScottAD

    Whoa! That is freakin’ sweet, Trent!! Awesome work to you and your co-workers!

  • Trevor Brennan

    Thanks for sharing Trent.
    Could you elaborate on what your minimum browser versions were for the RWD and how you tackled things like ie7’s lack of support for display table-cell? (I assume you needed to suport ie7+)

  • David

    @Trevor Brennan: When you set the style to display nothing (so style=””), it will be force the browser to display a default display (a block for IE and a table-row for firefox).
    I don’t know if this is a supported solution by Microsoft, but it definitely works.

  • Ryan Peterson

    What’s your take on comping in InDesign, like the renown Boston Globe redesign? http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
    Especially with Microsoft’s current design ethos, and going to browser as early as possible, it feels like starting in PS is becoming an antiquated workflow. CS6 seems to be a bit of a game changer as well, as Adobe continues to homogenize across their products.

  • Igor Debatur

    Why are you using Lorem Ipsum and uniE001 but not the real content? Just curious.

  • Trent

    @Pål Eirik Paulsen: Thanks + I’d say that lots of what is currently in place is part of what you can expect to see in the future at microsoft.com. I bet they continue to evaluate content (including navigation patterns) as well as extend responsive layouts to more pages over time.

    @Trevor Brennan: We basically just set a fixed-width layout for browsers that don’t support media queries. It works well from a progressive enhancement perspective because browsers that don’t support media queries probably don’t support many of the other newer CSS properties we’d be likely to implement.

    @Ryan Peterson: My opinions are evolving rapidly there. I’ll try to gather a blog post soon, but in short I’d say that I think process and specific tools used can be less than 100% efficient. We’re in uncharted territory and time spent experimenting with new ways to get to point B is going to be worth it.

    @Igor Debatur: Lorem is because I didn’t want to show exact content. The uniE001 is unicode for the font icon.

  • thiết kế website

    great job, nice design.

  • Shane

    Great read! Love the redesign!

  • Spencer Goldade

    Beyond great work, man. The Microsoft properties must have been such a beast to work on and bring into a cohesive vision, especially adapted to multiple formats. This redesign is just one more step in the right direction for them, and I hope they continue the trend. Sooner or later big companies like this have to understand that User Experience and Customer Satisfaction is paramount. Simply trying to out-tech or out-produce other companies won’t work anymore.

  • Frank

    Square as always... Everything fits inside the box!

  • Sebastian Green

    I’m surprised that Microsoft have jumped in at the deep end with this. Not that RWD is actually new, its still in its infancy. Best practices or the best ways to do such things as grids, content loading or images have not yet shown themselves. Maybe they never will, but Microsoft in the past have not been the quickest to adopt new technologies on the web.

    I think things are changing at Microsoft. New tablets, phone OS etc. They are really going for the future with making everything geared towards touch interfaces. Also, years ago I don’t think they would have enlisted the help of any outsiders so its nice that the guys at Paravel were brought on board. Maybe Microsoft are realising that to really be successful in today world, they need to look outside them selves and sake it up a bit.

    The site looks great. Lets hope they don’t bloat it and ruin it in the future.

  • Arthur

    Really enjoy what you guys did with Microsoft. The fluid design of their site is great. Can’t wait to see what you guys do next.

  • Igo Konrads

    Unbelievable. Who would have thought Microsoft would go responsive. They are normally the ones behind in web technologies..

  • Yoosuf

    You guys are working with big brands and clear perfect and simple solution.

  • Jordan Trainor

    I love what you have done for Microsoft. I would like to know how you deal with rounding down in responsive design.

  • Graham

    Thanks for the insight Trent. I was wondering when I saw the wire-frames you’d created, and that they contained lorem Ispum. Would you always use Lorem Ipsum in your wire-frames or would you rather you’d use actual content because it gives you better understand and direction of the finished piece?

  • Mirgen Dhima

    Great info. How can I have more hand picked quality info on responsive web design, like these?

  • Martin

    I don’t think they warrant this kind of hype just yet. Kudos to them for taking the first step nonetheless

  • Jolien

    Whoa! That is freakin’ sweet, Trent!! Awesome work to you and your co-workers!

  • Paul Wallas

    Did this inspire or have any impact on the Microsoft Guidance for ‘Laying out an app page (Windows) http://msdn.microsoft.com/en-gb/library/windows/apps/hh872191.aspx

    Thanks

  • Trent

    @Paul Wallas: If anything it was the opposite. We started with lots of Windows 8 design resources to reference & interpret for the responsive site.

  • Alex Lundgren

    I want to be your Padawan Jedi! your work is so cool!

  • Jensen

    I think the new design is clean and simple, I like it morely than the last one.

  • Gareth

    Hi Trent,
    Thanks for writing this article, it’s great to see a glimpse into your process, especially with a client as big as Microsoft.
    Given that you write code yourself which allows you to experiment with breakpoints and choreography, I was wondering what your thoughts are around emerging tools such as Adobe has provided to this end, Reflow, etc. I ask because I personally don’t write code too much, and I am looking at these tools to help my process so I don’t have to rely on a ‘coder’ to help me experiment during the design phase.
    Thanks.

  • Trent

    @Gareth: I think tools like Reflow can help create more realistic concepts outside of the browser. It may even help articulate vision between design and code, but I’d also strive to continually learn and understand what is possible on the front end. Some of my favorite tricks in the design phase happen through rough (no where near production level) CSS exploration. At the end of the day I suppose it’s about finding tools that help you get ideas out quickly while also learning and expanding the ol’ skill set.

  • Sarah

    Awesome design, now it looks more corporate website than ever. Really fantastic initiative by Microsoft.

Leave a Reply