This document summarizes an introductory presentation on SharePoint 2013 branding. It discusses composed looks and themes, the design manager, snippets gallery, display templates, device channels, and image renditions. It also announces a SharePoint networking event and provides information about the presenter.

1. Intro toSharePoint
2013 Branding
Presented byThomas Daly

3. http://app.spsdc.org

4. http://lanyrd.com/2015/spsdc/

5. Join us at #SharePint sponsored by K2 at Clyde’s of
Chevy Chase in the RaceCar Bar Downstairs
Why? To network with fellow SharePoint
professionals
What? SharePint!!!
When? 6:00 PM
Where?
RaceCar Bar Downstairs
5441 Wisconsin Ave
Chevy Chase, MD 20815
Thanks to?
K2!

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

7. Topics for
Discussion
 Composed Looks
 Design Manager
 Snippet Gallery
 DisplayTemplates
 Device Channels
 Image Renditions

8. Composed
Looks
(Theming)
 Theming provides a quick and easy way to apply
lightweight branding to a SharePoint 2013 site
 A composed look, or design, is the color palette,
font scheme, background image, and master page
that determine the look and feel of a site.

9. Out of the
Box Looks

10. Look
Selection &
Edit

11. Composed
Look
Anatomy
 Master Page
 Theme Palette
 Font Scheme
 Background Image

12. Master Page
Additional Master Pages
Clean Master Pages
Starter Master Pages

13. Colors &
Fonts
Theme Palette
 XML document
 .spcolor File
 32 Color Palettes
OOTB, 89 Colors slots
 Opacity
 White 70% :
AARRGGBB :
7FFFFFFF
 Required
Font Scheme
 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
 Not Required

14. Background
Image Full screen background
Supports jpg, bmp, png, & gif
Automatic compression & scaling

15. Theme
BuildingTool

16. Theme
BuildingTool
 SharePoint Color PaletteTool by Microsoft

17. DemoComposed
Looks

18. Design
Manager
 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 ASP.net
SharePoint Controls
 Import HTMLTemplates > Convert to Master Page
 Snippet Gallery
 DisplayTemplates
 Export / Import Design Packages
 Publishing based Feature

19. Snippet
Gallery
 For use with .HTML files only
 Contains ready-to-use snippets that you can add to pages
(such as web parts and controls)
 No understanding needed of underlying ASP.NET controls

20. Snippet
Gallery
 Snippet - HTML representation of a SharePoint
component or control such as a navigation bar or a
Web Part
 Quickly add specific SharePoint functionality, such
as search or navigation or device channel panels, to
the HTML file associated with your master page or
page layout
 Provides generated HTML for copy / paste into
HTML design files

21. Demo Design
Gallery

22. Display
Templates
 Templates used in Web Parts that use search technology
 Display templates control which managed properties are shown
in the search results, and how they appear in theWeb Part
 Each display template is made of two files:
 HTML (edit by User & auto converted)
 JavaScript (used by SharePoint)

23. Device
Channels
 Provides method to specify master page based on device
 Uses the device’s user agent string to determine the
channel to serve
 Optional can use cookie based
 Maximum Channels - 10 on premise, 2 SP Online
Not the same as responsive design

24. 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)
Android Jelly Bean Android 4.1.x Jelly
Bean
Windows Phone
OS 7.5
Windows Phone
OS 7.5
FireFox 11.0 Firefox/11.0
Consists of user agent strings

25. Device
Channel
Panel
 Similar to device channel concept
 Specify content on master page or page layout
targeted to a device channel

26. Image
Renditions
Image renditions enable you
to display differently sized
versions of an image on
different pages in a
publishing site, based on
the same source image.
Prerequisites
Publishing Site
BLOB cache
Asset Library
An image can
be displayed in
various sizes or
with different
cropping.
Image renditions
reduce the size of the
file that is downloaded
to the client, which
improves site
performance.

27. Image
Renditions
 Define as many image renditions as needed
 Can be used in publishing pages & display templates

28. Cropping
Image
Renditions
 Crop and preview images
**New rendition created on next image request**

29. Questions?
 Contact Info
 Thomas M Daly
 Website – http://thomasdaly.net
 Twitter - _tomdaly_
 Email
 TDaly@BandRSolutions.com [work]
 Tom.M.Daly@gmail.com [personal]
 LinkedIn

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

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