Posted by The Microsoft Developer Network (MSDN) is a website/portal for software and hardware developers. It launched in 1992 as a CD-ROM-based collection of technical documentation and articles, and at one point even offered subscriptions which provided licenses to much of Microsoft’s software. The website, MSDN Online, was launched in 1998 To examine some of the history of the service, we’re going to use the Wayback machine and look at some of the earliest snapshots of the website during the Web 1.0 era and see how it changed in the next generation of web technology around 2010.
This is http://msdn.microsoft.com on May 8, 1999. The website is fairly simple, featuring classic navigation components like the top navigation bar, the left content menu, and what looks like a categorized content feed of links filling up the rest of the space. Like most websites of the Web 1.0 era, content consists primarily of text, links, and a few images. Typography is relatively uniform, and is either text black or link blue on a white background. Besides the navigation components, content is listed in a single column and broken up with blue tabs labelling the category of articles. The structure is also exceedingly simple by modern standards. The website is made using an HTML table tag `<table>` with one row `<tr>`, and three columns `<td>` to hold the left navigation, some space, and then the right content.
Something I found particularly baffling was the search “section’, which was placed in the fourth category from the top and was flush with the left side of the column, which made it stand out a little from the rest of the tabbed-in links. The search almost blended in with the rest of the page were it not for the tabbing. Back in 1999, search may not have been as important as it is today, but it’s also possible that the entire suite of technical docs that a developer or manager may have needed could be found by clicking through the various categories on the left content menu.
Fast forward to Web 2.0. Here is a snapshot of MSDN on Feb 24, 2010. The web has evolved a little, and many more modern elements of web design are beginning to appear. The top navigation and left menu have gained more color and increased margin between links. Text is noticeably larger everywhere on the site. A large image carousel occupies the space at the top center of the content, and some icons begin to show up around the site (RSS, MSDN logo, search), and beside the products down below. A small “Sign in” link shows up on the top right, alongside a language/country selector. Text color is still black on white, but the whole page now sits in front of a gentle blue-to-white gradient. On inspecting the HTML, we can see that the site has gotten more complex with more JavaScript tags `<script>` and complex classnames like “JelloExpander” likely referencing CSS styles appearing throughout the document. If you dig deep enough into the nesting of `<div>` tags though, you’ll find that class table and row structure from many years ago still present in the HTML.
Based on these observations, we can assume many things about the kinds of people visiting MSDN and how they consumed content on it. The site is designed like a content library and has similarities to online directories and forums. Information is filed and categorized and generally laid out in the F-shaped pattern. Despite the image carousel front and center in the 2010 snapshot, links are spread evenly with article titles and headings only slightly larger than the peek text below. Compared to websites designed around shopping, news, or social media, very little marketing has been added to the site, indicating that probably the people visiting MSDN are already a part of the Microsoft community at large and are coming here to find specific information.
It does appear though, that over the years the content has changed from being a page of static content to being more community-driven. New categories such as “Blogs” by Microsofties and “Forums” appear under the heading “Community Activity”, which reflects very much the Web 2.0 standards of “read-and-write”, as envisioned by Tim Berners-Lee.
Today, MSDN no longer exists and instead the address redirects to Microsoft’s new official repository for technical documentation, Microsoft Docs.
Successor to MSDN, Microsoft Docs took over in January 2020, is meticulously built with user-experience in mind, and features one of my favorite things as a developer: dark theme. The website prominently places its links to its different products in colored tiles reminiscent of their Windows Phone Metro design. Personally, I really liked the evolution of MSDN each step along the way all the way to the current site, which I think is the best. Standards of the web change over time, and each iteration of MSDN displays a more modern understanding of how users consume content at the time.
If you’re interested in some of the reasons behind Microsoft’s decision to replace MSDN, read more in their migration update blog, a post introducing the design of the site, and how it may combat misunderstandings of the F-shape scanning pattern.