I’d like to introduce this next post by congratulating Tony Tai (SharePoint Product Manager) and the team who worked on getting the SharePoint marketing site onto SharePoint.  This was a very cool project and it set the foundation for all the future sites and content that we can now quickly manage and publish onto the Internet.  I’d also like to give a special kudos to Tim McDaniel and Celina Baginski for all their contributions to the project.  So let me get out of the way and hope you enjoy this excellent contribution to the “How We Did It” series.

Cheers!

Dave Pae
SharePoint Technical Product Manager

The Microsoft® Office SharePoint® product group teamed with Advaiya, Inc. to rebuild the SharePoint Web site using the SharePoint Server 2007 platform. Microsoft chose Advaiya, a consulting company in Kirkland, WA, to work with the SharePoint product group because Advaiya has a long history of working closely with many Microsoft teams to develop strategies to roll out new technologies, content, and solutions.

Goals for Rebuilding the Web Site

When the SharePoint.Microsoft.com Web site project started, Microsoft and Advaiya identified several goals:

• Introduce a fresh design to enhance the customer experience with SharePoint and showcase SharePoint independently of the Microsoft Office suite
• Create an inviting environment and information structure to help the SharePoint audience find information more easily
• Streamline the existing publishing processes to enable content authors at Microsoft to quickly publish new content and update existing content without third-party assistance
• Provide dynamic, up-to-date content for a varied Microsoft Office SharePoint audience (customers, developers, and end users)
• Use Microsoft Silverlight™ on the home page and throughout the site, and demonstrate that Silverlight and SharePoint work well together

To meet these goals, Advaiya created several custom components and integrated them with the SharePoint platform. This article describes some of the key components and how they were created and explains the design rationale behind each component.

New Graphical Design

To create a fresh new look and enhance the customer experience, a brand-new design was created for the Web site. Several designs were prototyped at the beginning of the project and design review sessions were held to determine which design elements would be incorporated into the new Web site.

The new design presents a clear information hierarchy that allows users to easily locate information on pages. After the new design was approved, Microsoft SharePoint Designer 2007, Microsoft Windows Live™ ID, Microsoft Expression Blend™ 2, and Microsoft Visual Studio® 2008 were used to implement the design inside the SharePoint framework.

New Information Architecture

After years of updates the previous Microsoft SharePoint Web site was rich in content, but it was getting difficult for the growing and increasingly varied user audience to find relevant content easily. To make the information in the Web site easier to locate, several working sessions were held to analyze content and create a new information architecture. These sessions defined the information taxonomy—including how the content is categorized, stored (lists and field controls), and laid out. Detailed documents capture all of the decisions made during the working sessions. Developers, content authors, and designers used these specifications throughout the project.

Custom Page Layouts and Style Sheets

To give content authors the ability to quickly create and update the content in the Web site, custom page layouts and cascading style sheets (CSS) were used throughout the site. The Related Technologies page layout (Figure 1) shows out-of-the-box SharePoint publishing capabilities combined with a custom page layout and CSS. Content authors do not have to spend time or effort formatting content entered into the field controls because the CSS embedded in the page layouts handles the formatting. This practice saves time and ensures a consistent appearance throughout the site.

Figure 1. Related Technologies page in edit mode

In building the site, Advaiya chose to use as many out-of-the-box components as possible for several reasons: to save time and money on development, to create an easy upgrade path, and to minimize training costs and ramp-up time for content authors. We also used custom CSS styles to provide a unique appearance for non-content portions of the site. The Quick Launch menu is an excellent example.

Figure 2. Custom CSS styles create a uniquely branded Quick Launch menu

Targeted Home Page Audience Content

Another interesting requirement was to display content for targeted audiences at the bottom of the home page. When users click tabs at the left side of the home page, relevant content is displayed without refreshing the page. Additionally, content authors needed to be able to update the content inside a Web browser without requiring Web site coding skills.

Figure 3. Targeted audience content on the home page

To implement this requirement, Advaiya created a custom content type and page layout to store information that corresponds to the audience content requirements, and to provide an interface for authoring. Based on the custom page layout, we created publishing pages that correspond to each audience tab on the home page. Content is stored in a page layout so authors can easily write and update it, track versions, and take advantage of the Web content management approval functionality that SharePoint provides. Content authors can create and edit the audience content with out-of-the box SharePoint publishing functionality. Only authenticated users have permission to create, edit, and delete content in these pages, and publishing approval workflows ensure that only approved content appears on the home page.

Figure 4. Content for the developer audience page in edit mode

In the home page layout, a Web server control queries pages based on the audience content page layout and returns the information stored in field controls on the pages. We used the SPQuery object to execute this query. The small size of the result set (six items), coupled with the fact this query is run against a single list with only eight items in it, makes this querying approach a perfect choice to meet this requirement. Additionally, we used page output caching functionality to ensure that queries do not overload the server and only execute once every three minutes.

After the Web server control retrieves the data, it applies XSL to the XML returned from the query to transform XML into the HTML that is needed to render the content. This transformation creates the tabbed navigation menu and associated content that changes without refreshing the page.

The XSL applied to the XML is stored in a XSL style sheet in the out-of-the-box Style Library. This approach allows designers to change the XSL style sheet in the Style Library so they can update the appearance of this portion of the home page, and it alleviates the need to recompile the Web server control.

Figure 5. The XSL style sheet is used to style targeted audience content

Originally we planned to hide the six pages that contain audience content from anonymous users. However, after the site went live, Microsoft learned that sending direct links to the pages provided additional value and eliminated the need for users to select one of the tab links on the home page to see targeted content. After this discovery, we changed the audience content page layout to look like the home page and included the home page Silverlight hero bar (graphical menu).

Figure 6. Targeted audience content components

Silverlight Home Page Hero Bar

You’ve probably seen graphical menus, also called hero bars, in other Web sites—typically they are used to highlight and link directly to new or time-sensitive content. Sometimes they are animated banners that cycle through new content. One of the goals for this project was to create a Silverlight hero bar on the home page. In addition to providing a good user experience and giving Web site visitors easy access to important information, the content had to be dynamic and easy to maintain by Microsoft content authors who do not have Silverlight development skills.

Figure 7. Silverlight home page hero bar

To meet this requirement, Advaiya created SharePoint lists to store data to display in the Silverlight hero bar. We created three lists: Customers, Events, and Downloads. This approach allows content authors to create and update content in the Silverlight hero bar by using the familiar list editing functionality SharePoint provides in basic Web pages. Content authors can choose the titles, descriptions, links, pictures, and background images that are displayed inside the Silverlight hero bar component.

Figure 8. Data in the Events list that appears in the Silverlight home page hero bar

When the site went live, the Silverlight hero bar received source data as initialization parameters. The initialization parameters were generated by a Web server control that queried the lists. This approach took advantage of page output caching to limit the number of times the lists were queried to only once every three minutes.

We redesigned the component by using a Windows Communication Foundation (WCF) service call to retrieve the information from the SharePoint lists. By taking this new approach, we significantly reduced the home page size, whether or not users’ Web browsers are enabled for Silverlight. To ensure that front-end Web servers are not overloaded with queries from each page load, we cached the query results inside the WCF service. Because the Web server control was no longer needed to provide the initialization parameters, we were able to eliminate it.

To accommodate Web browsers that do not support Silverlight, we used JavaScript to detect whether the browser supports Silverlight. If the browser does not support Silverlight, then the Silverlight control is hidden and a non-Silverlight version of the hero bar is rendered in the browser.

Figure 9. Silverlight home page hero bar components

Silverlight Main Menu Navigation

Another goal for the project was to use Silverlight for the main menu navigation. The Silverlight main menu navigation control had to be dynamic to allow content authors to change the links by using out-of-the-box features to modify the navigation.

Figure 10. Silverlight main menu navigation

To meet this requirement, we created a dynamic main menu navigation control in Silverlight. The out-of-the-box site map providers that come with SharePoint give Silverlight the navigation nodes that make up the menu. This approach allows content authors to modify the Silverlight main menu navigation by using out-of-the-box navigation editing functionality in SharePoint. In Figure 11, you can see that only the sub-sites are shown in the main menu navigation and the publishing pages for dynamic audience content, search results, and home page are hidden.

Figure 11. Out-of-the-box navigation settings

As with the Silverlight hero bar, we used a combination of initialization parameters and a WCF service to load the data and we designed the component to operate under a variety of bandwidth and display conditions.

Figure 12. Silverlight main menu navigation components

Search Engine Optimization

We did several things to optimize the Web site for search engines to find content. One of these optimizations included adding two field controls to each page layout. These field controls allow content authors to specify keywords and the descriptive title for each page in the Web site.

Figure 13. Field controls for keywords and page description

Visitor Tracking and Business Intelligence

To implement functionality that provides the SharePoint product group with details about Web site visitors and with other Business Intelligence information, Advaiya worked with the Webtrends team. Webtrends provides analytics and marketing intelligence solutions. First, we included Webtrends JavaScript functions in master pages to track each page view individually. To track how often the targeted audience content on the home page is viewed, we call a Webtrends JavaScript function each time a user clicks one of the audience links. The JavaScript functions make calls to the Webtrends server and report which audience tab is selected.

dcsMultiTrack('DCS.dcssip', 'sharepoint.microsoft.com', 'DCS.dcsuri', '/pages/highlight.aspx', 'WT.ti', 'Microsoft Office SharePoint Server – Connecting People, Process, and Information', 'WT.dl', '0');

Figure 14. Webtrends JavaScript function tracks when a user clicks the Highlight tab on the home page

We also enhanced the home page Silverlight hero bar to track how Web site visitors interact with it. We used the same JavaScript function inside the hero bar to capture which main tabs, sub-tabs, and downloads users click.

Packaging and Deployment

To ensure that the site followed best practices for deployment, all of the components that support the site were packaged in SharePoint solution packages (.wsp files). When we rolled out the site to the pre-production and production server farms, we ran a batch file (containing STSADM commands) that deployed the packages, installed and activated the features, and created the site collection. Finally, we moved the content database from our content authoring and staging environment to the pre-production and production server farms, set the site collection administrator, and enabled anonymous access. We were up and running without any issues.

Conclusion

In only three months we were able to understand the existing Web site content, create a new information taxonomy and Web site design, develop the components, move content, conduct performance tests, and roll out the site to production. Building on the SharePoint platform allowed us to meet or exceed all of the project goals in a short amount of time. The product group is already realizing the benefits of the improved content publishing model and the Web site is growing and improving every day.

Todd Baginski – Senior Enterprise Solutions Strategist, Advaiya, Inc.

Pratyush Mishra – Enterprise Technology Strategist, Advaiya, Inc.

Jomit Vaghela – Principal, Office Platform and Live Services, Advaiya, Inc.

Vivek Soni – Senior Associate, Advaiya, Inc.

Marshal Hagen – Software Developer, Advaiya, Inc.

Meeta Chopra – Consultant, Advaiya, Inc.

Ritu Mathur – Associate, Advaiya, Inc.

Raquel Mayer – Art Director, Advaiya, Inc.