This presentation shows the new features in SharePoint 2013 that help in building/designing websites that are added to bridge the gap between design and development of Websites on SharePoint 2013

1. SharePoint 2013
Building Websites

2. Agenda
• Design Manager
• Master Pages
• Page Layouts
• Device Channels
• Design Packages
• Demo

3. Design Manager
• What ?
o Feature for 2013 that helps to design SharePoint sites (Publishing sites)
• Why ?
o Use existing Web design tools/HTML editors
• How ?
o Upload existing design into Design Manager
o Insert SharePoint “snippets” of functionality
o Provides Preview at each step to help build design

4. Design Manager
*Map network drive to path shown in ‘Upload Design files’ section

5. Master Page : Steps
A master page has the common design elements of the entire websites,
like a template.
The steps for building a master page are:
1. Convert an HTML file into a SharePoint master page
2. Preview the master page and fix any issues
3. Add SharePoint snippets to the master page

6. Master Pages : Conversion
• Design Manager Makes it easier to build Master pages
• Convert HTML file to .master file :
o A .master file with the same name as your HTML file is created in the Master Page Gallery
o All markup required by SharePoint 2013 is added to the .master file so that the master page renders
correctly
o Markup such as comments, <div> tags, snippets, and content placeholders are added to your original
HTML file
o The HTML file and master page are associated
• The syncing goes in one direction only. Changes to the HTML master
page are synced to the associated .master file. Possible to break
association.

7. Master Pages: Preview
• Preview mode is available
• Used to fix errors and warning during & after conversion
• Particular Preview page can be chosen

8. Master Pages: Snippets
• Used to add SharePoint functionality (search, navigation, etc. )
• Snippets added from Snippet Gallery. The Snippet Gallery is a page in
Design Manager where you can:
1. Choose a SharePoint component from those available on the ribbon.
2. Configure the properties for that component.
3. Preview its appearance in the browser.
4. Copy the HTML code snippet to the Clipboard so that you can paste the snippet at the location you
want in the HTML file.

9. Master Page: Markup
• Types of markup in Master Page:
o Document properties
• <mso> tag contains SharePoint metadata
• Ex: <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
o SharePoint namespace registration
• The <SPM> tag ("SharePoint markup") provides a line registering a SharePoint namespace
• Ex: <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c"%>-->
o Comments
• The <CS> and <CE> ("Comment start" and "comment end") tags are ignored during the
conversion process. These tags are to help you parse the lines of markup
• Ex: <!--CS: Start Page Head Contents Snippet--> … <!--CE: End Page Head Contents Snippet-->

10. Master Page: Markup
• Types of markup in Master Page:
o Snippets
• The <MS> and <ME> ("markup start" and "markup end") tags denote the beginning and end of a
SharePoint control or a snippet. A snippet is a SharePoint control that adds SharePoint functionality
to your page
• Ex: <!--MS:<SharePoint:RobotsMetaTag runat="server">-->
<!--ME:</SharePoint:RobotsMetaTag>-->
o Preview blocks
• The <PS> and <PE> ("Preview start" and "preview end") tags surround a section of HTML code that
you shouldn't edit because this section affects only the design-time preview. These preview
sections are a snapshot in time of the SharePoint control that snippet is inserting.
• Ex: <!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%;
padding:8px;
height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either
previewed on or applied to your site.</div>
<!--PE: End of READ-ONLY PREVIEW -->

11. Page Layouts: Steps
Page Layouts help to unify the common business requirements into a a
single type of page, thus creating category of page design.
Steps for creating page layout:
1. Create Page Layout using Design manager
2. Preview the page layout and fix any issues by editing and saving the
HTML version.
3. Add snippets to the page layout (configure, copy, preview, style).

12. Page Layout : Create
• Create in Design Manager
• The primary purpose of a page layout is to contain page fields, and
these page fields must get added when the page layout is created in
Design Manager.
• When you create a page layout:
1. An .aspx file and an HTML file with the same name are created in the Master Page Gallery.
2. All markup required by SharePoint is added to the .aspx file so that the page layout renders
correctly.
3. Other markup such as comments, <div> tags, snippets, and content placeholders are added to the
HTML file.
4. Page fields unique to the content type are added automatically to the page layout. Other page
fields are available to be added from the ribbon in the Snippet Gallery.
5. The HTML file and the .aspx file are associated, so that any later edits to the HTML file are synced to
the .aspx file whenever the HTML file is saved. Other markup such as comments, <div> tags, snippets,
and content placeholders are added to the HTML file.

13. Page Layout : Preview and add
Snippets
Remaining Steps same as Master Page:
2. Preview the page layout and fix any issues by editing and saving the
HTML version.
3. Add snippets to the page layout (configure, copy, preview, style).

14. Design Manager : Device
Channels
What?
Render content, style, images across different devices maintaining the
same URL.
Why?
Content is created one single time but rendered on different devices
with different Master Page, Page Layout, styles, etc.
How?
User agent substring (device browser) is used to determine how or what
to render. Configured in the Device Manager through Device Inclusion rules.

15. Design Manager : Device Channels

16. Device Channel Configuration
• Configuration done through User Agent substrings of devices
• Ex:
Mozilla/5.0 (Linux; U; Android 4.0.3; ko-kr; LG-L160L Build/IML74K)
AppleWebkit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K)
AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
List of all User Agent substrings : http://www.useragentstring.com/pages/Mobile%20Browserlist/

17. Drawbacks and alternatives
• Device Channels have the drawback that it targets user
agent/browser. This biggest drawback of this approach is that a
device can have multiple browsers and new device channels may
need to be added for ne devices.
• Alternatives:
o A more agnostic solution is use Responsive Design.
o A hybrid approach can also be used where primary approach is Responsive
design and legacy devices or browsers can be supported through device
channels.

18. Design Packages
• Helps to import/export Design created in sites
• It is a SharePoint solution package (.wsp file)

19. Design Packages : What is in it ?
Export Location Exported Assets
Document libraries • Master Pages Gallery
• Themes Gallery
• Style Library
• Site Assets Library
Content types, fields • Content types that inherit from the Page
content type
Lists • Design Gallery
• Composed looks
• Device channels
Summary of design package contents and file exportation locations

20. SharePoint Farm
Controlling Master page and page
layouts from App
Provider Hosted
Apps
Master Page
Page layouts
1
3
2
CSOM/REST
• Upload master page
• Upload page layouts
• Set site master page
using CSOM
• Set page layouts
• Set allowed site
templates

21. Updating Branding Afterwards
Reference architecture for branding management
• Implement branding controlling logic to a
reusable component, which can be called from
the app and from other solutions
• Provides reusability and easy maintenance
• Could also be PowerShell scripts

22. Guidance & Samples for Branding
and Provisioning
Remote Provisioning Pattern :
• https://msdn.microsoft.com/en-us/library/office/dn985872.aspx
• http://blogs.msdn.com/b/vesku/archive/2013/08/23/site-provisioning-
techniques-and-remote-provisioning-in-sharepoint-2013.aspx
• https://www.youtube.com/watch?v=Jh7syofhNkg
Samples:
• https://github.com/OfficeDev/PnP/tree/master/Samples/Branding.ApplyBran
ding
• https://github.com/OfficeDev/PnP/tree/master/Samples/Branding.DisplayTe
mplates
• https://github.com/OfficeDev/PnP/tree/master/Samples/Branding.InjectResp
onsiveCSS

23. References
• Overview of Design Manager in SharePoint 2013 (https://msdn.microsoft.com/en-
us/library/office/jj822363.aspx)
• Overview of the SharePoint 2013 page model (https://msdn.microsoft.com/EN-
US/library/office/jj191506.aspx)
• SharePoint 2013 Design Manager design packages
(https://msdn.microsoft.com/EN-US/library/office/jj862342.aspx)
• SharePoint 2013 Design Manager snippets (https://msdn.microsoft.com/EN-
US/library/office/jj822367.aspx)
• SharePoint 2013 Design Manager device channels
(https://msdn.microsoft.com/EN-US/library/office/jj862343.aspx)