1. Benjamin Niaulin Presented at: SharePoint Saturday Utah SharePoint Geek Step into the SharePoint Branding World: Tools and Techniques

2. share-gate.com @bniaulin Description Everyone expects their SharePoint to be beautiful and for you to brand it in no time. However, you are not a web designer and the task is proving more difficult than you anticipated. In this session, you will learn how to start branding a SharePoint Site so that you can get closer to the look and feel of the famous Ferrari.com that consultant talked to you about. In this session, we will look at the tools available and the different ways to brand your SharePoint Site from start to finish. From CSS to HTML passing by Master Pages, at the end of this session you will be able to start branding your SharePoint site and Re-Experience SharePoint. #SPSUtah

3. share-gate.com @bniaulin Who is this guy talking? Benjamin Niaulin Speaker, Trainer, Consultant, SCRUM Master Blog bniaulin.wordpress.com Website share-gate.com nothingbutbranding.comshare-gate.comnothingbutbranding.com Email benjamin.niaulin@share-gate.com TWITTER!: @bniaulin@bniaulin

4. INTRODUCTION

5. share-gate.com @bniaulin

6. share-gate.com @bniaulin

7. share-gate.com @bniaulin

8. THE BRANDING PROCESS ONE STEP AT A TIME

9. share-gate.com @bniaulin Overview and checklist Make sure to have a Project Sponsor Has clear vision of the needs and the goals No one brands to brand… have goals you can measure Site Map architecture (XMind or Mind Manager) Content Architecture What shows up in each part of the site map? Ex: What do we want on the home page? Wireframe Mockup (does not = Wireframe) Build it Test it

10. share-gate.com @bniaulin Wireframe Is used to get an idea of where things will be placed for the mockup of the design to come. Is Not final. Tools: Balsamiq** Visio Photoshop

11. share-gate.com @bniaulin Wireframe https://gsoft.mybalsamiq.com/projects/sha repointbreakfast/

12. share-gate.com @bniaulin Mockup Information and PSD files available for download on technet http://msdn.microsoft.com/en-us/library/gg430141.aspx

13. HOW DO WE GET THERE

14. share-gate.com @bniaulin Site Templates Not all SharePoint sites can use the same branding Differences in: Team Site Publishing Site My Site Search Site Have some common elements but one size does not fit all

15. share-gate.com @bniaulin What we play with Master Pages Page Layouts CSS Web Parts (DVWP, CQWP, CEWP, RSS Feed, etc) jQuery

16. MASTER PAGES

17. share-gate.com @bniaulin What is it? HTML that says where things are on the page Controls flow of the page Defaults visitor to IE8 even if using IE9 Content PlaceHolders are placed to tell SharePoint where to load it’s features Huh? List of content placeholders http://office.microsoft.com/en-us/sharepoint-designer-help/modify-the-default-sharepoint-content- placeholders-HA010165120.aspx http://office.microsoft.com/en-us/sharepoint-designer-help/modify-the-default-sharepoint-content- placeholders-HA010165120.aspx Standardize brand across sites with a single page Loaded first Loads resources like CSS or jQuery Libraries

18. share-gate.com @bniaulin Content Place Holders

19. share-gate.com @bniaulin Can be used to add a footer © Copyright 2012 Benjamin Niaulin – Sharegate Geek Added after dev dashboard **Note the s4-notdlg

20. share-gate.com @bniaulin downloads Heather Solomon’s just the essentials http://blog.sharepointexperience.com/2011/09/09/just-the-essentials- sharepoint-master-pages/#more-29 Starters by Randy Drisgill http://startermasterpages.codeplex.com/

21. PAGE LAYOUTS

22. share-gate.com @bniaulin What is it? Used in Publishing Sites Loaded after Master Page Created from Content Types Allows for site columns to be part of the design Pages created become tagged content as it is authored Have different page designs within the content of the master page in the Main placeholder Very powerful with Intranets/Extranets News, Calendars, Articles, etc..

23. CSS

24. share-gate.com @bniaulin What is it? Add colors and design to the HTML structure HTML uses ID and CLASS to tell which CSS to apply Start learning by overriding CSS Tools: Heather Solomon’s Chart My home page CSS summary Ribbon CSS explained Browser Tools (F12) Branding Series for beginners Learn CSS in 24 hours

25. share-gate.com @bniaulin Tools & Techniques CSS Reset by Kyle Schaeffer SharePoint CSS will override you every step of the way http://caniuse.com/ Make sure your CSS or HTML can be used by your browsers Content Editor Web Part Allows to write CSS to affect the page on which the Web Part has been added. Can be linked to a centralized text file Useful to test CSS Use the Style Library to store your files

26. share-gate.com @bniaulin

27. DEMO LET’S GET OUR HANDS DIRTY

28. share-gate.com @bniaulin Demo

29. Q&A

30. share-gate.com @bniaulin THANK YOU! Follow me on twitter for updates! Tweet me if you need the files (CSS, jQuery used in demo) @BNIAULIN @BNIAULIN Benjamin Niaulin