Intro to Branding SharePoint 2013
Download as PPTX, PDF2 likes637 views
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.
![Questions?
Contact Info
Thomas M Daly
Website – http://thomasdaly.net
Twitter - _tomdaly_
Email
TDaly@BandRSolutions.com [work]
Tom.M.Daly@gmail.com [personal]
LinkedIn](https://image.slidesharecdn.com/introtosp2013brandingv2-150615175643-lva1-app6892/85/Intro-to-Branding-SharePoint-2013-29-320.jpg)
Intro to Branding SharePoint 2013
- 1. Intro toSharePoint 2013 Branding Presented byThomas Daly
- 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
- 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
- 16. Theme BuildingTool SharePoint Color PaletteTool by Microsoft
- 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
- 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 [email protected] [work] [email protected] [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