SharePoint branding<br />The Pragmatist’s Approach<br />prag·ma·tist<br />   [prag-muh-tist] <br />–noun 1. a person who i...
About Me<br />Who: 	Stu King – User Experience Designer<br />Where: 	Magenic Studios –	Magenic Technologies, Inc.<br />Foc...
Learning Objectives<br />Understand the do’s and don’ts of SharePoint branding<br />Learn techniques that will help your p...
Rules of engagement<br />How to not go crazy<br />
The Dream<br />“We will write standards compliant markup that will shine in HTML and CSS validation tools.  Design innovat...
The Reality<br />“We will do our best to create standards compliant markup, when possible, understanding that SharePoint d...
The Pragmatist’s “Concepts to Embrace”<br />Don’t waste time - Standards compliant markup is impossible<br />Deviation fro...
The Conventional Rules of SharePoint Branding<br />Don’t delete controls from pages<br />Avoid inline styles when you can<...
The Pragmatist’s Rules of SharePoint Branding<br />Embrace the <table><br />Remove DOCTYPE declarations, trust me<br />Put...
Design Process and SharePoint<br />You can apply the rules of Design Process to SharePoint…mostly<br />
Traditional web design process<br />Discovery/Planning<br /><ul><li>Identify and document design values
Create personas and use cases</li></ul>Design<br /><ul><li>Wireframes
Mockups</li></ul>Development<br /><ul><li>HTML markup
CSS</li></ul>Feedback<br /><ul><li>User testing</li></li></ul><li>Typical SharePoint web design process<br />Discovery/Pla...
Collaboration activities
Publishing activities
Blogging and Social Media
Site Owners
Contributors
Readers</li></li></ul><li>Modifying the Design Process for SharePoint<br />Project Organization by Page Structure<br /><ul...
Page Layout – There will be multiple layouts.  Wireframes and content inventories are good inputs
Web Parts – Web parts can vary by page and content type.  Each one can require a different branding method and can be view...
Page Design – Create page design wireframes and mockups based on approved master page styles
Web Parts – Mockup web part designs based on master page design and place within approved page layouts.  Iterate through d...
Front-end Development Tools<br />What tools should I use?<br /><ul><li>SharePoint Designer for MOSS and 2010
Internet Explorer Developer Tool Bar
A good web editor, I like Expression Web
PhotoShop</li></ul>Other stuff that works great<br /><ul><li>Pixie – Color sample tool
Screen Ruler – Great for measuring mockups without the overhead of PhotoShop
MS Super Preview – browser test IE5, 6, 7, 8 and Fire Fox from one application
Pandora and Coffee!</li></li></ul><li>Front-end Development Techniques<br />Getting started<br /><ul><li>Start with a Base...
Start with a Starter Page for 2010</li></ul>Advantages to beginning pages<br /><ul><li>All extra code is stripped out
Only SharePoint Controls are left
Upcoming SlideShare
Loading in...5
×

The Pragmatist's Approach to SharePoint Branding

1,993

Published on

Very practical tips and advice for those planning a SharePoint branding project

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

  • Be the first to like this

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

No notes for slide
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Our diverse team is made up of experienced thought leaders.
  • Transcript of "The Pragmatist's Approach to SharePoint Branding"

    1. 1. SharePoint branding<br />The Pragmatist’s Approach<br />prag·ma·tist<br />   [prag-muh-tist] <br />–noun 1. a person who is oriented toward the success or failure of a particular line of action, thought, etc.; a practical person. <br />
    2. 2. About Me<br />Who: Stu King – User Experience Designer<br />Where: Magenic Studios – Magenic Technologies, Inc.<br />Focused on Design, User Experience Analysis and RIA development<br />What: SharePoint Technical Specialist<br />What the?: Beating SharePoint into submission since 2003<br />On the web: www.thedesigndrifter.com<br />On the twitter: @designdrifter<br />
    3. 3. Learning Objectives<br />Understand the do’s and don’ts of SharePoint branding<br />Learn techniques that will help your productivity and sanity<br />Discover how the design process can be adapted to better suit SharePoint branding projects<br />Identify tools you can use to make your job easier, or at least more interesting<br />
    4. 4. Rules of engagement<br />How to not go crazy<br />
    5. 5. The Dream<br />“We will write standards compliant markup that will shine in HTML and CSS validation tools. Design innovation is key. It’s not necessary or wise to design with SharePoint in mind if you want really cutting edge design.” <br />
    6. 6. The Reality<br />“We will do our best to create standards compliant markup, when possible, understanding that SharePoint doesn’t care about our desires. We understand that as interesting as this new design is, making it work in SharePoint could cause our staff to step out on a ledge and perhaps it’s better to make some compromises.”<br />
    7. 7. The Pragmatist’s “Concepts to Embrace”<br />Don’t waste time - Standards compliant markup is impossible<br />Deviation from established design process does not equal failure, where SharePoint is concerned it’s a necessity<br />Your approach to cross-browser compatibility should adapt to your situation – internal vs. external<br />
    8. 8. The Conventional Rules of SharePoint Branding<br />Don’t delete controls from pages<br />Avoid inline styles when you can<br />Don’t modify core styles<br />Understand how SharePoint renders a page<br />Core classes<br />Page level classes<br />Inline classes<br />
    9. 9. The Pragmatist’s Rules of SharePoint Branding<br />Embrace the <table><br />Remove DOCTYPE declarations, trust me<br />Put your design assets and style sheets in the Style Library<br />Use <div> for the larger framework of your site but try not to use too many of them<br />Use a Base or Starter master page whenever you can<br />IE Developer Toolbar is your friend<br />You will almost always have to override some core classes<br />Learn how to use conditional comments to load custom style sheets for versions of IE<br />You can’t always control the mess but you can control how it looks, format and comment!<br />
    10. 10. Design Process and SharePoint<br />You can apply the rules of Design Process to SharePoint…mostly<br />
    11. 11. Traditional web design process<br />Discovery/Planning<br /><ul><li>Identify and document design values
    12. 12. Create personas and use cases</li></ul>Design<br /><ul><li>Wireframes
    13. 13. Mockups</li></ul>Development<br /><ul><li>HTML markup
    14. 14. CSS</li></ul>Feedback<br /><ul><li>User testing</li></li></ul><li>Typical SharePoint web design process<br />Discovery/Planning<br /><ul><li>Have some meetings</li></ul>Design <br /><ul><li>Copy the logo off our web site</li></ul>Development<br /><ul><li>Things happen here</li></ul>Feedback <br /><ul><li>We don’t like it</li></li></ul><li>Modifying the Design Process for SharePoint<br />Discovery/Planning<br /><ul><li>Define what you need to build and who you serve in SharePoint terms
    15. 15. Collaboration activities
    16. 16. Publishing activities
    17. 17. Blogging and Social Media
    18. 18. Site Owners
    19. 19. Contributors
    20. 20. Readers</li></li></ul><li>Modifying the Design Process for SharePoint<br />Project Organization by Page Structure<br /><ul><li>Master Page – Start at the top with the most important segment
    21. 21. Page Layout – There will be multiple layouts. Wireframes and content inventories are good inputs
    22. 22. Web Parts – Web parts can vary by page and content type. Each one can require a different branding method and can be viewed as micro-projects</li></li></ul><li>Modifying the Design Process for SharePoint<br />Getting Approval based on Page Structure – A Modular Approach<br /><ul><li>Master Page – Try presenting a master page design with no content first. Use wireframe style blocks to imply page layout only
    23. 23. Page Design – Create page design wireframes and mockups based on approved master page styles
    24. 24. Web Parts – Mockup web part designs based on master page design and place within approved page layouts. Iterate through designs on a part by part basis</li></li></ul><li>Front-end Development<br />The end result is beautiful but…<br />
    25. 25. Front-end Development Tools<br />What tools should I use?<br /><ul><li>SharePoint Designer for MOSS and 2010
    26. 26. Internet Explorer Developer Tool Bar
    27. 27. A good web editor, I like Expression Web
    28. 28. PhotoShop</li></ul>Other stuff that works great<br /><ul><li>Pixie – Color sample tool
    29. 29. Screen Ruler – Great for measuring mockups without the overhead of PhotoShop
    30. 30. MS Super Preview – browser test IE5, 6, 7, 8 and Fire Fox from one application
    31. 31. Pandora and Coffee!</li></li></ul><li>Front-end Development Techniques<br />Getting started<br /><ul><li>Start with a Base Master Page for MOSS
    32. 32. Start with a Starter Page for 2010</li></ul>Advantages to beginning pages<br /><ul><li>All extra code is stripped out
    33. 33. Only SharePoint Controls are left
    34. 34. Helpful information in the comments</li></ul>Where do you get those? From MVP’s such as…<br /><ul><li>MOSS – www.heathersolomon.com
    35. 35. 2010 - blog.drisgill.com</li></li></ul><li>Front-end Development Techniques<br />Establish your workspace (publishing template)<br /><ul><li>Setup your master page
    36. 36. Make room for CSS in the <head> of your Master Page</li></ul><style></style><br /><ul><li>Establish folders for images and CSS in the Style Library
    37. 37. Hide the controls you don’t need</li></li></ul><li>CSS<br />
    38. 38. Front-end Development Techniques (CSS tips)<br />Most of your custom branding work will be done in CSS, so make sure you get familiar!<br />Organize your code, you can do it your way but make sure you always do it.<br />Most of your SharePoint class overrides will be associated with modifications to how web parts display.<br />Keep notes on how you did things just in case you need to do it again.<br />SharePoint class names are case sensitive<br />
    39. 39. CSS SharePoint Class Override<br />DEMO<br />
    40. 40. Front-end Development Techniques (CSS)<br />Segment page areas by Master Page, Layout and Web Parts<br />Build your basic framework (wireframe to CSS)<br /><ul><li>Create “sections”
    41. 41. Header
    42. 42. Navigation
    43. 43. Main
    44. 44. Sidebar
    45. 45. Footer</li></li></ul><li>Front-end Development Techniques (CSS)<br />Use page section names to establish CSS Structure<br /><ul><li>Sections will allow you to reduce the number of classes
    46. 46. Sections make it easier for find code later</li></li></ul><li>Front-end Development Techniques (CSS)<br />Group overridden classes by area<br />List classes in the order they would render on the page<br />Place CSS for custom web parts in their own style sheets with obvious names<br />Comment your stuff…You’ll be glad you did!<br />
    47. 47. Front-end Development Techniques (CSS)<br />Create custom classes to match your Style Guidelines<br /><ul><li>Override styles for the content editor and make predefined text styles available to users</li></li></ul><li>HTML<br />
    48. 48. Front-end Development Techniques (HTML)<br />Keep it simple<br />You will have a difficult time avoiding tables (even in 2010)<br />HTML is designed for structure and CSS for presentation<br />Stay away from retired HTML such as:<br /><font><br /><b><br /><i><br /><center><br /><ul><li>Avoid retired attributes such as:</li></ul>border=<br />cellpadding=<br />width=<br />height=<br />
    49. 49. LAYOUT PAGES<br />
    50. 50. Front-end Development Techniques (LAYOUT PAGES)<br />Page layouts can be derived from your wireframes. Wireframes are a great way to layout web part zones<br />How many variations you need can be driven by both design and content requirements<br /><ul><li>Static width and centered designs may benefit from an optional fluid layout page for web part pages
    51. 51. Fluid layout by page can be achieved by overriding the classes that set width in the style sheet at the page level </li></li></ul><li>Is SharePoint 2010 any easier?<br />Beware the RIBBON<br />
    52. 52. What about SharePoint 2010?<br />Much more standards compliant<br />Easier to code in, fewer hang ups<br /><ul><li>Less time and less code to do the same things</li></ul>Ribbon concept removes some complexity from branding projects<br />The large amount of ribbon code in the master page requires extra care when doing front-end development<br />
    53. 53. Questions and…<br />Thank you for your time and attention<br />

    ×