1. Intro to SharePoint 2013
Branding
Presented by Thomas Daly

2. 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

3. 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

4. Composed Looks
• 17 Different Variations
• Incorporates
Master Page * Font Scheme
Theme * Background Image
* required

5. Composed Looks

6. Look Selection & Edit

7. Master Pages
• Seattle
• Oslo

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

9. 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

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

11. Demo Composed
Looks

12. Theme Building Tool
• SharePoint Color Palette Tool

13. 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

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

15. 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

16. Demo Custom
Master Page

17. 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

18. 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

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

20. 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

21. Device Channel Panel
• Specify content on master page or page layout targeted to a
device channel

22. Demo Device
Channels

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

24. 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

25. Image Renditions (cont)

26. Cropping Image Renditions

27. Demo Image
Renditions

28. 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

29. 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

30. 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