SharePoint Branding and Design

This post is about SharePoint branding and design and is part of my series on Supercharging SharePoint Server

There are several options to choose from when designing a Microsoft Office SharePoint site and – as well as the regular HTML and CSS layout techniques that you might use on any other type of web page – you can harness master pages, page layouts, themes, site templates and site definitions to put your design on SharePoint.

Referring to my first post on Supercharging SharePoint Server, this study site is made up of a number of site collections organised in a hierarchy that reflects the structure of the Youth Achievement Awards. Most of the pages in each of the site collections are derived from page layouts (or content pages) that in turn refer to a single master page at the top level. This master page provides the fixed layout and content that is reflected throughout the site as a whole.

The Youth Achievement Awards master page on Microsoft Office SharePoint Server

The layout for this master page was developed using ordinary HTML and CSS, it is a fluid layout – which means it will size to the user’s browser – and has a header with logos, a toolbar and a breadcrumb, and a footer containing other links – the space between the header and footer is where our individual page content will sit. You can initially design the master pages and page layouts away from SharePoint, in fact we developed the HTML and CSS layouts and checked these in all popular browsers long before plumbing them into SharePoint itself.

Page layouts are framework pages that once deployed carry the site's content; this content may include lists of user content, document libraries, and other web parts – used to redefine content or endow the page with additional functionality. User's can easily add their lists, libraries and web parts to one or more web part zones declared in the page layout.

Stepping back to our site design, we originated single column, two-column and three-column layouts for the inside pages and allowed for a corresponding number of web part zones on each page. This approach, in tandem with the master page, allowed us to lay down the arrangement of all site content into just three different types of page on which web parts could be placed.

2-column and 3-column layouts with web parts added

Supercharging SharePoint Server

For my first set of blog posts I'll be exploring the end-to-end production of a real-world custom site built on Microsoft Office SharePoint Server.

In the forthcoming series of blog posts I'll be showing you how we planned, developed and deployed an exciting social site using Microsoft Office SharePoint Server, forms-based authentication, ASP.NET and a bunch of other tools and techniques to supercharge the out-of-the-box offering and transform the delivery of the Youth Achievement Award – an activity-based approach to peer education.

The idea to leverage the content, document and user management capabilities of Microsoft Office SharePoint Server had to be finely balanced against the need to create a simple, friendly and intuitive environment for our users – who, on the whole, would not relate to the ordinary workings of Microsoft Office SharePoint Server.

Our final design allowed us to make the leap from an office style environment to an exciting social space where users can engage with their peers and work towards a nationally recognised award.

The Youth Achievement Awards home page on Microsoft Office SharePoint Server

Our take on the Microsoft Office SharePoint Server People Picker using Microsoft ASP.NET Ajax

Planning and deploying the web site was a large-scale team project that encompassed multiple planning, deployment, and customisation tasks. In this blog I’ll be taking you on a journey through the deployment and customisation tasks necessary to create this solution based on Microsoft Office SharePoint Server.

Background

Developed by UK Youth, the Youth Achievement Awards have long been established in youth groups, schools and colleges as a means of recognising and accrediting young people's achievements through a peer group approach.

An overtly simplistic way to describe the award programme is to say that a youth group delivers an award programme (bronze, silver, gold and platinum) to a learner. Each award comprises a number of challenges which are defined by the learner doing the award and appraised by their award group (whom they choose). At the end of the challenge a series of approval workflows are carried out that will finally result in the learner's challenge being awarded and ultimately (with all of the challenges completed) the award itself.

From our perspective we needed to design a site that would accommodate a large number of youth group sites (each independently managed by the youth group) which would house a collection of learner's award portfolios. Each portfolio would contain one or more award sites that the learner was working toward or had completed, with each award site in turn hosting a collection of challenge sites that the learner had developed as part of their award.

Moreover, the site needed to provide the tools to help young people complete their award challenges, collect evidence, collaborate with their peers, assess their own development and use it as a vehicle to articulate their achievements.

To clarify this viewpoint:

1. A learner searches for and submits a portfolio request to a youth group
2. The youth group's site owner is notified and approves the request; the learner's portfolio site is automatically provisioned and the learner is notified
3. The learner visits their portfolio site and adds other registered users to their own award group
4. The learner chooses and starts a bronze award; the bronze award site is automatically provisioned
5. From their new award site the learner plans and starts a bronze challenge; the challenge site is automatically provisioned
6. During the course of their challenge the learner logs in and visits their challenge site to record information about their challenge, upload evidence and interact with their award group online
7. The learner completes their challenge

Now, there’s quite a bit more to it than that but hopefully you get the general idea.

SharePoint Branding and Design