Looking back at MicrosoftPDC.com (from the inside) - Jon Galloway

Looking back at MicrosoftPDC.com (from the inside)

I had the privilege of working on the MicrosoftPDC.com website as lead developer for the past several months. The process hasn’t been kind to my blogging schedule lately, but the experience definitely taught me quite a bit: working with the top-notch Microsoft developer evangelism team, setting up a site for maximum flexibility, setting up the Silverlight experience, and troubleshooting some interesting issues during the conference. I’m going to run through several of these at a high level and may dig into some of these in more detail later (so comment if you want to hear more about something).

As I’m describing some of these, remember that while I was the lead developer, these sites were built by a team. The project and UI experience were managed by the Microsoft Developer Evangelism team, the visual design was based on the overall conference visual design concept. I lead the development team which included some of our super-awesome developers and designers here at Vertigo1. So I’ll take some of the credit for what went well and most of the blame for what went wrong. Also, while the experiences were kept in sync, we didn’t do any of the work for the the registration and live conference session information (including video links, evals, etc.). register.microsoftpdc.com and sessions.microsoftpdc.com didn’t even live on the same server as the rest of the micorosoftpdc.com site.

This site used ASP.NET Webforms rather than ASP.NET MVC. We built the first release of the PDC2008 site in April - May 2008, and ASP.NET MVC was at a Preview 2 release stage back then. I love new and shiny, but I couldn’t in good conscience recommend that we launch the PDC site on MVC so early on. As I worked on it, though, I continually asked myself, “Will this be the last ASP.NET Webforms site I’ll deploy?”

Reuse Through Simplicity

We originally built a single site – microsoftpdc.com – but it’s turned into quite a bit more than that. The original microsoftpdc.com site was a pretty simple “brochure” site, designed to give people the information they needed to get to the PDC conference. The week before the conference, we shifted to a “live experience” mode that included a re-skin and changes to the sitemap to present information that was relevant to people attending the conference or keeping up with it online. That same week, we launched two other sites: m.microsoftpdc.com (a mobile site for PDC attendees) and 2009.visitmix.com, an information site for the MIX09 conference. While all these these sites looked pretty different, they all ran on the same code base. As I look back at things that went well, I think this is one thing we got right - we struck a good balance on the design so that we were able to heavily reuse the site code without having to tell the client that simple changes would take days because our system was too complicated.

 MicrosoftPDC Home Page - "Classic" view   Microsoft PDC - Keynote view  MIX09 Home Page

Here are some of the things that helped keep us flexible:

  • CSS based design
  • Resisting the urge to premature generalization
  • A great client – we were able to be involved in the user experience planning at a level which allowed us to define some consistency across the site
  • Feed-based content as an ultra-lightweight CMS
  • Master pages used on all pages in the site except the home page – for a while, the same site would display in “PDC Classic”, “PDC Live”, and “MIX” modes with a querystring switch (disabled in production)

The master-page / CSS switching worked surprisingly well – for instance, here’s the same agenda page shown before and after the theme switch:

MicrosoftPDC Timeline Screen - MicrosoftPDC Timeline Screen - "Live" view

We didn’t use the built-in theme system for ASP.NET, as it unfortunately doesn’t play that well with CSS based design and conditional stylesheets.

Look, Ma! No database!

One interesting thing about these sites is that they pulled their dynamic content from a variety of feeds. I built out a control which basically piped an RSS feed through an HTML cleaner to a ListView control. The ListView control just output the content in unstyled HTML, so it was reused all over the place. The HTML cleaner did a few things – stripped ugly HTML (including Word HTML markup) and did a “smart truncation” of the HTML content so we’d a desired character length with adjustments so we split at word boundaries and didn’t leave unclosed tags. I used the Html Agility Pack to handle the HTML parsing so I could focus on the logic.

The Mobile Site – m.microsoftpdc.com

While I set the technical direction and took care of some polish areas here, I really can’t take too much credit for what I consider to be one of the best features of the microsoftpdc.com site. David Shadle, the (awesome) creative director for the PDC online experience, designed a mobile experience exactly how I’ve always thought they should be done – as a focused mini-site specifically created for attendees at the conference. Then Jim Lin built it. I helped with some polish by following Scott Hanselman’s iPhone webdev tips (adding the iPhone home screen icon and adjusting the viewport), but mostly I just got out of the way and let it happen.

PDC Mobile Home (Emulator)PDC Mobile - SchedulePDC Mobile Session Detail (Emulator)PDC Mobile - Session Search

Here’s that fancy iPhone home screen icon. Phear my graphics skillz!!!

MicrosoftPDC - iPhone Home Screen

The Silverlight Live Experience

I put a lot of work into this, and it was probably one of my favorite features despite the fact that it was only live for 4 hours or so (during the webcast keynotes). We thought about how we watched conference keynotes – frantically switching between the video and Twitter – and we tried to set up an experience that would make people like us – geeks who love keynotes - really happy. We built a tiny Twitter client in Silverlight which pulled directly from search.twitter.com, and fortunately everything (Twitter included) held up well during the keynotes.

Microsoft PDC - Keynote view

You know what took way more time than you’d expect? Styling the scrollbar in the Twitter area.

Hovering over the event photo thumbnails expanded to a Silverlight Deep Zoom photo explorer thing…

PDC Flickr - Zoomed Out

… and clicking on the thumbnails or spinning your mouse’s scroll-wheel would of course zoom you in on the photos, in all their Flickr medium-resolution glory! Of course, there were some dangers – if you zoomed in on the wrong photos, you could get stuck in a Deep Zoom recursion situation which has been known to collapse the very fabric of spacetime:

PDC Flickr - Deep Zoom Recursion

We leveraged a system Vertigo has  developed to enhance and manage Deep Zoom experiences. It’s called Big Picture, and it powers some other cool Deep Zoom projects like the Mojave Experiment site and this page which displays all the newspaper headlines with the news of the Obama’s recent election victory. In addition to handling UI details like laying out the photos in a nice justified rectangle, there’s a server piece running behind the scenes that builds the photo collections. We used the Big Picture server’s Flickr integration system, which ran a scheduled build process against the latest Flickr photos with the PDC2008 tag. That task took some management as the collection grew during the conference, but fortunately Jay Walters (the developer who did most of the work implemented the PDC / Deep Zoom experience) was on the ball, scaling our build times to match the photo collection size.

What did you think? What did we get right? What did we do wrong?

1 I mentioned that I work at Vertigo, I love my job, and we’re hiring, didn’t I? Yes? Great!

Published Monday, November 24, 2008 12:13 PM by Jon Galloway
Filed under: ,

Comments

# re: Looking back at MicrosoftPDC.com (from the inside)

You linked to a post by Adam Kahtava who wrote over two years ago that "Themes and Skins are a promising addition to ASP.NET 2.0, but too immature for large web projects." We're now using .NET 3.5 but the ASP.NET theme system still isn't good enough (for Microsoft) to use for a large site? The theme and skin system looks like it was intended for and would be beneficial for large sites but it doesn't appear Microsoft is investing a lot in the feature. Has the developer community just not pushed for it to be enhanced over the past few years?

Monday, November 24, 2008 8:45 PM by Cory

# re: Looking back at MicrosoftPDC.com (from the inside)

@Cory,

It's been said that every framework / programming language has it's good parts and bad parts. From my experience both ASP.NET Themes & ASP.NET AJAX are unsuitable for large sites. Instead of pushing for enhancements from Microsoft. Many of us have been avoiding the bad parts with a preference given to the standards embraced by the larger web development community (feature detection over browser detection, CSS, JavaScript, jQuery, etc...).

While Microsoft does appear to be embracing a more standards based approach (jQuery, MVC, and the newest version of WinForms) many of us can't wait around for technology updates. The web moves too fast!! :)

Tuesday, November 25, 2008 11:45 AM by Adam Kahtava