Home >Documents >Branding sharepoint project

Branding sharepoint project

Date post:12-Jan-2015
View:3,589 times
Download:3 times
Share this document with a friend
2nd SPS Vietnam from Tuan Nguyen
  • 1. Sharepoint Branding
    "just not look like SharePoint!"
  • 2. Out line
    Definition of Branding
    Why Brand SharePoint?
    How Branding Works in SharePoint
    Design Considerations
    Creating Wireframes
    Tools of the Trade
    DOCTYPE! & SharePoint
    CSS in SharePoint
    Case Study
  • 3. Definition of Branding
    Branding is the act of creating a specific image or identity that people recognize in relation to a company or product.
  • 4. Definition of Branding
    When referring to websites, branding usually involves the COLORS, FONTS, LOGOS, and SUPPORTING GRAPHICS that make up the general look and feel of the site.
  • 5. Why Brand SharePoint?
    The most common reason is to make it unique.
    Making it NOT look like SharePoint is a basic request.
    For intranet site: A company might want to brand its intranet site to help convey to employees a sense of collaboration, teamwork, and even family.
    For internet site: A company want to communicate to this external audience information about your company, such as its services or products.
  • 6. Branding Is Just the Tip of the Iceberg
    Sharepoint Branding
    (LOOK & FEEL)
    Page Layout
    Site Templates
    Search Scope
    Site Definitions
    Custom Web Parts
  • 7.
  • 8. How Branding Works in SharePoint
  • 9. How Branding Works in SharePoint
    In SharePoint 2007, themes were stored on the server in the SharePoint 12 folder, and consisted of XML, CSS, and images that were applied over the top of the default master page and CSS.
    In SharePoint 2010, themes are created with the Microsoft Office client software (2007 and above), using either Word or PowerPoint to create .THMXfiles that describe the 12 theme colors and two fonts available in the new SharePoint themes.
  • 10. Master page
    In SharePoint 2010:
    V4.MASTER: default master page that is used for many of the site templates
    NIGHTANDDAY.MASTER: This master page is accessible only in a SharePoint Server 2010
    MINIMAL.MASTER: This master page is used only on pages that have their own navigation or need extra space (such as dedicated application pages or the search center).
    How Branding Works in SharePoint
  • 11. How Branding Works in SharePoint
    Using a starter Master Page:
    Microsofts Starter master page: http://code.msdn.microsoft.com/odcSP14StarterMaster. This Starter master page was built for SharePoint Foundation 2010, SharePoint Server 2010.
    My own Starter master pages: (http://startermasterpages.codeplex.com)
    Heather's Base Master Page: http://www.heathersolomon.com/downloads/heathersbasemasterpage.zip
  • 12. Design Considerations
    Target Screen Resolution
    Table Layouts vs. Div Layouts
    Browser Versions
  • 13. Forget IE6!
  • 14. Creating Wireframes
    Wireframes are skeletal page designs; they capture the layout and flow of a website without focusing on colors and graphics.
    SharePoint wireframing and prototyping: http://intranetfactory.com/site/sampleReport.doc
    Demo: http://intranetfactory.com/Viewer/site1459/default.aspx?NodeId=33129
    Resources for Visio : http://www.guuui.com/issues/01_06.php
  • 15. Creating Wireframes
  • 16. Creating Wireframes
  • 17. Tools of the Trade
  • 18. DOCTYPE! & SharePoint
    Quirks mode ??
    The following is a list of the most popular DOCTYPES in use today:
    HTML 4.01 Strict : Allows all HTML elements but does not allow deprecated elements such as the tag.
    HTML 4.01 Transitional: Allows all HTML elements including deprecated elements.
    XHTML 1.0 Strict: Similar to HTML 4.01 Strict, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML
    XHTML 1.0 Transitional: Similar to HTML 4.01 Transitional, but all tags must be well-formed XML. Deprecated elements are allowed but must also be well-formed XML
    Does/Will SharePoint 2010 support HTML5?
  • 19. DOCTYPE! & SharePoint
    W3C HTML validator: http://validator.w3.org.
    With SharePoint 2007 & 2010, the resulting page will not properly validate as XHTML 1.0 compliant. This is because several legacy ASP.NET controls used in SharePoint 2010 do not produce valid XHTML code.
    Compatibility Mode in IE8
    this feature to help with the display of web pages that were coded to older versions of Internet Explorer.

  • 20. CSS in SharePoint
    SharePoint 2007: you are probably familiar with core.css and its nearly 5,000 lines of CSS rules.
    SharePoint 2010: The default corev4.css: under 8,000 lines of code. And search.css: under 3,000 lines of code and wiki.css barely 50 lines of code
    Split into multiple files, only download whats necessary for the page

    runat=server/> : SP2010

    CSS Reference Chart for SharePoint 2007 : http://www.heathersolomon.com/content/sp07cssreference.htm
  • 21. Case Study
  • 22. THANK YOU
    Contact me:
    [email protected]
    [email protected]
of 22/22
SHAREPOINT BRANDING "just not look like SharePoint!"
Embed Size (px)