Intro to SharePoint 2013 Branding
Download as PPTX, PDF2 likes1,030 views
This document provides an overview of new branding features in SharePoint 2013 including composed looks, theming engine, design manager, device channels, and image renditions. It discusses how composed looks incorporate master pages, fonts, themes, and background images. Design manager allows HTML/CSS designers to create master pages without extensive coding. Device channels determine the master page based on the user's device, and image renditions render images in multiple sizes. The presentation provides examples and demonstrations of these new branding capabilities in SharePoint 2013.
![Themes
• Component of Composed Looks
• XML document
• Semantic names
• .spcolor File
• 32 Color Palettes OOTB, 89 Colors slots
• Opacity [White 70% : AARRGGBB : 7FFFFFFF]](https://image.slidesharecdn.com/brintrotosp2013branding-130207174056-phpapp01/85/Intro-to-SharePoint-2013-Branding-8-320.jpg)
![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](https://image.slidesharecdn.com/brintrotosp2013branding-130207174056-phpapp01/85/Intro-to-SharePoint-2013-Branding-28-320.jpg)
Intro to SharePoint 2013 Branding
- 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
- 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
- 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
- 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
- 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
- 28. Questions? • Contact Info • Thomas M Daly • Company – http://www.bandrsolutions.com • Website – http://thomasdaly.net • Twitter - _tomdaly_ • Email • [email protected] [work] • [email protected] [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