1. The SharePoint 2013 Design Manager:
From HTML to SharePoint
#SPSBE33
Lieven Iliano, U2U
April 26th, 2014

2. Agenda

3. Thanks to our sponsors!
Gold
Silver

4. Branding on the web

5. Approaches to Branding SharePoint 2013
Full Effort
Custom Master Pages, Page Layouts,
Display Templates
Medium Effort
Design Manager for Publishing Sites
Custom CSS & Background Images
Low Effort
Page Editing & Composed Looks

6. SharePoint Page Model: Master Page
PlaceHolderMain

7. SharePoint Page Model: Wiki Pages
Master Page
Wiki Page

8. SharePoint Page Model: Publishing Pages
Page Layout
Master Page
Publishing Page

9. SharePoint Page Model

10. Design Manager

11. Common Design Tools
http://support.microsoft.com/kb/2616712

12. Using the Design Manager

14. Snippet Gallery

16. HTML Snippet markup
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.Share..."
<!--CS: Start Top Navigation Snippet--> …
<!--CE: End Top Navigation Snippet-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" >-->
<!--ME:</asp:SiteMapDataSource>-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
preview sections are a snapshot in time of the SharePoint control that snippet is inserting.
!--PE: End of READ-ONLY PREVIEW-->

18. Cross-Site Publishing?

19. Cross-Site Publishing

20. Cross-site Publishing Pages

21. Content Search Web Part

22. Display Templates

24. Item Page Layout
<div>
<!--CS: [HolidayPriceOW SNMBR] Start Catalog-Item Reuse Snippet-->
<!--SPM:<cc1:CatalogItemReuseWebPart runat="server" UseServerSideRenderFormat="True" ResultType="" NumberOfItems="1"
UseSharedDataProvider="True" OverwriteResultPath="False" ResultsPerPage="1"
SelectedPropertiesJson="[&#34;HolidayPriceOWSNMBR&#34;]"
Title="$Resources:Microsoft.Office.Server.Search,CBSItem_Title;"
Description="$Resources:Microsoft.Office.Server.Search,CBSItem_Description;"
MissingAssembly="Cannot import this Web Part." ID="g_c5a7f657_adfe_4246_86d0_821f1cdf714c"
__WebPartId="{c5a7f657-adfe-4246-86d0-821f1cdf714c}">-->
<!--SPM:<RenderFormat>-->
<!--SPM:<Format Type="Number"> -->
<!--SPM:<DecimalPlaces>-->
2
<!--SPM:</DecimalPlaces>-->
<!--SPM:<Currency>-->
False
<!--SPM:</Currency>-->
<!--SPM:</Format> -->
<!--SPM:</RenderFormat>-->
<!--SPM:</cc1:CatalogItemReuseWebPart>-->
<!--CE:End Catalog-Item Reuse Snippet-->
</div>

26. Device channels
http://useragentstring.com

27. Device Channels

28. Device Channels

30. Design Packages

31. Design Packages

33. Thank you!