Date post: | 14-Jan-2015 |
Category: |
Technology |
Upload: | thomas-daly |
View: | 540 times |
Download: | 5 times |
Intro to SharePoint 2013 BrandingPresented by Thomas Daly
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
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
Composed Looks• 17 Different Variations• Incorporates
Master Page * Font Scheme
Theme * Background Image
* required
Composed Looks
Look Selection & Edit
Master Pages• Seattle
• Oslo
Themes
• Component of Composed Looks• XML document• Semantic names• .spcolor File• 32 Color Palettes OOTB, 89 Colors slots• Opacity [White 70% : AARRGGBB : 7FFFFFFF]
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
Background Image• Component of Composed Looks• *.jpg, *.bmp, *.png, *.gif• Automatic compression & scaling
Demo Composed Looks
Theme Building Tool• SharePoint Color Palette Tool
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
Working with Master Pages• Using Design Manager• Upload Assets to _catalogs• Convert HTML files to master page• Create a minimal master
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
Demo Custom Master Page
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
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
Managing Device Channels**Must turn off “Mobile Browser View” in Site Features
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
Device Channel Panel• Specify content on master page or page layout targeted to a
device channel
Demo Device Channels
Managed Meta Data Navigation• Create totally custom navigation• Manage Terms in the Site Collection• Create friendly URLs
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
Image Renditions (cont)
Cropping Image Renditions
Demo Image Renditions
Questions?• Contact Info• Thomas M Daly• Company – http://www.bandrsolutions.com• Website – http://thomasdaly.net• Twitter - _tomdaly_• Email
• [email protected] [work]• [email protected] [personal]
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
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