SharePoint Branding - Change Your Look
•Télécharger en tant que PPT, PDF•
1 j'aime•2,518 vues
An introduction to SharePoint 2010 Branding, by Eric Overfield, starting with an review of Branding and why we Brand SharePoint. After an overview of branding principles of SharePoint we dive into three demos on how to apply branding to SharePoint 2010 from themes to alternative CSS finally to a full custom brand. We finish with a list of tips and tricks including a demo of the key branding tool, Firebug for Firefox.
Recommandé
Recommandé
Contenu connexe
Plus de Eric Overfield
Plus de Eric Overfield (7)
Dernier
Dernier (20)
SharePoint Branding - Change Your Look
- 2. Your SharePoint Branding Experts SharePoint Branding: Change Your Look Eric Overfield SharePoint Branding Evangelist PixelMill
- 3. Agenda • Introduction and Session Overview • What is Branding? • Branding Options in SharePoint • How Can We Apply Branding to SharePoint?
- 4. Introduction – Eric Overfield, PixelMill • Founder and SharePoint Branding Lead, PixelMill • Working with SharePoint since 2004 • Web Designer since 1998 • Located in Davis, CA • Blog: http://blog.pixelmill.com/ericoverfield
- 5. What Do We Mean By Branding? • Historically the practice of burning your mark (or brand) onto your products • One’s “Brand” became a trust mark • Brand recognition under many conditions • As in Print, TV, Radio, and Web
- 6. Branding and the Web • Act of Applying one’s brand to the web, i.e. Corporate Design Guidelines • Provide unified experience between web and non-web interaction • Fancy word for Web Design • i.e. The look and feel of the site, fonts, colors, layouts, images, etc
- 8. Why do we Brand SharePoint?
- 9. Does this Reflect Your Identity?
- 10. How About Now?
- 11. What Can Branding Accomplish? • Identifies your site • Consistent experience with other web presence • Drive end user Adoption • Improve the User Experience • Make it Personal • SharePoint can be Intimidating • Chance to Improve Features • Distinction between Indifference and Excitement
- 12. Branding and SharePoint • SharePoint provides specific ways to apply a Brand • Logo • Themes • Custom CSS • Master Pages • Page Layouts • Javascript (jQuery) • and more
- 13. Elements of a SharePoint Page • Master Page • General Site Elements • Content • Page layouts vs Wiki layout • Theme • Custom CSS, Images, JS, etc
- 14. How Do We Get Started? • Determine your goals and Expectations • Build your team • Make a plan: More features = More time (Normally) • Based around your goals and plan (the more experienced the team, usually faster)
- 15. Gather Your Site Requirements • Talk to End Users – What do they need to do with this site? • What kind of Site Template(s) will be used? • Collaboration, Publishing, Search, etc? • How much effort do you want to put into this?
- 16. Multiple Ways to Brand SharePoint • How you are going to Brand depends on • Foundation or Server? • Site Template(s) you plan to use • Time requirements and effort
- 17. Minimal Effort • Many useful OOTB options • No coding or SharePoint Designer required • Change the Logo • Apply a Theme • Build a custom Theme • Built in the Browser or in an Office product like PowerPoint
- 19. Intermediate Effort • Semi-custom site with some web experience required • Requires some understanding of html and css • Use alternative css to apply custom CSS styles • Use SPD to make simple changes to a Master Page
- 21. Maximum Effort • For site that require unique layout • Other options will not cut it • Must have experience in html, css, SharePoint Designer, even JavaScript • Experience with Asp.NET a plus as well • Will include custom Master Page(s), custom CSS and custom Page Layouts • Good for: • Public facing sites • Heavily styled Intranet / Extranet sites
- 23. Limits? • SharePoint can look like, and do, anything • Really • www.topsharepoint.com
- 26. www.lutron.com
- 27. Tips and Tricks • Use a starter Master Page • startermasterpage.codeplex.com (by Randy Drisgill) • blog.sharepointexperience.com/2011/09/09/just-the-essentials- sharepoint-master-pages/ (by Heather Solomon) • jumpstartbranding.codeplex.com (by Eric Overfield) • CSS Reference Chart (by Heather Solomon) • sharepointexperience.com/csschart/csschart.html
- 28. Tips and Tricks • Books, get them, reference them • Professional SharePoint Branding and User Interface Design Wrox Programmer to Programmer by Randy Drisgill et al • Practical SharePoint 2010 Branding and Customization aPress by Erik Swenson • Pro SharePoint Designer 2010 aPress by Steve Wright • Make Your Own Versions of Files! Do not Overwrite Hive Files • IE Developer Toolbar and Firebug for Firefox
- 29. The Must Have Tool for Branding Demo
- 30. Summary • Branding SharePoint can be done • Branding SharePoint should be done • Level of customization based on requirements, time and experience • More experience if helpful, but resources exist • Before you get started, have a plan
- 31. What We Didn’t Discuss • Requirements gathering process • Building a mockup of design first • Prototyping design in html without SharePoint • In-depth look at the difference between Site Templates • Branding My Sites or Search • Taxonomy and Governance, yes, they can effect Branding
- 32. Your SharePoint Branding Experts Thank You Eric Overfield blog.pixelmill.com/ericoverfield eoverfield@pixelmill.com
- 34. Join us right after the event at Firehouse Grill for a free drink, kindly provided by AvePoint and Rackspace! 1765 East Bayshore Road East Palo Alto, CA 94303 (Next to Nordstrom Rack). Drinks to be provided by…..
Notes de l'éditeur
- Introduction slide
- This is an introduction session to Branding SharePoint 2010 Assume some knowledge of SharePoint Show you different techniques of working with SP branding including using the browser and SPD Working with SPD 2010, IE 9 and FF. Going to be providing examples for those with no html or web editing experience to those with web design experience but not with Sharepoint Not using Visual Studio because I find it more difficult to debug a design. Also, I am recording this and will make it available, along with this PP Presentation on my blog
- I have geared this talk towards what I would like to have been shown years ago when I started branding sp, after an intro of branding and SP I am going to dive into 4 demos that will show you how Branding is done. Heavy on Demos Prebuilt most of the elements in demos to save time. I do not have the time in this session to show how to build more advanced solutions, rather show you how SP working with Branding, where files go, and tips on how to find what you are trying to change.
- We all know what branding is, even if we don’t know the word. Branding in Business is applying your corporate identity to your product or service. Often the realm of the Ad agency who may help develop an organization’s identity with the logo, colors, slogan, etc, i.e. your “image”.
- Provide unified experience between web and non-web interaction “Important point!”
- Constantly Reinforcing their Brand even through the web.
- Let’s look at what we have OOTB.
- Available on Server only But do either of these reflect you?
- Prettiest pictures wins the funding (bosses love things that shine and sparkle) Jacob Nielson Your SP Site preceived in context of ever evolving external websites and apps yours users utilize every day. When going from the web to your SP site, not feel like went from Driving 2012 porsche carrera GT to 95 Geo Mento with faulty brakes Do not use GT!
- ! Can be as simple as inserting a logo, or changing colors to full blown custom UI, layout and design. Minimal effort, Intermediate Effort, Maximum effort Site Behavior (JS) GET TO in 10 MINUTES!
- what Kind of Site Template – To meet your branding requirements different site templates will effect how you end up branding Collaboration = team, Publishing -> CMS Talk to Marketing
- Going to be using many prebuilt elements for these demos to keep moving forward. Upload a logo, apply a theme, then create and modify a theme using PP, upload and apply PP -> Design -> Colors (Fonts) – Create new (set colors and fonts) -> Save as (.thmx) Common Mistake, when applying a theme to an entire collection, didn’t check the box to update all sub sites Logo Size Use safe web fonts like arial, New roman, Verdana, Tahoma, Comic Sans, etc GET TO IN 20 MINUTES!
- Turn Theme off Apply an alternative css file (move logo, change background, make nav different? Didn’t check in and publish changes so that everyone can see. Forgot to publish master page so you can see it in list. Script files GET TO IN 30 MINUTES!
- Site with unique layout – May need to match public website? Common mistake – custom MP, remove content place holders think you do not need them. You do. I will offer solutions to this later.
- Show site with custom master page (show custom master page), custom page layouts (show) and apply master page in SPD Common Mistake is breaking functionality of Ribbon, wide lists, etcs May be trivial to extremely complex to fix to match your branding requirements GET TO IN 40 MINUTES
- GET TO IN 50 MINUTES
- Site example 1
- Site example 2
- Site example 3
- Tech net and other boards
- Show how to find nav element and change padding on the fly before coding in change GET TO IN 55 MINUTES
- Time and experience can be replaced with $$$ GET TO IN 60 MINUTES
- Thank You! Don’t forget to check out my blog where you can download this presentation or the recording. Easiest way to get to the material I referenced Including the different demo files so you can follow along on your own implementation and see what I built
- Conclusion slide
- Introduction slide