Intro to SharePoint 2013
Branding
Presented by Thomas Daly
About Me
• SharePoint Consultant
• Developer
• Branding
• Focused on the UI side of things
• Community Involvement
• Speak...
Some New Branding Features
• Composed Looks
• New Theming Engine
• Design Manager
• Support for 3rd party web design tools...
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 s...
Font Schemes
• Component of Composed Looks
• XML document
• .spfont File
• 8 Font Schemes OOTB
• 7 Font Slots – Title, Nav...
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 HTM...
Working with Master Pages
• Using Design Manager
• Upload Assets to _catalogs
• Convert HTML files to master page
• Create...
Snippet Gallery
• Contains ready-to-use components that you can add to pages
(such as web parts and controls)
• Automatica...
Demo Custom
Master Page
Device Channels
• Provides method to specify master page based on device
• Uses user agent string of the device to determi...
Device Channels
• Provides method to
specify master page
based on device
• Uses user agent
string of the device
to determi...
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...
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 UR...
Image Renditions
• BlobCache must be enabled
• Enable you to render a single image in multiple ways
• Display different si...
Image Renditions (cont)
Cropping Image Renditions
Demo Image
Renditions
Questions?
• Contact Info
• Thomas M Daly
• Company – http://www.bandrsolutions.com
• Website – http://thomasdaly.net
• Tw...
Additional Information
• What’s new with SharePoint 2013 site development - MSDN
• See All the new 2013 Looks
• Design Man...
References
• Overview of the SharePoint 2013 page model
• Changes from SharePoint 2010 to SharePoint 2013
• Plan device ch...
Upcoming SlideShare
Loading in …5
×

Intro to SharePoint 2013 Branding

1,105 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,105
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to SharePoint 2013 Branding

  1. 1. Intro to SharePoint 2013 Branding Presented by Thomas Daly
  2. 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. 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. 4. Composed Looks • 17 Different Variations • Incorporates Master Page * Font Scheme Theme * Background Image * required
  5. 5. Composed Looks
  6. 6. Look Selection & Edit
  7. 7. Master Pages • Seattle • Oslo
  8. 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. 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. 10. Background Image • Component of Composed Looks • *.jpg, *.bmp, *.png, *.gif • Automatic compression & scaling
  11. 11. Demo Composed Looks
  12. 12. Theme Building Tool • SharePoint Color Palette Tool
  13. 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. 14. Working with Master Pages • Using Design Manager • Upload Assets to _catalogs • Convert HTML files to master page • Create a minimal master
  15. 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
  16. 16. Demo Custom Master Page
  17. 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. 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. 19. Managing Device Channels **Must turn off “Mobile Browser View” in Site Features
  20. 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. 21. Device Channel Panel • Specify content on master page or page layout targeted to a device channel
  22. 22. Demo Device Channels
  23. 23. Managed Meta Data Navigation • Create totally custom navigation • Manage Terms in the Site Collection • Create friendly URLs
  24. 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
  25. 25. Image Renditions (cont)
  26. 26. Cropping Image Renditions
  27. 27. Demo Image Renditions
  28. 28. 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
  29. 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. 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

×