18
Branding and designing capabilities with the Design Manager MALIN DE SILVA SHAREPOINT SPECIALIST EXILESOFT, SRI LANKA
| Date post: | 17-Jul-2015 |
| Category: |
Technology |
| Upload: | malin-de-silva |
| View: | 239 times |
| Download: | 3 times |
Branding and designing
capabilities with the
Design ManagerMALIN DE SILVA
SHAREPOINT SPECIALIST
EXILESOFT, SRI LANKA
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]
Who are we?
DESIGNERS?
Agenda
Design Manager
Master Pages and Page Layouts
Branding and Design Capabilities
Design Packages
Device Channels
Display Templates
Image Renditions
Snippets
Themes
Questions
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
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
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
demonstrationDESIGN MANAGER,
MASTER PAGES AND
SNIPPETS
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
Device Channels
Multiple devices for browsing
SharePoint
Need to maintain same url
Certain components are not mobile
friendly
Bandwidth considerations browsing
mobile
demonstrationDESIGN PACKAGES AND
DEVICE CHANNELS
Display Templates
Customize search layouts and
refiners
Upload the HTML, it converts
as a JavaScript
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
Image Renditions - Prerequisites
A publishing site collection
Publishing feature activated
A configured BLOB cache
An asset library (recommended)
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
demonstrationIMAGE RENDITIONS
AND THEMES
