1. by Khoa Quach

2. About Me Khoa Quach SharePoint Technologies MCTS, MCPD, MCSE Co-founder of NIFTIT Specializes in SharePoint Integration Application Development Branding Solution Mobile Solution @niftykhoa @NIFTIT

3. THIS SESSION IS FOR Front-End Developers SharePoint 2013 Developers SharePoint 2010 Developers

4. Differences between SP 2010 & SP 2013 Tools and Libraries Basic SharePoint Branding Knowledge Review of Design Manager Demo & Best Practices Agenda

5. No More Table Markup Say Bye to XSLT Use your favorite Web Editor Introduce Design Manager Client Side Improvements Image Rendition Minimal Download Strategies REST Methodology SP 2010 v.s SP 2013 From Branding Development Perspective

6. Introduction What most SharePoint Intranet portals look like

7. Branding Examples What successful intranet sites look like

8. A Look Back Designing your website in SharePoint 2010 Dreamweaver / Photoshop / etc. SharePoint Designer Integrate Ribbon Master Pages Navigation Custom Catalog Catalog Integration Roll-up controls CompsHTML Java, HTML, etc.

9. New Methodology Designing your website in SharePoint 2013 Dreamweaver, etc. CompsHTML Java, HTML, etc. Auto Convert Snippet Gallery Upload Add Control Ribbon Placeholder Main Minimal Master Navigation Web parts Controls SharePoint

10. Support BrowserSupportedNot supported Internet Explorer 11X Internet Explorer 10X Internet Explorer 9X Internet Explorer 8X Internet Explorer 7X Internet Explorer 6X Google Chrome (latest released version) X Mozilla Firefox (latest released version) X Apple Safari (latest released version) X

11. Tools & Libraries Tools you can use to brand your site Visual Studio 2012/2013 SharePoint Designer 2013 Web Development Editor/Tool JQuery +1.7.1 Bootstrap.js Angular.js, Backbone.JS, Ember.JS, Knockout.JS Optional Libraries

12. 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 Layout Page (Content) RENDERED PAGE

13. Analyzin g the Design

14. Elements of Master Page Site Icon Search Bar Global Navigation Footer

15. Elements of Page Layout & Page Image Slider Content Search Web Part Content from Content Type

16. 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)

17. Access Network Map Some online possible solutions: Internet Explorer Configuration Answer (click here)here The “WebDav” Fix (http://sharepoint.stackexchange.com/questions/7 1991/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)

18. 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

20. Recap: Master Page Analyze your design and define SP page model elements to be used For 2013 Simply copy and paste your HTML markup into the master page but analyze Segregate the master page elements from the page layout(s) Stick to one methodology: HTML or SP

21. 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 links Item display templates: which control how each search result is displayed and repeated for each result Search-driven web parts and display templates

22. Device Channels Search-driven web parts and display templates For content negotiations Use to differentiate master page Target different content with device channel panels Good to inform older browsers users to update or be aware

23. Minimal Download Strategy Search-driven web parts and display templates New feature in SP 2013 Reduce Page Load time Only send the difference when users navigate to new page

24. Let’s connect! @niftykhoa @NIFTIT