The 7th SharePoint Saturday Vietnam has been made possible because of a generous sponsorship
from the following friends
About Me Khoa Quach SharePoint Technologies MCTS, MCP CEO, Cofounder of NIFTIT
Brooklyn, New York based startup We empower users through nifty solutions www.niftit.com
@niftykhoa
@NIFTIT
Branding SharePointJump Start Session
Most SharePoint Intranet portals looks like this…
When they can display…
Tools and technologiesMicrosoft software and beyond.
Tools needed
• For SharePoint 2010:– SharePoint Designer 2010– Visual Studio 2010
• For SharePoint 2013:– SharePoint Designer 2013– Visual Studio 2012 –Web development tool/editor
(Dreamweaver, NotePad++…)
Technologies used
• HTML• CSS• JS• ASPX
• Optional Libraries:– Jquery.js – SPServices.js (Marc D. Anderson -> link)– Bootstrap.js– Angular.js (Jeremy Thake ->link)
Some basicsBranding essentials.
SharePoint Page Model
SharePoint uses templates to define and render the pages that a site displays.• Master pages define the shared framing elements
(AKA the chrome) for all pages in your site.• Page layouts define the layout for a specific class
of pages.• Pages are created from a page layout by authors
who add content to page fields.
RENDERED PAGE =
Master page + page layout + page (content)
Analyzing a design
Elements of the master page
Site Icon Search Bar
Global Navigation
Footer
Elements of the page layout
Page field Controls
Branding Methodologies
Development Flow
A look back: Designing your web site in SharePoint 2010
Comps
CSS, JS, etc.
HTML
Integrate
Ribbon
Master
Pages
Roll-up
control
s
Dreamweaver / Photoshop / etc.
SharePoint Designer
NavigationCusto
m Catalo
g
Catalog Integration
Designing your web site in SharePoint 2013
SharePoint
Dreamweaver / etc.
• Ribbon
• Placeholder
Main
• Minimal Maste
r • Navigation
• Web parts
• Controls
Auto Conve
rt
Snippet
Gallery
Add controls
UploadComps
CSS, JS, etc.
HTML
SharePoint 2010 & SharePoint 2013Key differences
What’s New in SharePoint 2013
No more tables! Design Manager Client Side As far as Authoring goes:• Cross site publishing• Managed navigation• Content Search Web Part
Design Manager
Access/Upload to assets and pages Convert HTML to ASP.NET master page Snippet Gallery Design Packages Device Channels Display templates (No more XSLT)
Mapping network drive
Access HTML directly
Recommend using VS or SP Designer
Snippet Gallery
• Site Icon• Global Navigation• Search Box• Site Title• Edit Mode• Trim Security• Device Channel Panel• Media and Content• OOB Web Parts• Custom ASP.Net Markup
Recommended Methods
Demo time
Recap for Master Page
• Analyze your design and define SP page model elements to be used
• For 2013:– Don’t simply copy and paste your HTML
markup into the master page– Segregate the master page elements
from the page layout(s)– Stick to one methodology: HTML or SP
Search-driven Web Parts and display templates
• Display templates control which managed properties appear in the search results of a search-driven Web Part and the styling and behavior of those search results.– Control display templates: control the
layout of search results and any elements common to all results such as paging, sorting, and other links
– Item display templates: which control how each search result is displayed and repeated for each result
SharePoint Mobile
The right way
Device Channels
• For content negotiations• Use to differentiate master page• Target different content with device
channel panels
Image Rendition
• Same content• Same page URL• Same site collection
Minimal Download Strategy
• New feature in SP 2013• Reduce Page Load time• Only send the difference when users
navigate to new page
Thank you
