Branding 101

Customize SharePoint with Kanwal Khipple
Company Information
• New York based SharePoint Consulting Firm
• Services:
  – SharePoint Consulting
  – SharePoint Train...
Speakers
Kanwal Khipple
SharePoint Architect
SharePoint Delivery
kanwal@sharepointdelivery.com
416.873.7799

SharePointBuz...
Agenda
•   What is SharePoint Branding?
•   Why Brand SharePoint?
•   Real World Examples
•   OOB Customization
•   Tools ...
What is SharePoint Branding?
  SharePoint Branding is how you
  successfully apply a Company’s identity to
  a SharePoint ...
What is SharePoint Branding?
      • Images
      • Colors
      • Fonts
      • Logos
      • Styles
What is SharePoint Branding?
• Banner

• Navigation

• Page Layout
Why Brand SharePoint?
• Users don’t want it to look like a
  Microsoft product
• Common look and feel
• Ease of use
“Real World” Examples




   Hawaiian Air Website        http://www.hawaiianair.com
   Case Study: How we did it   http://...
“Real World” Examples




      Energizer   http://www.energizer.com
“Real World” Examples




    Orange Country Public Schools   http://ocps.net
“Real World” Examples




    Paul Mitchell Website http://www.paulmitchell.com
More “Real World” Examples
SharePoint Buzz Showcase         http://is.gd/h1Ez
Ian Morris’ SharePoint Listing   http://is.g...
Do Not Brand Administrative Pages
1. Tuned and tested to ensure reliability and performance
2. Microsoft Updates can remov...
Out of Box Customization
Site Settings -> Look and Feel
   1.   Master Page
   2.   Title, Description, and icon
   3.   N...
Demo
Master Pages / Page Layouts




                  http://is.gd/gLzc
Branding Tools
1.   SharePoint Designer 2007
2.   Visual Studio
3.   Photoshop
4.   Balsamiq Mockups
5.   Notepad
Demo
Themes
Demo
Master Pages
 Three ways to build the custom master pages:

 1. From scratch
     1. Not recommended as SharePoint 2007 ne...
Demo
Branding for Scale
Small to Medium implementations
• Use SPD
   •There's no integrated source control support
   •Changes ...
SharePoint / JQuery
JQuery – javascript library that simplifies client side
  customization

Limitations
1. Data Manipulat...
Demo
Advanced Topics
•   Page layout does not reference core.js   http://is.gd/gve1
•   Tips for Enhancing the Accessibility   ...
Questions?
Kanwal Khipple
SharePoint Architect
SharePoint Delivery
kanwal@sharepointdelivery.com
416.873.7799

SharePointB...
Please complete your evaluations to
     enter in the prize drawing!
Upcoming SlideShare
Loading in...5
×

SharePoint Saturday Boston #SPSaturday 3.4.09

1,962

Published on

My talk on branding slidedeck that I presented at SharePoint Saturday Boston (3.14.9)

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,962
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

SharePoint Saturday Boston #SPSaturday 3.4.09

  1. 1. Branding 101 Customize SharePoint with Kanwal Khipple
  2. 2. Company Information • New York based SharePoint Consulting Firm • Services: – SharePoint Consulting – SharePoint Training – SharePoint Hosting – Business Intelligence – Infrastructure
  3. 3. Speakers Kanwal Khipple SharePoint Architect SharePoint Delivery kanwal@sharepointdelivery.com 416.873.7799 SharePointBuzz.com twitter.com/sharepointbuzz
  4. 4. Agenda • What is SharePoint Branding? • Why Brand SharePoint? • Real World Examples • OOB Customization • Tools for Branding • SharePoint Branding Options • Customization with JQuery • Resources / Links
  5. 5. What is SharePoint Branding? SharePoint Branding is how you successfully apply a Company’s identity to a SharePoint site.
  6. 6. What is SharePoint Branding? • Images • Colors • Fonts • Logos • Styles
  7. 7. What is SharePoint Branding? • Banner • Navigation • Page Layout
  8. 8. Why Brand SharePoint? • Users don’t want it to look like a Microsoft product • Common look and feel • Ease of use
  9. 9. “Real World” Examples Hawaiian Air Website http://www.hawaiianair.com Case Study: How we did it http://is.gd/gvbo
  10. 10. “Real World” Examples Energizer http://www.energizer.com
  11. 11. “Real World” Examples Orange Country Public Schools http://ocps.net
  12. 12. “Real World” Examples Paul Mitchell Website http://www.paulmitchell.com
  13. 13. More “Real World” Examples SharePoint Buzz Showcase http://is.gd/h1Ez Ian Morris’ SharePoint Listing http://is.gd/9v1
  14. 14. Do Not Brand Administrative Pages 1. Tuned and tested to ensure reliability and performance 2. Microsoft Updates can remove customizations 3. No support from Microsoft Support Services
  15. 15. Out of Box Customization Site Settings -> Look and Feel 1. Master Page 2. Title, Description, and icon 3. Navigation 4. Page layouts and site templates 5. Welcome Page 6. Tree view 7. Site theme
  16. 16. Demo
  17. 17. Master Pages / Page Layouts http://is.gd/gLzc
  18. 18. Branding Tools 1. SharePoint Designer 2007 2. Visual Studio 3. Photoshop 4. Balsamiq Mockups 5. Notepad
  19. 19. Demo
  20. 20. Themes
  21. 21. Demo
  22. 22. Master Pages Three ways to build the custom master pages: 1. From scratch 1. Not recommended as SharePoint 2007 needs a few placeholders to be present in the master page or else the pages will not work. 2. From minimal.master 1. Not recommended for a collaboration intranet 2. You want to use OOB features and controls 3. From default.master 1. Recommended as it provides most of the collaborative controls already present on the master page 2. Master page does have a learning curve though
  23. 23. Demo
  24. 24. Branding for Scale Small to Medium implementations • Use SPD •There's no integrated source control support •Changes result in unghosting Medium to Large Implementations • Use VS •Feature Stapling •Combine OOB site definitions with custom Features
  25. 25. SharePoint / JQuery JQuery – javascript library that simplifies client side customization Limitations 1. Data Manipulation 2. Security 3. Client Environment 4. Browser Differences 5. Web Standards 6. Limitations
  26. 26. Demo
  27. 27. Advanced Topics • Page layout does not reference core.js http://is.gd/gve1 • Tips for Enhancing the Accessibility http://is.gd/h116 • Customizing and Branding http://is.gd/h11N • Book: Design and build sites http://is.gd/h1cO Community Projects • Accessibility Kit for SharePoint http://is.gd/3m7m • Community Kit For SharePoint http://is.gd/7Qq • SharePoint learning kit http://is.gd/h0ZP • SharePoint Features http://is.gd/h106 • Podcasting kit for SharePoint http://is.gd/tG7 • SharePoint AJAX toolkit http://is.gd/h10y
  28. 28. Questions? Kanwal Khipple SharePoint Architect SharePoint Delivery kanwal@sharepointdelivery.com 416.873.7799 SharePointBuzz.com twitter.com/sharepointbuzz
  29. 29. Please complete your evaluations to enter in the prize drawing!

×