Branding with SharePoint 2013

1. Matt Olson Solution Consultant mattolson@deliveron.com @Lynzaddy Branding with SharePoint 2013

2. Thank You! For Sponsoring the Information Worker Track

3. Who is Deliveron? • Technology Consulting Company • Local to Omaha, Founded in 2006 • Microsoft Gold Competency Partner • Nintex Partner • Focus on Microsoft technologies • Experts at project based solution delivery • Consulting = more than just technology… • Deliveron Core values: • Design, Leadership, Vision, Collaboration

4. About matt olson • Swanson Russell • In-House Marketing • .com Retailer • Deliveron • In-House IT • SoluTech/Quilogy/Aspect • Teach at Southeast CC in Lincoln

5. Agenda • Common SharePoint Perceptions • Branding Fundamentals • SharePoint 2013 Branding • Won’t Cover Everything That’s New With 2013 • Start with Simple Customization • Work our way up to Working with Existing Tools

6. SharePoint perceptions IT vs. The Organization

7. Common Marketing Perceptions • It stifles our creativity • It looks too “IT-ish” • Cross-Browser Requirements • …

8. Common IT Perceptions • Lock it down, “They” are going to mess it up • No you can’t install that on my production server • We already “paid” for SharePoint • …

9. Branding in Sharepoint 2010

10. The Ferrari of SharePoint sites

11. What about your designer? • XSLT? • Master Pages? • Page Layouts? • jQuery goes where? • We need to be doing Responsive Design • .EveryTag { … !Important}

12. Level of EFFORT Compared

13. There are SP BRANDED sites • http://www.topsharepoint.com/

14. FUNDAMENTALS • HTML5 • Responsive Design • Basics of SharePoint Branding

15. HTML5 • What is HTML5? • HTML + CSS + JavaScript • Less Dependent on Plugins for Functionality • Audio/Video • Drag and Drop • “Built-In” APIs to Use in Applications • Geolocation • Application Cache to work Offline

16. HTML5 DESKTOP Adoption

17. Responsive Design • What is Responsive Design?

18. Basics of SHAREPOINT BRANDING • Master Pages • Page Layouts

19. BASICS OF SHAREPOINT BRANDING

20. What’s NEW For SHAREPOINT 2013 • Composed Looks • HTML-based Master Pages and Page Layouts • Device Channels • Cross-site Publishing / Catalogs • Content Search Web Parts / Display Templates

21. Cross-site publishing • Create and maintain content in one or more authoring site collections • Publish this content across one or more publishing site collections, by usingSearch Web Parts.

22. Content search web part • Displays search results in a way that you can easily format • Each CSWP is associated with a search query and shows the results for that search query

23. CSWP vs. CQWP • The CSWP returns content that is as fresh as the latest crawl • If you need to display instant content use the Content Query Web Part (CQWP) instead.

24. Display templates • You can use display templates to change how search results appear on the page. • Display templates are snippets of HTML and JavaScript that render the information returned by SharePoint.  (NO MORE XSLT!!!)

25. TIME TO OPEN SHAREPOINT

26. Composed Looks • Were called “Themes” in SharePoint 2010 • Several Out of the Box (more on Office 365) • Ability to Customize These • Create Your Own

27. Composed looks • Allows you to control • Color Palette • Fonts • Background Image • Associated Master Page

28. Composed looks • Demo

29. Composed Looks • Pros • Simple way to brand a site, especially collaboration sites • Cons • OOTB Limited to Oslo or Seattle Master Page • Too limited for sophisticated branding efforts • Can’t change font sizes

30. Composed looks • Questions?

31. DESIGN MANAGER • “Central hub for helping designers create and apply SharePoint Branding” • Allows users to maintain the HTML for page layouts and master pages in any HTML editor • Dreamweaver • Notepad++ • Etc.

32. Design manager • Demo

33. DESIGN MANAGER • Pros • Not everyone is comfortable creating SharePoint brands from a starter master page • Easily convert a simple HTML file into a master page • Facilitates the use of any HTML editor • Cons • You will still need to do some “tweaking” • Complex designs should start from scratch • Only for Publishing Sites *

34. Design Manager • Questions?

35. Device Channels • Display a different Master Page per Device/Browser • Detects keywords from the requesting browser’s User Agent String

36. DEVICE CHANNELS

37. DEVICE CHANNELS • Demo

38. Device channels • Pros • Simple way to change looks based on device • Users can always default, you are just improving the experience when possible • Cons • Maintaining multiple Master Pages • Accommodating orientation • Responsive Design is favored if available

39. Device Channels • Questions?

40. Resources SharePoint 2013 – Branding and User Interface Design

41. Resources Pro SharePoint 2013 Branding and Responsive Web Development

42. REFERENCES • Cross-Site Publishing • http://technet.microsoft.com/en-us/library/jj635883(v=office.15) • http://blogs.technet.com/b/tothesharepoint/archive/2013/02/19/an-introduction-to-cross-site-publishing.aspx • Content Search Web Part • http://msdn.microsoft.com/en-us/library/jj163789.aspx

43. REFERENCES • http://bniaulin.wordpress.com/2012/07/18/sharepoint-2013-design-manager-convert-html-to-master-page/ • http://bniaulin.wordpress.com/2012/07/17/sharepoint-2013-design-manager-device-channels/ • http://www.sptechweb.com/content/article.aspx?articleid=51676&print=true

44. Image Credits • Responsive Design • https://www.corephp.com/images/wordpress/uploads/2013/06/Responsive_Design_Kinetic_Knowledge.jpg • Master Page vs. Page Layouts • http://msdn.microsoft.com/en-us/library/jj191506.aspx • Web Designer • http://www.m3forum.net/m3forum/showthread.php?p=1066084800

45. QUESTIONS? Matt Olson Solution Consultant mattolson@deliveron.com @Lynzaddy