Intro to SharePoint 2013 BrandingPresented by Thomas Daly

About Me• SharePoint Consultant• Developer • Branding

• Focused on the UI side of things• Community Involvement• Speaker• NJ SharePoint User Group• SharePoint Saturday NYC organizer• SharePoint Saturday NJ Organizer• My SharePoint Blog• MSDN forums

Some New Branding Features• Composed Looks• New Theming Engine• Design Manager• Support for 3rd party web design tools• Snippet Gallery• Device Channels• Meta Data Navigation • Image Renditions

Composed Looks• 17 Different Variations• Incorporates

Master Page * Font Scheme

Theme * Background Image

* required

Composed Looks

Look Selection & Edit

Master Pages• Seattle

• Oslo

Themes

• Component of Composed Looks• XML document• Semantic names• .spcolor File• 32 Color Palettes OOTB, 89 Colors slots• Opacity [White 70% : AARRGGBB : 7FFFFFFF]

Font Schemes

• Component of Composed Looks• XML document• .spfont File• 8 Font Schemes OOTB• 7 Font Slots – Title, Navigation, Small-Header, Heading,

Large-Heading, Body, Large-Body• Can use web fonts

Background Image• Component of Composed Looks• *.jpg, *.bmp, *.png, *.gif• Automatic compression & scaling

Demo Composed Looks

Theme Building Tool• SharePoint Color Palette Tool

Design Manager• Publishing Feature • Interface and central hub for managing all aspects of branding• Allows standard HTML/CSS coders & designers the ability to

produce Master Pages without knowing all the SharePoint Controls

Working with Master Pages• Using Design Manager• Upload Assets to _catalogs• Convert HTML files to master page• Create a minimal master

Snippet Gallery• Contains ready-to-use components that you can add to pages

(such as web parts and controls)• Automatically generates HTML for copy / paste into HTML

design files• HTML can be used by any web design tool

Demo Custom Master Page

Device Channels• Provides method to specify master page based on device• Uses user agent string of the device to determine the channel• Optional can use cookie based• Max 10 on-premise, 2 SP Online

Device Channels• Provides method to

specify master page based on device• Uses user agent string

of the device to determine the channel• Optional can use

cookie based• Max 10 on-premise, 2

SP Online

Managing Device Channels**Must turn off “Mobile Browser View” in Site Features

Device Inclusion Rules• Generic

• Specific

Device User agent substring(s)

iPhone iPhone

iPad iPad

Android Android

Windows Phone Windows Phone OS

FireFox Firefox

Device User agent substring(s)

iPhone 5.0 iPhone OS 5_0

Windows Surface RT Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0)

Windows Phone OS 7.5 Windows Phone OS 7.5

FireFox 11.0 Firefox/11.0

Device Channel Panel• Specify content on master page or page layout targeted to a

device channel

Demo Device Channels

Managed Meta Data Navigation• Create totally custom navigation• Manage Terms in the Site Collection• Create friendly URLs

Image Renditions• BlobCache must be enabled• Enable you to render a single image in multiple ways• Display different sized versions of an image on different pages

in publishing site based on 1 source image

Image Renditions (cont)

Cropping Image Renditions

Demo Image Renditions

Questions?• Contact Info• Thomas M Daly• Company – http://www.bandrsolutions.com• Website – http://thomasdaly.net• Twitter - _tomdaly_• Email

• TDaly@BandRSolutions.com [work]• Tom.M.Daly@gmail.com [personal]

• LinkedIn

Additional Information• What’s new with SharePoint 2013 site development - MSDN• See All the new 2013 Looks• Design Manager – mapping network folder• User Agent Strings Complete List• What’s My User Agent detector• Practical Example of 2013 Branding Exercise• Intro to the Minimal Download Strategy• Deploying Composed Looks

References• Overview of the SharePoint 2013 page model• Changes from SharePoint 2010 to SharePoint 2013• Plan device channels in SharePoint Server 2013• Overview of design packages in SharePoint Server 2013