Creating a compelling look and feel is important for improving the user experience as well as holding the organizational identity. SharePoint 2013 Design Manager make this process much easier and well defined with many capabilities included with it. Design packages, display templates, device channels, themes , image renditions and snippets are the core elements included with Design Manager.

1. Branding and designing
capabilities with the
Design Manager
MALIN DE SILVA
SHAREPOINT SPECIALIST
EXILESOFT, SRI LANKA

2. About me
 Experienced since SharePoint 2007.
 Regular presenter at many forums.
 Winner, Microsoft Imagine Cup (Sri
Lanka).
 Connect:
 LinkedIn/ Facebook: Malin De Silva
 Twitter: Malind19
 Email: malindesilva@live.com

3. Who are we?
DESIGNERS?

4. Agenda
 Design Manager
 Master Pages and Page Layouts
 Branding and Design Capabilities
 Design Packages
 Device Channels
 Display Templates
 Image Renditions
 Snippets
 Themes
 Questions

5. Design Manager
 Many people like SharePoint to look not like SharePoint
 Publishing feature available on SharePoint Server 2013
and Office 365
 Available multiple capabilities
 Treat branding assets as local files

6. Master Pages and Page Layouts
 XML compliant HTML
Prototypes
 Preview and correct errors
 Snippets manager to add
SharePoint functionality
 Don’t touch .master files
Master Pages
 Controls layout of main
content
 Can add snippets
 Associate with a master
page
 Many OOTB templates
Page Layouts

7. Snippets
 HTML representation of a SharePoint component
 Can be added to Master Pages and Page Layouts
 A snippet contains four basic sections:
 Header with starting <div> and <!--CS> tags
 SharePoint markup where snippets are enclosed in <!--MS> start
and <!--ME> end tags
 HTML preview enclosed in <!--PS> start and <!--PE> end tags
 Footer with closing <!--CE> and </div> tags

8. demonstration
DESIGN MANAGER,
MASTER PAGES AND
SNIPPETS

9. Design Packages
 Reduce the complexity of transporting of the designs
 Makes it easier to outsource the visual designs
 Does not take SharePoint default design assets

10. Device Channels
 Multiple devices for browsing
SharePoint
 Need to maintain same url
 Certain components are not mobile
friendly
 Bandwidth considerations browsing
mobile

11. demonstration
DESIGN PACKAGES AND
DEVICE CHANNELS

12. Display Templates
 Customize search layouts and
refiners
 Upload the HTML, it converts
as a JavaScript

13. Image Renditions
 Same source image in different sizes
 Might need different sections when size
changes
 Different url for different size
 Available across all assets in the site

14. Image Renditions - Prerequisites
 A publishing site collection
 Publishing feature activated
 A configured BLOB cache
 An asset library (recommended)

15. Themes
 Easy way to change the look and feel
 Site owner or someone with design access can
customize
 site layout
 color palette
 font scheme
 background image

16. demonstration
IMAGE RENDITIONS
AND THEMES

17. Questions?
Malin De Silva
SharePoint Specialist
Exilesoft
malindesilva@live.com

18. Thank You!
Malin De Silva
SharePoint Specialist
Exilesoft
malindesilva@live.com