Slide 1

Introduction to Branding SharePointK.Mohamed FaizalSharePointPROs.SG20th August 2009

email kmdfaizal@yahoo.com / kmfaizal@ncs.com.sg IM kmfaizal (yahoo)Tech Blog http://faizal-comeacross.blogspot.com/ AgendaBranding & Design processGathering RequirementsInformation ArchitectureSitemap & Navigation WireframesTools for building the designDevelopmentMaster page vs. theme Demo ThemeMaster Page

What does branding mean?

Cowboy brandingWhat does branding mean?Branding: The act of building a specific image or identity that people recognize in relation to your companyWebsite Branding: The colors, fonts, logos, and supporting graphics that make up the general look and feel of a corporate website.Branding for SharePoint: Master pages, page layouts, CSS, web parts, XSLT, images, etc.WSS vs MOSSWindows SharePoint Services v3 or WSS is the free version of SharePointFocused on collaboration with documents and light editing of web pagesMicrosoft Office SharePoint Server 2007 (MOSS) is the licensed version of SharePointIncludes among other capabilities the Publishing FeatureMuch better platform for creating a strongly branded web site

Microsoft SharePoint Platform

When come to SharePoint Design

How far can SharePoint Go?

How far can SharePoint Go?100 Best SharePoint Websites http://www.wssdemo.com/Pages/topwebsites.aspx

I have taken some samples from Ian Morrishs WSS Demo Top 100 Best Looking Public SharePoint sites. My intention of putting these slides in is to give you a feeling that anything is possible. However, its not to say that every sharepoint site should have a wiz and bang effect.It really depends on the user base and how the site is going to be used.You would not want to put a 600px high header in a corporate internal website for 120 thousand users who really just care about getting access to their project documents.

Presentation Title9How far can SharePoint Go?

It is quite impressive seeing the diversity and complexity on some of these designs.I have heard many times from my clients saying that they dont want SharePoint to look like SharePointDoes this mean that Microsoft dropped the ball when it comes to design?

Presentation Title10How far can SharePoint Go?

Branding & Design ProcessDesign Process: 7 StepsThe design process can be broken out into 7 different steps. There will be some cases where there will be some overlap but in most cases each step is dependent on the previous steps completion and sign off.Within each one of these steps I have identified some of the roles that help contribute towards them.Within the first step is gathering the system requirements, visual design guidelines, tone, and the creation of the creative brief.In step 2 the requirements are prioritize and identified into development iterations.In step 3 the IA will build out the site mapIn step 4 the IA will create wireframes starting with the high level templates and functional areas.In step 5 the visual designer will produce visual design comps per the requirements of the creative brief.In step 6 the visual designer will take those approved wireframes and combine the visual design into those templates.In step 7 the front end developer will take the final approved visual designs and start building out the CSS, Images, and Master pages to support the design.

13Gathering Branding RequirementsIdentify Approvers: Business Users, PWC Member, Corporate communication Member, PSC Member.

Design Treatments: Gradations or flat colors, Rounded corners, Transparencies, White Text on dark background, Tabbed navigation, Pixel lines for separation, Shadows

Branding Moods: Simple or Complex, Bold or Soft, Heavy Imagery or soft color transitions, Sharp square edges or soft rounded corners

Sites they like and Dislike: Identify existing sites that they like and why they like them. Same for sites they dont like.

Step 1ConductRequirementsGathering

Session 1Session 2The first thing you need to think about when trying to identify a new brand is know your audience and who will be doing the approvals. Get them on your schedule for reviews early and often.I have used a few check list approaches to identifying what someone wants their site to look like. I usually approach it from a few different angles.Ask them about design treatments, what kind of mood would be appropriate, and if there are any existing sites out there that they like and dont like. This will help guide you down a path in the right direction.

Presentation Title14Gathering Branding RequirementsDefine customization level?Brand Adaptation: keep out of the box layout and tab styles and Apply logo, colors only?

Custom brand: More design treatments, changes to lines, controls, tab styles.. stay within master page layout

Full custom design: Change layout of master page completely.. i.e. navigation may not be in tabs, etcStep 1ConductRequirementsGathering

Session 1Session 2The next thing that you need to understand is the scope of the design. Is it a brand adaption of their current public site into their internal site?Is it a quick skin of SharePoint but no major overhaul to the master page?Or are they wanting to make SharePoint not look like SharePoint and create a visual design like some of the examples that I showed earlier?

Presentation Title15Gathering Branding RequirementsFull portal modification: All sites, My Sites, and Administration page

Sites only: Themes or alternate style sheets

Page Only: Alternate style sheets, Content editor web part )Step 1ConductRequirementsGathering

Session 1Session 2The next thing that you need to understand is the depth of the customizationsWill the changes be made for all sites and pages, just within 1 site collection or just within 1 page.Based on scale, it will effect which design implementation will be used.

Presentation Title16Gathering Branding RequirementsPre-existing Designs and Style GuidesWebsitesColorsFontsImageryLayoutLogosEtc.Step 1ConductRequirementsGathering

Session 1Session 2What you will also want to make sure you review is any current styleguides, logos, websites, images, etc.

Presentation Title17Gathering Branding RequirementsBrowser RequirementsSite Function: Liquid versus Fix width

Width: Smallest Size before Scroll. (1024 X 768)

Browser Support: IE, Fire Fox, Safari, Opera, Google Chrome

Print: Custom style for printing from site

Mobile support: View and download content from PDA, Smartphone, Etc.Step 1ConductRequirementsGathering

Session 1Session 2The last type of requirement that you will need to understand is browser support.Will the site be a fixed with or will it expand with different monitor sizes?What is the smallest supported size before scroll bars will be visible?What browsers will be supportedWill there be a need for any extra styling for print requirements?And will the site support mobile devices beyond the in box features of SharePoint

Presentation Title18Prioritize KeyDevelopment IterationsStep 1ConductRequirementsGathering

Session 1Session 2Step 2Prioritize KeyDevelopment Iterations

START

Requirement 1Requirement 2Requirement 3Requirement 4Requirement 5Requirement 6Requirement 7Requirement 8Requirement 9Requirement 10Requirement 11Requirement 12Requirement 13Create Sitemap & NavigationCreation of high level sitemap & navigation

Step 3Create Site Map

Identify Key Areas for IAWire FrameDesignReviewCreate Sitemap & Navigation

Step 3Create Site Map

Identify Key Areas for IAWire FrameDesignReviewCreate Sitemap & Navigation

Div 1

Div 2Div 3

Div 4

Div 5Create WireframesCreation of Wireframes

Step 4StartWireframeDevelopment

Wireframes range from high levelb/w navigation and page sketches to detailedpage layouts.Review

Create Visual DesignProvide Input to your Designer Explain Design SharePoint constraintsExplain Page Layout and WebParts Provide information about style sheetStep 5CreateLook-n-Feel Interface DesignFull color designsof key application navigation, pages, and interactions.Review

24

Create Visual DesignColorful background Image Fun factor We want something that's not too 'boxy' & have the wow factor to excite usersWe need to have more energy and be more exciting. Mix all elements of air, water, land, energy in to your design

Complete Wireframes & Interface Designs

Step 6Complete Wireframes & Interface DesignsReview

Where to begin?Main site areasTop BannerTitle area / SearchMain Navigation / ActionsQuick Launch areaBody areaWeb part headersFontsStep 7Begin Programming of Site Design Alpha Prototype:Incompleterepresentation ofportal structure;usually home pageplus key category/user path to give apreview of how sitewill function

Beta Prototype:100% completerepresentation of site structure; all contentrepresented onsite map completedOther AreasMy SiteTemplates Team SitesBlogsWikisMeeting WorkspacesMS Training CenterAdministrativeCentral AdministrationI myself like using the top down approach. Start with the main sections of the page and work your way down.If its a global implementation make sure you test out all site templates including meeting workspaces and My Sites.

Presentation Title30How to begin?Tools for building the designComplexity

The main tool that you will use to customize your CSS and your master pages is SharePoint Designer. Since its free now, you have no excuse.The more complex the change the more you will need to lean towards Visual StudioSome changes can even be made within the UI of SharePoint.

Presentation Title32Different type of SharePoint Branding MethodsThemesMaster PagesPage LayoutsSharePoint Page Elements Field Controls, Web Part Zones, Web Parts, etc.Almost everything relies on Cascading Style Sheets

ThemesThink of it as painting the walls You can only change:Background imagesColorsFontsHide certain elementsMake minor movements and size changesThemes can style the Application pages (those with _layouts in the URL)

Themes

Custom Themes

Master PagesMaster pages allow you to change the look and feel for an entire site simply by making changes to a single fileUnlike themes, Master Pages allow full control over the HTML of the page

Cant have a SharePoint site without it even if you use a theme!

OOTB Master Pages

Custom Master Pages

Master Page vs. ThemeWhich option is best for your environment?

Master Page vs. ThemeThemesIf you just want to change colors, fonts, background images then go with a theme.

Master PagesIf you want to move elements around on the page or change the HTML you have to go Master Page.

Implementation Method OptionsCustom ThemeCreate a custom theme and apply it to each site.Pros:Easy to applyAbility to have multiple brands within environmentCons:This approach is defined per siteCannot be pushed across all sitesIf modified theme needs to be removed and then reapplied

Themes are good in certain places, they get applied to individual sites but cannot be distributed globally.

Presentation Title42Why Create a Custom ThemeThe OOTB themes have bright colors that rarely match with corporate brandsCheck out the new MS themes:http://faizal-comeacross.blogspot.com/2009/04/10-sharepoint-themes-for-free.html

Applying a Theme to a SharePoint siteMOSSSite Actions > Site Settings > Modify All Site Settings Look and Feel > Site ThemeWSSSite Settings > Site Theme

Understanding SharePoint CSS TagsExternal Style Sheets1.) CALENDAR.CSS2.) CONTROLS.CSS3.) CORE.CSS (Main)4.) datepicker.css5.) EwrDefault.css6.) HELP.CSS7.) HtmlEditorCustomStyles.css8.) HtmlEditorTableFormats.css9.) MENU.CSS10.) OWSNOCR.CSS11.) PORTAL.CSS (Supporting)12.) RCA.CSS13.) SiteManagerCustomStyles.css

Image Folder Details1.) Size: 2.78 MB2.) Contains: 2,050 Files, 0 FoldersFolder Locations on ServerImagesC:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES

StylesC:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLESCSS Tag for Header / Navigation (Core.css)

CSS Tag for Body Layout(Core.css)

CSS Tag for Quick Launch/Left Nav (Core.css)

CSS Tag for Main Content Area(Core.css)

CSS Tag for Web Parts (Core.css)

CSS Tag for Forms (Core.css)

CSS Tag for Site Settings (Core.css)

CSS Tag for Site Settings Menus (Core.css)

Creating your own ThemeLets Code?

Change Site Font Hide Icon & Change Site Title font sizeChange Background Image & Height SizeAdd Rounded corner Image to Web Part HeadersThe Themes FolderThemes Folder is located in the 12 FolderC:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES

Other Files in the Theme Foldertheme.cssMost of the CSS for the ThememossExtension.cssExtra CSS applied to the end of the Theme CSS for MOSS sitesSupporting images and CSS

The Theme INF FileLACQUER.INF[info]title=Lacquercodepage=65001version=3.00format=2.00readonly=truerefcount=0

[titles]1031=LacquerSPTHEMES.XML Contains references to all Themes for SharePointLocated in the 12 Folder:C\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML

LacquerLacquerLacquer has a gray background with gray control areas and orange highlights.images/thlacquer.gifimages/thlacquer.gif

Thumbnail / Preview ImagesThumbnail and preview images are located in the 12 Folder:C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGESOOTB Thumbnails are named th*.gifCan be GIF, JPG, or PNG

Applying a Theme to a SharePoint siteWhat happens when a Theme is applied?Files provision in site at _themes/LacquermossExtension.css is added to the end of theme.css and a new Theme file is created Lacq1011-65001.css

ToolsSharePoint Skinner: SharePoint Skinner is a really useful tool that will allow designers to inspect existing Web sites and create SharePoint themes from themhttp://www.elumenotion.com/Blog/Lists/Posts/Post.aspx?ID=4

ToolsServes SharePoint Theme Generator:http://hermansberghem.googlepages.com/themegenerator.htm

ToolsIE Developers Toolbar: This free tool is a plug-in available from Microsoft that adds a new toolbar to the bottom of your Internet Explorer browser window.Firebug: Firebug is similar to the IE Developer Toolbar in that it is a free tool that works inside the browser. The biggest difference is that it is targeted to FireFox63Master PageMaster PageMOSS Master Pages are similar to .NET Master Pages.However, MOSS added a component called a Page Layout.

Master PageThe Master Page is assigned at the site or sub-site level.A Page Layout is assigned at the page level.Page Layouts act as templates that may be used by multiple pages.

Master Page and Page Layout

Estimating BrandingMany times branding is estimated after requirements are gathered and before any other work happensMaster page vs. themeSkill level of designersDeployment considerationsHow much time is availableComplexity of the designNumber of elements to be styledFlexibility of the stakeholdersGive enough time to testSetting expectations is key!Functional Areas of a Master PageContent Placeholders

69Default.masterPlaceHolders

All placeholders must be defined in a replacement master

Page LayoutMaster Page

Master PageWeb Part ZonesMaster Page Demo

Navigation SettingsStaticDisplayLevelsThe number of levels of sub navigation to show by defaultMaximumDynamicDisplayLevelsThe number of levels of sub-navigation to show as fly-outsOrientationCan be horizontal for top navigation or vertical for side navigationhttp://blogs.msdn.com/ecm/archive/2007/02/10/moss-navigation-deep-dive-part-1.aspx

Adding Custom CSS to SharePointWhere should CSS live in SharePoint?Style Library for MOSSTo be absolutely certain your CSS is called last, use an HTML CSS include

Custom Master PagesSharePoint requires specific Content PlaceholdersYou will get An unexpected error has occurred.Turn on detailed error messages: http://blog.drisgill.com/2008/08/turning-on-detailed-error-messages-in.htmlLearn more about the default placeholders:http://office.microsoft.com/en-us/sharepointdesigner/HA101651201033.aspx#3Minimal Master Pages create a blank slate to start your masterpiece

IE Developers ToolbarDownload: Internet Explorer Developer Toolbar

IE Developer toolbar is your best friend when building out CSS. It has an option to hover over elements on the page and as you click it shows you the classes and ids for that element. Firefox also has this option so use the tool you most feel comfortable with.I remember back in the day when I had to view the source of the page to find classes, well no more. Download it and use it, I guarantee you will love it. I did hear that IE8 has this built in but for some reason they stripped out some of its functions

Presentation Title78Implementation Method OptionsModify Core Server CSS File: Core.cssApplied to all sites, sub-sites, application pages, and My Sites.Pros:Instant ResultsAll Sites/pages will be brandedCons:All Sites/pages will be brandedRisk that service pack will override changes

I am going to go through these pretty quickly, but I wanted to highlight some of the pros and Cons for different types of implementation methods.By Modifying the core CSS file on the server its the quickest and easiest way to brand all sites and pages for a SharePoint farm.A few primary issues is that its farm wide and there is risks of it being overridden during migration or service pack updates.

Presentation Title79To Package, Deploy Master Page Go To MSDN articleReal World Branding with SharePoint Server 2007 Publishing SitesURL http://msdn.microsoft.com/en-us/library/ee354191.aspxImplementation Method OptionsModify All Core Server Master Pages:Adding a CSS Reference to all major master page files on the server. Application.masterDefault.masterPros:Instant ResultsAll Sites/pages will be brandedCons:All Sites/pages will be brandedRisk that service pack will override changes

By adding a reference to a alternate CSS file within a server side master page such as default.master you will get the global changes but also have the same risks as the previous implementation.

Presentation Title81Implementation Method OptionsCustom Site Definitions and Ref. Alternate Stylesheet:Create Custom Site DefinitionsReference Custom CSS file in all Default.aspx pagesReference an alternate CSS file at the top level site collection. Pros:Branding only applied to those sites that use those templatesCons:The Alternate Style sheet will have to be applied to every top level site collection Not all system pages will be branded

If you are creating custom site definitions you could attached a alternate CSS file to those templates.If you do go this route not all system pages will be affected.

Presentation Title82Implementation Method OptionsCustom Master Page within UICreate custom Master page and store it in the Master Page and Page Layouts Gallery Reference to Custom CSS file on the serverPros:Easily SupportedAbility to use library features (Check in/out, Versioning, Restore)Cons:No system pages will be branded

This is probably the most supported method by Microsoft but it does have its drawbacksWithin each site collection the master page will have to be uploaded and applied. Some system pages with the /_layouts will not have branding applied.

Presentation Title83Implementation Method OptionsAlternate Style SheetReference the Alternate Stylesheet at the top level site collection.Pros:Quick way to make simple changes to siteCons:This approach does not get applied when a new site is created.

The Alternate style sheet method is helpful if you need to make small changes to a sites design But as new sites are created this does not get applied automatically to new sites.

Presentation Title84Implementation Method OptionsContent Editor Web PartUse tag within the web part to override the CSS for that page.Pros:Flexible and can be used on any siteCons:This approach only effects the page and not the whole site/collection

The last method has the least footprint on the system. If you add style tags within a content editor you can simply modify the style of the elements on that particular page.

Presentation Title85All Sites MethodFeature StapleCreate a custom site definition that references a custom master page.That master page references the custom CSS file.Modify the Application.Master to reference the custom CSS file for all _layouts pages.

Here is a simple diagram that I created explaining the process of feature stapling CSS for visibility on all sites and system pages.

Presentation Title86Server Files & LocationsExternal Style Sheets1.) CALENDAR.CSS2.) CONTROLS.CSS3.) CORE.CSS (Main)4.) datepicker.css5.) EwrDefault.css6.) HELP.CSS7.) HtmlEditorCustomStyles.css8.) HtmlEditorTableFormats.css9.) MENU.CSS10.) OWSNOCR.CSS11.) PORTAL.CSS (Supporting)12.) RCA.CSS13.) SiteManagerCustomStyles.css

Image Folder Details1.) Size: 2.78 MB2.) Contains: 2,050 Files, 0 FoldersFolder Locations on ServerImagesC:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES

StylesC:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLESThis page just shows the list of CSS files, Locations for the CSS and Images on the server, and image folder sizes.

Presentation Title87ResourcesBranding SharePoint http://brandingsharepoint.comHow to Create a Minimal Master Pagehttp://msdn2.microsoft.com/en-us/library/aa660698.aspxCustomizing SharePoint Sites and Portalshttp://msdn2.microsoft.com/en-us/library/ms916801.aspxCreate a Feature: Master Pages for Site Collections http://www.heathersolomon.com/blog/articles/servermstpageforsitecollect_feature.aspxSharePoint Branding and UI Designhttp://blog.drisgill.comSharePoint Branding & Designhttp://erikswenson.blogspot.com/88