Step into the SharePoint branding world, tools and techniques


Published on

This presentation presents the basics for SharePoint branding tools and techniques. All of it was done during Demonstrations feel free to contact me on twitter @bniaulin for more information or CSS files

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Mention the differencesbetweentemplates (publishing, team, my site). Talk about the elementswecan control for design like master pages page layouts and css. Maybetouchjquery
  • Step into the SharePoint branding world, tools and techniques

    1. 1. Step into the SharePoint Branding World: Tools and Techniques Benjamin NiaulinPresented at: SharePoint Saturday SharePoint GeekRedmond
    2. 2. 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 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. #SPSRED@bniaulin
    3. 3. Who is this guy talking? Benjamin Niaulin Speaker, Trainer, Consultant, SCRUM Master Blog Website Email TWITTER!: @bniaulin @bniaulin
    5. 5. @bniaulin
    6. 6. @bniaulin
    7. 7. @bniaulin
    9. 9. 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 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@bniaulin
    10. 10. 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@bniaulin
    11. 11. Wireframe User Name Site Actions Breadcrumb Section also functions Image Site Title as ribbon I Like It Tags & Notes Home Sub site 1 Sub site 2 Sub site 3 S Quick Launch Header Doc Library List Other Link@bniaulin
    12. 12. Mockup Information and PSD files available for download on technet
    13. 13. HOW DO WE GET THERE
    14. 14. 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@bniaulin
    15. 15. What we play with Master Pages Page Layouts CSS Web Parts (DVWP, CQWP, CEWP, RSS Feed, etc) jQuery@bniaulin
    16. 16. MASTER PAGES
    17. 17. 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 placeholders-HA010165120.aspx Standardize brand across sites with a single page Loaded first Loads resources like CSS or jQuery Libraries @bniaulin
    18. 18. Can be used to add a footer <div class="s4-notdlg" style="clear: both; background- color#E36C09; padding: 10px;">&copy; Copyright 2012 Benjamin Niaulin – Sharegate Geek</div>Added after dev dashboard@bniaulin
    19. 19. downloads Heather Solomon’s just the essentials sharepoint-master-pages/#more-29 Starters by Randy Drisgill
    20. 20. PAGE LAYOUTS
    21. 21. 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.. @bniaulin
    22. 22. CSS
    23. 23. 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 @bniaulin
    24. 24. Tools & Techniques CSS Reset by Kyle Schaeffer SharePoint CSS will override you every step of the way 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@bniaulin
    25. 25. @bniaulin
    27. 27. Demo@bniaulin
    28. 28. Q&A
    29. 29. THANK YOU!Follow me on twitter for updates! Tweet me if youneed the files (CSS, jQuery used in demo)@BNIAULIN Benjamin Niaulin@bniaulin