Your SlideShare is downloading. ×
0
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Pragmatist's Approach to SharePoint Branding

1,919

Published 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

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,919
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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

    ×