Relaunching AzureDesignPatterns.com with HTML5 and Expanded Content

For several years now I’ve maintained a design pattern catalog of design patterns for Windows Azure (Microsoft’s cloud computing platform) at AzureDesignPatterns.com. I’ve recently overhauled the site with expanded content and it is now HTML5-based. Since this is a work in progress you can still access the former site.

Expanded Content

Expanded content on each pattern makes the site a lot more useful. You’ll find the typical sections found in most design pattern catalogs: problem, solution, analysis, and examples.

The patterns are arranged topically (Compute, Storage, Relational Data, Communication, Security, Network, and Application). Currently the Compute patterns are up on the site and content for the other categories is on their way. The navigation panel on the left allows you to open one of these categories and quickly find the pattern you want, and it works equally well with touch or mouse. By keyboard you can enter the name of a pattern in the search area with auto-complete.

This content ties in closely to my upcoming Windows Azure architecture book which is nearing completion. The book includes two parts. Part 1 describes the Windows Azure platform services and the architecture of applications that use it. Part 2 is a comprehensive design pattern catalog.

HTML5 Overhaul

I’ve recreated the site as an HTML5 site for several reasons. First, to broaden its reach: AzureDesignPatterns.com is now accessible across PC browsers as well as touch devices like tablets and phones. This is achieved by avoiding the use of plugins, handling backward compatibility with modernizr, and using fluid layout. The site selects one of four CSS layouts (desktop, tablet-landscape, tablet-portrait, or phone) to best fit the device it is rendering on. Layout areas and type are proportionally sized in accordance with the principles of responsive web design. Another reason for doing this is, I’m going deep on HTML5 this year and upgrading my existing sites is one way to practice and learn. This is my first “real” HTML5 experiment.

I found some nice shared resources online I incorporated into the site. I made use of the Less Framework to plan my device layouts and create my baseline CSS. To provide auto-complete on keyboard input in the search area, I adapted this auto-complete control. For animating the cloudscape behind the navigation panel, I used this animation example that leverages the MooTools JavaScript framework.

Hosting in Windows Azure

It would be kind of hypocritical for a design patterns site for Windows Azure to not be hosted in Windows Azure. However, this is a content-only site with no server-side logic—it doesn’t actually require hosting in the Compute service and we can save some expense by serving the site from low-cost Windows Azure Blob Storage, a technique I've previously written about. The same technique was used for the former Silverlight-based site.

I hope you enjoy the new Azure Design Patterns site and find useful.