by Khoa Quach
SPS NYC 2014
About Me
Khoa QuachSharePoint Technologies MCTS, MCPD, MCSECo-founder of NIFTITSpecializes in SharePoint
IntegrationApplication DevelopmentBranding SolutionMobile Solution
@niftykhoa@NIFTIT
THIS SESSION IS FOR
Front-End Developers SharePoint 2013 Developers SharePoint 2010 Developers
Differences between SP 2010 & SP 2013Tools and LibrariesBasic SharePoint Branding KnowledgeReview of Design ManagerDemo & Best Practices
Agenda
No More Table MarkupSay Bye to XSLTUse your favorite Web EditorIntroduce Design ManagerClient Side Improvements
Image RenditionMinimal Download StrategiesREST
Methodology
SP 2010 v.s SP 2013
From Branding Development Perspective
Introduction
What most SharePoint Intranet portals look like
Branding Examples
What successful intranet sites look like
A Look BackDesigning your website in SharePoint 2010
Dreamweaver / Photoshop / etc.
SharePoint Designer
Integrate
Ribbon
Master Pages
Navigation
Custom Catalog
Catalog Integration
Roll-up controls
Comps
HTML
Java, HTML,
etc.
New Methodology
Designing your website in SharePoint 2013
Dreamweaver, etc.
Comps
HTML
Java, HTML,
etc.
Auto Convert
Snippet GalleryUpload Add
Control
• Ribbon• Placeholder
Main•Minimal Master
• Navigation •Web parts• Controls
SharePoint
SupportBrowser Supported Not supported
Internet Explorer 11 X
Internet Explorer 10 X
Internet Explorer 9 X
Internet Explorer 8 X
Internet Explorer 7 X
Internet Explorer 6 X
Google Chrome (latest released version)
X
Mozilla Firefox (latest released version)
X
Apple Safari (latest released version)
X
Tools & LibrariesTools you can use to brand your site
Visual Studio 2012/2013SharePoint Designer 2013Web Development Editor/Tool
JQuery +1.7.1Bootstrap.jsAngular.js, Backbone.JS, Ember.JS, Knockout.JS
Optional Libraries
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.
Master
Page
Page Layo
ut
Page (Content)
RENDERE
D PAGE
Analyzing the Design
Elements of
Master Page
Site Icon
Search Bar
Global Navigation
Footer
Elements of
Page Layout & Page
Image Slider
Content Search Web Part
Content from
Content Type
Design Manager
Access/Upload to assets and pagesConvert HTML to ASP.NET master pageSnippet GalleryDesign PackagesDevice ChannelsDisplay templates (No more XSLT)
Access Network Map
Some online possible solutions: Internet Explorer Configuration Answer(click here)The “WebDav” Fix(http://sharepoint.stackexchange.com/questions/71991/office-365-sharepoint-access-denied-error-when-mapping-webdav)HotFix for IE10/Win7(http://support.microsoft.com/kb/2846960)The “Keep me signed in” option (http://support.microsoft.com/kb/2616712)
Snippet Gallery
Site IconGlobal NavigationSearch BoxSite TitleEdit ModeTrim SecurityDevice Channel Panel
Media and ContentOOB Web PartsCustom ASP.Net Markup
Recap: Master Page
Analyze your design and define SP page model elements to be used
For 2013Simply copy and paste your HTML markup into the master page but analyzeSegregate the master page elements from the page layout(s)Stick to one methodology: HTML or SP
Branding Search
Components
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 that is common to all results such as paging, sorting, and other linksItem display templates: which control how each search result is displayed and repeated for each result
Search-driven web parts and display templates
Device Channels
Search-driven web parts and display templates
For content negotiationsUse to differentiate master pageTarget different content with device channel panelsGood to inform older browsers users to update or be aware
Minimal Download Strategy
Search-driven web parts and display templates
New feature in SP 2013Reduce Page Load timeOnly send the difference when users navigate to new page
Let’s connect!@niftykhoa@NIFTIT