Introduction toDesign Managerin SharePoint2013SharePoint Saturday Baltimore, #SPSBMORE
D’arce HessDeveloper, Athlete and MusicianPixelMillBlog: www.thebrandingbutterfly.comWebsite: www.pixelmill.comEmail: dhes...
DevelopingSharePointsolutions since2004SharePointBranding and UISpecialistsDeveloper ofCost effectiveSharePointTemplatesYo...
Requirements Device ChannelsDesign PackageProblemsConvert HTML toMaster Page Composed LooksDisplay TemplatesAgendaPage Lay...
Problems
Requirements
 Only available in SharePoint 2013Server and Enterprise. Requires that Publishing be enabled. Must have your design fil...
DeviceChannels
Uses a separateMasterpage andCSS to target aspecific device. i.e.WindowsPhone, iPhone, iPadand Android devicesThis is NOTR...
Popular Device Inclusion Rules
Converting HTML to Masterpage
Upload your design files ( CSS, Images, JS, jQuery) into theMasterpage Gallery
Time to add in the snippets
Copy and paste intoyour HTMLCustomize
Place snippet in your HTMLTIP: Place comments in your HTML where snippets will gobefore converting to HTML Masterpage
DisplayTemplates
Two kinds of Display TemplatesControl templates determine theoverall structure of how the resultsare presented. Includes ...
Two kinds of display templates:1)Control Display Template2)Item Template
NOTE: The syncing goes in one direction only.Changes to the HTML display template aresynched to the associated .js file. U...
CustomDocumentProperties
ItemTemplate
ControlTemplate@DarceHess
Don’t touchtheJavascript!
PageLayouts
Step 6: Create a Page Layout
Choose the following: Name of your pagelayout Name of theMasterpage it willreference The Content Type
All of your content for your page layout will need to be placed inside<--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” r...
Make sure you check-in and publish your layout in SPD tochange the Approval Status to “Approved”
DesignPackages
Sounds too goodto be true, right?
Gotchas• Brings in all un-ghostedfiles including Seattle &Olso Masterpages.• If you create a designpackage it doesn’t brin...
So, whatdo we do?
Go to Site Settings --> Site Content Types.Find page in the list and adding the following content types back.
Thank you for coming. Please besure to thank all of our sponsors.Without them, this event wouldnot be possible.Thank you!<...
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Intro to Design Manager
Upcoming SlideShare
Loading in...5
×

Intro to Design Manager

563

Published on

Introduction to Design Manager session given at #SPSBMORE

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
563
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to Design Manager"

  1. 1. Introduction toDesign Managerin SharePoint2013SharePoint Saturday Baltimore, #SPSBMORE
  2. 2. D’arce HessDeveloper, Athlete and MusicianPixelMillBlog: www.thebrandingbutterfly.comWebsite: www.pixelmill.comEmail: dhess@pixelmill.comhttp://www.youtube.com/user/DarceHess@darcehesswww.linkedin.com/in/darcehess/
  3. 3. DevelopingSharePointsolutions since2004SharePointBranding and UISpecialistsDeveloper ofCost effectiveSharePointTemplatesYourSharePointBrandingExperts
  4. 4. Requirements Device ChannelsDesign PackageProblemsConvert HTML toMaster Page Composed LooksDisplay TemplatesAgendaPage LayoutsProblems
  5. 5. Problems
  6. 6. Requirements
  7. 7.  Only available in SharePoint 2013Server and Enterprise. Requires that Publishing be enabled. Must have your design files ready togo i.e. HTML, CSS, JS, img files etc. .
  8. 8. DeviceChannels
  9. 9. Uses a separateMasterpage andCSS to target aspecific device. i.e.WindowsPhone, iPhone, iPadand Android devicesThis is NOTResponsiveDesign!
  10. 10. Popular Device Inclusion Rules
  11. 11. Converting HTML to Masterpage
  12. 12. Upload your design files ( CSS, Images, JS, jQuery) into theMasterpage Gallery
  13. 13. Time to add in the snippets
  14. 14. Copy and paste intoyour HTMLCustomize
  15. 15. Place snippet in your HTMLTIP: Place comments in your HTML where snippets will gobefore converting to HTML Masterpage
  16. 16. DisplayTemplates
  17. 17. Two kinds of Display TemplatesControl templates determine theoverall structure of how the resultsare presented. Includes lists, lists withpaging, and slide shows.Item templates determine how eachresult in the set is displayed. Includesimages, text, video, and other items.
  18. 18. Two kinds of display templates:1)Control Display Template2)Item Template
  19. 19. NOTE: The syncing goes in one direction only.Changes to the HTML display template aresynched to the associated .js file. Unlike masterpages and page layouts, when working withdisplay templates you cant choose to work onlywith the .js file by breaking the associationbetween the files. You must enter all the HTMLand JavaScript in the HTML file.
  20. 20. CustomDocumentProperties
  21. 21. ItemTemplate
  22. 22. ControlTemplate@DarceHess
  23. 23. Don’t touchtheJavascript!
  24. 24. PageLayouts
  25. 25. Step 6: Create a Page Layout
  26. 26. Choose the following: Name of your pagelayout Name of theMasterpage it willreference The Content Type
  27. 27. All of your content for your page layout will need to be placed inside<--MS:<asp:ContentPlaceHolder ID=“PlaceHolderMain” runat=“server”
  28. 28. Make sure you check-in and publish your layout in SPD tochange the Approval Status to “Approved”
  29. 29. DesignPackages
  30. 30. Sounds too goodto be true, right?
  31. 31. Gotchas• Brings in all un-ghostedfiles including Seattle &Olso Masterpages.• If you create a designpackage it doesn’t bringover several requiredContent Types.
  32. 32. So, whatdo we do?
  33. 33. Go to Site Settings --> Site Content Types.Find page in the list and adding the following content types back.
  34. 34. Thank you for coming. Please besure to thank all of our sponsors.Without them, this event wouldnot be possible.Thank you!<PS> Be sure to fill out the speaker evaluations </PS>

×