SharePoint 2013
Intro to Branding and Design Manager

April Dunnam
Lead SharePoint Consultant/Developer
Introductions
April started her career as an IT Intern at Cherokee Casino. It
was there she found her niche and a passion ...
Agenda
 Theming

 Page Layouts

 Color Palette Tool

 Display Templates

 Design Manager

 Device Channels

 Access...
Theming
What’s New With Theming
• No More PowerPoint Themes
• HTML Based Theming Engine
• Supports HTML5 and CSS3 Standards
• Site...
Theming Options
• Use can use an out-of-the-box them OR
• Create your own with Composed Looks
• Provide Easy Way to Apply ...
Composed Looks
• New to SharePoint 2013
• Components:
• Image URL – Background Image Link
• Font Scheme URL - Defines font...
So How Do I Create A Composed Look?
• Super Easy thanks to the Color Palette Tool
• Free! Brought to you by Microsoft
• Do...
Theming Demo
Design Manager
Design Manager
• New to SharePoint 2013
• Theming is great but can only get you so far
• Use Design Manager if you want to...
Design Manager
• Create complete custom branding through the UI
• Bye Bye SharePoint Designer!
• Design View is no more
• ...
Design Manager Caveats
• Publishing Infrastructure is Required!
• Must treat Branding Assets as Local Files
• Use WebDAV
•...
Site Collection Level Feature

Site Level Feature
Access Design Manager
Demo
Design Manager Step 1
• First Step is to Import your HTML Master Page File
• HTML Master Page should be the Skin Only
• Sh...
HTML Master Page Gotchya’s
• HTML Prototype MUST be XML Compliant!!
• Use online XML Validator to validate
• http://valida...
HTML Master Page Gotchya’s
XML Compliancy error
HTML Master Page
• Some Assembly is Required!
• Add SharePoint Functionality with
Snippet Manager
• Top Navigation Control...
HTML Master Page Formatting Tips
• Plan your Prototype with Design Manager in Mind
• Have containers for each SharePoint E...
HTML Master Page Formatting Tips Cont’d
• And Last But Not Least……
• DO NOT Touch the .Master!!
• SharePoint creates .mast...
Troubleshooting Style Issues

FireBug/IE Developer Tools
Are Your Friend
HTML Master Page
Demo
Page Layouts
• Controls Layout of Main Content
• Many out-of-the-box Layouts
• Assembly Required: Uses Snippets and Snippe...
Page Layout
Demo
Display Templates
• The center of displaying SharePoint 2013 Search
• Replaces XSLT
• Control Templates
• Item Templates

...
Display Templates
Demo
Device Channels
• Interfaces tailored and mapped to specific device(s)
• Based on User Agent
• 10 Device Channels per Site...
Screen shot of creating a device channel
and maping to a master page
Screen shot of creating a device channel
and maping to a master page
Design Packages
• Design Manager will Package your Custom Branding
• Re-Deployable to another Web App or even another Farm...
Design Package
Demo
Publish and Apply Design
• Design Manager will Import and Apply your Design Files
• Must Publish and Approve Design Files ...
Publish and Apply
Demo
SharePoint Design Manager

Branding Made Easy…
…..er
SharePoint 2013
Intro to Branding & Design Manager

Thank You!
@AprilDunnam

SharePointSiren.com

april.dunnam@thrivefast....
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager
Upcoming SlideShare
Loading in …5
×

Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager

16,826 views

Published on

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

No Downloads
Views
Total views
16,826
On SlideShare
0
From Embeds
0
Number of Embeds
14,529
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Slides will be available from blog and twitterIn-depth look a SharePoint 2013 Theming and Design ManagerMeat will be in the demos
  • Will make available on blog and twitter (slideshare.net), so if you remember one of those then you can always review everything we discuss
  • Previous SharePoint Versions had Out of the box Themes and used PowerPoint for Custom ThemesTheming Engine has been overhauled to an HTML Based EngineThere are about 19 Out of the box ThemesTheming is good if you need light customization --- Want to apply your company logo and have SharePoint match your company colors, maybe a custom background
  • Customize background colors for Suite Bar, Quick Launch, Navigation, Web Part Titles, etc
  • SharePoint Themes are created using Composed LooksCustomize background colors for Suite Bar, Quick Launch, Navigation, Web Part Titles, etc.
  • Customize background colors for Suite Bar, Quick Launch, Navigation, Web Part Titles, etc
  • Show Out Of The Box Themes in Site Settings  Change The LookShow customizations to out of the box themesShow Composed Looks in Site Settings  Change The Look
  • Design Manager overhauls how we brand SharePoint. SharePoint Designer is no longer a viable option for creating master pages, page layouts because they removed the design view. This allows non-SharePoint focused web designers to provide you with an HTML/CSS layout that you can upload.
  • Very important to note that when using Design Manager you must treat the Branding Assets as Local Files. If you try to make changes on your desktop and re-upload them to the Master Page Gallery, your changes will not be updated.
  • Make sure you enable these features to use Design Manager
  • Access Design ManagerOpen In Explorer View
  • The first step is to get your HTML Master Page Uploaded and Converted to a SharePoint Master using Design ManagerSometimes a Master Page is all that is needed and you can use out of the box Page Layouts
  • You will run into all sorts of errors if you HTML is not XML Compliant. Save many headaches and run all HTML through an XML Validator before importing. There are several online validators. I like this one the best.
  • Design Manager is like Ikea furniture. You have all of the pieces but you have to put them together.
  • This shows the Snippet Manager for SharePoint 2013.You have your Snippet Controls at the TopYou see a Preview of the Snippet Below and can apply properties to your snippetThe HTML is on the bottom right, this is what you will insert into your HTML File
  • Your life will be much easier if you or your Web Designer creates the HTML with Design Manager in Mind.Clearly mark containers with comments and names that match the SharePoint ElementsExample: <Div ID=“Search”>
  • This is an example of a well formatted HTML Master Page. The divs are clearly marked with comments to show what SharePoint Snippets are intended to be input into them.
  • Very Important to not make changes to the Master Page when using Design Manager. The .Master is dependent on the HTML file. Any changes should be made in the HTML file and those changes are reflected in the .Master.
  • Review a prototypeLook for snippet commentsImportAdd logo snippetMove main placeholder
  • A Page Layout HTML should have the containers for your webpart zones. Just like with the Master Page, make any changes to your HTML not the ASPX. You will need to input snippets for your web part zones
  • Create a page layoutMove to a new directoryMove layout from Master PageReplace area with a WPZ snippet
  • You can customize display templates with Design Manager.
  • Screenshot from http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=1041
  • Screenshot from http://msdn.microsoft.com/en-us/library/jj945138.aspx
  • Show search results pageThen find display templatesCreate new control templateEdit control templateMight be too much
  • Allow for one interface for all desktops and another for most tablets let's say.Only 10 device channels per site collection, but do you really want to maintain 10 MP’s?
  • Screen Shot of the Device Channel Page
  • You don’t have to create a feature in visual studio to deploy your Design Packages….Design Manager will do this for you.It packages everything into a WSP just like Visual Studio would which you can import anywhere.
  • Quickly create a design package
  • When you import a design it doesn’t publish and approve your design files. Although it automatically applies them, only you will be able to see them until you publish and apply.
  • Quickly show how to Publish a Major Version and Approve your Branding Files you imported
  • Thank You!Don’t forget to check out my blog where you can download this presentation or the recording.Easiest way to get to the material I referenced
  • Tulsa Tech Fest - SharePoint 2013: Intro To Branding & Design Manager

    1. 1. SharePoint 2013 Intro to Branding and Design Manager April Dunnam Lead SharePoint Consultant/Developer
    2. 2. Introductions April started her career as an IT Intern at Cherokee Casino. It was there she found her niche and a passion for design & development and began to focus her efforts on asp.net development, c# and SharePoint. She went on to complete dual degrees in MIS and Marketing from Northeastern State University and got a job at a telecommunications firm where she worked her way up to SharePoint Developer. Several years later, April was invited to join the ThriveFast team as senior consultant. April is dedicated to continual self-improvement. She is constantly reading up on the latest technologies & career publications and routinely participating in professional conferences including Tech Fest & SharePoint Saturdays. Leadership: Vice President of the Tulsa SharePoint Interest Group. @AprilDunnam SharePointSiren.com april.dunnam@thrivefast.com
    3. 3. Agenda  Theming  Page Layouts  Color Palette Tool  Display Templates  Design Manager  Device Channels  Accessing Design Manager  Design Packages  Import a Site Design  Publish and Apply
    4. 4. Theming
    5. 5. What’s New With Theming • No More PowerPoint Themes • HTML Based Theming Engine • Supports HTML5 and CSS3 Standards • Site Settings  Change The Look
    6. 6. Theming Options • Use can use an out-of-the-box them OR • Create your own with Composed Looks • Provide Easy Way to Apply Light Branding • Site Settings  Composed Looks
    7. 7. Composed Looks • New to SharePoint 2013 • Components: • Image URL – Background Image Link • Font Scheme URL - Defines font styles for your theme • Theme URL – Building Block – Defines all colors • Master Page URL – Use out-of-the-box or custom master
    8. 8. So How Do I Create A Composed Look? • Super Easy thanks to the Color Palette Tool • Free! Brought to you by Microsoft • Download Here: http://www.microsoft.com/enus/download/details.aspx?id=38182 • GUI Interface to Create SPColor File (Theme URL) • Live Preview of Changes • Save SPColor File and Upload to Theme Gallery • Site Settings  Theme Gallery
    9. 9. Theming Demo
    10. 10. Design Manager
    11. 11. Design Manager • New to SharePoint 2013 • Theming is great but can only get you so far • Use Design Manager if you want to make SharePoint look less like SharePoint • Custom Master Page • Page Layouts • Custom CSS • Javascript
    12. 12. Design Manager • Create complete custom branding through the UI • Bye Bye SharePoint Designer! • Design View is no more • Opens Doors to Designers • Web Designer Creates HTML/CSS • You import into SharePoint and Convert to SharePoint Elements
    13. 13. Design Manager Caveats • Publishing Infrastructure is Required! • Must treat Branding Assets as Local Files • Use WebDAV • Open in Explorer or Map to Network Drive • Must have Full Control or Designer Permissions
    14. 14. Site Collection Level Feature Site Level Feature
    15. 15. Access Design Manager Demo
    16. 16. Design Manager Step 1 • First Step is to Import your HTML Master Page File • HTML Master Page should be the Skin Only • Should Include: • Suite Bar / Welcome Styling • Top Navigation Styling • Left Navigation Styling • Footer Styling • Page Layouts will be imported later
    17. 17. HTML Master Page Gotchya’s • HTML Prototype MUST be XML Compliant!! • Use online XML Validator to validate • http://validator.w3.org/
    18. 18. HTML Master Page Gotchya’s XML Compliancy error
    19. 19. HTML Master Page • Some Assembly is Required! • Add SharePoint Functionality with Snippet Manager • Top Navigation Control • Quick Launch Control • Footer Control • Search Control
    20. 20. HTML Master Page Formatting Tips • Plan your Prototype with Design Manager in Mind • Have containers for each SharePoint Element • Navigation • Search • Site Logo • Site Title • Put comments and have container names match SharePoint element names
    21. 21. HTML Master Page Formatting Tips Cont’d • And Last But Not Least…… • DO NOT Touch the .Master!! • SharePoint creates .master file when HTML file is converted • Make any changes to your HTML file NOT your .Master file • Changes made to HTML files are synced to the .Master
    22. 22. Troubleshooting Style Issues FireBug/IE Developer Tools Are Your Friend
    23. 23. HTML Master Page Demo
    24. 24. Page Layouts • Controls Layout of Main Content • Many out-of-the-box Layouts • Assembly Required: Uses Snippets and Snippet Manager • Associated with a Master Page • Don’t touch the .aspx file! • Make any changes to your html file • Make sure you have containers for web part zones in your page layout
    25. 25. Page Layout Demo
    26. 26. Display Templates • The center of displaying SharePoint 2013 Search • Replaces XSLT • Control Templates • Item Templates • Don’t touch the javascript!
    27. 27. Display Templates Demo
    28. 28. Device Channels • Interfaces tailored and mapped to specific device(s) • Based on User Agent • 10 Device Channels per Site Collection
    29. 29. Screen shot of creating a device channel and maping to a master page
    30. 30. Screen shot of creating a device channel and maping to a master page
    31. 31. Design Packages • Design Manager will Package your Custom Branding • Re-Deployable to another Web App or even another Farm • Creates a WSP • To Import your Design Package: • Site Settings  Design Manager  Import a Design Package
    32. 32. Design Package Demo
    33. 33. Publish and Apply Design • Design Manager will Import and Apply your Design Files • Must Publish and Approve Design Files after added • Use Design Manager or Master Page Gallery to do this
    34. 34. Publish and Apply Demo
    35. 35. SharePoint Design Manager Branding Made Easy… …..er
    36. 36. SharePoint 2013 Intro to Branding & Design Manager Thank You! @AprilDunnam SharePointSiren.com april.dunnam@thrivefast.com

    ×