The SharePoint 2013 Design Manager:
From HTML to SharePoint
#SPSBE33
Lieven Iliano, U2U
April 26th, 2014
Agenda
Thanks to our sponsors!
Gold
Silver
Branding on the web
Approaches to Branding SharePoint 2013
Full Effort
Custom Master Pages, Page Layouts,
Display Templates
Medium Effort
Desi...
SharePoint Page Model: Master Page
PlaceHolderMain
SharePoint Page Model: Wiki Pages
Master Page
Wiki Page
SharePoint Page Model: Publishing Pages
Page Layout
Master Page
Publishing Page
SharePoint Page Model
Design Manager
Common Design Tools
http://support.microsoft.com/kb/2616712
Using the Design Manager
Snippet Gallery
HTML Snippet markup
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.Share..."
<!--CS: Start Top Navigation...
Cross-Site Publishing?
Cross-Site Publishing
Cross-site Publishing Pages
Content Search Web Part
Display Templates
Item Page Layout
<div>
<!--CS: [HolidayPriceOW SNMBR] Start Catalog-Item Reuse Snippet-->
<!--SPM:<cc1:CatalogItemReuseWeb...
Device channels
http://useragentstring.com
Device Channels
Device Channels
Design Packages
Design Packages
Thank you!
SharePoint Saturday Belgium 2014  The SharePoint 2013 Design Manager: From HTML to SharePoint
SharePoint Saturday Belgium 2014  The SharePoint 2013 Design Manager: From HTML to SharePoint
SharePoint Saturday Belgium 2014  The SharePoint 2013 Design Manager: From HTML to SharePoint
SharePoint Saturday Belgium 2014  The SharePoint 2013 Design Manager: From HTML to SharePoint
SharePoint Saturday Belgium 2014  The SharePoint 2013 Design Manager: From HTML to SharePoint
SharePoint Saturday Belgium 2014  The SharePoint 2013 Design Manager: From HTML to SharePoint
SharePoint Saturday Belgium 2014  The SharePoint 2013 Design Manager: From HTML to SharePoint
Upcoming SlideShare
Loading in …5
×

SharePoint Saturday Belgium 2014 The SharePoint 2013 Design Manager: From HTML to SharePoint

453 views
379 views

Published on

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
  • Is the 'Fatal Bug' still active in the design manager, or did any of the CU / SP fixed this issue? (http://blog.amtopm.be/2013/07/12/design-manager-fatal-bug/)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
453
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

SharePoint Saturday Belgium 2014 The SharePoint 2013 Design Manager: From HTML to SharePoint

  1. 1. The SharePoint 2013 Design Manager: From HTML to SharePoint #SPSBE33 Lieven Iliano, U2U April 26th, 2014
  2. 2. Agenda
  3. 3. Thanks to our sponsors! Gold Silver
  4. 4. Branding on the web
  5. 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. 6. SharePoint Page Model: Master Page PlaceHolderMain
  7. 7. SharePoint Page Model: Wiki Pages Master Page Wiki Page
  8. 8. SharePoint Page Model: Publishing Pages Page Layout Master Page Publishing Page
  9. 9. SharePoint Page Model
  10. 10. Design Manager
  11. 11. Common Design Tools http://support.microsoft.com/kb/2616712
  12. 12. Using the Design Manager
  13. 13. Snippet Gallery
  14. 14. 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-->
  15. 15. Cross-Site Publishing?
  16. 16. Cross-Site Publishing
  17. 17. Cross-site Publishing Pages
  18. 18. Content Search Web Part
  19. 19. Display Templates
  20. 20. 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="["HolidayPriceOWSNMBR"]" 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>
  21. 21. Device channels http://useragentstring.com
  22. 22. Device Channels
  23. 23. Device Channels
  24. 24. Design Packages
  25. 25. Design Packages
  26. 26. Thank you!

×