Step into the SharePoint branding world, tools and techniques

2,843 views

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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,843
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
109
Comments
0
Likes
4
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 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. #SPSRED@bniaulin share-gate.com
    3. 3. Who is this guy talking? Benjamin Niaulin Speaker, Trainer, Consultant, SCRUM Master Blog bniaulin.wordpress.com Website share-gate.com nothingbutbranding.com Email benjamin.niaulin@share-gate.com TWITTER!: @bniaulin @bniaulin share-gate.com
    4. 4. INTRODUCTION
    5. 5. @bniaulin share-gate.com
    6. 6. @bniaulin share-gate.com
    7. 7. @bniaulin share-gate.com
    8. 8. ONE STEP AT A TIMETHE BRANDING PROCESS
    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 share-gate.com
    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 share-gate.com
    11. 11. Wireframe http://www.sp2010.com 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 share-gate.com
    12. 12. Mockup Information and PSD files available for download on technethttp://msdn.microsoft.com/en-us/library/gg430141.aspx@bniaulin share-gate.com
    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 share-gate.com
    15. 15. What we play with Master Pages Page Layouts CSS Web Parts (DVWP, CQWP, CEWP, RSS Feed, etc) jQuery@bniaulin share-gate.com
    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 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 @bniaulin share-gate.com
    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 share-gate.com
    19. 19. 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/@bniaulin share-gate.com
    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 share-gate.com
    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 share-gate.com
    24. 24. 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@bniaulin share-gate.com
    25. 25. @bniaulin share-gate.com
    26. 26. DEMOLET’S GET OUR HANDS DIRTY
    27. 27. Demo@bniaulin share-gate.com
    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 share-gate.com

    ×