ASP.NET website redesign: Now with less Beta, more Live
Cleaner Markup, Faster Page Loads
The site was already pretty highly optimized, but we paid attention to the site performance and were happy to see page load times improve across the board.
More Semantic Markup
The previous design had a lot of dated (quaint?) design elements, like rounded corners and gradients, which at the time required a lot of extraneous markup for support across a wide range of browsers. There was a lot of wrapper divs which were there only for styling - kind of ignoring the most important element in HTML: text!
Side note: I find it funny that, now that modern standards natively support rounded corners and gradients, they're not cool anymore.
You can see a big difference in the markup just by looking at beginning of the body tag through the end of the header items. Here's the old design:
<body>
<form method="post" action="/webmatrix/tutorials/15-caching-to-improve-the-performance-of-your-website?"
id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUENTM4MQ9kFgJmD2QWAmYPZBYCZg9kFgJmD2QWAgIFEGRkFgICD
Q9kFgJmD2QWAmYPZBYCZg8WAh4HVmlzaWJsZWdkZKrDY1NG1HjNDVKzlZSX2Dy7poMS" />
</div>
<div id="content_container" class="content_container">
<div class="header_container">
<div class="header_top">
<div class="header_top_right">
</div>
</div>
<div class="header_content">
<div class="header_content_right">
<a href="http://www.asp.net" title="Home Page">
<img class="logo" style="border-width: 0px;" alt="" src="http://i2.asp.net/common/header/logo.png?cdn_id=22"
title="Microsoft ASP.NET" />
</a>
<div id="WLSearchBoxDiv">
<div id="WLSearchBoxPlaceholder">
<input class="search_box" id="WLSearchBoxInput" disabled="disabled" name="WLSearchBoxInput"
value="Search" /><input class="search_button" id="WLSearchBoxButton" type="button"
value="" name="WLSearchBoxButton" /></div>
</div>
<div id="mainnav">
<ul class="nav_main">
<li class="first"><a href="/home">Home</a></li><li><a href="/get-started">Get Started</a></li><li>
<a href="/downloads">Downloads</a></li><li><a href="/web-pages">Web Pages</a></li><li>
<a href="/web-forms">Web Forms</a></li><li><a href="/mvc">MVC</a></li><li><a href="/community">
Community</a></li><li><a href="http://forums.asp.net">Forums</a></li></ul>
Yes, that was a bit of VIEWSTATE in there... Also, entire page was full of wrapper divs which were there just for formatting, and if you accidentally messed them up when editing content (oops) the whole page got wacky.
Here's the header markup for that same page with the redesign:
<body class=''>
<div class='allcontent '>
<div class="header-wrap">
<div class="header">
<a href="/" class="logo" title="The Official Microsoft ASP.NET Site">The Official Microsoft
ASP.NET Site</a><ul class="nav-main">
<li><a href="/">Home</a></li><li><a href="/get-started">Get Started </a></li>
<li><a href="/downloads">Downloads </a></li>
<li><a href="/web-pages" class="selected">Web Pages </a></li>
<li><a href="/web-forms">Web Forms </a></li>
<li><a href="/mvc">MVC </a></li>
<li><a href="/community">Community </a></li>
<li class="last-child"><a href="http://forums.asp.net">Forums</a></li></ul>
I see that three goals are achieved in unison here:
- Cleaner design means less HTML, so the pages load and render faster
- Less junk/formatting HTML means the content is easier to maintain
- A focus on content over superfluous design elements usually mean that the content is easier to read, as well
Better Performance, YSlow Improvements
Again, the focus on this redesign was really about information architecture and design refresh, but we did pay attention to site performance and best practices throughout because... well, it's the ASP.NET site and we care about this stuff. We want to be proud of this site, and we want you to be proud of it, too.
Scott Hunter, Scott Hanselman, and I were on several calls with the development team every week, and we constantly badgered them about performance tweaks, practices, etc. We started with a B YSlow rating, which is actually pretty good as far as most sites are concerned.
We ended up with an A, with a discussion about any recommendation we couldn't meet. The only mark against us in the page below is due to some local (non-CDN) images, which was a measured decision to allow content editors to edit them in the CMS. Check the YSlow marks across the site yourself - it's a fun exercise.
Looking at better performance and best practices ensured we were doing things like setting correct headers, using sprites effectively, minimizing and bundling resources, etc. Again, I did absolutely none of that development work, I just sent e-mails about it. ;-)
We had a team doing weekly performance testing across the site and making recommendations on best practices and opportunities to improve. Here's one of the pretty graphs in one of them showing the page load time was significantly reduced site-wide, often cutting the load time by 50% or more.
What's Next?
We're definitely not done. We put a lot of things on the post-launch list, many of which are now possible as CMS edits. I mentioned that we've been asking for feedback and using your input to tell us what's most important. Here are some of the things we're tracking:
HTML5 Video
It's highly requested, and it's important to us, too. I prototyped a Silverlight with HTML5 fallback video solution which is in the "works on my machine" state. I went back and forth on which to make primary and which to make fallback, but since it's leveraging standard HTML content fallback (no Javascript or server logic required) it's easy to switch.
As written, this would continue to use the existing player (along with features like time based commenting and cross-browser full screen support), but if Silverlight's not installed or is disabled, the content's shown using native HTML5 video support. If that's not available, we'll show some sort of message that indicates you need Silverlight or a newer browser.
We know this is important so that the content's available across as many devices as possible, and it's high on the list.
Better Mobile and Smaller Device Support
I've blogged recently about how ASP.NET MVC 4 will use CSS media queries and adaptive layout to work well on different sized browsers, and adding adaptive layout is in the works for the ASP.NET site, too.
Fewer / smaller ads
Yes. We hear you, and we're pushing for it. Keep voting for it, it means a lot more when you ask for it than when I do.
Bring back old content
Aha! We've done that! Done. Taking the rest of the week off.