Whats new in brandingChris GristSharePoint ArchitectBeach Energy
About me SharePoint Architect / Coordinator for Beach Energy InfoPath MVP MCSE SharePoint 2013 MCITP Office 365 MCITP / MCPD for SharePoint 2010 Twitter: @griStdoG Blog: www.cube4.com.au
Session agenda SharePoint Branding Options SharePoint 2013 Branding Low Effort Branding Medium Effort Branding Device Channels Image Renditions
SharePoint Branding Options SharePoint 2003
Edit files on the file system! SharePoint 2007 / SharePoint Online v1
SharePoint Designer 2007 Masterpages, CSS + JS
SharePoint 2010 / SharePoint Online v2 SharePoint Designer 2010 Masterpages, CSS + JS Page Layouts XSLT
SharePoint 2013 Branding Low effort
Site icons Composed looks
Medium effort Design Manager Device Channels
High effort SharePoint masterpages Page Layouts Display Templates
Low effort Site Icon
Low effort Composed Looks
Low effort Composed looks are a new incarnation of themes
NOT created with PowerPoint Include a master page (.master), theme (.spcolor), background
image, font (.spfont) Can be deployed manually or by Visual Studio
.spcolor
..spfont
Composed Looks
demo
Medium effort Design Manager
New to SharePoint 2013 Required publishing infrastructure enabled Use any software (i.e. Dreamweaver) SharePoint branding for everyone
Medium effort Design Manager cont.
Create design in html editor Insert SharePoint snippets (navigation, search, content etc) Map to /_catalogs/masterpage and upload files Convert HTML to master page Check for conversion errors Preview your design Publish and assign to device channels
Design Manager
demo
Device Channels Essentially a list of device user agent strings
Device Channels Default Mobile View must be disabled to use device
channels Apply a different masterpage for each device
Device Channels Preview a page with a certain device channel Mobile targeting using Device Channel Panels
Device Channels
demo
Image Renditions My favourite new feature Generation of image’s on the fly Requires Publishing Requires Blob Cache turned on in web.config (On
Premises) Supported in Office 365 Essentially a list of image sizes Referenced by ID
Image Renditions Selectable by user or locked down using page layout
image control Image can be cropped to show desired content (centre by
default)
Image Renditions
demo
Package the Design Once finished you can package and distribute the design Files are packaged in to a WSP file Re-upload the design to new site collection via design
manager Picks up changed files, device channels, image renditions
etc
Design Packaging
demo
Resources Design Manager
http://msdn.microsoft.com/en-us/library/jj163942(v=office.15) Composed Looks
http://msdn.microsoft.com/en-us/library/jj927174.aspx https://
www.nothingbutsharepoint.com/sites/eusp/Pages/Step-by-Step-Create-a-SharePoint-2013-Composed-Look.aspx
Device Channels http://msdn.microsoft.com/en-us/library/jj862343.aspx
Image Renditions http://msdn.microsoft.com/en-us/library/jj720392.aspx