The Pragmatist's Approach to SharePoint Branding

  • 1,677 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,677
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

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