Intro to SharePoint 2013 Branding Presented by Thomas Daly

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.

4/11/2018 Session Info The details can be found through the EventBoard Mobile app – http://app.spsdc.org -> 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.

Lanyrd Only have a web browser? http://lanyrd.com/2015/spsdc/ 4/11/2018 Lanyrd Only have a web browser? http://lanyrd.com/2015/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.

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.

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

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

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.

Out of the Box Looks

Look Selection & Edit

Composed Look Anatomy Master Page Theme Palette Font Scheme Background Image Composed Look Anatomy

Additional Master Pages Clean Master Pages Starter Master Pages

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

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

Theme Building Tool

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

Demo Composed Looks

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

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

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

Demo Design Gallery

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)

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

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

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

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

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

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

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

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

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

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