SharePoint Branding Example: Destination Oakland

Oakland County, Michigan recently rolled out a new update to their Destination Oakland website built upon SharePoint.    This site provides parks, recreation, event, and environmental information to residents and visitors.

image

The site was original built two years ago on SharePoint 2007 and was upgraded to SharePoint 2010 about one year ago.  

Destination Oakland utilizes the web content management features of SharePoint to allow Oakland County employees to easily maintain the content while conforming to a very complex web site design.

The branding and customizations used within the Destination Oakland web site was original built using Visual Studio 2008 and then manually packaged into a .WSP solution file for deployment.   During the migration to SharePoint 2010 the Visual Studio solution was recreated in Visual Studio 2010 to take advantage of new features and packaging capabilities of the platform.  All of the site assets including images, styles, JavaScript, master pages, web parts, and other components are managed within a source control system.   This allows both the developer and designer to easily work together within the solution.

The first thing you notice when you visit Destination Oakland is the large image rotator in the middle of the page.  This was accomplished by storing the images in a picture library that contained metadata for the title and description.   The images, titles and descriptions are read from the library and then a jQuery plug-in manages the image display, fading and rotation.  Having the images in a library made it very easy for content editors to switch them out without needing to have any HTML or web design experience.

The three “chalkboards” across the bottom of the fence highlight announcements,events,and latest Twitter posts.   The announcements and events reside in SharePoint lists and are rendered via JavaScript.   The arrows on the left and right of the chalkboards enable the visitor to view previous announcements, Tweets or future events.

Down in the footer are icons for RSS feeds and social networking sites.  As you hover over these icons they slowly rise out of the grass.  This was accomplished using transparent PNG (or GIF) images and JavaScript.

One of the more interesting features of the site is something that you won’t even initially see.  Destination Oakland’s look and feel actually changes based upon the seasons.  Since we are currently in the spring season we are seeing flowers and butterflies.   These graphics will change automatically based upon predefined dates for the seasons.   Expect the site to have a subtle change to the look and feel once we get into summer, fall and then winter.

An interesting fact about the Destination Oakland home page is that the content editors never directly edit the page; instead they modify the content in an announcements list, a calendar list and a picture library.  The tweets are pulled dynamically from Twitter using the Destination Oakland twitter account ID.   This ensures that the front page will always have a consistent look and feel while still providing dynamic content managed by the content editors.

image

Once you start exploring the pages inside of the site you will notice each of them have a large banner with an image and mini-calendar.   The image is easily replaced by the content editors of the site by adding or removing files in a picture library.  The “swoosh” is a transparent PNG that is layered over the top of the image.  This reduces the amount of work or skill required for a content editor to replace the images.   If a content editor specifies multiple images then they will be displayed in a fading and zooming fashion, sometimes called the “Ken Burns effect”.

The mini-calendar is linked to a master calendar list stored within SharePoint.  This mini-calendar filters the events and only shows the ones that are target for the specific site that you are viewing.

You may have noticed that all of the web parts have a large title area and rounded corners.   Some of the web parts were custom developed but many of them are out of the box SharePoint web parts.   Since the Destination Oakland website needed to work with older browsers doing the rounded corners provided a bit of a challenge.  It wasn’t possible to use simple CSS styling with the existing out of the box web parts to achieve the effect that the designer was looking for.   This left two possible options:  create custom web parts to replace all of the existing out of the box web parts or to find a way to override the rendering of the out of the box web parts.   Luckily with ASP.NET the developer could create a control adapter that would modify the rendering of the existing out of the box web parts.   This allowed Oakland County to use the out of the box web parts while still getting the design they wanted.  This helped to keep development time down.

Destination Oakland is a great example of what can be accomplished with SharePoint.  The site was originally built on SharePoint by a single designer and a single developer over a 4 month period.   Both the designer and developer worked only part time on this project as they had additional daily responsibilities.   The recent updates to the site were also accomplished by a designer and a developer working part time on the project.

0 thoughts on “SharePoint Branding Example: Destination Oakland”

Leave a Reply