Intro to Branding by Randy Drisgill and John Ross - SPTechCon
Download as PPTX, PDF1 like980 views
This document provides an overview of branding SharePoint 2010 sites both within a farm and online. It introduces the presenters Randy Drisgill and John Ross, both SharePoint MVPs from Rackspace Hosting. The agenda covers important branding terms, approaches to branding including page editing, themes, CSS and master pages. It demonstrates low, medium and high effort branding techniques for both on-premise and online SharePoint sites.
Intro to Branding by Randy Drisgill and John Ross - SPTechCon
- 1. Intro to Branding SharePoint 2010 in the Farm & Online Randy Drisgill & John Ross SharePoint MVPs Rackspace Hosting
- 2. Randy Drisgill • MVP SharePoint Server • SP Branding & Design Lead – Rackspace Hosting • Author • Coming Soon- SharePoint 2013 Branding & UI Design • http://bit.ly/SP2013Branding • Professional SharePoint 2010 Branding • http://bit.ly/sp2010-brandingbook • Blog: • http://blog.drisgill.com • Twitter: • http://twitter.com/Drisgill • Orlando, FL
- 3. John Ross • MVP SharePoint Server • Custom Solutions Lead – Rackspace • Author • Coming Soon- SharePoint 2013 Branding & UI Design • http://bit.ly/SP2013Branding • Professional SharePoint 2010 Branding • http://bit.ly/sp2010-brandingbook • Blog: • http://johnrossjr.wordpress.com • Twitter: • http://twitter.com/johnrossjr • Orlando, FL
- 5. Agenda • Important Terms • Approaches to Branding • Page Editing • SharePoint 2010 Themes • Alternate CSS • Master Pages
- 6. What does branding mean?
- 7. What does branding mean? • Branding: • The act of building a specific image or identity that people recognize in relation to your company • Website Branding: • The colors, fonts, logos, and supporting graphics that make up the general look and feel of a corporate website. • Branding for SharePoint: • Master pages, page layouts, CSS, web parts, XSLT, images, etc.
- 8. Clarification • The word “design” can often be confused with Software Design (planning for software development)
- 9. Vocabulary Lesson • SharePoint Foundation 2010 is the free version of SharePoint • Focused on collaboration with documents and light editing of web pages • SharePoint Server 2010 is the licensed version of SharePoint • Includes among other capabilities the Publishing Feature • Much better platform for creating a strongly branded web site
- 10. Office 365 / SharePoint Online flavors • Designed for up to 25 employees who want: • One site collection for collaboration • Public web site • Full access to create SharePoint 2010 site collections • Can turn on the publishing features • Public web site
- 11. Approaches to Branding Full Effort Sandbox Solutions for SharePoint Online - Custom Master Pages, Page Layouts, CSS, XSLT Medium Effort Custom CSS & Images w/ Alternate CSS Low Effort Page Editing & Themes
- 12. Low Effort Branding Page editing and themes
- 13. Wiki Sites vs. Publishing Sites • Team Sites • Easy page editing / linking • Text Layouts = Quick prebuilt page layouts • Add images and Web Parts easily • Collaboration focused • Publishing Sites (365 Enterprise Plans can activate) • Page Layouts instead of Text Layouts • Ability to change master page easily • Publishing Workflows, caching, etc. • Communication focused
- 16. SharePoint 2010 Themes • Based on THMX files created by Office 2007 and above • Define 12 colors and 2 fonts that can be applied throughout SharePoint including your own custom CSS • Does not include custom images or any HTML formatting • Replaces existing colors and fonts in CSS rather than overlapping multiple CSS files • Publishing allows theme colors to be adjusted in the browser!
- 17. Themes Demo
- 18. Medium Effort Branding Custom CSS
- 19. Why is CSS important with SharePoint? • CSS used to override default SharePoint branding • OOTB SharePoint uses a LOT of CSS • Primary CoreV4.css file has over 7000 lines of CSS • Besides the theming specific comments how many descriptive comments are in CoreV4.css?
- 20. Tools for Working with SharePoint & CSS • SharePoint Designer 2010 • No easier way to interact with a SharePoint site • Be careful in Production… you might ONLY have production with SP Online • Best to start with a local server or VM • SPD access can be restricted by Admins • CSS Tools • IE Developer Tools (F12 Developer Tools) and/or Firebug for Firefox • Highlight elements in the browser and see… • What style is being applied to the HTML element • How CSS classes are overriding each other • Immediately see impact of CSS changes
- 21. Firebug / IE Dev Tools Demo
- 22. Here’s how to order! • SharePoint Designer 2010 • www.microsoft.com/spd • IE F12 Developer Tools • Built in to IE8/9 – Tools > Developer Tools • IE7 – http://bit.ly/iedevtoolbar • Firebug: • http://getfirebug.com/
- 23. Cascading Style Sheets Options • CSS Applied to a page with Content Editor Web Part • Easy to do but only applies to a single page • CSS Applied to a custom master page • Requires some knowledge of master pages and sandbox solutions • Using the Alternate CSS feature of Publishing sites • Easy to do but requires • Activate the Publishing features or create a Publishing site • O365 Enterprise
- 25. Intro to Full Effort Branding Master Pages
- 26. Master Pages • Unlike themes, Master Pages allow full control over the contents of the page including HTML Adventure Works 2010 MSDN Article: http://bit.ly/Real-World-Branding
- 27. Master Pages • Master pages allow you to change the look and feel for an entire site simply by making changes to a single file • Can’t have a SharePoint site without one – even if you use a theme!
- 28. Out of the Box Master Pages • Default.master – Used with Visual Upgrade, very similar to the 2007 default.master • Minimal.master – Used on sites that have their own navigation on need more space (like the Search Center) • V4.master – The default master page for most of SharePoint 2010 including Foundation and Team Sites • NightandDay.master – Included only with Publishing sites. Similar to Blueband.master in 2007, but with a different look and feel. • Minimal.master is not the same as minimal master pages were in SharePoint 2007
- 31. Creating New Master Pages • One option is to copy one of the OOTB master pages • V4.master • NightAndDay.master • Good for when you only need to make minor changes • 665 lines of code… how many comments? • Ribbon takes up 1/3 of the code
- 32. Using a Starter Master Page • The 2007 term “Minimal Master Page” has been replaced with “Starter Master Page” • My SharePoint Server 2010 and SharePoint Foundation 2010 Starter Master Pages: • startermasterpages.codeplex.com • VERY Minimal Starter Master Page from Microsoft: • code.msdn.microsoft.com/odcSP14StarterMaster
- 34. Public Website Branding Working with SharePoint Online Public Websites
- 35. What is a SharePoint Online Public Website • Public facing internet site for marketing your business • All Office 365 plans include one Public Website • Small Business Plans have the Public Website automatically created at the root level of their site • Enterprise Plans can create one Public Website from the Manage Site Collections menu • Includes web based Site Design Tool to easily style your site • Public Sites are an evolution of Office Live Small Business
- 36. Branding Public Websites • SP Online Public Sites are NOT branded with master pages and themes like traditional SharePoint sites • They live in SharePoint and have a simple master page but you should not edit it • SharePoint Designer is NOT supported for editing SP Online Public Websites • Use the Site Design Tool to change the layout & design of the site
- 37. Gadgets • Stand-alone dynamic HTML “applications” that can be added to pages in Public Websites • Include Maps, Slide Show, Stocks, Weather, and more • There is currently no functionality for adding your own gadgets
- 38. Full Public Website Branding with Custom CSS • Use IE Developer Tools and Firebug to identify CSS • Add background images to the site • Override CSS http://eslindustriesdemo.sharepoint.com
- 39. Full Public Website Branding with Custom CSS • Instead of .s4-XYZ classes you will see a lot of .MS_ and .MSC_ • http://coderightdesign.com/Documents/CSS_Guide_OLSB.pdf
- 40. Contact Information • Our Book: • http://bit.ly/SP2013Branding • http://bit.ly/sp2010-brandingbook • Blog: • http://blog.drisgill.com • http://johnrossjr.wordpress.com • Twitter: • http://twitter.com/drisgill • http://twitter.com/johnrossjr Stop by the Rackspace booth if you have any questions!
- 41. Questions
- 42. 4 RACKSPACE® HOSTING | 5000 WALZEM ROAD | SAN ANTONIO, TX 78218 US SALES: 1-800-961-2888 | US SUPPORT: 1-800-961-4454 | WWW.RACKSPACE.COM RACKSPACE® HOSTING | © RACKSPACE US, INC. | RACKSPACE® AND FANATICAL SUPPORT® ARE SERVICE MARKS OF RACKSPACE US, INC. REGISTERED IN TH E UNITED STATES AND OTHER COUNTRIES. | WWW.RACKSPACE.COM
Editor's Notes
- #2: John
- #3: Randy
- #4: John
- #5: John How many Designer vs. Developers vs. Admin? How many have worked with: 2007 branding 2010 branding
- #7: 6
- #8: 7
- #9: Randy John to tell “stylist story”
- #10: John Publishing enables Ability to apply master pages and themes to all sub-sites from the Web UI Useful for keeping branding consistent throughout SharePoint More flexible navigation providers Includes page layouts for page level templating
- #14: John
- #15: Randy
- #18: Randy will the audience for a volunteer who’s never created a theme
- #19: Randy
- #20: Randy Modern web design standards dictate that whenever possible tables are used only for data, not for page layout. In SharePoint 2007, because we are working with HTML written for IE5.5 we often find that table based branding is more efficient
- #22: Randy
- #23: Randy
- #27: Think back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
- #28: John Think back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
- #29: Randy
- #30: Randy
- #32: Can start from v4 or night and day as well
- #33: Can start from v4 or night and day as well
- #35: Randy
- #36: Site Design tool took what was in OLSB and brings it into the Ribbon in SharePoint No SPD
- #37: Use the style sheet tab to add custom CSS