Intro to Branding by Randy Drisgill and John Ross - SPTechCon


Published on

Technical Class:
Monday, March 4
1:45 PM - 3:00 PM

1 Like
  • Be the first to comment

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

No notes for slide
  • John
  • Randy
  • John
  • JohnHow many Designer vs. Developers vs. Admin?How many have worked with:2007 branding2010 branding
  • John
  • John
  • RandyJohn to tell “stylist story”
  • JohnPublishing enablesAbility to apply master pages and themes to all sub-sites from the Web UIUseful for keeping branding consistent throughout SharePointMore flexible navigation providersIncludes page layouts for page level templating
  • John
  • Randy
  • Randy will the audience for a volunteer who’s never created a theme
  • Randy
  • RandyModern 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
  • Randy
  • Randy
  • 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.
  • JohnThink back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
  • Randy
  • Randy
  • Can start from v4 or night and day as well
  • Can start from v4 or night and day as well
  • Randy
  • Site Design tool took what was in OLSB and brings it into the Ribbon in SharePointNo SPD
  • Use the style sheet tab to add custom CSS
  • Intro to Branding by Randy Drisgill and John Ross - SPTechCon

    1. 1. Intro to Branding SharePoint2010 in the Farm & OnlineRandy Drisgill & John RossSharePoint MVPsRackspace Hosting
    2. 2. Randy Drisgill• MVP SharePoint Server• SP Branding & Design Lead – Rackspace Hosting• Author • Coming Soon- SharePoint 2013 Branding & UI Design • • Professional SharePoint 2010 Branding •• Blog: •• Twitter: •• Orlando, FL
    3. 3. John Ross• MVP SharePoint Server• Custom Solutions Lead – Rackspace• Author • Coming Soon- SharePoint 2013 Branding & UI Design • • Professional SharePoint 2010 Branding •• Blog: •• Twitter: •• Orlando, FL
    4. 4. And the Audience?
    5. 5. Agenda• Important Terms• Approaches to Branding• Page Editing• SharePoint 2010 Themes• Alternate CSS• Master Pages
    6. 6. What does branding mean?
    7. 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. 8. Clarification• The word “design” can often be confused with Software Design (planning for software development)
    9. 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. 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. 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. 12. Low Effort BrandingPage editing and themes
    13. 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
    14. 14. Page Editing Demo
    15. 15. SharePoint Themes
    16. 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. 17. Themes Demo
    18. 18. Medium Effort BrandingCustom CSS
    19. 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. 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. 21. Firebug / IE Dev Tools Demo
    22. 22. Here’s how to order!• SharePoint Designer 2010 •• IE F12 Developer Tools • Built in to IE8/9 – Tools > Developer Tools • IE7 –• Firebug: •
    23. 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
    24. 24. Alternate CSS Demo
    25. 25. Intro to Full Effort BrandingMaster Pages
    26. 26. Master Pages• Unlike themes, Master Pages allow full control over the contents of the page including HTMLAdventure Works 2010 MSDN Article:
    27. 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. 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
    29. 29. OOTB Master Pages
    30. 30. SharePoint Functional Elements
    31. 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. 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: •• VERY Minimal Starter Master Page from Microsoft: •
    33. 33. Starter Master Page
    34. 34. Public Website BrandingWorking with SharePoint Online Public Websites
    35. 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. 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. 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. 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
    39. 39. Full Public Website Branding with Custom CSS • Instead of .s4-XYZ classes you will see a lot of .MS_ and .MSC_ •
    40. 40. Contact InformationStop by the Rackspace booth if you have any questions!• Our Book: • •• Blog: • •• Twitter: • •
    41. 41. Questions