SharePoint Design manager 2013. What does it mean for you?

4,281 views

Published on

SharePoint Designer no longer has the Design view to help you build your brand in SharePoint. However SharePoint 2013 now offers the new Design Manager to help you convert your Designer’s HTML design into a Master Page. 

In this session, we will cover the features the Design Manager introduces:

HTML to Master Page conversion
Device Channels
Display Templates
Creating Design Packages
This session will help you get ahead by understanding what comes out out-of-the-box with the Design Manager to help you build your brand on SharePoint.

Published in: Technology

SharePoint Design manager 2013. What does it mean for you?

  1. 1. The Design Manager What does it mean for you? with Benjamin Niaulin SharePoint GEEK
  2. 2. Description SharePoint Designer no longer has the Design view to help you build your brand in SharePoint. However SharePoint 2013 now offers the new Design Manager to help you convert your Designer’s HTML design into a Master Page.In this session, we will cover the features the Design Managerintroduces: HTML to Master Page conversion Device Channels Display Templates Creating Design PackagesThis session will help you get ahead by understanding what comesout out-of-the-box with the Design Manager to help you build yourbrand on SharePoint. @bniaulin
  3. 3. Who is this guy? Benjamin NiaulinTrainer Geek @bniaulin Consultant SpeakerBlog:bniaulin.wordpress.com en.share-gate.com
  4. 4. Our Agenda Requirements Convert HTML 1 2 3 2 4 ble ms DevicePro Master Channels Design Page Layouts Package 5 6 7 8 Display Composed Templates Look
  5. 5. Our Agenda 1 2 3 4 ble msPro 5 6 7 8
  6. 6. Situations we faced int Sha rePo esig ner D!!!!<xsl:template!name="dvt_1.noKeyword">!!!!!!!!!<span!class="srch<descrip>on2">!!!!!!!!!!!!!<xsl:choose>!!!!!!!!!!!!!!!!!<xsl:when!test="$IsFixedQuery">!!!!!!!!!!!!!!!!!!!!!<xsl:value<of!select="$NoFixedQuery"!/>!!!!!!!!!!!!!!!!!</xsl:when>!!!!!!!!!!!!!!!!!<xsl:otherwise>!!!!!!!!!!!!!!!!!!!!!<xsl:value<of!select="$NoKeyword"!/>!!!!!!!!!!!!!!!!!</xsl:otherwise>! SLT!!!!!!!!!!!!</xsl:choose>!!!!!!!!!</span>! X!!!!</xsl:template>!!!!!!!!!<!<<!When!empty!result!set!is!returned!from!search!<<>!!!!!<xsl:template!name="dvt_1.empty">!!!!!!!!!<div!class="srch<results">!!!!!!!!!!!!!!!<xsl:if!test="string<length($SrchRSSLink)!&gt;!0!and!$ShowAc>onLinks">!!!!!!!!!!!!!!!!!<a!type="applica>on/rss+xml"!href!="{$SrchRSSLink}"!>tle="{$SrchRSSText}"!id="SRCHRSSL"!class="srch<ext<ac>on<margin">!!!!!!!!!!!!!!!!!!!!!<img!style="ver>cal<align:!middle;"!border="0"!src="/_layouts/images/rss.gif"!alt=""/>!!!!!!!!!!!!!!!!!!!!!<xsl:text!disable<output<escaping="yes">&amp;nbsp;</xsl:text>!!!!!!!!!!!!!!!!!!!!!<xsl:value<of!select="$SrchRSSText"/>!
  7. 7. New Problems!Where is the Design View!?
  8. 8. What will we do?
  9. 9. The Design Manager!
  10. 10. Requirements Requirements 1 2 3 4 ble msPro 5 6 7 8
  11. 11. RequirementsThis means nothing for FoundationAnd it also adds other Web Parts and Features
  12. 12. Work directly from your drive
  13. 13. Demotime to tweet... @bniaulin
  14. 14. HTML to Master Page Requirements Convert HTML 1 2 3 2 4 ble msPro Master 5 6 7 8
  15. 15. Convert HTML to Master Page Like Magic!Step-by-Step Convert HTML to Master Page
  16. 16. Warning! Boring SlideIn the Design ManagerIn SharePoint Designer
  17. 17. Snippets make it happen
  18. 18. Demotime to tweet... @bniaulin
  19. 19. Device Channels Requirements Convert HTML 1 2 3 2 4 ble ms DevicePro Master Channels 5 6 7 8
  20. 20. Device ChannelsChange Master Page basedon user agent stringWill not replace MediaQueries - it’s different
  21. 21. Display Templates Requirements Convert HTML 1 2 3 2 4 ble ms DevicePro Master Channels 5 6 7 8 Display Templates
  22. 22. NO MORE XSLT
  23. 23. it’s everywhere
  24. 24. Do nottouchthe JS file
  25. 25. ControlTemplates
  26. 26. ItemTemplates
  27. 27. Demotime to tweet... @bniaulin
  28. 28. Page Layouts Requirements Convert HTML 1 2 3 2 4 ble ms DevicePro Master Channels Page Layouts 5 6 7 8 Display Templates
  29. 29. Page Layout W ork ith H TMLw dd layout A sni ppets
  30. 30. Design Package Requirements Convert HTML 1 2 3 2 4 ble ms DevicePro Master Channels Design Design Page Layouts Package Package 5 6 7 8 Display Templates
  31. 31. Design Package Creates a WSP for you to deploy Used to be complicated (Unless you had Visual Studio and knew how to use it) Makes it easy to work with third party C T F E E R T P N O
  32. 32. Demotime to tweet... @bniaulin
  33. 33. Composed Look Requirements Convert HTML 1 2 3 2 4 ble ms DevicePro Master Channels Design Design Package Package 5 6 7 8 Display Templates Composed Look
  34. 34. Composed Look
  35. 35. stepbystepComposed Look step by stepUnderstanding and creating Preview Files
  36. 36. Thank you Benjamin NiaulinTrainer Geek @bniaulin Consultant SpeakerBlog:bniaulin.wordpress.com en.share-gate.com

×