Welcome to the Minnesota SharePoint User Group September 12 th, 2007 Branding and Designing your SharePoint Site Lori Neff

Agenda Quick Intro What is Branding? OOB Branding on SharePoint Advanced Branding Break Branding Techniques and Samples Q&A and Giveaway

User Group Goal / Objectives Develop and support a local community focused on Microsoft SharePoint Technologies Educate user group members about SharePoint Technologies Transfer knowledge within the community Communicate best practices Introduce new products / solutions

Introductions – MNSPUG Sponsors Inetium ( Twin Cites based Microsoft consulting company Microsoft Gold Certified Partner Practice Area focused on Information Worker Technologies New Horizons – Minnesota ( Microsoft Gold Certified Partner Training on many technologies Microsoft ( I’m guessing you’ve heard of them

Website for user group SharePoint resource documents SharePoint resource websites links RSS Feeds Meeting Schedule Past User Group Presentations

Upcoming Schedule Next Meeting Oct 10 th 9:00 AM to 11:30 AM Microsoft’s Bloomington Office Topics: Microsoft’s Bob Sutton Composite Applications and SharePoint Designer Ongoing Schedule 2 nd Wednesday of every month 9:00 to 11:30 am Microsoft’s Bloomington Office

What is a Brand?

What is a Brand? Logos Fonts Color Schemes Graphical Treatment Traits or Characteristics SharePoint provides a Web 2.0, multi- dimensional, dynamic brand experience

Challenges of Branding SharePoint Consistency Audience expectations Audience needs Internal buy-off of SharePoint Security; anonymous access vs. forms authorization Where do I get started? – Blogs – Websites – Books on branding and SharePoint (they’re starting to be available)

Website considerations SEO Validation Accessibility Translation

SharePoint with Intranets, Extranets and Websites Intranets and Extranets focus on content and functionality and might have different branding requirements Websites have a much larger focus on user experience

SharePoint Public-Facing Websites

Intranet PortalsExtranet Portals Public Internet Sites Business ProcessBusiness Intelligence Composite Applications SharePoint as a Platform

Evolution of SP: 2003 vs

2003 vs Difficult to brand Branding required updates to file system Easy to break Use FP as primary tool 2007 Reengineered on.NET 2.0 Takes advantage of Master Pages Relies heavily on CSS New SharePoint Designer makes customizing much easier Ability to create a public facing site Content Management

MOSS vs. WSS WSSMOSS Real-time presence Wikis, Blogs, Surveys Workflow Master Pages Usage analytics RSS Feeds Rights-trimmed user interface Breadcrumb bar Content types Tree view All WSS capabilities, plus: Publishing Feature Page Layouts Site Manager Audience Targeting Portal Site Templates Business document workflow support (approval, signature collection, etc.) Content publishing and deployment WYSIWYG Web content editor

Typical Roles and Responsibilities in a SP project Marketing Ideas Branding guidelines Designer Design Concepts Implementation of HTML, Graphics and CSS Developer Custom web part development Admin Content approver Set up for roles Content Contributor Updates to content IT Environment setup Security

Real-World Example: Inetium web site Used branding guideline Color scheme Fonts Audience “Approachable” Used flash movie to highlight practices Page layouts Home page: Flash movie Web part zones Web parts

Simple and Advanced options Simple OOB customization Update Logo Apply a Theme Adding web parts Choose a different OOB Master Page More advanced customization Master Pages Layout pages Creating custom themes CSS

Simple OOB customization demonstration Update site with logo Change site theme Change Master Page Template Mention other master page templates available for download Views in libraries Content editor web part (inline styling) Site Manager Tool

Page Rendering

Break

Advance Customization: Custom Theme Themes can be found on the server in: Server Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\[Theme Name] Copy folder, rename Rename.INF file, change theme names in.INF file Modify theme.css with design changes Store preview of theme in TEMPLATE\IMAGES Modify TEMPLATE\Layouts\1033\spthemes.xml

Advance Customization: Master Pages What is a Master page? Navigation Logos Search box Login control Editing controls CSS References <PublishingNavigation: PortalSiteMapDataSource …> <SPSWC: RightBodySectionSearchBox …>

Tools Internet Developer Toolbar FireFox Firebug InstantSource SharePoint Designer

SharePoint Designer Tracing feature Back up your site Viewing reports HTML and CSS validating Viewing customized pages Check out status Usage Reports Creating workflows

Advanced Customization: Working with CSS There are 26 style sheets used in SharePoint Majority located on server: Server Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1 033\STYLES Some located in Style Library (accessible via SPD) How SharePoint loads style sheets

ms-globalbreadcrumb ms-globalTitleArea ms-sitetitle ms-globallinks ms-globalright ms-globalleft ms-siteaction ms-siteactionsmenu ms-bannerContainer ms-bannerframe ms-banner ms-topNavContainer ms-topnav ms-topnav + ms-topNavSelected

Advance Customization: Layout Pages What is a Layout Page? Template for content Based on a content type Holds: Field controls Web Parts Web Part Zones Data View CSS in-line styles

Advance Customization: Content Editor WP Styles HTML Editor CSS Make a copy from the server, save in Style Library Add styles Register css in master page New styles will appear in Content Editor Style dropdown

Customized vs. Uncustomized pages “Ghosted” and “Unghosted pages” Performance impact of ~10% Page request Customized? Retrieve customized page from db Retrieve shared template from file system Merge rendered web parts and return to browser YesNo

Resources Microsoft’s SharePoint Products and Technologies site – Microsoft SharePoint Products and Technologies Team Blog – Joel Oleson’s SharePoint Land - The Inetium Blog Server – – SharePoint blogs listed under IW Meeting Resources

Resources Branding SharePoint – (coming soon) How to Create a Minimal Master Page – Customizing SharePoint Sites and Portals – Comparison of MOSS vs. WSS – us/sharepointtechnology/FX aspx?ofcresset=1 us/sharepointtechnology/FX aspx?ofcresset=1 Accessibility – Meeting Resources

Resources Real World SharePoint: Indispensable Experiences from 16 MOSS and WSS MVPs – ISBN Translation – Meeting Resources

Q & A

Give Away

Thanks for coming!