MOSS Has Got Game - Glu Mobile’s Website (www.glu.com) - How We Did It - Part 2 of 3
This is a continuation of the guest blog series by Allin Consulting that started with Part 1.
<Lawrence />
Part 2: Master Pages and Controls
In this post, we will focus on the design elements of the Glu Mobile website – specifically how we laid out the master pages, web parts, and server controls to give the rich user experience that was required for the site.
Glu Master Page - The Binding Force
The Glu master page started life not quite as a single cell, but at its bare essentials as a “Minimal Master Page” as outlined on MSDN. With the help of a lot of CSS and various custom server controls and web parts, we shaped the website into its overall look and feel and functionality. Below is the master page illustrating the positioning of the PlaceholderMain control.
We built a set of custom controls that render all of the content in the various layouts. One such control included in the master page detects user preferences, genre, region, and a number of other parameters, and then proceeds to render the appropriate styles and backgrounds. You will note that each genre page has a different background color as illustrated in the graphic below (yellow-home page, orange-casual genre, green-classic genre, etc.). These pages are all based on a single glu.master page that conditionally applies the appropriate CSS.
Page Layouts
Within PlaceHolderMain we defined a number of layouts based on Glu’s business requirements. Assembling the web parts on particular pages required identifying the various page types (Home, Genre, Product, Search, etc.) and the content that would be displayed on these pages. Utilizing SharePoint Designer 2007, we created 5 page layouts, each with their own number of strategically positioned web part zones, that would address the different sections of the site. The numbered web part zones are shown below for the various layouts.
Home/Genre Layout:
 |
Corporate Layout:
 |
Product Layout:
 |
Search Layout:
 |
It is a pure SharePoint experience for a content editor to edit or create a new page on the site. They select Create/Edit Page from the Site Actions menu, select one of the layouts defined above, and then add the desired set of custom web parts to the appropriate web part zones. We developed our web parts to have the intelligence to understand their location and context on the site, page, and session in order to render the appropriate targeted content from the underlying SharePoint lists. For example, the list of supported games in the United States that are distributed through AT&T and can run on a Motorola Razr V3 includes 35 games. For another country, carrier, and handset combinations, this supported list will vary as all carriers and handsets do not support the same number or type of games.
Stylin’ with CSS
CSS was used heavily on the site primarily to help with affixing web part zone positions, but it also provided the flexibility to create an entirely different look and feel for each page layout. There are two major CSS files that are included on the master page: the Master CSS and the Regional/Genre CSS (regions include North America, Europe, Asia Pacific, etc and genres include casual, classic, gamer, etc.). The Master CSS is responsible for the overall look and feel of the entire site. It includes definitions for default fonts, background images, and repeating gutter images. The Regional/Genre CSS is included via a custom control that detects when a user is browsing a genre and/or game in a particular genre. Additionally, this control is configured to select the CSS based on the user’s current region from their profile. This allows Glu to tailor a look and feel for a particular genre for various regions. For example, Glue might want North America (noram) to run a special look and feel that coordinates with a large game title to be released while maintaining the common look and feel for other regions like Europe (emea).
Web Parts & Custom Server Controls
The Glu website is composed of many modular pieces that are assembled utilizing standard ASP.NET 2.0 features. These pieces can be divided into two categories: ASP.NET Web Parts and ASP.NET Server Controls. By creating standard ASP.NET server controls we were able to embed quite a bit of generic functionality into the master page directly. This included the login control, navigation bars (header and footer) and search control. We made a conscious decision to use standard ASP.NET 2.0 controls and web parts instead of SharePoint web parts as we did not need the added functionality (web part connections) and added overhead. Below is the custom Getting Started ASP.NET web part that allows users to choose their preferences and then target games.
And the following screenshot shows the custom login, search (leveraging MOSS Search) and navigation server controls.
We Are Just Serving Up Lists!
All of the storage, workflow, and publishing of content are managed through SharePoint lists (Content Types and Site Columns), and it is very straightforward to call the SharePoint object model to display this information from standard ASP.NET 2.0 web parts. Incorporating the custom controls onto the master page is very much the same as adding controls to a standard ASP.NET page -- that is, simply add the appropriate assembly references to the master page and add the appropriate server tags to include the control at the desired location.
Base Classes
Any component designed as either a Web Part or Server Control implements a base class: GluBase and GluBaseControl. These classes provide a set of base functionality which includes the following:
- Data Connectivity - Each component has access to a backend object model and inherently supports loading the information from the data source when/if the local cache is empty (more detail on the local cache that we developed will be provided in Part 3: Performance – Cache is King of this blog series). This made for a very rapid development experience as all we had to do in our code was refer to a base collection of objects that was loaded and available. For example, to return all products for the United States the method call was as straightforward as calling Countries(“United States”).Products() and then rendering the returned collection. This enabled us to create additional web parts in hours as opposed to days.
- Content Targeting - The core requirements of the site included dynamically targeting and displaying content based upon a number of parameters including: region, country, language, game genre, wireless carrier and wireless handset. There is a series of base functions that provide all filtering requirements a web part may need. This allows a web part to surface content that is specifically catered to the user and their preferences (session information).
- Language Translation - Part of the object model’s functionality is the ability to retrieve data in various languages. This too is offered as base functionality from our GluBase and GluBaseControl classes. Simply query an object, and ask for the content in another language. If available the results will yield the requested language, otherwise a default language (English) is returned.
- Component Resource Definitions - Facilitating simple component level data (titles, web part specific content, labels, etc) needed to go through the same translation process as the other web content, Because the data was more simplistic we created an initialization parameter which required a derived control to specify its current resource assignment. Having this assignment made, the web part can simply query the base functionality for relating items translated in the language specified. All of these resources (the translation of the User Login label for example) are also stored in SharePoint lists.
- Session Information - A series of base objects are provided to assist with user data collection (profile information and click tracking). These objects provide quick access to user data without having to worry about persisting the data. When the session objects are modified they will automatically be persisted to a SQL Server database. Inherently this reduces returning visitors the hassle of reconfiguring filters/setting when they return to the site (anonymous or registered).
Development Tools
We used SharePoint Designer to design all of the master and layout pages as well as to add all of the controls that were built in Visual Studio 2005 to the pages. The .aspx pages themselves were created in the web UI of SharePoint (Site Actions -> Create Page). Visual Studio 2005 was used for all of our component development in C#. When you open the Visual Studio solution, all of the .aspx files seem to be missing! This is a core difference in integrating with the web content management features of SharePoint rather than developing a purely traditional ASP.NET application. All of the .aspx pages live in “Pages” libraries in SharePoint, and as developers, we work with them in SharePoint Designer. The Visual Studio 2005 solution is a set of .cs files that make up the server controls, web parts, supporting application objects and specialized rendering classes for the site.
Lessons Learned
Critical to the success of the site was spending the time to build the master page, layout pages, and the base functionality in our lightweight custom framework. This enabled us to provide maximum flexibility in rendering the site. Having a good grasp of the business requirements and then designing a framework that both took full advantage of all of the SharePoint out of the box web content management features and allowed us to easily control and manipulate was critical to the success of the solution. As on any project, requirements shifted right up to days before launch, and our carefully planned set of base classes allowed us to quickly inherit and specialize them to meet those changing needs.
In Part 3 of this blog series, we will take a closer look at some of the optimization that we did to get the required performance from the site. If you have any questions at this point, please leave a comment here or e-mail us at glu-team@allincal.com.
Allin Consulting contributors to this blog entry:
- Robert Sweeney - Sr. Consultant
- Karl Kuhnhausen – Practice Director
