State of the Art in Web Site Design on SharePoint

Chris AuldDirector Strategy & Innovation

WIIFMWhat’s In it For Me

Enterprise Developer/DesignerGetting your intranet/extranet sites brandedBuilding reusable templates

Experience SharePoint DeveloperLap around the new features of VSeWSS v1.3The value proposition of good themeing

Agency FolksBuilding redistributable themes for customers

EveryoneA few laughs along the way

WNIIFMWhat’s Not In it For Me

No Working with Master PagesFocused on Out of Box SharePoint

SharePoint ThemesDesign, Develop, Deploy

About SharePoint ThemesTheme AnatomyThe Theme Team – design to deploymentLet’s Build a ThemeLet’s Deploy a ThemeSome Public Service Announcements

About Themes

demo

Out of the Box

Challenges Out of the Box

HTML CSS

High Level Theme UI ElementsGet to know the primary areas of the layout:

Breadcrumb – contains Global Site Links, etc;

Global Title Area – contains Logo and search

Banner Container – aka the horizontal navbar;

Left Area Cell – aka the vertical navbar;

Low Level Theme UI ElementsOther elements you should get to know:

Global Site Links – part of the breadcrumb;

Search Box – part of the Title Area;

Top Navbar & Site Actions Menu (and corresponding dropdowns) – part of the Banner Container table;

Page Editing Toolbar – only shows up for Administrators;

Where to Invest for High ImpactIn order of least to most investment

required:Change the logo to your own (in the Global Title Area);Apply your brand colours to all site content (backgrounds, text, links, etc);Rip and remake by customizing the Master Pages

Give it a Name

People Can Relate

To!

Theme AnatomyVisual

ms-globalbreadcrumb (nested)

ms-globalTitleArea

ms-bannerContainer

ms-titlearealeft

ms-titleareaframe

ms-leftareacell

<unnamed cell>

ms-pagebottommarginleftms-

pagebottommargin

ms-titlearearight

ms-rightareacell

ms-pagebottommarginright

ms-pagetitleareaframe

ms-bodyareacell

ms-bodyareapagemargin

Theme AnatomyTechnical

Theme.INF

Theme.CSS

Images

Theme Files LocationC:\program files\common files\Microsoft shared\web server extensions\12\TEMPLATE\THEMES

Theme Support Files

SPThemes.xml

Theme.gif

Theme Files Tour

demo

The Theme Team Design, Develop, Deploy

• have a need

Customer

• make it look great

Design

• deploy and manage

Deploy

• Empower users to enable the theme• Encourage enterprise SharePoint

‘Gurus’

Empower

Tools of the Trade

SharePoint Designer .NET

Assembly Reflector

Central Administratio

n

STSADM

Visual Studio 2008

VSeWSS 1.3

Design (beret wearing)

Photoshop

Illustrator Expression

Design

Tools of the TradeSharePoint Designer

.NET Assembly Reflector

Central Administratio

n

STSADM

Visual Studio 2008

VSeWSS 1.3

Production (beanie wearing)

Expression Web

Tools of the Trade

SharePoint Designer

.NET Assembly Reflector

Central Administratio

n

STSADM

Visual Studio 2008

VSeWSS 1.3

Develop (baseball cap wearing)

Tools of the Trade

SharePoint Designer

.NET Assembly Reflector

Central Administratio

n

STSADM

Visual Studio 2008

VSeWSS 1.3

Deploy (Unwashed Mega Death t-shirt wearing)

Let’s build a theme

demo

Design

ImagesTheme.INFTheme.CSSProduction

Let’s Package Our Theme

demo

Theme DeploymentDevelopme

ntTest Production

VSeWSS v1.3 March CTP10 New Themes for SharePoint

announcing

1. Separate Deployment Commands

2. Command Line Builds

3. Support for Productive Dev Builds

4. Auto Web Part Renaming

6. Deployment Conflict Resolution

6. Better WSP View Cleanup

7. 64 Bit Support

Conclusion

Wrap up

Resources

Paul Andrew’s Blogblogs.msdn.com/pandrew/

Heather Solomon CSS Reference Chartwww.heathersolomon.com/content/sp07cssreference.htm

VSeWSS 1.3 CTP releasewww.microsoft.com/downloads/details.aspx?FamilyID=b2c0b628-5cab-48c1-8cae-c34c1ccbdc0a&DisplayLang=en

.NET Reflectorwww.red-gate.com/products/reflector/

Please Complete an Evaluation FormYour feedback is important!

Evaluation forms can be found on each chairTemp Staff at the back of the room have additional evaluation form copies

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.