spc047 approaches to branding sharepoint 2010 full effort custom master pages, page layouts, xslt...
TRANSCRIPT
Creating Your Brand in SharePoint 2013 On-Premises or In the CloudRandy Drisgill & John RossSharePoint MVPsRackspace Services for SharePoint
SPC047
• SP Branding & Design Lead – Rackspace Hosting• Author
• Coming Soon – SharePoint 2013 Branding & UI Design• http://bit.ly/SP2013Branding
• Professional SharePoint 2010 Branding• http://bit.ly/sp2010-brandingbook
• Blog:• http://blog.drisgill.com
• Twitter:• http://twitter.com/Drisgill
• Orlando, FL
Randy Drisgill
• Custom Solutions Lead at Rackspace Hosting• Author
• Coming Soon – SharePoint 2013 Branding & UI Design• http://bit.ly/SP2013Branding
• Professional SharePoint 2010 Branding• http://bit.ly/sp2010-brandingbook
• Blog:• http://johnrossjr.wordpress.com/
• Twitter:• http://twitter.com/johnrossjr
• Orlando, FL
John Ross
• Intro to Branding on premise & in SharePoint Online
• Low Effort Branding• Medium Effort Branding• High Effort Branding• SharePoint Online
What are we going to talk about?
Introduction to Branding
• Started with ranchers branding their cattle• Moved to being a symbol of quality• Now a marketing term which describes the feeling and
emotions elicited by something• Branding is why you use Kleenex® instead of tissue
and how someone can charge $2.00 for a cup of coffee
Branding through the ages
• Website 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, images, etc.
Branding on the web
• Small Business Plan (P Plan)• Designed for up to 25 employees who want:• One site collection for collaboration• One Public web site automatically created at the root
• Enterprise Plans (E Plans)• Full access to create SharePoint 2013 site collections• Can turn on the publishing features• One Public web site collection can be created
What flavor of SharePoint comes with Office 365?
Approaches to BrandingSharePoint 2010
Full EffortCustom Master Pages, Page Layouts, XSLT
Medium EffortCustom CSS
Low EffortPage Editing & Themes
Full EffortCustom Master Pages, Page Layouts, XSLT
Medium EffortCSS
Low EffortPage Editing & Themes
Approaches to Branding SharePoint 2013
Full EffortCustom Master Pages, Page Layouts, Display Templates
Medium EffortDesign Manger for Publishing SitesCustom CSS & Background Images
Low EffortPage Editing & Composed Looks
Low Effort BrandingPage editing and Composed Looks
• Windows 8 style icons• Easy page editing / linking• Add Images, Video, Web
Parts, and App Parts easily
• Team Sites• Text Layouts - Quick prebuilt layouts• Collaboration focused
• Publishing sites• Customizable Page Layouts instead of
Text Layouts• Communication focused
Page Editing is Similar to 2010
Composed Looks
• Similar to Themes in SP2010• Include Master Page, Colors, Fonts,
Background Image, and a preview file• Composed looks are NOT created with
Office client• Colors and fonts are defined in XML Files
• Note: Making your own branding work with Composed Looks will require making a Preview File
Composed Looks
Composed Looks Gallery / Change the Look
Demo: Composed Looks
Randy Drisgill
Medium Effort BrandingWorking with the Design Manager
• Ease of branding & design was a big feature in 2013
• You can tell because the Design Manager is featured in the Site Actions drop down!
• Available in SharePoint Server for sites with Publishing activated
• The hub for many new design features in SharePoint 2013
Design Manager
• SharePoint Designer is no longer the only choice• Still available if you are most comfortable with it• Warning: SharePoint Designer 2013 lacks the Design View
• Map a drive to the Site > Master Page Gallery and edit away
• Use any tool you like to edit code• Dreamweaver• Expression Web• Notepad++ • Hotdog Pro?
Common Design Tools
• Both Master Pages and Page Layouts can now be edited in HTML
• Design Manager can create a new minimal master page or page layout
• Design Manager can also convert existing HTML designs to functioning master pages
• In both cases there is an associated HTML file for editing
• With every save SharePoint updates and regenerates the corresponding master page or page layout
HTML based Master Pages & Page Layouts
• Microsoft provides a set of common Snippets that you can copy / paste into your HTML master page or page layout
• Includes most common SharePoint functionality:• Navigation• Breadcrumbs• Search Box• Title / Logo• Sign In• Web Parts• Etc.
Snippet Gallery
• Design Manager can automagically create design packages• Includes master pages, page layouts, css, images, and more
• Can be easily imported into another site even on different farm
• Creates a simple sandbox solution
Create / Import Design Package
Demo: Design Manager
Randy Drisgill
• CSS used to override default SharePoint branding
• Custom CSS Options:• CSS Applied to a page with Script Editor Web Part or Content Editor
Web Part• Easy to do but only applies to a single page
• CSS Applied to a custom Master Page• Requires some knowledge of master pages and/or Design Manager
• Using the Alternate CSS feature of Publishing sites• Must activate the Publishing features or create a Publishing site
Cascading Style Sheets (CSS)
• CoreV15 has even more lines of CSS• IE F12 Developer Tools and/or Firebug for
Firefox• Highlight elements in the browser and
see… • What style is being applied to the HTML element• How CSS classes are overriding each other
• Immediately see impact of CSS changes
CSS Tools
Demo: CSS Tools
Randy Drisgill
Full Effort BrandingEverything else!
But first... Some Awesome SharePoint BrandingFrom TopSharePoint.com
Planning for Full BrandingVision & Goals Requirements
IA / Taxonomy / Wireframes
Creative Design
Build HTML and CSS
Create SharePoint Branding
Create Rollups /
Custom Dev.
Test & Q/A
Create Solution Package
Deploy to Production
Design Manager Custom Master Page
You have Foundation or non-Publishing site
You have SP Server or O365 Ent.
Need quick nice looking branding
Need highly stylized / complex branding
Existing SharePoint Branding
You need to apply branding to Team / Collab sites with MDS
You are experienced with HTML and CSS
You are experienced with Pre-SP 2013 branding
• Use a Starter Master Page - StarterMasterPages.CodePlex.Com
• Similar to using Design Manager• Create HTML Design• Map network drive and add images and CSS to MPG• Use Development Server not Production
• Add Starter Master Page• Instead of adding snippets, add the controls and move placeholders as
needed• Customize CSS to change the look• Create Page Layouts with SPD2013• Package as WSP with Visual Studio
Custom Master Pages
• Content Search Web Part• Similar to Content Query Web Part but based on SharePoint search• HTML / JavaScript based Display Templates• More flexible, better performance
• Catalogs for products & other “repeatable” types of content
• Edit Templates one time & affect many products:• Category Pages• Detail Pages
WCM Features
Content Search Web Part
SPO BrandingWorking with SharePoint Online Public Site
• Public facing internet site for marketing your business• All Office 365 plans include one Public Website
• Small Business Plans have the Public Website automatically created at the root level of their site
• Enterprise Plans can create one Public Website from the Manage Site Collections menu
• 2013 includes Master Pages and Page Layouts now with Design Manager
• Includes Ribbon based Site tools to easily style your site
SharePoint Online Public Website
Demo: SPO Public Site
Randy Drisgill
• Blog:• http://blog.drisgill.com • http://johnrossjr.wordpress.com/
• Twitter:• http://twitter.com/drisgill • http://twitter.com/johnrossjr
• Email• [email protected]• [email protected]
Contact Info
Evaluate this session now on MySPC using your laptop or mobile device: http://myspc.sharepointconference.com
MySPC
© 2012 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.