1. Intro to SharePoint 2013 Branding
Presented by Thomas Daly

2. Thanks to our Sponsors!!! 4/11/2018
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. 4/11/2018
Session Info
The details can be found through the EventBoard Mobile app – -> SPSDC
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Lanyrd Only have a web browser? http://lanyrd.com/2015/spsdc/
4/11/2018
Lanyrd
Only have a web browser?
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. Why? To network with fellow SharePoint professionals
4/11/2018
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!
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

6. About Me SharePoint Consultant Focused on the UI side of things
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
About Me

7. Topics for Discussion Composed Looks Design Manager Snippet Gallery
Display Templates
Device Channels
Image Renditions
Topics for Discussion

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
Composed Look Anatomy

12. Additional Master Pages
Clean Master Pages
Starter Master Pages

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

16. SharePoint Color Palette Tool by Microsoft
Theme Building Tool
SharePoint Color Palette Tool by Microsoft

17. Demo Composed 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 HTML Templates > Convert to Master Page
Snippet Gallery
Display Templates
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. 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 the Web Part
Each display template is made of two files:
Display Templates
HTML (edit by User & auto converted)
JavaScript (used by SharePoint)

23. Not the same as responsive design
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
Consists of user agent strings
Generic
Specific
Device Inclusion Rules
Device
User agent substring(s)
iPhone
iPad
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
FireFox 11.0
Firefox/11.0

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

26. Managed Meta Data Navigation
Enables you to design site navigation that is driven by managed metadata & create SEO-friendly URLs that are derived from the managed navigation structure
Manage Terms for the site collection in site settings, NOT Central Admin
Friendly URLs
web address that is easy to read and includes words that describe the content of the web page
Managed Meta Data Navigation

27. An image can be displayed in various sizes or with different cropping.
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.
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.
Prerequisites
Publishing Site
BLOB cache
Asset Library

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

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

30. Contact Info
Thomas M Daly
Website –
Twitter - _tomdaly_
[work]
[personal]
LinkedIn
Questions?

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

32. 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
References