Your SlideShare is downloading. ×
0
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Intro to SharePoint 2013 Branding
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Intro to SharePoint 2013 Branding

658

Published on

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

No Downloads
Views
Total Views
658
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 5. Composed Looks
  • 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
  • 11. Demo Composed Looks
  • 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
  • 16. Demo Custom Master Page
  • 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
  • 22. Demo Device Channels
  • 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
  • 25. Image Renditions (cont)
  • 26. Cropping Image Renditions
  • 27. Demo Image Renditions
  • 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. 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

×