Branding and designing capabilities with the Design Manager
-
Upload
malin-de-silva -
Category
Technology
-
view
242 -
download
3
Transcript of Branding and designing capabilities with the Design Manager
![Page 1: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/1.jpg)
Branding and designing
capabilities with the
Design ManagerMALIN DE SILVA
SHAREPOINT SPECIALIST
EXILESOFT, SRI LANKA
![Page 2: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/2.jpg)
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: [email protected]
![Page 3: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/3.jpg)
Who are we?
DESIGNERS?
![Page 4: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/4.jpg)
Agenda
Design Manager
Master Pages and Page Layouts
Branding and Design Capabilities
Design Packages
Device Channels
Display Templates
Image Renditions
Snippets
Themes
Questions
![Page 5: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/5.jpg)
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
![Page 6: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/6.jpg)
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
![Page 7: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/7.jpg)
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> startand <!--ME> end tags
HTML preview enclosed in <!--PS> start and <!--PE> end tags
Footer with closing <!--CE> and </div> tags
![Page 8: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/8.jpg)
demonstrationDESIGN MANAGER,
MASTER PAGES AND
SNIPPETS
![Page 9: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/9.jpg)
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
![Page 10: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/10.jpg)
Device Channels
Multiple devices for browsing
SharePoint
Need to maintain same url
Certain components are not mobile
friendly
Bandwidth considerations browsing
mobile
![Page 11: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/11.jpg)
demonstrationDESIGN PACKAGES AND
DEVICE CHANNELS
![Page 12: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/12.jpg)
Display Templates
Customize search layouts and
refiners
Upload the HTML, it converts
as a JavaScript
![Page 13: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/13.jpg)
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
![Page 14: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/14.jpg)
Image Renditions - Prerequisites
A publishing site collection
Publishing feature activated
A configured BLOB cache
An asset library (recommended)
![Page 15: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/15.jpg)
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
![Page 16: Branding and designing capabilities with the Design Manager](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a801cd1a28ab9c4d8b467b/html5/thumbnails/16.jpg)
demonstrationIMAGE RENDITIONS
AND THEMES