• Save
Blooming SharePoint Design
Upcoming SlideShare
Loading in...5

Blooming SharePoint Design



This is the presentation I gave at SharePoint Saturday Sydney, Microsoft, on 8th August, 2009.

This is the presentation I gave at SharePoint Saturday Sydney, Microsoft, on 8th August, 2009.



Total Views
Views on SlideShare
Embed Views



4 Embeds 57

http://www.slideshare.net 35
http://sharepointcommunity.de 19
http://intranet 2
http://weblogs.mysharepoint.de 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Show them the publishing Feature with publishing pages, publishing master pages
  • Demo – show them – what are the _layouts pages
  • Cross browser issue with OOB RTE
  • Relative (EM) and absolute (PT)
  • Go create new page based on this page layout and demo print functionality
  • Wrap the Site Actions control – security trim it and lock it down to visibility by selected permission group in MOSS

Blooming SharePoint Design Blooming SharePoint Design Presentation Transcript

  • SharePoint
    Kathy Hughes
    SharePoint Server MVP
    Sydney, Australia
    Icon by http://dryicons.com
  • Agenda
    Main SharePoint Branding Components
    Master Pages/CSS Combo versus Themes
    When, How and Why
    Some Cool Tricks
    Design Considerations in SharePoint Sites
    Best Practices around Deploying Customizations
  • What is SharePoint Branding?
    Add your identity
    Colours, themes, pictures, company/people logos, images
    Eye candy
    Adequately surface the primary information
    It’s about content too and how information is represented!
    It’s not SharePoint but it’s SharePoint under the hood
    Looks 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 WSS
    Different in terms of Branding Experience
    WSS (standalone), e.g. http://sitename/default.aspx
    No OOB publishing Features
    Document management, team collaboration
    Limited UI customization
    Common in hosted solutions (cheaper option for small businesses and individuals) and intranets
    MOSS, e.g. http://sitename/pages/default.aspx
    Publishing Features and Infrastructure
    UI Customization experience, inheritance
    A more robust solution for internet/public facing sites
    Enterprise level features, e.g. business intelligence features, workflows, search
  • Some Design Tools(scenarios)
    In-browser tools – content authors, Information Workers
    SharePoint Designer – Web designers
    Visual Studio 2005/2008 with SharePoint Extensions
    IE developer toolbars (client-side discovery)
    Firefox firebug
    Expression Suite 3 - Designers
    SketchFlow in Blend 3 great takeaway prototyping tool!
    Browser emulators for x-browser testing
    CSS / Web page validators (W3C)
    Web Development Helper – HTTP/S logging/AJAX
    Fiddler – HTTP/S logging/AJAX
  • Main SharePoint Design Components
    Master page
    Derived from ASP.NET 2.0 (supports .NET 3.5)
    Provides consistency for commonly used objects throughout sites / site collections – logos, menus, footers
    Cloaks the page objects – color, font type, positioning
    Themes – icing on the cake – a ‘super’ CSS
    Page Layouts / Content Pages – where the content gets added by the end user – dictates how content gets laid out throughout sites / site collections
    Page Layouts – MOSS only = publishing functionality
    Content Pages – MOSS and WSS = Web part/forms pages
  • Master Pages - Components
    Master Page
    Content Placeholders
    Content Placeholders
  • Page Layout - Components
    Page Layout
    Field Controls
    Field Controls
    Web Part Zones
    Web Part Zones
  • Master Page / Page Layout working together
  • Demo
    SharePoint Master Pages
    Browser and SPD
    Site and System master pages
    Content Placeholders
    CSS Links
    Touch on other pages in site/site collection
  • Options for Creating Master Pages
    Start from scratch
    Minimal master page
    Build on one of the OOB master pages
    Use an existing ASP.NET master page
    May end up being more effort involved in doing this
    Consider porting .NET skins and CSS
    It also depends on how you choose to deploy your customizations...
  • Deployment Considerations
    How do you deploy Master Pages, CSS and Page Layouts?
    Use SharePoint Designer
    Use Site Definitions
    Use Solutions and/or Features
    It depends on your scenario and policies
    Customized or Uncustomized Solution? (important)
    Single or Multiple Site Collection/s (important)
  • StorageCustomized and Uncustomized
    [12 Hive]
    Content Database
    Templates Page
    Instance Page
    Rendered Page
    Physical Master
    Instance Master
  • Deployment:Customized Solutions
    Typically deploy master page/s, CSS and page layout/s via SharePoint Designer
    To root of site collection or member site (master page gallery) – talking publishing site
    Only accessible in same site collection
    Accessible to all sites in site collection IF saved to root site of collection
    Stored in content database
    SPD is commonly used in hosted solutions
  • Deployment:Uncustomized Solution
    Design master page/CSS/Page layouts (design artefacts) in SharePoint Designer
    Developer bundles design artefacts into Feature / solution (WSP) and deploys to SharePoint server
    Stored on Web front-end server/s in farm
    Design artefacts available to all site collections on server
  • Demo
    Deploy a new customized master page
    Multiple site collections
    Smartsite and Mossapp
  • Combat _layouts pages Design
    The application.master page
    Cannot see in SPD
    Inconsistent branding experience
    A lot of customers don’t like this
    Even if it’s an intranet – they want c-o-n-s-i-s-t-e-n-c-y
    Designers and developers need to be aware
    The regular master pages, i.e. System and Site master pages do NOT effect those pages in the _layouts directory, e.g. Site Settings pages
    Two options
    ASP.NET HTTPModule redirect – more dev intensive
    Custom theme
  • Branding Administration PagesAdmin Pages conceptualized
    [12 Hive
    Content Database
    Application Page
    Rendered Page
    Application Master
  • Enter SharePoint Themes(branding consistency ALL pages)
    A Super form of CSS (CSS and Images)
    Themes versus Master pages and CSS
    Value Add, popular for intranets
    What do they really fix?
    Quickly SKIN a site
    Address _layouts/application pages issue – consistent look and feel on ALL pages within a site
    Themes OOB are applied on a site-by-site basis
    See Theme Stapler on CODEPLEX
    Include a custom theme throughout an entire site collection
    Include theme as part of a site definition, deploy using Features
    See also community Theme manager application
  • The TEN Themes(Microsoft download)
    Ten new SharePoint themes released in March 2009
    Deploy via Visual Studio 2008 using VSeWSS
  • The TEN Themese.g.
  • Demo
    Apply theme – theme walkthrough
    Deploy a ‘TEN’ using VSeWSS
    Themes in master pages, publishing sites
    Themes on WFE server
  • Issue with Deploying .NET 3 or 3.5 from VSeWSS VS.NET 2008
    If 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 Manager
    Select Features, then Add Features
    Expand the .NET Framework 3.0 Features
    Expand WCF Activation
    Tick 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 page
    Ensure that enabling an OOB or custom theme does not ‘override’ your custom master page
    You’ll need to disable themes from your master page
    <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
  • Demo
    Managing themes in master pages
    Best practices when integrating themes with a custom master page in SPD
  • But there’s...MySites(different master page)
    Different master page again
    Cannot easily be edited
    Easier to modify a MySite’s CSS
    http://blogs.msdn.com/sharepoint/archive/2007/03/22/customizing-moss-2007-my-sites-within-the-enterprise.aspx - How to
    http://cks.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=2824 – CodePlexMySite template
  • Custom Navigation:Custom menu controls prebaked
    TelerikRADControls for ASP.NET AJAX
    AJAX 3.5 in SharePoint Server 2007 details
    Save lots of time!!
  • Demo
    Default SharePoint navigation control
    TelerikRADControls for menus
  • CSS Drilldown
    SharePoint is rich in CSS files/classes
    Its main CSS file is the CORE.CSS file
    Over 5,000 lines of code
    Mostly all default CSS files inherit from CORE.CSS
    You should NOT customize the OOB CSS files
    Most users choose to create a custom CSS
    Associate CSS to the site collection/site master page
  • Customizing CORE.CSS
    Becomes relative to the current site
    Won’t inherit throughout site collection, i.e. Child sites
  • CSSLInk Control
    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 CSS
    Farm (CORE.CSS)
    Site Definition
    Master Page
    Custom Theme (1011_65001)
    Instance Page (CEWP)
  • Consistent Styles - RTE
    Option: Use Alternate CSS option to modify RTE custom styles post site deployment
  • Demo
    Apply an AlternateCSS
    Override CSS styles on a single page
  • DIVs or TABLES(Spit the dummy table…)
    SharePoint (2007) OOB is not CSS compliant
    Web parts render as tables
    You can add DIVs to your master pages and page layouts, but it won’t be 100% compliant
    BUT…you should be working with DIVs, DIVs are the way of the future
    Test DIVs especially in older or alternate browsers
    Remember approximately 20-30% of browser usage is in IE6
    A number of organizations need to run IE6 due to legacy applications which aren’t yet compliant with the newer, upgraded browsers
    Three 3rd party options – HiSoft, ARK and CSS adaptors
  • CSS Discovery
    Internet Explorer 7 Developer Toolbar
    IE8 has built-in CSS discovery/debugging tools
    The 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-on
  • Demo
    Browser debugging
    JavaScript (will deactivate Site Actions)
  • Browser Trends
  • Multi-browser Testing
    For intranet sites
    Usually more control over type of browser/s
    Depends on company and policies
    For internet sites
    No control over browser type
    Test minimally in IE6, IE7, IE8, Firefox 2+
    Test optionally in Opera, Chrome, others
    Fantastic online browser emulator available:
    Erases the problem of installing multi-browsers on your machine/s
    Test on IE6, 7 and 8
    Test on multi-browser platforms
    Xenocode - http://www.xenocode.com/browsers/
    You’ll need to open up access to the internet to use it
    I 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.5
    If you need to design with Firefox in mind, then consider the 3rd party alternative
    Telerik RTE
    Cross browser compatible
    Important consideration for internet sites
  • Demo
    OOB RTE in Firefox 3.5
    Enter 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 picture
    Give the user an alternative if they don’t have Flash or Silverlight
    Rare these days but there are instances
  • Add Print Specific Styles
    In a New Stylesheet file
    Link 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 Used
    Setting Page level defaults
    *{font-family: Cambria,serif !important;}
    • Four ways to target style settings
    By Class, Tag, or Class/Tag
    .ms-pagetitleareaframe TD{display:none;}
    By ID
  • 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 Printing
    Add 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
  • Which Editing Controls?
  • SPSecurityTrimmedControl
    Lock down access to ‘Site Actions’ or ‘View all Site Content’
    Security trim control to ‘Admins’ only
    <Sharepoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl" runat="server" PermissionsString="ManageWeb">
  • Demo
    Security trimming a control
    Intranet scenario
  • Deployment: External Sites and Forms Pages
  • Deployment:External Sites and Forms Pages
    When you don’t want anonymous visitors to see ‘behind the scenes’ using http://sitename/pages/_layouts/viewlsts.aspx
    Use Lockdown Feature to block access to Forms pages in anonymous sites – ViewFormPagesLockDown Feature
    Details - http://blogs.msdn.com/ecm/archive/2007/05/12/anonymous-users-forms-pages-and-the-lockdown-feature.aspx
    Lockdown Feature only available for MOSS sites!
    Workarounds offering similar functionality for standalone WSS sites
    http://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 Users
    Modify master page/s to avoid the ActiveX prompt when users navigate to your SharePoint site/pages
    <script type="text/javascript" src="/_catalogs/masterpage/custom_activex_override.js"></script>
  • Content Rollup
    Three compelling Web parts / Solutions
    Content Query Web Part (CQWP)
    Roll-up lists, content types, pages content
    DataView Web Part
    Create in SharePoint Designer, query, filter, presentation
    Swiss army knife of Web parts
    Connected Web Parts
    Cross list queries and lookups between pages in a site
  • Connected Web Parts
  • Thanks to our sponsors
    SharePoint Developer site (includes AdventureWorks Travel Site download)
    Visual Studio 2008 Extensions for SharePoint (VSeWSS) 1.3
    Visual Studio 2005 Extensions for SharePoint
    SharePoint Designer Team Blog
    Microsoft sample SharePoint master pages
    Microsoft sample SharePoint themes (VS 2008 projects)
    Sample SharePoint sites
    SharePoint Magazine good articles on branding and master pages
    Implementing a Brand in SharePoint (MSDN)
  • About Me
    Kathy Hughes
    SharePoint Server MVP
    Sydney, Australia
    SharePoint Consulting, Training, Writer and Speaker
    Published Co-Author
    Microsoft Press SharePoint Server 2007 Admin Companion
    Microsoft Press SharePoint Server 2007 Best Practices
    SharePoint Designer Training curriculum developer
  • Today’s Presentation brought to you by:
    VMWare Workstation 6.5
    Windows Server 2008 R2 64bit
    Windows XP and Windows 7 (client)
    SQL Server 2008
    SharePoint Server 2007 SP2
    Visual Studio 2008
    Microsoft VSeWSS
    TelerikRADControls AJAX 3.5
    SharePoint Designer 2007
    IE6, IE7, IE8, Firefox
    IE7 and IE8 Developer toolbars