Blooming SharePoint Design

SharePointKathy HughesSharePoint Server MVPSydney, AustraliaIcon by http://dryicons.com

AgendaMain SharePoint Branding ComponentsMaster Pages/CSS Combo versus ThemesWhen, How and WhySome Cool TricksDesign Considerations in SharePoint SitesBest Practices around Deploying Customizations

What is SharePoint Branding?Add your identity Colours, themes, pictures, company/people logos, imagesEye candyAdequately surface the primary information It’s about content too and how information is represented!It’s not SharePoint but it’s SharePoint under the hoodLooks great with all the great content management features, etc.Make your site ‘look loved’See http://www.wssdemo.com/Pages/websites.aspx for some great examples of publicly hosted SharePoint sites

Designing MOSS and WSSDifferent in terms of Branding ExperienceWSS (standalone), e.g. http://sitename/default.aspxNo OOB publishing FeaturesDocument management, team collaborationLimited UI customizationCommon in hosted solutions (cheaper option for small businesses and individuals) and intranetsMOSS, e.g. http://sitename/pages/default.aspxPublishing Features and InfrastructureUI Customization experience, inheritanceA more robust solution for internet/public facing sitesEnterprise level features, e.g. business intelligence features, workflows, search

Some Design Tools(scenarios)In-browser tools – content authors, Information WorkersSharePoint Designer – Web designersVisual Studio 2005/2008 with SharePoint ExtensionsIE developer toolbars (client-side discovery)Firefox firebugExpression Suite 3 - DesignersSketchFlow in Blend 3 great takeaway prototyping tool!SilverlightBrowser emulators for x-browser testingCSS / Web page validators (W3C)Web Development Helper – HTTP/S logging/AJAXhttp://projects.nikhilk.net/WebDevHelperFiddler – HTTP/S logging/AJAX

Main SharePoint Design ComponentsMaster pageDerived from ASP.NET 2.0 (supports .NET 3.5)Provides consistency for commonly used objects throughout sites / site collections – logos, menus, footersCSSCloaks the page objects – color, font type, positioningThemes – icing on the cake – a ‘super’ CSSPage Layouts / Content Pages – where the content gets added by the end user – dictates how content gets laid out throughout sites / site collectionsPage Layouts – MOSS only = publishing functionalityContent Pages – MOSS and WSS = Web part/forms pages

Master Pages - ComponentsMaster PageHTMLHTMLContent PlaceholdersCSSContent PlaceholdersJavaScriptHTMLJavaScriptCSS

Page Layout - ComponentsPage LayoutContentControlsHTMLHTMLField ControlsField ControlsWeb Part ZonesWeb Part Zones

Master Page / Page Layout working together

DemoSharePoint Master PagesBrowser and SPDSite and System master pagesContent PlaceholdersCSS LinksTouch on other pages in site/site collectioninconsistencies

Options for Creating Master PagesStart from scratchMinimal master pageBuild on one of the OOB master pagesUse an existing ASP.NET master pageMay end up being more effort involved in doing thisConsider porting .NET skins and CSSIt also depends on how you choose to deploy your customizations...

Deployment ConsiderationsHow do you deploy Master Pages, CSS and Page Layouts?Use SharePoint DesignerUse Site DefinitionsUse Solutions and/or FeaturesIt depends on your scenario and policiesCustomized or Uncustomized Solution? (important)ScalabilitySingle or Multiple Site Collection/s (important)

StorageCustomized and UncustomizedWFE[12 Hive]BrowserContent DatabaseTemplates PageInstance PageRendered PagePhysical MasterInstance Master

Deployment:Customized SolutionsTypically deploy master page/s, CSS and page layout/s via SharePoint DesignerTo root of site collection or member site (master page gallery) – talking publishing siteOnly accessible in same site collection Accessible to all sites in site collection IF saved to root site of collectionStored in content databaseSPD is commonly used in hosted solutions

Deployment:Uncustomized SolutionScenario:Design master page/CSS/Page layouts (design artefacts) in SharePoint DesignerDeveloper bundles design artefacts into Feature / solution (WSP) and deploys to SharePoint serverStored on Web front-end server/s in farmDesign artefacts available to all site collections on server

DemoDeploy a new customized master pageMultiple site collectionsSmartsite and Mossapp

Combat _layouts pages DesignThe application.master pageCANNOT/MUST NOT editCannot see in SPDInconsistent branding experienceA lot of customers don’t like thisEven if it’s an intranet – they want c-o-n-s-i-s-t-e-n-c-yDesigners and developers need to be awareThe regular master pages, i.e. System and Site master pages do NOT effect those pages in the _layouts directory, e.g. Site Settings pagesTwo optionsASP.NET HTTPModule redirect – more dev intensiveCustom theme

Branding Administration PagesAdmin Pages conceptualizedXWFE[12 Hive_layouts]BrowserContent DatabaseApplication PageRendered PageApplication Master

Enter SharePoint Themes(branding consistency ALL pages)A Super form of CSS (CSS and Images)Themes versus Master pages and CSSValue Add, popular for intranetsWhat do they really fix?Quickly SKIN a siteAddress _layouts/application pages issue – consistent look and feel on ALL pages within a siteThemes OOB are applied on a site-by-site basisSee Theme Stapler on CODEPLEXInclude a custom theme throughout an entire site collectionInclude theme as part of a site definition, deploy using FeaturesSee also community Theme manager applicationhttp://community.zevenseas.com/Blogs/Robin/archive/2009/08/03/adding-themes-the-supported-way.aspx

The TEN Themes(Microsoft download)Ten new SharePoint themes released in March 2009Deploy via Visual Studio 2008 using VSeWSS

DemoApply theme – theme walkthroughDeploy a ‘TEN’ using VSeWSSThemes in master pages, publishing sitesThemes on WFE server

Issue with Deploying .NET 3 or 3.5 from VSeWSS VS.NET 2008FYIIf you see a garbled message when attempting to package and deploy the TEN themes in VS.NET 2008 using VSeWSS 1.3 then it’s likely you haven’t fully configured the .NET feature on Windows 2008:Make sure WCF is activated. To do this:Open up Server ManagerSelect Features, then Add Features Expand the .NET Framework 3.0 FeaturesExpand WCF ActivationTick and select HTTP Activation. This will automatically select WCF activation for you. Click Next to Add the feature

Marrying Master Pages and Themes(COMBINED)A couple of gotchas when applying a new or custom master pageEnsure that enabling an OOB or custom theme does not ‘override’ your custom master pageYou’ll need to disable themes from your master page<sharepoint:themerunat="server"><meta name="Microsoft Theme" content=“Themename 1011,default">Theme ‘tags’ will get added to a master page automatically if the master page is ‘customized’, i.e. deployed and saved via SharePoint Designer

DemoManaging themes in master pagesBest practices when integrating themes with a custom master page in SPD

But there’s...MySites(different master page)Different master page againCannot easily be editedEasier to modify a MySite’s CSSReferenceshttp://blogs.msdn.com/sharepoint/archive/2007/03/22/customizing-moss-2007-my-sites-within-the-enterprise.aspx - How tohttp://cks.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=2824 – CodePlexMySite template

Custom Navigation:Custom menu controls prebakedTelerikRADControls for ASP.NET AJAXhttp://demos.telerik.com/aspnet-ajax/menu/examples/overview/defaultcs.aspxAJAX 3.5 in SharePoint Server 2007 details http://www.telerik.com/help/aspnet-ajax/moss-install-aspnet-ajax-35.htmlSave lots of time!!

DemoDefault SharePoint navigation controlManipulationTelerikRADControls for menus

CSS DrilldownSharePoint is rich in CSS files/classesIts main CSS file is the CORE.CSS fileOver 5,000 lines of codeMostly all default CSS files inherit from CORE.CSSYou should NOT customize the OOB CSS filesMost users choose to create a custom CSSAssociate CSS to the site collection/site master page

Customizing CORE.CSSBecomes relative to the current siteWon’t inherit throughout site collection, i.e. Child sites

CSSLInk Control <SharePoint:CssLinkrunat="server"/>The CssLink Web Control renders <LINK> elements in this order: The main CSS file (CORE.CSS) An optional CSS file specified by the control's DefaultUrl property The value of the site definition's AlternateCSS attribute if one exists. If you are using the MOSS publishing features, you can also set this property for a single site by using the Site Master Page Settings page.

CSS Stacking Order – Important!SharePoint will use CSS in order depending on where the CSS is located, e.g. is your CSS bound to your master page or as an Alternate CSSFarm (CORE.CSS)Site DefinitionMaster PageAlternateCSSCustom Theme (1011_65001)Instance Page (CEWP)

Consistent Styles - RTEOption: Use Alternate CSS option to modify RTE custom styles post site deployment

DemoApply an AlternateCSSOverride CSS styles on a single pageCEWP

DIVs or TABLES(Spit the dummy table…)FACTSharePoint (2007) OOB is not CSS compliantWeb parts render as tablesYou can add DIVs to your master pages and page layouts, but it won’t be 100% compliantBUT…you should be working with DIVs, DIVs are the way of the futureTest DIVs especially in older or alternate browsersRemember approximately 20-30% of browser usage is in IE6A number of organizations need to run IE6 due to legacy applications which aren’t yet compliant with the newer, upgraded browsersThree 3rd party options – HiSoft, ARK and CSS adaptors

CSS DiscoveryInternet Explorer 7 Developer Toolbarhttp://www.microsoft.com/DOWNLOADS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en IE8 has built-in CSS discovery/debugging toolsThe following tag needs to beaddedinto the SharePoint master page for support in IE8 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />Firefox FireBug Add-onhttps://addons.mozilla.org/en-US/firefox/addon/1843

DemoBrowser debuggingCSSJavaScript (will deactivate Site Actions)Validation

Browser Trendshttp://marketshare.hitslink.com

Multi-browser TestingFor intranet sitesUsually more control over type of browser/sDepends on company and policiesFor internet sitesNo control over browser typeTest minimally in IE6, IE7, IE8, Firefox 2+Test optionally in Opera, Chrome, othersFantastic online browser emulator available:Erases the problem of installing multi-browsers on your machine/sTest on IE6, 7 and 8Test on multi-browser platformsXenocode - http://www.xenocode.com/browsers/You’ll need to open up access to the internet to use itI use a couple of virtual images in my development environment to do this

Multi-browser Testing ToolXenocode (online emulator)

Cross Browser and RTE OOB RTE doesn’t work as expected in Firefox 3.5If you need to design with Firefox in mind, then consider the 3rd party alternativeTelerik RTECross browser compatibleImportant consideration for internet sites

DemoOOB RTE in Firefox 3.5Enter RADEditor RTE – cross browser compatible

Accessibility-Dynamic Font Size…(font-size:12pt versus font-size:0.75em)

Where to - Dynamic Font Size(accessibility)Be aware that enabling dynamic font size on some CSS elements may throw out custom formatting when font is enlarged within the browser

Handling of Animations(applicable to all Web sites!!)Don’t leave people out of the pictureGive the user an alternative if they don’t have Flash or SilverlightRare these days but there are instances

Add Print Specific StylesIn a New Stylesheet fileLink to master page<LINK rel="stylesheet" type="text/css" href="print.css" media="print">In an Existing Stylesheet file (screen.css)@media print{.stylename{…}}@import url(paged.css) print,projection;Inline on the Page<STYLE type="text/css"> @media print {.stylename{…}}<STYLE>

Techniques UsedSetting Page level defaults*{font-family: Cambria,serif !important;}Four ways to target style settingsBy Class, Tag, or Class/Tag .ms-listdescription{display:none;} body{background:white;} .ms-pagetitleareaframe TD{display:none;}By ID #imnhdr0{display:none;}

Used in Core.CSS@media print{.ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,.ms-rightareacell,.ms-areaseparatorright,.ms-areaseparatorcorner,.ms-titlearealeft,.ms-titlearearight,.ms-searchform,.ms-banner,.ms-buttonheightwidth,.ms-buttonheightwidth2{display:none;}

Section of page controlled by print.css

Accessible PrintingAdd Print Icon to Page Layout. Clicking on the icon will pop up a page minus redundant artifacts, i.e. menus, and a Print dialog

Look ‘n Feel when Editing Page

SPSecurityTrimmedControlLock down access to ‘Site Actions’ or ‘View all Site Content’Security trim control to ‘Admins’ only<Sharepoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl" runat="server" PermissionsString="ManageWeb">……………………………..</SharePoint:SPSecurityTrimmedControl>

DemoSecurity trimming a controlIntranet scenario

Deployment: External Sites and Forms Pageshttp://sitename/_layouts/viewlsts.aspx

Deployment:External Sites and Forms PagesWhen you don’t want anonymous visitors to see ‘behind the scenes’ using http://sitename/pages/_layouts/viewlsts.aspxUse Lockdown Feature to block access to Forms pages in anonymous sites – ViewFormPagesLockDown FeatureDetails - http://blogs.msdn.com/ecm/archive/2007/05/12/anonymous-users-forms-pages-and-the-lockdown-feature.aspxLockdown Feature only available for MOSS sites!Workarounds offering similar functionality for standalone WSS siteshttp://blog.thekid.me.uk/archive/2008/11/20/lockdown-wss-system-pages-on-public-sharepoint-sites.aspx (need to access web.config file)http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/6f8c6dbe-67d0-4dcf-a03d-3da4171649c8/ (can be done using SharePoint designer, suitable for hosted sites)

Deployment:(external) Consider IE7 and IE8 UsersModify master page/s to avoid the ActiveX prompt when users navigate to your SharePoint site/pageshttp://support.microsoft.com/kb/931509<script type="text/javascript" src="/_catalogs/masterpage/custom_activex_override.js"></script>

Content RollupThree compelling Web parts / SolutionsContent Query Web Part (CQWP)Roll-up lists, content types, pages contentDataView Web PartCreate in SharePoint Designer, query, filter, presentationSwiss army knife of Web partsConnected Web Parts Cross list queries and lookups between pages in a site

Thanks to our sponsorsResourcesSharePoint Developer site (includes AdventureWorks Travel Site download)http://www.microsoft.com/click/SharePointDeveloper/html/Default.htmlVisual Studio 2008 Extensions for SharePoint (VSeWSS) 1.3http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=fb9d4b85-da2a-432e-91fb-d505199c49f6Visual Studio 2005 Extensions for SharePointhttp://www.microsoft.com/downloads/details.aspx?FamilyID=3E1DCCCD-1CCA-433A-BB4D-97B96BF7AB63&displaylang=enSharePoint Designer Team Bloghttp://blogs.msdn.com/sharepointdesigner/Microsoft sample SharePoint master pageshttp://www.microsoft.com/downloads/details.aspx?FamilyID=7C05CA44-869A-463B-84D7-57B053711A96&displaylang=enMicrosoft sample SharePoint themes (VS 2008 projects)http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=0a87658f-20b8-4dcc-ad7a-09ad22641f3aSample SharePoint siteshttp://www.wssdemo.comhttp://www.topsharepoint.comSharePoint Magazine good articles on branding and master pageshttp://sharepointmagazine.net/technical/development/incorporating-a-master-page-into-a-sharepoint-site-definition-master-pages-and-sharepoint-part-6-of-6http://sharepointmagazine.net/technical/development/sharepoints-branding-limitations-part-4Implementing a Brand in SharePoint (MSDN)http://msdn.microsoft.com/en-us/library/dd221375.aspx

About MeKathy HughesSharePoint Server MVPSydney, AustraliaSharePoint Consulting, Training, Writer and SpeakerPublished Co-AuthorMicrosoft Press SharePoint Server 2007 Admin CompanionMicrosoft Press SharePoint Server 2007 Best PracticesSharePoint Designer Training curriculum developerwww.kathyhughes.com

Today’s Presentation brought to you by:VMWare Workstation 6.5Windows Server 2008 R2 64bitWindows XP and Windows 7 (client)SQL Server 2008SharePoint Server 2007 SP2Visual Studio 2008Microsoft VSeWSSTelerikRADControls AJAX 3.5SharePoint Designer 2007IE6, IE7, IE8, FirefoxIE7 and IE8 Developer toolbars

Blooming SharePoint Design

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Blooming SharePoint Design (20)

Recently uploaded (20)

Blooming SharePoint Design

Editor's Notes