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